/* ═══════════════════════════════════════════════════════════════════════════ QNSQY - SITE v2 · Editorial-Brutalist Language Extends the Quantum Lattice hero aesthetic to every homepage section. Loads AFTER styles.css so it overrides by source-order cascade. Scoped to the homepage via . No legacy pages affected. ═══════════════════════════════════════════════════════════════════════════ */ body[data-site="v2"] { /* Extra design tokens reused below */ --qs-rule: 1px solid var(--color-border); --qs-rule-strong: 1px solid var(--color-border-light); --qs-dot: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 1px); --qs-dot-light: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.04) 1px, transparent 1px); } body[data-site="v2"][data-theme="light"] { --qs-dot: var(--qs-dot-light); } /* ─── Trust bar · thinner ticker ────────────────────────────────────────── */ body[data-site="v2"] .trust-bar { padding: 14px var(--container-padding); gap: var(--space-md) var(--space-2xl); background: var(--color-bg); border-top: var(--qs-rule); border-bottom: var(--qs-rule); font-family: var(--font-mono); } body[data-site="v2"] .trust-bar__item { font-size: 0.65rem; letter-spacing: 0.18em; color: var(--color-text-muted); } body[data-site="v2"] .trust-bar__dot { width: 5px; height: 5px; background: var(--color-accent); box-shadow: 0 0 0 3px rgba(255,107,0,0.08); } /* ─── Sections - editorial openings ─────────────────────────────────────── */ body[data-site="v2"] .section { padding-top: clamp(5rem, 12vh, 9rem); padding-bottom: clamp(5rem, 12vh, 9rem); } body[data-site="v2"] .section--alt { position: relative; background: var(--color-bg); } body[data-site="v2"] .section--alt::before { content: ""; position: absolute; inset: 0; background-image: var(--qs-dot); background-size: 24px 24px; mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); pointer-events: none; opacity: 0.7; } body[data-site="v2"] .section--alt > * { position: relative; z-index: 1; } /* Section header: big two-part opener (index chip + oversized title) */ body[data-site="v2"] .section__header { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: clamp(var(--space-md), 2vw, var(--space-xl)); margin-bottom: clamp(var(--space-2xl), 6vh, var(--space-4xl)); padding-bottom: var(--space-xl); border-bottom: var(--qs-rule); } body[data-site="v2"] .section__index { /* Bigger, stronger section number */ display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; padding: 6px 12px; margin: 0; border-radius: 999px; align-self: center; white-space: nowrap; } body[data-site="v2"] .section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 5.5vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; text-transform: none; margin: 0; color: var(--color-text); } @media (max-width: 700px) { body[data-site="v2"] .section__header { grid-template-columns: 1fr; gap: var(--space-md); } body[data-site="v2"] .section__index { justify-self: start; } } /* ─── Threat section · bigger statements ───────────────────────────────── */ body[data-site="v2"] .threat__statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2.5vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--color-text); } body[data-site="v2"] .threat__statement em { font-style: italic; color: var(--color-accent); font-weight: 600; } body[data-site="v2"] .threat__statement--muted { font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--color-text-secondary); line-height: 1.7; } body[data-site="v2"] .highlight { color: var(--color-accent); border-bottom: 1px dashed var(--color-accent); padding-bottom: 1px; font-weight: 500; } /* Timeline in threat section - cleaner */ body[data-site="v2"] .timeline { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } body[data-site="v2"] .timeline__year { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-muted); } body[data-site="v2"] .timeline__point--active .timeline__year { color: var(--color-accent); } body[data-site="v2"] .timeline__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; } /* ─── Features grid · minimal type-focused cards ───────────────────────── */ body[data-site="v2"] .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: var(--qs-rule); border-left: var(--qs-rule); } body[data-site="v2"] .feature { display: flex; flex-direction: column; gap: var(--space-md); grid-template-columns: none; padding: clamp(var(--space-lg), 3vw, var(--space-2xl)); border: 0; border-right: var(--qs-rule); border-bottom: var(--qs-rule); background: transparent; position: relative; transition: background var(--duration-fast), color var(--duration-fast); } body[data-site="v2"] .feature::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--color-accent); transition: width 400ms var(--ease-out-expo); } body[data-site="v2"] .feature:hover::before { width: 100%; } body[data-site="v2"] .feature:hover { background: rgba(255,107,0,0.025); } body[data-site="v2"] .feature__index { width: auto; height: auto; display: inline-flex; align-items: baseline; justify-content: flex-start; border: 0; background: transparent; padding: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--color-accent); } body[data-site="v2"] .feature__index::before { content: "- "; color: var(--color-border-light); margin-right: 4px; } body[data-site="v2"] .feature__title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; text-transform: none; margin: 0; color: var(--color-text); } body[data-site="v2"] .feature__desc { font-size: 0.92rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 52ch; } body[data-site="v2"] .feature:hover .feature__index { color: var(--color-accent); border: 0; } /* ─── Process · filmstrip with connectors ──────────────────────────────── */ body[data-site="v2"] .process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: var(--qs-rule); border-left: var(--qs-rule); margin-bottom: var(--space-3xl); } body[data-site="v2"] .process__step { padding: clamp(var(--space-lg), 2.5vw, var(--space-2xl)); border: 0; border-right: var(--qs-rule); border-bottom: var(--qs-rule); background: transparent; position: relative; transition: background 220ms var(--ease-out-expo); } body[data-site="v2"] .process__step:hover { background: rgba(255,255,255,0.02); } body[data-site="v2"] .process__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); letter-spacing: -0.02em; opacity: 1; color: var(--color-text-muted); margin-bottom: var(--space-sm); line-height: 1; } body[data-site="v2"] .process__step:hover .process__num { color: var(--color-accent); } body[data-site="v2"] .process__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-sm); } body[data-site="v2"] .process__desc { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.65; } @media (max-width: 900px) { body[data-site="v2"] .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 500px) { body[data-site="v2"] .process { grid-template-columns: 1fr; } } /* ─── Proof grid · numbered items with oversized metric ────────────────── */ body[data-site="v2"] .proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border-top: var(--qs-rule); border-left: var(--qs-rule); } body[data-site="v2"] .proof-item { display: flex; flex-direction: column; gap: var(--space-sm); padding: clamp(var(--space-lg), 2.5vw, var(--space-2xl)); border: 0; border-right: var(--qs-rule); border-bottom: var(--qs-rule); background: transparent; position: relative; } body[data-site="v2"] .proof-item__num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--color-accent); text-transform: uppercase; margin-bottom: var(--space-xs); } body[data-site="v2"] .proof-item__num::before { content: "-"; color: var(--color-border-light); margin-right: 6px; } body[data-site="v2"] .proof-item__title { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: -0.01em; text-transform: none; margin: 0 0 var(--space-xs); color: var(--color-text); } body[data-site="v2"] .proof-item__claim { font-size: 0.92rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0; } body[data-site="v2"] .proof-item__metric { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--color-accent); margin-right: 0.3em; line-height: 1; letter-spacing: -0.02em; background: linear-gradient(100deg, var(--color-accent), #ff9a3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-site="v2"] .proof-item__source { margin-top: auto; padding-top: var(--space-md); font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.6; } body[data-site="v2"] .proof-item__source code { background: transparent; color: var(--color-text); padding: 0; font-size: 0.72rem; } body[data-site="v2"] .proof-intro { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--color-text-secondary); max-width: 62ch; margin: 0 0 var(--space-2xl); font-weight: 400; } /* ─── Specs grid · algorithm periodic table ───────────────────────────── */ body[data-site="v2"] .specs-intro { font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--color-text-secondary); max-width: 62ch; margin: 0 0 var(--space-2xl); } body[data-site="v2"] .specs-intro p { margin: 0; } body[data-site="v2"] .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: var(--qs-rule); border-left: var(--qs-rule); } body[data-site="v2"] .specs-category { padding: var(--space-lg); border: 0; border-right: var(--qs-rule); border-bottom: var(--qs-rule); background: transparent; position: relative; transition: background 220ms var(--ease-out-expo); } body[data-site="v2"] .specs-category:hover { background: rgba(255,107,0,0.03); } body[data-site="v2"] .specs-category__title { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-xs); } body[data-site="v2"] .specs-category__value { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; margin-bottom: 6px; } body[data-site="v2"] .specs-category__note { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-text-muted); letter-spacing: 0.04em; line-height: 1.5; } body[data-site="v2"] .trust-signals { margin: var(--space-3xl) 0 0; padding: var(--space-lg) 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) var(--space-2xl); border-top: var(--qs-rule); border-bottom: var(--qs-rule); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } body[data-site="v2"] .trust-signals span::before { content: "· "; color: var(--color-accent); margin-right: 6px; } /* ─── Pricing · spec-sheet style ───────────────────────────────────────── */ body[data-site="v2"] .pricing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: var(--qs-rule); border-left: var(--qs-rule); } @media (max-width: 1280px) { body[data-site="v2"] .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { body[data-site="v2"] .pricing { grid-template-columns: 1fr; } } body[data-site="v2"] .pricing__card { display: flex; flex-direction: column; gap: var(--space-md); padding: clamp(var(--space-md), 2vw, var(--space-xl)); border: 0; border-right: var(--qs-rule); border-bottom: var(--qs-rule); background: transparent; position: relative; transition: background 220ms var(--ease-out-expo); overflow: hidden; min-width: 0; } body[data-site="v2"] .pricing__card:hover { background: rgba(255,255,255,0.02); } body[data-site="v2"] .pricing__card--primary { background: rgba(255,107,0,0.04); box-shadow: inset 0 0 0 1px rgba(255,107,0,0.25); z-index: 1; } body[data-site="v2"] .pricing__card--primary:hover { background: rgba(255,107,0,0.06); } body[data-site="v2"] .pricing__badge { position: static; align-self: flex-start; padding: 3px 10px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; border-radius: 999px; transform: none; text-transform: uppercase; } body[data-site="v2"] .pricing__tier { font-family: var(--font-display); font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); text-transform: none; line-height: 1.1; margin-bottom: 2px; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } body[data-site="v2"] .pricing__binary { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--color-accent); opacity: 0.8; overflow-wrap: break-word; } body[data-site="v2"] .pricing__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.9vw, 2rem); letter-spacing: -0.03em; color: var(--color-text); line-height: 1.05; margin-top: var(--space-sm); overflow-wrap: normal; word-break: keep-all; white-space: nowrap; } /* Text-only price (Enterprise "Contact sales") — smaller so it stays on one line without shrinking the $ amounts in the other tiers. */ body[data-site="v2"] .pricing__price--contact { font-size: clamp(1.15rem, 1.4vw, 1.4rem); } body[data-site="v2"] .pricing__price-prefix { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 400; margin-bottom: 2px; } @media (max-width: 1280px) { body[data-site="v2"] .pricing__price { font-size: clamp(1.8rem, 2.8vw, 2.4rem); } body[data-site="v2"] .pricing__price--contact { font-size: clamp(1.15rem, 1.9vw, 1.5rem); } } body[data-site="v2"] .pricing__term { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; margin-bottom: var(--space-sm); min-height: 3rem; } body[data-site="v2"] .pricing__features { display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--space-lg); padding: 0; list-style: none; } body[data-site="v2"] .pricing__features li { position: relative; padding-left: 18px; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-secondary); } body[data-site="v2"] .pricing__features li::before { content: "+"; position: absolute; left: 0; color: var(--color-accent); font-weight: 600; } body[data-site="v2"] .pricing__features li:first-child::before { content: "→"; } body[data-site="v2"] .pricing .btn { order: -1; margin-top: 0; margin-bottom: var(--space-lg); font-family: var(--font-mono); font-size: 0.7rem; padding: 0.85rem 1.2rem; border-radius: 12px; } /* ─── Quick start (docs__example) · editorial terminals ──────────────── */ body[data-site="v2"] .docs__example { margin-bottom: clamp(var(--space-xl), 4vh, var(--space-3xl)); } body[data-site="v2"] .docs__example-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-md); } body[data-site="v2"] .docs__example-title::before { content: ">_ "; color: var(--color-border-light); } body[data-site="v2"] .terminal--docs { border-radius: 6px; background: rgba(10,10,10,0.8); border: 1px solid var(--color-border-light); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); } [data-theme="light"] body[data-site="v2"] .terminal--docs { background: rgba(255,255,255,0.9); border-color: var(--color-border); } /* ─── Compare table · cleaner editorial table ─────────────────────────── */ body[data-site="v2"] .compare__table { border-collapse: collapse; width: 100%; font-family: var(--font-body); font-size: 0.92rem; } body[data-site="v2"] .compare__table thead th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); padding: var(--space-md); border-bottom: var(--qs-rule-strong); text-align: left; font-weight: 400; } body[data-site="v2"] .compare__table td { padding: var(--space-md); border-bottom: var(--qs-rule); color: var(--color-text-secondary); } body[data-site="v2"] .compare__table tbody tr { transition: background 220ms; } body[data-site="v2"] .compare__table tbody tr:hover { background: rgba(255,255,255,0.02); } body[data-site="v2"] .compare__highlight, body[data-site="v2"] .compare__highlight-col { background: rgba(255,107,0,0.05); color: var(--color-text); } body[data-site="v2"] .compare__yes { color: var(--color-accent); font-weight: 600; } body[data-site="v2"] .compare__no { color: var(--color-text-muted); } /* ─── FAQ · minimal accordion with rule dividers ─────────────────────── */ body[data-site="v2"] .faq { border-top: var(--qs-rule); } body[data-site="v2"] .faq__item { border: 0; border-bottom: var(--qs-rule); background: transparent; } body[data-site="v2"] .faq__question { padding: var(--space-lg) 0; background: transparent; border: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--color-text); text-transform: none; letter-spacing: -0.01em; width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); cursor: pointer; } body[data-site="v2"] .faq__question:hover { color: var(--color-accent); } body[data-site="v2"] .faq__icon { width: 22px; height: 22px; position: relative; flex-shrink: 0; } body[data-site="v2"] .faq__icon::before, body[data-site="v2"] .faq__icon::after { content: ""; position: absolute; background: var(--color-accent); transition: transform 260ms var(--ease-out-expo); } body[data-site="v2"] .faq__icon::before { top: 50%; left: 0; right: 0; height: 1.5px; margin-top: -0.75px; } body[data-site="v2"] .faq__icon::after { left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px; } body[data-site="v2"] .faq__question[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); } body[data-site="v2"] .faq__question.active .faq__icon::after { transform: scaleY(0); } body[data-site="v2"] .faq__answer { padding: 0; } body[data-site="v2"] .faq__answer-content { padding-bottom: var(--space-lg); font-size: 0.95rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 70ch; } /* ─── Final CTA · editorial closer ────────────────────────────────────── */ body[data-site="v2"] .cta-section { position: relative; padding: clamp(6rem, 16vh, 12rem) var(--container-padding); max-width: none; text-align: left; overflow: hidden; background: var(--color-bg); border-top: var(--qs-rule); isolation: isolate; } body[data-site="v2"] .cta-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 20% 100%, rgba(255,107,0,0.12), transparent 60%), radial-gradient(60% 80% at 100% 0%, rgba(255,107,0,0.08), transparent 60%); z-index: -1; } body[data-site="v2"] .cta-section::after { content: ""; position: absolute; inset: 0; background-image: var(--qs-dot); background-size: 32px 32px; mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); z-index: -1; opacity: 0.8; } body[data-site="v2"] .cta-section__title { font-family: var(--font-display); font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; color: var(--color-text); max-width: 16ch; margin: 0 auto var(--space-lg); text-transform: none; text-align: center; } body[data-site="v2"] .cta-section__title em { font-style: italic; background: linear-gradient(100deg, var(--color-accent), #ff9a3c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } body[data-site="v2"] .cta-section__desc { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--color-text-secondary); max-width: 60ch; margin: 0 auto var(--space-2xl); text-align: center; line-height: 1.6; } body[data-site="v2"] .cta-section__buttons { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; } body[data-site="v2"] .cta-section .btn { padding: var(--space-md) var(--space-xl); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; border-radius: 2px; } /* ─── Security box centered · elevated panel ─────────────────────────── */ body[data-site="v2"] .security-box-centered { max-width: 820px; margin-top: var(--space-2xl); padding: var(--space-xl); background: rgba(255,255,255,0.02); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--color-border-light); border-radius: 6px; text-align: left; position: relative; } [data-theme="light"] body[data-site="v2"] .security-box-centered { background: rgba(0,0,0,0.02); } body[data-site="v2"] .security-box-centered::before { content: "SECURITY.SNAPSHOT"; position: absolute; top: -10px; left: 16px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; background: var(--color-bg); padding: 2px 10px; color: var(--color-accent); } body[data-site="v2"] .security-box-centered__title { display: none; } body[data-site="v2"] .security-box-centered__line { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-md); align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--color-border); text-align: left; font-size: 0.88rem; line-height: 1.55; } body[data-site="v2"] .security-box-centered__line:last-child { border-bottom: 0; } body[data-site="v2"] .security-box-centered__line strong { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--color-accent); text-transform: uppercase; } @media (max-width: 560px) { body[data-site="v2"] .security-box-centered__line { grid-template-columns: 1fr; gap: 4px; } } /* ─── Misc polish ──────────────────────────────────────────────────────── */ /* Make prose-link style match the new aesthetic */ body[data-site="v2"] .prose-link { color: var(--color-accent); border-bottom: 1px solid transparent; transition: border-color 220ms; } body[data-site="v2"] .prose-link:hover { border-bottom-color: var(--color-accent); } /* Section terminal & code blocks global polish */ body[data-site="v2"] pre { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.55; overflow-x: auto; padding: var(--space-lg); margin: 0; } /* Footer · editorial grid */ body[data-site="v2"] .footer { border-top: var(--qs-rule); padding-top: clamp(3rem, 8vh, 6rem); background: var(--color-bg); } body[data-site="v2"] .footer__brand { margin-bottom: var(--space-2xl); } body[data-site="v2"] .footer__logo { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; } body[data-site="v2"] .footer__tagline { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: var(--color-accent); margin-left: var(--space-md); text-transform: uppercase; } body[data-site="v2"] .footer__col-title { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; color: var(--color-accent); text-transform: uppercase; margin-bottom: var(--space-md); display: block; } body[data-site="v2"] .footer__col a { display: block; padding: 4px 0; color: var(--color-text-secondary); font-size: 0.88rem; transition: color 180ms; } body[data-site="v2"] .footer__col a:hover { color: var(--color-accent); } body[data-site="v2"] .footer__badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; padding: var(--space-xl) 0; border-top: var(--qs-rule); border-bottom: var(--qs-rule); margin-top: var(--space-2xl); } body[data-site="v2"] .footer__badges span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; padding: 4px 10px; border: 1px solid var(--color-border-light); border-radius: 999px; color: var(--color-text-muted); text-transform: uppercase; } body[data-site="v2"] .footer__bottom { padding: var(--space-xl) 0; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-muted); letter-spacing: 0.08em; } /* ═══════════════════════════════════════════════════════════════════════════ Responsive safety net Hardens every page against horizontal overflow across every realistic device width (320 → 1920+). ═══════════════════════════════════════════════════════════════════════════ */ /* Hard stop horizontal scroll anywhere */ html, body[data-site="v2"] { max-width: 100%; overflow-x: clip; } /* Images, SVG, videos scale down cleanly */ body[data-site="v2"] img, body[data-site="v2"] svg, body[data-site="v2"] video, body[data-site="v2"] canvas, body[data-site="v2"] iframe { max-width: 100%; height: auto; } /* Specific page SVGs that had fixed pixel sizes */ body[data-site="v2"] .quantum-svg, body[data-site="v2"] .defense-card__visual svg, body[data-site="v2"] .quantum-card__visual svg { max-width: 100%; height: auto; display: block; } /* Long code / command strings must wrap or scroll, never overflow */ body[data-site="v2"] code, body[data-site="v2"] pre, body[data-site="v2"] kbd, body[data-site="v2"] samp { overflow-wrap: anywhere; word-break: break-word; } body[data-site="v2"] pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ─── Tables ─────────────────────────────────────────────────────────────── Any wide table (matrix__table, tier-table, compare__table) becomes a horizontally-scrollable region on small viewports instead of pushing the whole page sideways. We wrap via display:block on the table itself. */ @media (max-width: 720px) { body[data-site="v2"] .matrix__table, body[data-site="v2"] .tier-table, body[data-site="v2"] .compare__table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 0.78rem; } body[data-site="v2"] .matrix__table th, body[data-site="v2"] .matrix__table td, body[data-site="v2"] .tier-table th, body[data-site="v2"] .tier-table td, body[data-site="v2"] .compare__table th, body[data-site="v2"] .compare__table td { white-space: normal; padding: 10px 12px; } } /* ─── Footer ───────────────────────────────────────────────────────────── Footer has a 1fr 2fr 1fr grid that breaks at mid widths. Collapse to 1-column below 900px; cap inner children width. */ body[data-site="v2"] .footer__inner { max-width: 100%; } @media (max-width: 900px) { body[data-site="v2"] .footer__inner { grid-template-columns: 1fr !important; gap: var(--space-2xl); text-align: left; } body[data-site="v2"] .footer__links { flex-wrap: wrap; gap: var(--space-xl); justify-content: flex-start; } body[data-site="v2"] .footer__col { min-width: 140px; flex: 0 1 auto; } body[data-site="v2"] .footer__badges { justify-content: flex-start; } } @media (max-width: 540px) { body[data-site="v2"] .footer__links { gap: var(--space-lg); } body[data-site="v2"] .footer__col { flex: 1 1 calc(50% - var(--space-lg)); min-width: 0; } body[data-site="v2"] .footer__brand { margin-bottom: var(--space-xl); } body[data-site="v2"] .footer__logo { font-size: 1.5rem; } body[data-site="v2"] .footer__tagline { display: block; margin-left: 0; margin-top: 4px; } } /* Ensure footer text and long URLs never punch out the column */ body[data-site="v2"] .footer__col a, body[data-site="v2"] .footer__col span { overflow-wrap: anywhere; word-break: break-word; } /* ─── Hero ultra-small screens (<420px) ────────────────────────────────── */ /* Mobile hero: title font-size is handled by the single clamp in hero-qnsqy.css (clamp(1rem, 5.9vw, 5.5rem)) - no size override here. */ @media (max-width: 420px) { body[data-site="v2"] .qhero { padding-top: 80px; } body[data-site="v2"] .qhero__kicker { font-size: 0.58rem; letter-spacing: 0.14em; } body[data-site="v2"] .qhero__chrome { font-size: 0.54rem; letter-spacing: 0.1em; } body[data-site="v2"] .qhero__chrome-right .qhero__time { font-size: 0.54rem; } body[data-site="v2"] .qhero__fact dd { font-size: 1rem; } body[data-site="v2"] .qhero__btn { padding: 0.8rem 1rem; font-size: 0.65rem; } } @media (max-width: 360px) { body[data-site="v2"] .qhero__lede { font-size: 0.88rem; } body[data-site="v2"] .qhero__chrome-right .qhero__version, body[data-site="v2"] .qhero__chrome-right .qhero__time { display: none; } body[data-site="v2"] .qhero__chrome-right::after { content: "v7.2.37"; font-family: var(--font-mono); color: var(--color-text); } } /* ─── Kicker row: allow wrap instead of overflow ───────────────────────── */ body[data-site="v2"] .qhero__kicker { flex-wrap: wrap; row-gap: 4px; } /* ─── FAQ icon spacing on ultra small ──────────────────────────────────── */ @media (max-width: 400px) { body[data-site="v2"] .faq__icon, .faq__icon { margin-left: var(--space-md); } body[data-site="v2"] .faq__question { font-size: 0.98rem; gap: var(--space-sm); } } /* ─── Download page cards - ensure no overflow on mobile ───────────────── */ body[data-site="v2"] .download-type { min-width: 0; max-width: 100%; } body[data-site="v2"] .download-type__title, body[data-site="v2"] .download-type__desc { overflow-wrap: anywhere; word-break: break-word; } body[data-site="v2"] .download-type__files, body[data-site="v2"] .download-type .copy-btn { max-width: 100%; overflow: hidden; } body[data-site="v2"] .copy-btn code { overflow-wrap: anywhere; word-break: break-all; font-size: 0.75rem !important; text-align: left; } @media (max-width: 640px) { body[data-site="v2"] .download-type { padding: var(--space-md); } body[data-site="v2"] .copy-btn { padding: var(--space-sm) !important; font-size: 0.7rem; } body[data-site="v2"] .copy-btn code { font-size: 0.7rem !important; } } /* ─── Services / Proof-items: prevent 5px edge overflow at 320 ─────────── */ @media (max-width: 360px) { body[data-site="v2"] .proof-item, body[data-site="v2"] .feature, body[data-site="v2"] .process__step, body[data-site="v2"] .specs-category, body[data-site="v2"] .pricing__card { min-width: 0; padding: var(--space-md); } } /* ─── Section headers on small widths: ensure clean wrap ───────────────── */ @media (max-width: 540px) { body[data-site="v2"] .section__title { font-size: clamp(1.4rem, 6.8vw, 2rem); overflow-wrap: normal; hyphens: none; word-break: normal; } body[data-site="v2"] .section__header { padding-bottom: var(--space-md); margin-bottom: var(--space-2xl); } } /* Below the section-title, long single-word h2s (DOCUMENTATION, FEATURES, SECURITY, PRICING, FAQ, ABOUT) need smaller type to fit one line. */ @media (max-width: 420px) { body[data-site="v2"] .section__title { font-size: clamp(1.2rem, 6.4vw, 1.7rem); letter-spacing: -0.02em; } } /* Page-header titles (.page-header__title on about/pricing/features/etc) - single-word h1s need the same fit treatment. "DOCUMENTATION" at default 8vw would be 33px × 0.85 × 13 chars = 365px - overflows 366-48 container. */ body[data-site="v2"] .page-header__title { overflow-wrap: normal; hyphens: none; word-break: normal; } @media (max-width: 560px) { body[data-site="v2"] .page-header__title { font-size: clamp(1.6rem, 7.2vw, 2.4rem) !important; } } @media (max-width: 420px) { body[data-site="v2"] .page-header__title { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; letter-spacing: -0.02em; } } @media (max-width: 360px) { body[data-site="v2"] .page-header__title { font-size: clamp(1.05rem, 5.4vw, 1.4rem) !important; } } /* ─── Nav safety: mobile menu button hit area, prevent horizontal push ─── */ body[data-site="v2"] .nav { max-width: 100%; flex-wrap: wrap; gap: 8px; } /* ─── Pricing preview: smooth transition 1400→1280→620 ─────────────────── */ @media (max-width: 1400px) and (min-width: 1281px) { body[data-site="v2"] .pricing { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ─── Universal: all grids collapse gracefully ─────────────────────────── */ body[data-site="v2"] .features-grid, body[data-site="v2"] .specs-grid, body[data-site="v2"] .proof-grid, body[data-site="v2"] .process, body[data-site="v2"] .pricing { max-width: 100%; } /* ─── Long headings / any text: never punch through parent ─────────────── */ body[data-site="v2"] h1, body[data-site="v2"] h2, body[data-site="v2"] h3, body[data-site="v2"] h4 { overflow-wrap: break-word; hyphens: manual; } body[data-site="v2"] p, body[data-site="v2"] li, body[data-site="v2"] dd, body[data-site="v2"] dt, body[data-site="v2"] span { overflow-wrap: break-word; } /* ─── Container padding safety - never let children exceed it ──────────── */ body[data-site="v2"] .section, body[data-site="v2"] .section--alt > * { min-width: 0; }