/* ────────────────────────────────────────────────────────────────── Browsernaut · Adaptive overrides (v3) Scoped to `:root[data-adaptive="true"]`. When v3 is selected the host sets that attribute on ; in every other version this file is inert. Uses `!important` only where it must beat React's inline `style={{}}` props — and only at narrow breakpoints, never at desktop. Desktop visuals are pixel-identical to v2. ────────────────────────────────────────────────────────────────── */ :root[data-adaptive="true"] { /* Fluid base — more generous side padding on small screens. iPad starts at 28px, iPhone Pro Max at 22px, narrow phone at 20px. */ --bn-pad-x: clamp(20px, 4.5vw, 40px); } /* ── Hide hamburger above 1100 so it doesn't flash on resize ── */ .bn-hamburger { display: none !important; } .bn-mobile-drawer, .bn-mobile-drawer-backdrop { display: none; } /* ════════════════════════════════════════════════════════════════ ░ PROGRESSIVE COLLAPSE ░ five stages of nav visibility ════════════════════════════════════════════════════════════════ In order from widest to narrowest, items disappear like this: • > 1120px → Stage 1: everything visible, no hamburger. • ≤ 1120px → Stage 2: nav links collapse to hamburger. lang + theme + Sign in + CTA remain. Arrow drops. • ≤ 720px → Stage 3: also hide lang + theme (they live in drawer). • ≤ 520px → Stage 4: also hide CTA. Sign in becomes the orange primary so one strong action remains. • ≤ 320px → Stage 5: also hide Sign in. Logo + hamburger only. The drawer ALWAYS shows the full set of items so the user has uniform access regardless of viewport. */ /* Stop nav-link text from wrapping inside its own pill */ :root[data-adaptive="true"] .bn-nav-link { white-space: nowrap; } @media (max-width: 1120px) { /* Stage 2: nav links → hamburger; CTA arrow drops. */ :root[data-adaptive="true"] .bn-nav-links { display: none !important; } :root[data-adaptive="true"] .bn-hamburger { display: inline-flex !important; } :root[data-adaptive="true"] .bn-nav-cta-arrow { display: none !important; } /* Header gains a faint surface + blur so it reads as a real bar */ :root[data-adaptive="true"] header { background: color-mix(in oklab, var(--bn-bg) 82%, transparent) !important; backdrop-filter: blur(12px) saturate(140%) !important; border-bottom: 1px solid var(--bn-line) !important; } /* Push actions to the right edge so the dots/CTA cluster doesn't stick to the logo when nav-links is also hidden (Stage 3+). */ :root[data-adaptive="true"] .bn-nav-actions { margin-left: auto !important; } /* ── DRAWER inner styling ───────────────────────────────────── Applies in BOTH drawer modes (partial-right at 721-1100, fullscreen at ≤720). The mode-specific outer styling — position, transform, width, backdrop — is in the media blocks below. */ :root[data-adaptive="true"] .bn-mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--bn-pad-x); border-bottom: 1px solid var(--bn-line); flex-shrink: 0; } :root[data-adaptive="true"] .bn-mobile-drawer-nav { display: flex; flex-direction: column; padding: 24px var(--bn-pad-x) 12px; gap: 4px; flex: 1 1 auto; /* takes the remaining space so foot sticks to bottom */ } :root[data-adaptive="true"] .bn-mobile-drawer-nav a { font-family: var(--bn-font-sans); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--bn-fg); padding: 14px 0; border-bottom: 1px solid var(--bn-line); display: flex; justify-content: space-between; align-items: center; text-decoration: none; } :root[data-adaptive="true"] .bn-mobile-drawer-nav a::after { content: "→"; color: var(--bn-fg-muted); font-family: var(--bn-font-mono); font-size: 14px; transition: transform .15s, color .15s; } :root[data-adaptive="true"] .bn-mobile-drawer-nav a:hover { color: var(--bn-orange); } :root[data-adaptive="true"] .bn-mobile-drawer-nav a:hover::after, :root[data-adaptive="true"] .bn-mobile-drawer-nav a:active::after { transform: translateX(4px); color: var(--bn-orange); } :root[data-adaptive="true"] .bn-mobile-drawer-foot { padding: 20px var(--bn-pad-x) calc(20px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; border-top: 1px solid var(--bn-line); background: var(--bn-bg-elev); } /* Sign-in link — sits above the lang/theme row and the orange CTA, the top-most action in the drawer footer (matches typical SaaS pattern: "Sign in" appears above "Sign up / Get started"). */ :root[data-adaptive="true"] .bn-drawer-signin { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border: 1px solid var(--bn-line-strong); border-radius: var(--bn-r-md); color: var(--bn-fg); font-family: var(--bn-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: border-color .12s, background .12s, color .12s; } :root[data-adaptive="true"] .bn-drawer-signin:hover { border-color: var(--bn-orange); color: var(--bn-orange); } /* ── Drawer head: settings rail (lang + theme) ────────────────── Lang and theme triggers live in the drawer HEAD, right-aligned next to the close button. They sit on the secondary visual layer so the foot (Sign in + Start Building) is what the eye lands on first. */ :root[data-adaptive="true"] .bn-drawer-head-controls { display: flex; align-items: center; gap: 6px; } /* Compact icon triggers — small, ghosted, square-ish so they don't compete with the close button next to them. */ :root[data-adaptive="true"] .bn-drawer-head-controls .bn-nav-popover-wrap > button { height: 36px !important; padding: 0 10px !important; border-radius: var(--bn-r-md) !important; } /* Popover anchored BELOW the trigger (default), but force full visibility on narrow drawers — right-align so it doesn't clip off the right edge. */ :root[data-adaptive="true"] .bn-drawer-head-controls .bn-nav-popover { top: calc(100% + 8px) !important; bottom: auto !important; right: 0 !important; left: auto !important; min-width: 200px !important; } :root[data-adaptive="true"] body.bn-drawer-open { overflow: hidden; } } /* Stage 3: ≤720 — lang + theme drop into the drawer */ @media (max-width: 720px) { :root[data-adaptive="true"] header > nav > .bn-nav-actions > button.bn-nav-actions-extra, :root[data-adaptive="true"] header > nav > .bn-nav-actions > .bn-nav-popover-wrap { display: none !important; } } /* Stage 4: ≤520 — hide CTA (Start Building). Sign in inherits the orange primary styling so the bar still has one strong action. */ @media (max-width: 520px) { :root[data-adaptive="true"] header .bn-nav-actions > a.bn-btn-primary { display: none !important; } :root[data-adaptive="true"] header .bn-nav-actions > a.bn-nav-actions-extra { background: var(--bn-orange) !important; color: #fff !important; padding: 9px 14px !important; border-radius: var(--bn-r-md) !important; font-family: var(--bn-font-sans) !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: var(--bn-shadow-orange) !important; letter-spacing: -0.01em !important; transition: background .15s, transform .12s ease !important; } :root[data-adaptive="true"] header .bn-nav-actions > a.bn-nav-actions-extra:hover { background: var(--bn-orange-soft) !important; transform: translateY(-1px); } } /* Stage 5: ≤320 — hide Sign in too. Only logo + hamburger. */ @media (max-width: 320px) { :root[data-adaptive="true"] header .bn-nav-actions > a.bn-nav-actions-extra { display: none !important; } } /* ════════════════════════════════════════════════════════════════ ░ DRAWER ░ modes by viewport ════════════════════════════════════════════════════════════════ - 721-1120px → right-side partial drawer with backdrop - ≤ 720px → fullscreen drawer (phone-style) */ @media (min-width: 721px) and (max-width: 1120px) { :root[data-adaptive="true"] .bn-mobile-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 86vw); z-index: 200; background: var(--bn-bg); border-left: 1px solid var(--bn-line); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform .32s cubic-bezier(.22, .61, .36, 1); overflow-y: auto; } :root[data-adaptive="true"] .bn-mobile-drawer.open { transform: translateX(0); } :root[data-adaptive="true"] .bn-mobile-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 199; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .25s ease; } :root[data-adaptive="true"] .bn-mobile-drawer-backdrop.open { opacity: 1; pointer-events: auto; } :root[data-adaptive="true"] body.bn-drawer-open { overflow: hidden; } } /* ════════════════════════════════════════════════════════════════ ░ TABLET ░ ≤ 1024px ════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { :root[data-adaptive="true"] .bn-container { padding: 0 var(--bn-pad-x) !important; } :root[data-adaptive="true"] .bn-section { padding: 80px 0 !important; } /* Nav — generous vertical padding so the header has breathing room. `nav.bn-container` beats .bn-container's padding rule. */ :root[data-adaptive="true"] header > nav.bn-container { padding: 22px var(--bn-pad-x) !important; } /* Pricing shell needs the same side padding as our container so the table and cards don't kiss the device edges on tablet. */ :root[data-adaptive="true"] .pv-shell { padding: 0 var(--bn-pad-x) !important; } /* Hero — keep agent scene but reduce paddings */ :root[data-adaptive="true"] .bn-hero-title-wrap { padding: 40px var(--bn-pad-x) 28px !important; } /* OverviewSection — KEEP the desktop 2-col layout on tablet. User feedback: when collapsed to 1-col the rows have huge empty side padding and the SVG patterns dominate. Best-practice (Stripe, Linear, Vercel, Modal) is to keep the side-by-side composition on iPad and only collapse on phone. Just tighten the gap and let the visual fill its column at natural size. */ :root[data-adaptive="true"] .bn-overview-row { padding: 56px var(--bn-pad-x) !important; } :root[data-adaptive="true"] .bn-overview-row > div { gap: 36px !important; } :root[data-adaptive="true"] .bn-overview-visual { max-width: 100%; width: 100%; margin: 0; } /* HowAndSDK timeline — text + code stack vertically. Pull the code under the text so it aligns with the timeline indent. */ :root[data-adaptive="true"] .bn-how-row { grid-template-columns: 1fr !important; gap: 18px !important; } :root[data-adaptive="true"] .bn-how-row > div:nth-child(2) { padding-left: 104px; } /* Security tile matrix — 4 cols → 2 cols */ :root[data-adaptive="true"] .bn-security-tiles { grid-template-columns: repeat(2, 1fr) !important; } /* Security docs+compliance — 2 cols → stack */ :root[data-adaptive="true"] .bn-security-docs { grid-template-columns: 1fr !important; } /* Security header asymmetric — stack */ :root[data-adaptive="true"] .bn-security-header { grid-template-columns: 1fr !important; align-items: start !important; gap: 18px !important; } /* Merging — keep desktop 2-col on tablet (better space usage than collapsing to 1-col). Collapse only on phone. */ } /* ════════════════════════════════════════════════════════════════ ░ PRICING HORIZONTAL CARDS ░ 721-1100px ════════════════════════════════════════════════════════════════ On iPad and narrow desktop widths the default 2/3-up pricing grid either fits 2 narrow vertical cards or doesn't fit at all. Instead we stack 1 card per row but lay each card OUT horizontally — left rail with identity/price/CTA, right column with features + overage. Uses the .pv-card-rail + .pv-card-detail wrappers from pricing-v2- section.jsx so this is a simple flex-row split. */ @media (min-width: 721px) and (max-width: 1100px) { :root[data-adaptive="true"] .pv-grid { grid-template-columns: 1fr !important; /* Match the Enterprise tile width (.pv-ent fills the full pv-shell). Capping pv-grid to 820px made the horizontal cards feel narrower than the Tier 4 tile sitting directly beneath them. */ max-width: none; gap: 14px !important; } :root[data-adaptive="true"] .pv-card { flex-direction: row !important; gap: 40px; padding: 28px 32px !important; align-items: stretch; } :root[data-adaptive="true"] .pv-card-rail { flex: 0 0 calc(40% - 20px); } :root[data-adaptive="true"] .pv-card-detail { flex: 1; min-width: 0; } /* Pin CTA to bottom of rail so it aligns with bottom of detail col. */ :root[data-adaptive="true"] .pv-card-rail .pv-cta { margin-top: auto !important; margin-bottom: 0 !important; } /* Reset card-desc min-height (was 56px for vertical card balance). */ :root[data-adaptive="true"] .pv-card .pv-card-desc { min-height: 0 !important; } /* Hide the "Included" section label in the horizontal variant — the feature list reads as "what's included" without it. */ :root[data-adaptive="true"] .pv-card-detail > .pv-section-label:first-child { display: none !important; } /* Enterprise: 3-col → 1-col for breathing room */ :root[data-adaptive="true"] .pv-ent { grid-template-columns: 1fr !important; gap: 20px !important; } :root[data-adaptive="true"] .pv-ent-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Comparison table horizontally scrollable. */ :root[data-adaptive="true"] .pv-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } :root[data-adaptive="true"] .pv-table { min-width: 720px; } } /* ════════════════════════════════════════════════════════════════ ░ TABLET STAYS BELOW ░ ≤ 1024px (non-pricing tablet tweaks) — placeholder anchor so the outer @media block below stays scoped. */ @media (max-width: 1024px) { /* Footer — 5 col → 2 col */ :root[data-adaptive="true"] .bn-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } :root[data-adaptive="true"] .bn-footer-grid > :first-child { grid-column: 1 / -1; } } /* ════════════════════════════════════════════════════════════════ ░ PHONE ░ ≤ 720px ════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { :root[data-adaptive="true"] .bn-section { padding: 64px 0 !important; } :root[data-adaptive="true"] .bn-container { padding: 0 var(--bn-pad-x) !important; } /* Headings scale down */ :root[data-adaptive="true"] .bn-h1 { font-size: clamp(36px, 9vw, 48px) !important; line-height: 1.02 !important; } :root[data-adaptive="true"] .bn-h2 { font-size: clamp(26px, 6.6vw, 34px) !important; } :root[data-adaptive="true"] .bn-lead { font-size: 15px !important; } /* ── NAV (phone) ────────────────────────────────────────────────── Most of the progressive collapse logic lives in higher-up breakpoints (≤1100 hides links → dots, ≤1024 hides lang+theme, ≤900 hides sign-in, ≤480 hides CTA). On phone we just need: tighter horizontal nav padding and a margin-left:auto on the actions cluster so CTA + dots sit against the right edge while the logo holds the left. */ :root[data-adaptive="true"] header > nav.bn-container { padding: 16px var(--bn-pad-x) !important; gap: 6px !important; } :root[data-adaptive="true"] .bn-nav-actions { margin-left: auto !important; gap: 8px !important; } :root[data-adaptive="true"] header > nav > a:first-child { flex-shrink: 0; } /* Compact CTA on phone */ :root[data-adaptive="true"] header .bn-btn-primary { padding: 9px 12px !important; font-size: 12.5px !important; } /* Mobile drawer — fullscreen overlay (inner styling shared with the 721-1100 right-drawer block above; only the outer positioning here). */ :root[data-adaptive="true"] .bn-mobile-drawer { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; background: var(--bn-bg); transform: translateX(100%); transition: transform .35s cubic-bezier(.22,.61,.36,1); overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0); } :root[data-adaptive="true"] .bn-mobile-drawer.open { transform: translateX(0); } /* ── HERO ────────────────────────────────────────────── */ :root[data-adaptive="true"] .bn-hero-telemetry { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; font-size: 9.5px !important; letter-spacing: 0.06em !important; } :root[data-adaptive="true"] .bn-hero-telemetry > :nth-child(4) { display: none !important; } :root[data-adaptive="true"] .bn-hero-title-wrap { padding: 28px var(--bn-pad-x) 24px !important; } :root[data-adaptive="true"] .bn-hero-eyebrow { font-size: 9.5px !important; letter-spacing: 0.18em !important; margin-bottom: 14px !important; } :root[data-adaptive="true"] .bn-hero-buttons { flex-direction: column !important; width: 100%; margin-bottom: 36px !important; } :root[data-adaptive="true"] .bn-hero-buttons > a { width: 100%; justify-content: center; padding: 14px 16px !important; font-size: 12px !important; } :root[data-adaptive="true"] .bn-hero-scene-label { position: static !important; margin-bottom: 8px !important; font-size: 9px !important; } /* ── AGENT BROWSER SCENE ───────────────────────────── Hide the left rail; show the browser at full width with a compact task banner above. ─────────────────── */ :root[data-adaptive="true"] .bn-agent-scene { grid-template-columns: 1fr !important; min-height: 0 !important; } :root[data-adaptive="true"] .bn-agent-rail { flex-direction: row !important; overflow-x: auto !important; border-right: none !important; border-bottom: 1px solid var(--bn-line) !important; padding: 10px 14px !important; gap: 14px !important; align-items: center !important; scrollbar-width: thin; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(1) { flex-shrink: 0; max-width: 60%; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(1) > div:nth-child(2) { font-size: 11px !important; line-height: 1.3 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Progress: convert vertical step list into horizontal pip strip */ :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) { flex: 1; min-width: 0; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:first-child { display: none !important; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:nth-child(2) { display: flex !important; gap: 6px !important; padding: 0 !important; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:nth-child(2) > div { display: block !important; padding: 0 !important; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:nth-child(2) > div > div:first-child { width: 10px !important; height: 10px !important; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:nth-child(2) > div > div:last-child { display: none !important; } :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:first-child + div::before { display: none !important; } /* Hide step rail vertical line on phone */ :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(2) > div:nth-child(2)::before { display: none !important; } /* Hide bottom telemetry on phone */ :root[data-adaptive="true"] .bn-agent-rail > div:nth-child(3) { display: none !important; } /* Tighter browser chrome */ :root[data-adaptive="true"] .bn-agent-scene .bn-agent-tabs > div[ref] { display: none; } :root[data-adaptive="true"] .bn-agent-viewport { min-height: 340px; } /* Hide marketing-disclaimer's left HUD orient to keep tight */ :root[data-adaptive="true"] .bn-hero-foot-row { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; } /* ── OVERVIEW ─────────────────────────────────────────── */ :root[data-adaptive="true"] .bn-overview-row { padding: 48px var(--bn-pad-x) !important; } :root[data-adaptive="true"] .bn-overview-row > div { /* Phone: collapse the desktop 2-col grid to a single column */ grid-template-columns: 1fr !important; direction: ltr !important; gap: 24px !important; } :root[data-adaptive="true"] .bn-overview-row h3 { font-size: clamp(24px, 6vw, 30px) !important; line-height: 1.12 !important; max-width: 100% !important; } :root[data-adaptive="true"] .bn-overview-row p { font-size: 14.5px !important; max-width: 100% !important; } /* On phone, let the overview visual fill its column naturally (no cap). User feedback: a capped 360px visual looked pinned to the left edge and didn't scale with the design. The visual's intrinsic aspect-ratio (1.2:1) keeps the height reasonable at any phone width. */ /* ── HOW + SDK timeline ──────────────────────────────── */ :root[data-adaptive="true"] .bn-how-row { padding-bottom: 36px !important; } :root[data-adaptive="true"] .bn-how-step { grid-template-columns: 56px 1fr !important; gap: 14px !important; } :root[data-adaptive="true"] .bn-how-step > div:first-child > div { width: 56px !important; height: 56px !important; border-radius: 28px !important; font-size: 12px !important; box-shadow: 0 0 0 4px var(--bn-bg) !important; } :root[data-adaptive="true"] .bn-how-step > div:nth-child(2) > div:first-child { font-size: 18px !important; } :root[data-adaptive="true"] .bn-how-rail { left: 28px !important; } /* On phone, pull the code column under the step's TEXT (56px circle + 14px gap = 70px), not under the desktop 104px indent inherited from the ≤1024 block — that mismatch made the code block sit further right than the heading above it. */ :root[data-adaptive="true"] .bn-how-row > div:nth-child(2) { padding-left: 70px !important; } :root[data-adaptive="true"] .bn-how-row pre { font-size: 11.5px !important; padding: 12px 14px !important; /* Hide the horizontal scrollbar — it's visually noisy and the code still scrolls by touch/drag. Long tokens fade out behind the right edge instead of being interrupted by a chrome bar. */ scrollbar-width: none; -ms-overflow-style: none; } :root[data-adaptive="true"] .bn-how-row pre::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ── SECURITY ─────────────────────────────────────────── */ :root[data-adaptive="true"] .bn-security-tiles { grid-template-columns: 1fr !important; } :root[data-adaptive="true"] .bn-security-tiles > div { min-height: 0 !important; padding: 18px !important; } :root[data-adaptive="true"] .bn-security-docs > div > div:nth-child(2) { grid-template-columns: 1fr !important; } :root[data-adaptive="true"] .bn-security-docs > div > div:nth-child(2) > div:first-child { border-right: none !important; border-bottom: 1px dashed var(--bn-line) !important; } :root[data-adaptive="true"] .bn-security-request-row { grid-template-columns: 1fr !important; gap: 4px !important; } :root[data-adaptive="true"] .bn-responsible-row { grid-template-columns: 1fr !important; gap: 8px !important; } /* Merging now lives inside the pricing section (.pv-merging). Its adaptive rules are in shared/pricing-v2.css. */ /* ── METRICS BAND (live numbers) ─────────────────────── */ :root[data-adaptive="true"] .bn-metrics-grid { grid-template-columns: 1fr 1fr !important; } /* ── PRICING — revert to vertical narrow card on phone ─── */ :root[data-adaptive="true"] .pv-shell { padding: 0 var(--bn-pad-x) !important; } :root[data-adaptive="true"] .pv-title { font-size: clamp(30px, 8vw, 40px) !important; } /* Pricing cards on phone — fill the container width to harmonize with the Enterprise tile and comparison table which sit beneath. Capping to 420px made the pricing cards look narrow next to those full-width siblings on intermediate widths (Surface Duo, foldables). */ :root[data-adaptive="true"] .pv-grid { grid-template-columns: 1fr !important; margin-left: auto !important; margin-right: auto !important; } :root[data-adaptive="true"] .pv-card { flex-direction: column !important; padding: 26px 20px 22px !important; gap: 0 !important; } /* Restore the CTA's bottom margin (we strip it in horizontal mode) */ :root[data-adaptive="true"] .pv-card-rail .pv-cta { margin-top: 0 !important; margin-bottom: 26px !important; } /* Show the "Included" label again on phone — it's useful context when stacked vertically. */ :root[data-adaptive="true"] .pv-card-detail > .pv-section-label:first-child { display: block !important; } /* Enterprise tile + bundles + proxy — same treatment */ :root[data-adaptive="true"] .pv-ent, :root[data-adaptive="true"] .pv-proxy-grid, :root[data-adaptive="true"] .pv-bundles { grid-template-columns: 1fr !important; } /* Full comparison table — horizontally scrollable card with a sticky first column so the user can scan rows while side-scrolling plans. */ :root[data-adaptive="true"] .pv-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin: 16px calc(var(--bn-pad-x) * -1) 0 !important; padding: 0 var(--bn-pad-x); scrollbar-width: thin; } :root[data-adaptive="true"] .pv-table { min-width: 640px; } :root[data-adaptive="true"] .pv-table thead th:first-child, :root[data-adaptive="true"] .pv-table tbody td:first-child { position: sticky; left: 0; background: var(--bn-bg); z-index: 1; box-shadow: 1px 0 0 var(--bn-line); } :root[data-adaptive="true"] .pv-compare-toggle .hint::after { content: " · swipe →"; color: var(--bn-orange); font-weight: 500; } /* ── FINAL CTA ────────────────────────────────────────── */ :root[data-adaptive="true"] .bn-final-cta-row { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; } :root[data-adaptive="true"] .bn-final-cta-row > div:last-child { flex-direction: column !important; width: 100%; } :root[data-adaptive="true"] .bn-final-cta-row > div:last-child > a { width: 100%; justify-content: center; } :root[data-adaptive="true"] #cta .bn-reveal { padding: 36px 24px !important; } /* ── FOOTER ───────────────────────────────────────────── */ :root[data-adaptive="true"] .bn-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; } :root[data-adaptive="true"] .bn-footer-grid > :first-child { grid-column: 1 / -1; } :root[data-adaptive="true"] footer .bn-container[style*="justify-content"] { flex-direction: column !important; gap: 8px; align-items: flex-start !important; } } /* ════════════════════════════════════════════════════════════════ ░ NARROW PHONE ░ ≤ 420px ════════════════════════════════════════════════════════════════ */ @media (max-width: 420px) { :root[data-adaptive="true"] .bn-h1 { font-size: 32px !important; letter-spacing: -0.025em !important; } :root[data-adaptive="true"] .bn-h2 { font-size: 24px !important; } :root[data-adaptive="true"] .bn-metrics-grid { grid-template-columns: 1fr !important; } :root[data-adaptive="true"] .bn-footer-grid { grid-template-columns: 1fr !important; } :root[data-adaptive="true"] .bn-footer-grid > :first-child { grid-column: 1; } /* Hide the right-side date in telemetry */ :root[data-adaptive="true"] .bn-hero-telemetry > :nth-child(3) { grid-column: 1 / -1; } } /* ════════════════════════════════════════════════════════════════ ░ SAFETY ░ prevent horizontal overflow at any width ════════════════════════════════════════════════════════════════ */ :root[data-adaptive="true"] body { overflow-x: hidden; } :root[data-adaptive="true"] pre, :root[data-adaptive="true"] code { max-width: 100%; } /* Hide variant switcher on phone — Tweaks panel still works via toolbar */ @media (max-width: 720px) { .bn-switcher { bottom: 12px !important; transform: translateX(-50%) scale(.9); } .bn-tweaks { top: 64px !important; right: 12px !important; left: 12px !important; width: auto !important; } }