/* ============================================================ brand-v2.css — PhoneIQ v2 brand system (Round 10.4), HOMEPAGE-ONLY overlay. Loaded AFTER theme-2026.css, only when front matter sets `brandV2: true`. The homepage carries BOTH classes on the same element: class="theme-2026 home-2026 brand-v2" so every rule here is scoped under the same-element co-selector `.theme-2026.brand-v2`. Because this sheet loads later, equal-specificity rules win over theme-2026.css without needing !important — !important is used ONLY to beat theme-2026.css's own !important on nav/footer chrome. This is a CSS-only re-skin. It does NOT touch markup, the ~120 data-home-* i18n hooks, the .nav-2026 / .t-footer class contracts, or the typewriter JS. It re-maps theme-2026's EXISTING token names to v2 values, so every .t-* consumer cascades to the new system for free. Source of truth for values: design-system-v2/index.html (tokens, buttons, eyebrows, radii) discovery/homepage-heroes/58-round10-intern-blend.html (hero band) DESIGN DECISION (documented): "dark chrome on a light body." The page ground goes light (--ground #f5f6f4). The hero is a dark band and the sticky nav sits over it, so the nav stays a dark ink band INTENTIONALLY; the footer mirrors it as the closing dark band. Both are re-typed to the v2 font stacks and use --signal for accents/hovers, so the dark bookends read as a deliberate part of the v2 system, not a leftover of the old dark theme. ============================================================ */ /* ============================================================ FONTS — self-hosted, from /assets/fonts/ (passthrough-copied by .eleventy.js). Display: Helvetica Neue on macOS, Inter (self-hosted variable) elsewhere. Mono: IBM Plex Mono from head.njk's existing Google Fonts request. We keep only Inter here so IBM Plex Mono is not downloaded twice; the Google Fonts Geo / IBM Plex Mono link remains untouched for all pages. ============================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* variable axis unlocked — wordmark uses 300 (Phone) / 400 (IQ) */ font-display: swap; src: url("/assets/fonts/Inter-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ TOKENS — redeclare theme-2026's EXISTING names with v2 values. Every .t-* consumer reads these via var(), so the whole homepage re-skins from this single block. No new token names invented. ============================================================ */ .theme-2026.brand-v2 { /* v2 palette (kept as extra names so overrides below can reference them) */ --v2-ground: #f5f6f4; --v2-paper: #ffffff; --v2-paper-soft: #eceeeb; --v2-ink: #14171a; --v2-quiet: #626a70; --v2-faint: #8b9297; --v2-rule: rgba(20, 23, 26, 0.16); --v2-rule-strong: rgba(20, 23, 26, 0.32); --v2-signal: #5e55fd; --v2-signal-bright: #7a72ff; --v2-complete: #248a61; --v2-handoff: #d68b47; /* Standby gold — the "idle" sibling of --v2-complete / --v2-handoff. Used for the desktop nav status dots at rest. */ --v2-standby: #e0ab3c; --v2-shadow: 0 28px 80px rgba(25, 34, 40, 0.08); --v2-shadow-soft: 0 18px 48px -24px rgba(25, 34, 40, 0.3); /* dark band (hero + chrome) surfaces, from intern-blend hero */ --v2-band: #14181d; /* v2 spacing and shape scale for the Round 10.4 homepage components */ --v2-space-1: 4px; --v2-space-2: 8px; --v2-space-3: 12px; --v2-space-4: 16px; --v2-space-5: 24px; --v2-space-6: 32px; --v2-space-7: 48px; --v2-space-8: 64px; --v2-space-9: 80px; --v2-space-10: 96px; --v2-space-11: 128px; --v2-radius-sm: 4px; --v2-radius-md: 8px; --v2-radius-pill: 999px; --v2-ease: cubic-bezier(.22, .68, 0, 1); --v2-content-max: 1120px; --v2-nav-height: 80px; /* ---- theme-2026 token names remapped to v2 ---- */ --indigo: var(--v2-signal); --indigo-bright: var(--v2-signal); /* v2 has no separate "bright accent"; accents are flat --signal */ --violet: var(--v2-signal); --glow: rgba(94, 85, 253, 0.28); --success: var(--v2-complete); --success-text: #d7f2e6; --success-soft: rgba(36, 138, 97, 0.10); --success-border: rgba(36, 138, 97, 0.30); --success-glow: rgba(36, 138, 97, 0.06); --bg: var(--v2-ground); /* page ground → v2 light */ --surface: var(--v2-paper); /* card surface → v2 paper */ --border: var(--v2-rule); /* hairline → v2 rule */ --border-2: var(--v2-rule-strong); /* stronger hairline → v2 rule-strong */ --text: var(--v2-ink); /* body text → v2 ink */ --muted: var(--v2-quiet); /* secondary text → v2 quiet */ --subtle: var(--v2-faint); /* tertiary text → v2 faint */ --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; --display: "Helvetica Neue", "Inter", "Neue Haas Grotesk Display", Helvetica, Arial, system-ui, sans-serif; --r: 4px; /* Override the direct declarations theme-2026.css sets ON `.theme-2026` (background / color / font-family) via the later same-element co-selector. */ background: var(--v2-ground); color: var(--v2-ink); font-family: var(--display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Kill the dark theme's fixed radial glow + noise atmosphere on the light page. */ .theme-2026.brand-v2::before { display: none !important; } /* Repurpose the ::after layer as a layout-neutral Inter font-load trigger. On macOS "Helvetica Neue" wins the --display stack, so Inter is never painted by real text and the browser would keep the (loaded) face inert, making document.fonts.check('16px Inter') report false. This paints one off-screen glyph in Inter so the face activates — zero visual impact on the design (no real element resolves to Inter on macOS). */ .theme-2026.brand-v2::after { content: "\00a0"; position: fixed; left: -9999px; top: 0; width: 0; height: 0; overflow: hidden; font-family: "Inter"; font-weight: 300; pointer-events: none; z-index: -1; } /* ============================================================ LEGACY LIST RESET — root cause of the "weird dark background". The Webflow bundle (phoneiq.purged.css, loaded before this file) styles the bare element selector: ul { background-color: var(--dark-slate-blue); color: var(--white); border-radius: 6px; margin: 16px 0 24px; padding: 35px 20px 20px 50px } Nothing in v2 declared a background on its lists, so that navy fill won by default — painting a tray behind the integration icon wall and a block behind both plan feature lists. Homepage lists are layout containers, not surfaces. Neutralize the legacy fill once here (0,2,1 beats the bare `ul` at 0,0,1, so no !important and no per-component override is needed). ============================================================ */ .theme-2026.brand-v2 ul, .theme-2026.brand-v2 ol { margin: 0; border: 0; border-radius: 0; background-color: transparent; color: inherit; } /* ============================================================ TYPE — display family + weights; body reverts to display, not mono. theme-2026 sets font-family:var(--mono) on body; v2 body is the display sans. Mono is reserved for eyebrows, labels, terminal, transcripts. ============================================================ */ .theme-2026.brand-v2 h1, .theme-2026.brand-v2 h2, .theme-2026.brand-v2 h3, .theme-2026.brand-v2 h4, .theme-2026.brand-v2 .t-h1, .theme-2026.brand-v2 .t-h2, .theme-2026.brand-v2 .t-h3 { font-family: var(--display); font-weight: 300; letter-spacing: -0.035em; color: var(--v2-ink); } .theme-2026.brand-v2 .t-h3 { font-weight: 500; letter-spacing: -0.01em; } /* .t-hl highlight → flat signal ink, no neon text-shadow */ .theme-2026.brand-v2 .t-hl { color: var(--v2-signal); text-shadow: none; } /* Terminal cursor / prompt → flat signal, no glow */ .theme-2026.brand-v2 .t-cursor { background: var(--v2-signal); box-shadow: none; } .theme-2026.brand-v2 .t-term { color: var(--v2-quiet); } .theme-2026.brand-v2 .t-term__prompt { color: var(--v2-signal); } /* ============================================================ EYEBROW — v2 mono label with a 36px signal rule prefix, no chip. ============================================================ */ .theme-2026.brand-v2 .t-eyebrow { gap: 12px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--v2-quiet); background: transparent; border: 0; border-radius: 0; padding: 0; } .theme-2026.brand-v2 .t-eyebrow::before { width: 36px; height: 1px; background: var(--v2-signal); box-shadow: none; } /* ============================================================ BUTTONS — pill (999px), v2 metrics, flat (no hard offset shadow). Primary: signal fill. Ghost: outlined ink on light. ============================================================ */ .theme-2026.brand-v2 .t-btn { border-radius: 999px; padding: 0 28px; min-height: 52px; font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; border: 1px solid transparent; transition: background-color .24s var(--ease, ease), color .24s ease, transform .24s ease, border-color .24s ease, box-shadow .24s ease; } .theme-2026.brand-v2 .t-btn--primary { background: var(--v2-signal); color: #fff; border-color: var(--v2-signal); box-shadow: var(--v2-shadow-soft); } .theme-2026.brand-v2 .t-btn--primary:hover { background: var(--v2-signal-bright); border-color: var(--v2-signal-bright); transform: none; box-shadow: var(--v2-shadow-soft); } .theme-2026.brand-v2 .t-btn--primary:active { transform: scale(0.98); box-shadow: none; } .theme-2026.brand-v2 .t-btn--ghost { background: transparent; border-color: var(--v2-rule-strong); color: var(--v2-ink); box-shadow: none; } .theme-2026.brand-v2 .t-btn--ghost:hover { background: var(--v2-paper-soft); border-color: var(--v2-ink); color: var(--v2-ink); transform: none; box-shadow: none; } .theme-2026.brand-v2 .t-btn--ghost:active { transform: scale(0.98); box-shadow: none; } .theme-2026.brand-v2 .t-call-number { font-family: var(--mono); } /* Nav CTA reuses the Webflow `.button` (styled by `.theme-2026 .nav-bar .button` with square corners + a 4px offset shadow, and by `.button`/`.button.small` with uppercase + 16px type). That stack renders a 195px-wide shouty pill that overpowers the nav band, so we retint to the v2 pill AND resize it to the conventional header-button spec: 14px sentence-case label, 40px control. */ .theme-2026.brand-v2 .nav-2026__cta { min-height: 40px !important; padding: 9px 18px !important; border-radius: 999px !important; box-shadow: none; font-family: var(--display); font-size: 14px !important; font-weight: 500; line-height: 20px; letter-spacing: 0; text-transform: none; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .theme-2026.brand-v2 .nav-2026__cta:hover { transform: none; box-shadow: none; background: var(--v2-signal-bright) !important; border-color: var(--v2-signal-bright) !important; } .theme-2026.brand-v2 .nav-2026__cta:active { transform: scale(0.98); box-shadow: none; } /* ============================================================ CARDS — v2 paper surface, 4px radius, soft shadow, no backdrop blur. ============================================================ */ .theme-2026.brand-v2 .t-card { background: var(--v2-paper); border: 1px solid var(--v2-rule); border-radius: 4px; box-shadow: var(--v2-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; } .theme-2026.brand-v2 .t-card::before { display: none; } /* remove dark top-edge highlight */ .theme-2026.brand-v2 .t-card:hover { transform: translateY(-3px); border-color: var(--v2-rule-strong); background: var(--v2-paper); box-shadow: var(--v2-shadow); } .theme-2026.brand-v2 .t-card__num { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.05em; color: var(--v2-signal); } .theme-2026.brand-v2 .t-card p { color: var(--v2-quiet); } /* home-2026 forced border-radius:0 on eyebrow/card/turn/cta-band → restore v2 radii */ .theme-2026.brand-v2.home-2026 .t-card, .theme-2026.brand-v2.home-2026 .t-turn { border-radius: 4px; } .theme-2026.brand-v2.home-2026 .t-eyebrow { border-radius: 0; } .theme-2026.brand-v2.home-2026 .t-cta-band { border-radius: 8px; } /* ============================================================ HERO — dark band. Keep the existing dark hero surface but retint to the v2 ink band; nav sits over it, so the band reads intentional. Tokens inside the hero are re-scoped to light-on-dark so .t-* children (headings, leads, eyebrows) read correctly against the dark band. ============================================================ */ .theme-2026.brand-v2 .t-home-hero { --text: #ffffff; --muted: rgba(255, 255, 255, 0.78); --subtle: rgba(255, 255, 255, 0.52); --border: rgba(255, 255, 255, 0.22); --border-2: rgba(255, 255, 255, 0.44); --surface: rgba(12, 15, 19, 0.48); position: relative; background: linear-gradient(180deg, rgba(9,12,15,0.82) 0%, rgba(9,12,15,0) 26%), linear-gradient(0deg, rgba(9,12,15,0.62) 0%, rgba(9,12,15,0) 22%), radial-gradient(120% 140% at 78% 20%, #3a4048 0%, #23282e 42%, #14181d 100%); } .theme-2026.brand-v2 .t-home-hero .t-h1, .theme-2026.brand-v2 .t-home-hero .t-h2, .theme-2026.brand-v2 .t-home-hero .t-h3 { color: #fff; } .theme-2026.brand-v2 .t-home-hero .t-hl { color: #fff; } .theme-2026.brand-v2 .t-home-hero .t-eyebrow { color: rgba(255,255,255,0.78); } .theme-2026.brand-v2 .t-home-hero .t-eyebrow::before { background: var(--v2-signal); } /* Ghost button on the dark hero band: the light-page ink outline would read dark-on-dark. Give it the intern-blend hero secondary treatment — white text on a translucent dark surface with a light rule. */ .theme-2026.brand-v2 .t-home-hero .t-btn--ghost { color: #fff; background: rgba(12, 15, 19, 0.48); border-color: rgba(255, 255, 255, 0.44); } .theme-2026.brand-v2 .t-home-hero .t-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); } /* Neutralize the markup-backed hero decoration (can't remove the divs; CSS-only). theme-2026 renders .t-hero__aurora as a blurred triple radial-gradient glow and .t-hero__grid as a perspective-rotated purple grid floor — both read as the old theme. v2's hero is a flat dark band, so hide both. (theme-2026.css already gates their animation behind prefers-reduced-motion; hiding outright adds no motion.) */ .theme-2026.brand-v2 .t-hero__aurora, .theme-2026.brand-v2 .t-hero__grid { display: none; } /* Drop the H1 neon halo (.t-hero--mega .t-h1 text-shadow), not token-driven. */ .theme-2026.brand-v2 .t-hero--mega .t-h1 { text-shadow: none; } /* Hero call card on the dark band → dark glass, signal agent bubbles */ .theme-2026.brand-v2 .t-home-hero__call { background: rgba(12, 15, 19, 0.48); border-color: rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; } .theme-2026.brand-v2 .t-home-hero .t-transcript__bar { color: rgba(255,255,255,0.78); } .theme-2026.brand-v2 .t-home-hero .t-transcript__bar .dot { background: var(--v2-complete); box-shadow: none; } .theme-2026.brand-v2 .t-home-hero .t-turn__who { opacity: 0.6; } .theme-2026.brand-v2 .t-home-hero .t-turn--caller { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.92); } .theme-2026.brand-v2 .t-home-hero .t-turn--agent { background: var(--v2-signal); border-color: var(--v2-signal); color: #fff; } .theme-2026.brand-v2 .t-home-hero .t-call-tags span { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); } /* Hero language toggle on the dark band */ .theme-2026.brand-v2 .t-home-language { border-color: rgba(255,255,255,0.28); background: rgba(12,15,19,0.42); box-shadow: none; } .theme-2026.brand-v2 .t-home-language__button { border-right-color: rgba(255,255,255,0.24) !important; color: rgba(255,255,255,0.72) !important; font-family: var(--mono); border-radius: 999px !important; } .theme-2026.brand-v2 .t-home-language__button:hover, .theme-2026.brand-v2 .t-home-language__button:focus-visible { color: #fff !important; background: rgba(255,255,255,0.10) !important; } .theme-2026.brand-v2 .t-home-language__button.is-active { color: #fff !important; background: var(--v2-signal) !important; } /* Hero status rail on the dark band */ .theme-2026.brand-v2 .t-home-status { border-color: rgba(255,255,255,0.20); background: rgba(12,15,19,0.44); box-shadow: none; } .theme-2026.brand-v2 .t-home-status div { color: rgba(255,255,255,0.86); border-right-color: rgba(255,255,255,0.16); } .theme-2026.brand-v2 .t-home-status span { color: var(--v2-signal-bright, #8b83d9); } /* ============================================================ TYPEWRITER — matched pairs. Because --display swaps Geo → Helvetica/Inter (very different metrics), the hidden ghost (which reserves height) and the absolutely-positioned live layer MUST share identical font shorthand or the live text clips/overlaps. Applied to hero H1 pair and final CTA H2 pair. Font shorthand is inherited from .t-h1 / .t-h2; we only guarantee both layers resolve to the SAME family/size/line-height/weight/tracking. ============================================================ */ .theme-2026.brand-v2 .t-title-ghost, .theme-2026.brand-v2 .t-title-live { font-family: var(--display); font-weight: 300; letter-spacing: -0.035em; line-height: inherit; } .theme-2026.brand-v2 .t-tw, .theme-2026.brand-v2 .t-tw-out { font-family: var(--display); font-weight: 300; letter-spacing: -0.035em; line-height: inherit; } .theme-2026.brand-v2 .t-tw-out { display: inline; } /* ============================================================ TRANSCRIPTS / LIVE CALL (light sections) — paper turns, signal agent. ============================================================ */ .theme-2026.brand-v2 .t-transcript__bar { color: var(--v2-signal); } .theme-2026.brand-v2 .t-transcript__bar .dot { background: var(--v2-complete); box-shadow: none; } .theme-2026.brand-v2 .t-turn { border-radius: 14px; } .theme-2026.brand-v2 .t-turn--caller { background: var(--v2-paper-soft); border-color: var(--v2-rule); color: var(--v2-ink); } .theme-2026.brand-v2 .t-turn--agent { background: var(--v2-signal); border-color: var(--v2-signal); color: #fff; } .theme-2026.brand-v2 .t-home-transcript { box-shadow: var(--v2-shadow); } /* Live-call action stack + call tags */ .theme-2026.brand-v2 .t-home-action-stack div { border-color: var(--v2-rule); background: var(--v2-paper); } .theme-2026.brand-v2 .t-home-action-stack span { color: var(--v2-signal); } .theme-2026.brand-v2 .t-call-tags span { border-color: var(--v2-complete); background: rgba(36, 138, 97, 0.08); color: var(--v2-complete); } /* ============================================================ CALL EXAMPLES — light cards, signal flow labels, pill CTA. ============================================================ */ .theme-2026.brand-v2 .t-call-example:nth-child(2) { background: var(--v2-paper); } .theme-2026.brand-v2 .t-call-example:nth-child(3) { border-color: var(--v2-rule); } .theme-2026.brand-v2 .t-call-example p { color: var(--v2-quiet); } .theme-2026.brand-v2 .t-call-example__flow span { color: var(--v2-signal); } .theme-2026.brand-v2 .t-call-example__flow b { color: var(--v2-ink); } .theme-2026.brand-v2 .t-call-example__cta { border-radius: 999px; border-color: var(--v2-signal); background: var(--v2-signal); color: #fff; font-family: var(--display); font-weight: 500; font-size: 16px; box-shadow: none; } .theme-2026.brand-v2 .t-call-example__cta:hover { transform: none; border-color: var(--v2-signal-bright); background: var(--v2-signal-bright); box-shadow: none; } /* ============================================================ CAPABILITIES / STEPS — light tiles, subtle signal tint on alternates. ============================================================ */ .theme-2026.brand-v2 .t-home-feature:nth-child(2n) { background: var(--v2-paper); } .theme-2026.brand-v2 .t-home-feature:nth-child(3n) { border-color: var(--v2-rule); } .theme-2026.brand-v2 .t-home-steps::before { background: linear-gradient(90deg, transparent, var(--v2-rule-strong), transparent); } /* ============================================================ ENGINE — light shell, signal accents. ============================================================ */ .theme-2026.brand-v2 .t-home-engine__shell { border: 1px solid var(--v2-rule); border-radius: 8px; background: var(--v2-paper); box-shadow: var(--v2-shadow); } .theme-2026.brand-v2 .t-home-engine__shell::before { display: none; } .theme-2026.brand-v2 .t-home-engine__logo-card { border-color: var(--v2-rule); background: var(--v2-ground); border-radius: 4px; } .theme-2026.brand-v2 .t-home-engine__plus { color: var(--v2-signal); text-shadow: none; } .theme-2026.brand-v2 .t-home-engine__points div { border-color: var(--v2-rule); background: var(--v2-ground); color: var(--v2-quiet); } .theme-2026.brand-v2 .t-home-engine__points span { color: var(--v2-ink); } /* ============================================================ PROOF — light quote/metrics, mono kept for the numeric feel. ============================================================ */ .theme-2026.brand-v2 .t-home-logo-strip { border-color: var(--v2-rule); background: var(--v2-paper); border-radius: 4px; } .theme-2026.brand-v2 .t-home-logo-strip img { background: var(--v2-paper); border-color: var(--v2-rule); filter: none; opacity: 0.7; mix-blend-mode: multiply; } .theme-2026.brand-v2 .t-home-logo-strip img:hover { opacity: 1; border-color: var(--v2-rule-strong); background: var(--v2-paper); } .theme-2026.brand-v2 .t-home-quote blockquote { color: var(--v2-ink); } .theme-2026.brand-v2 .t-home-quote figcaption { color: var(--v2-quiet); } .theme-2026.brand-v2 .t-home-proof__metrics div { border-color: var(--v2-rule); background: var(--v2-paper); color: var(--v2-quiet); } .theme-2026.brand-v2 .t-home-proof__metrics span { color: var(--v2-ink); } /* ============================================================ CTI — light band, signal link cards. ============================================================ */ .theme-2026.brand-v2 .t-home-cti__band { border: 1px solid var(--v2-rule); border-radius: 8px; background: var(--v2-paper); box-shadow: var(--v2-shadow); } .theme-2026.brand-v2 .t-home-cti__links a { border-color: var(--v2-rule); background: var(--v2-ground); border-radius: 4px; color: var(--v2-ink); font-weight: 500; } .theme-2026.brand-v2 .t-home-cti__links a:hover { transform: translateY(-2px); border-color: var(--v2-signal); background: var(--v2-paper); } .theme-2026.brand-v2 .t-home-cti__links span { color: var(--v2-quiet); } /* ============================================================ FINAL CTA BAND — light signal-washed panel (was radial dark glow). ============================================================ */ .theme-2026.brand-v2 .t-cta-band { border: 1px solid var(--v2-rule); border-radius: 8px; background: radial-gradient(120% 140% at 50% -20%, rgba(94,85,253,0.10), transparent 60%), var(--v2-paper); box-shadow: var(--v2-shadow); } .theme-2026.brand-v2 .t-home-final .t-lead { color: var(--v2-quiet); } /* ============================================================ NAV CHROME (dark band, INTENTIONAL) — re-typed to v2 stacks, signal accents. theme-2026.css bakes dark literals with !important; we keep the dark band (nav sits over the dark hero) but move type to the v2 display/mono stacks and swap the old indigo-glow accents for flat --signal. ============================================================ */ .theme-2026.brand-v2 .nav-2026-desktop { background: rgba(15, 18, 22, 0.82) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } /* At scroll top the sticky nav sits over the page background, not the hero, so the translucent dark reads as light gray. Pin it to the band color until the scrolled class takes over and the blur returns. */ .theme-2026.brand-v2 .nav-2026-desktop:not(.scrolled) { background: var(--v2-band) !important; } .theme-2026.brand-v2 .nav-2026__toggle, .theme-2026.brand-v2 .nav-2026__link { font-family: var(--display) !important; font-size: 0.875rem !important; font-weight: 400; color: rgba(255, 255, 255, 0.82) !important; } .theme-2026.brand-v2 .nav-2026__toggle:hover, .theme-2026.brand-v2 .nav-2026__link:hover, .theme-2026.brand-v2 .nav-2026__dropdown.w--open .nav-2026__toggle { color: #fff !important; } /* ---- Desktop nav status dots --------------------------------------------- The chevron arrows are replaced by a small status light borrowed from the live-call card: gold at rest (--v2-standby), --v2-complete green on hover/focus, and the same brand-v2-live-pulse the live indicator runs while its dropdown is open. Webflow's data-hover="true" opens a dropdown ON hover, so open and hover are simultaneous states: open adds the pulse on top of the green rather than replacing it. Scoped to exactly .nav-2026__toggle (4 dropdowns) and .nav-2026__link (Pricing) — deliberately NOT a descendant selector on .nav-2026__menu, which would also stud the 8 hidden .nav-link-2 SEO links. The mobile nav uses .nav-2026-mobile__toggle and is untouched; the chevron is hidden only inside desktop toggles because mobile toggles reuse .nav-2026__chevron. Decorative and pure CSS: no JS is required for the dot to render. */ .theme-2026.brand-v2 .nav-2026__toggle .nav-2026__chevron { display: none; } .theme-2026.brand-v2 .nav-2026__toggle::before, .theme-2026.brand-v2 .nav-2026__link::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: -1px; /* optical: align to cap-height centre, not line-box centre */ border-radius: var(--v2-radius-pill); background: var(--v2-standby); box-shadow: 0 0 5px color-mix(in srgb, var(--v2-standby) 45%, transparent); transition: background .18s var(--v2-ease), box-shadow .18s var(--v2-ease); } .theme-2026.brand-v2 .nav-2026__toggle:hover::before, .theme-2026.brand-v2 .nav-2026__toggle:focus-visible::before, .theme-2026.brand-v2 .nav-2026__dropdown.w--open .nav-2026__toggle::before, .theme-2026.brand-v2 .nav-2026__link:hover::before, .theme-2026.brand-v2 .nav-2026__link:focus-visible::before { background: var(--v2-complete); box-shadow: 0 0 7px color-mix(in srgb, var(--v2-complete) 70%, transparent); } /* Verified in-browser: Webflow puts `w--open` on the .w-dropdown WRAPPER (.nav-2026__dropdown), never on the toggle itself — the toggle only carries aria-expanded="true". Keyboard-opening also lands here, so this one selector covers hover-open and click/keyboard-open alike. */ .theme-2026.brand-v2 .nav-2026__dropdown.w--open .nav-2026__toggle::before { animation: brand-v2-live-pulse 1.8s var(--v2-ease) infinite; } .theme-2026.brand-v2 .nav-2026__panel { background: rgba(18, 21, 26, 0.97) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 8px !important; box-shadow: 0 30px 80px -26px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(94, 85, 253, 0.18) !important; } .theme-2026.brand-v2 .nav-2026__item-label { font-family: var(--display); color: #fff; } .theme-2026.brand-v2 .nav-2026__item-kicker { font-family: var(--mono); color: rgba(255, 255, 255, 0.6); } .theme-2026.brand-v2 .nav-2026__item:hover { border-color: rgba(94, 85, 253, 0.4); } .theme-2026.brand-v2 .nav-2026__phone, .theme-2026.brand-v2 .nav-2026__login { font-family: var(--mono); color: rgba(255, 255, 255, 0.72); } .theme-2026.brand-v2 .nav-2026__phone:hover, .theme-2026.brand-v2 .nav-2026__login:hover { color: #fff; } .theme-2026.brand-v2 .t-brand-name { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; color: #fff; } .theme-2026.brand-v2 .t-brand-word { font-weight: 300; } .theme-2026.brand-v2 .t-brand-iq { font-weight: 400; } /* Mobile nav band */ .theme-2026.brand-v2 .nav-2026-mobile { background: rgba(15, 18, 22, 0.86) !important; } .theme-2026.brand-v2 .nav-2026-mobile__toggle, .theme-2026.brand-v2 .nav-2026-mobile__link { font-family: var(--display) !important; font-size: 0.8rem !important; font-weight: 400; color: #fff !important; } .theme-2026.brand-v2 .nav-2026-mobile__hamburger span { box-shadow: none; } /* ============================================================ FOOTER CHROME (dark band, INTENTIONAL) — mirrors nav; v2 type + signal. NOTE: .t-footer__* rules are GLOBAL (not .theme-2026-prefixed); our .theme-2026.brand-v2 .t-footer__x overrides still win on specificity. ============================================================ */ .theme-2026.brand-v2 .t-footer { background: #0f1216; border-top: 1px solid rgba(255, 255, 255, 0.10); } .theme-2026.brand-v2 .t-footer__tag { color: rgba(255, 255, 255, 0.66); } .theme-2026.brand-v2 .t-footer__h { font-family: var(--mono); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5); } .theme-2026.brand-v2 .t-footer__col a { color: rgba(255, 255, 255, 0.78); } .theme-2026.brand-v2 .t-footer__col a:hover { color: var(--v2-signal-bright, #8b83d9); } .theme-2026.brand-v2 .t-footer__bottom { border-top-color: rgba(255, 255, 255, 0.10); } .theme-2026.brand-v2 .t-footer__legal { font-family: var(--mono); color: rgba(255, 255, 255, 0.5); } .theme-2026.brand-v2 .t-footer__legal a:hover { color: #fff; } .theme-2026.brand-v2 .t-footer__brand .t-brand-name { color: #fff; } /* ============================================================ FOCUS — v2 handoff-amber ring, matches design-system-v2. ============================================================ */ .theme-2026.brand-v2 :focus-visible { outline: 3px solid var(--v2-handoff); outline-offset: 3px; } /* ============================================================ ROUND 10.4 HOMEPAGE — revenue-first editorial composition. All selectors remain homepage-only through the brand-v2 body flag. ============================================================ */ .theme-2026.brand-v2 #main-content { background: var(--v2-ground); color: var(--v2-ink); } .theme-2026.brand-v2 .home-section__inner { max-width: var(--v2-content-max); } .theme-2026.brand-v2 .home-eyebrow { display: flex; align-items: center; gap: var(--v2-space-3); margin: 0 0 var(--v2-space-5); color: var(--v2-quiet); font: 500 10px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .theme-2026.brand-v2 .home-eyebrow::before { content: ""; width: 36px; height: 1px; flex: 0 0 auto; background: var(--v2-signal); } .theme-2026.brand-v2 .home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-space-3); } .theme-2026.brand-v2 .home-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-space-2); padding: 0 var(--v2-space-6); border: 1px solid var(--v2-ink); border-radius: var(--v2-radius-pill); font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; text-align: center; white-space: nowrap; transition: background-color 240ms var(--v2-ease), border-color 240ms var(--v2-ease), color 240ms var(--v2-ease), transform 240ms var(--v2-ease), box-shadow 240ms var(--v2-ease); } .theme-2026.brand-v2 .home-button:hover { transform: translateY(-2px); } .theme-2026.brand-v2 .home-button:active { transform: scale(.98); } .theme-2026.brand-v2 .home-button--primary { color: var(--v2-paper); background: var(--v2-signal); border-color: var(--v2-signal); box-shadow: var(--v2-shadow-soft); } .theme-2026.brand-v2 .home-button--primary:hover { background: var(--v2-signal-bright); border-color: var(--v2-signal-bright); } .theme-2026.brand-v2 .home-button--secondary { color: var(--v2-ink); background: var(--v2-paper); border-color: var(--v2-rule-strong); } .theme-2026.brand-v2 .home-button--secondary:hover { background: var(--v2-paper-soft); border-color: var(--v2-ink); } .theme-2026.brand-v2 .home-button--light { color: var(--v2-ink); background: var(--v2-paper); border-color: var(--v2-paper); } .theme-2026.brand-v2 .home-button--light:hover { color: var(--v2-paper); background: var(--v2-signal); border-color: var(--v2-signal); } .theme-2026.brand-v2 .home-button--dark-outline { color: var(--v2-paper); background: transparent; border-color: color-mix(in srgb, var(--v2-paper) 52%, transparent); } .theme-2026.brand-v2 .home-button--dark-outline:hover { background: color-mix(in srgb, var(--v2-paper) 10%, transparent); border-color: var(--v2-paper); } /* The number rides the same display stack as the label so the CTA reads as one button, not a label glued to a mono chip. Weight (not family) carries the hierarchy; tabular figures keep the digits from shifting on hover/scale. */ .theme-2026.brand-v2 .home-button__number { font-family: var(--display); font-size: 16px; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; } /* Top-level homepage language control. It is rendered by nav-2026.njk only when homeI18n is set, so translated chrome never leaks to other pages. */ .theme-2026.brand-v2 .home-language { display: inline-flex; align-items: center; padding: var(--v2-space-1); border: 1px solid color-mix(in srgb, var(--v2-paper) 30%, transparent); border-radius: var(--v2-radius-pill); background: color-mix(in srgb, var(--v2-band) 74%, transparent); } .theme-2026.brand-v2 .home-language__button { flex: 1 1 0; min-width: 32px; min-height: var(--v2-space-6); display: inline-grid; place-items: center; padding: 0 var(--v2-space-2); border: 0; border-radius: var(--v2-radius-pill); color: color-mix(in srgb, var(--v2-paper) 68%, transparent); background: transparent; font: 600 10px/1 var(--mono); letter-spacing: .04em; cursor: pointer; transition: color 180ms var(--v2-ease), background-color 180ms var(--v2-ease); } .theme-2026.brand-v2 .home-language__button:hover { color: var(--v2-paper); background: color-mix(in srgb, var(--v2-paper) 10%, transparent); } .theme-2026.brand-v2 .home-language__button.is-active { color: var(--v2-paper); background: var(--v2-signal); } /* Hero — dark, revenue-forward bookend with an operational call surface. */ .theme-2026.brand-v2 .home-hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--v2-nav-height)); display: grid; align-items: center; overflow: hidden; padding: clamp(var(--v2-space-9), 10vh, var(--v2-space-11)) 0; border-bottom: 1px solid color-mix(in srgb, var(--v2-paper) 18%, transparent); color: var(--v2-paper); background: radial-gradient(82% 110% at 88% 18%, color-mix(in srgb, var(--v2-signal) 20%, var(--v2-band)), transparent 58%), linear-gradient(112deg, color-mix(in srgb, var(--v2-band) 96%, var(--v2-ink)) 0%, var(--v2-band) 58%, color-mix(in srgb, var(--v2-band) 88%, var(--v2-signal)) 100%); } .theme-2026.brand-v2 .home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .24; background-image: linear-gradient(color-mix(in srgb, var(--v2-paper) 11%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--v2-paper) 11%, transparent) 1px, transparent 1px); background-size: var(--v2-space-7) var(--v2-space-7); mask-image: linear-gradient(90deg, #ffffff 32%, transparent 64%); } /* Full-bleed photographic backdrop: a phone lying face-down at night — the call nobody is answering. The dark band holds the left/copy side while the photo breathes on the right; the grid fades out gracefully into it. */ .theme-2026.brand-v2 .home-hero__photo { position: absolute; inset: 0; background: url("/assets/img/hero-unanswered-phone.webp") 74% 46% / cover no-repeat; pointer-events: none; } .theme-2026.brand-v2 .home-hero__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(96deg, var(--v2-band) 0%, color-mix(in srgb, var(--v2-band) 90%, transparent) 30%, color-mix(in srgb, var(--v2-band) 55%, transparent) 52%, color-mix(in srgb, var(--v2-band) 20%, transparent) 76%, color-mix(in srgb, var(--v2-band) 42%, transparent) 100%); } .theme-2026.brand-v2 .home-hero__inner { position: relative; z-index: 1; width: 100%; } .theme-2026.brand-v2 .home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .78fr); align-items: center; gap: var(--v2-space-8); } .theme-2026.brand-v2 .home-hero__copy { max-width: 620px; } .theme-2026.brand-v2 .home-hero .home-eyebrow { color: color-mix(in srgb, var(--v2-paper) 76%, transparent); } .theme-2026.brand-v2 .home-hero__title { margin: 0; color: var(--v2-paper); font-size: clamp(48px, 5.8vw, 70px); font-weight: 300; line-height: 1.02; letter-spacing: -.038em; text-wrap: balance; } .theme-2026.brand-v2 .home-hero__title span, .theme-2026.brand-v2 .home-hero__title strong { display: block; } .theme-2026.brand-v2 .home-hero__title > span > span, .theme-2026.brand-v2 .home-hero__title strong > span { display: inline; } .theme-2026.brand-v2 .home-hero__title strong { color: var(--v2-paper); font-weight: 500; } /* Standing direction from the discovery rounds: the accent word is "revenue". */ .theme-2026.brand-v2 .home-hero__title .home-accent { color: var(--v2-signal-bright); font-weight: 700; } .theme-2026.brand-v2 .home-hero__lede { max-width: 560px; margin-top: var(--v2-space-6); color: color-mix(in srgb, var(--v2-paper) 78%, transparent); font-size: 20px; line-height: 1.55; text-wrap: pretty; } .theme-2026.brand-v2 .home-hero .home-actions { margin-top: var(--v2-space-6); } .theme-2026.brand-v2 .home-hero .home-button--secondary { color: var(--v2-paper); background: color-mix(in srgb, var(--v2-band) 64%, transparent); border-color: color-mix(in srgb, var(--v2-paper) 42%, transparent); } .theme-2026.brand-v2 .home-hero .home-button--secondary:hover { background: color-mix(in srgb, var(--v2-paper) 10%, transparent); border-color: color-mix(in srgb, var(--v2-paper) 72%, transparent); } .theme-2026.brand-v2 .home-live-card { width: 100%; max-width: 420px; justify-self: end; padding: var(--v2-space-5); border: 1px solid color-mix(in srgb, var(--v2-paper) 22%, transparent); border-radius: var(--v2-radius-sm); color: var(--v2-paper); background: color-mix(in srgb, var(--v2-band) 72%, transparent); box-shadow: var(--v2-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .theme-2026.brand-v2 .home-live-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-4); margin-bottom: var(--v2-space-5); font: 500 10px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .theme-2026.brand-v2 .home-live-card__status { display: inline-flex; align-items: center; gap: var(--v2-space-2); } .theme-2026.brand-v2 .home-live-card__status::before, .theme-2026.brand-v2 .demo-panel__live::before { content: ""; width: 8px; height: 8px; border-radius: var(--v2-radius-pill); background: var(--v2-complete); box-shadow: 0 0 0 var(--v2-space-1) color-mix(in srgb, var(--v2-complete) 28%, transparent); animation: brand-v2-live-pulse 1.8s var(--v2-ease) infinite; } .theme-2026.brand-v2 .home-live-card__bubbles, .theme-2026.brand-v2 .demo-bubbles { display: grid; gap: var(--v2-space-3); } .theme-2026.brand-v2 .home-bubble-label, .theme-2026.brand-v2 .demo-bubble-label { margin-bottom: calc(var(--v2-space-2) * -1); color: color-mix(in srgb, currentColor 54%, transparent); font: 500 9px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .theme-2026.brand-v2 .home-bubble, .theme-2026.brand-v2 .demo-bubble { max-width: 90%; margin: 0; padding: var(--v2-space-3) var(--v2-space-4); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 14px; font-size: 14px; line-height: 1.5; } .theme-2026.brand-v2 .home-bubble--caller { justify-self: start; background: color-mix(in srgb, var(--v2-paper) 10%, transparent); } .theme-2026.brand-v2 .home-bubble--agent { justify-self: end; color: var(--v2-paper); background: var(--v2-signal); border-color: var(--v2-signal); } .theme-2026.brand-v2 .home-live-card__footer, .theme-2026.brand-v2 .demo-panel__footer { display: flex; flex-wrap: wrap; gap: var(--v2-space-2); margin-top: var(--v2-space-5); padding-top: var(--v2-space-4); border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); color: color-mix(in srgb, currentColor 74%, transparent); font: 500 10px/1.4 var(--mono); } .theme-2026.brand-v2 .home-live-card__footer span, .theme-2026.brand-v2 .demo-panel__footer span { display: inline-flex; align-items: center; gap: var(--v2-space-2); } .theme-2026.brand-v2 .home-live-card__footer span::before, .theme-2026.brand-v2 .demo-panel__footer span::before { content: "✓"; color: var(--v2-complete); } /* Outcome tags activate as the call resolves: they sit dim until the transcript has played out, then light up one after the other with the check popping in — the same conversational timing as the bubbles above them. */ @keyframes brand-v2-tag-activate { from { opacity: .28; transform: translateY(3px); } to { opacity: 1; transform: none; } } @keyframes brand-v2-check-pop { from { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } to { transform: scale(1); opacity: 1; } } .theme-2026.brand-v2 .home-live-card__footer span, .theme-2026.brand-v2 .demo-panel.is-active .demo-panel__footer span { animation: brand-v2-tag-activate 480ms var(--v2-ease) both; } .theme-2026.brand-v2 .home-live-card__footer span:nth-child(1) { animation-delay: 2100ms; } .theme-2026.brand-v2 .home-live-card__footer span:nth-child(2) { animation-delay: 2500ms; } .theme-2026.brand-v2 .demo-panel.is-active .demo-panel__footer span:nth-child(1) { animation-delay: 1900ms; } .theme-2026.brand-v2 .demo-panel.is-active .demo-panel__footer span:nth-child(2) { animation-delay: 2300ms; } .theme-2026.brand-v2 .home-live-card__footer span::before, .theme-2026.brand-v2 .demo-panel.is-active .demo-panel__footer span::before { animation: brand-v2-check-pop 420ms var(--v2-ease) both; animation-delay: inherit; } /* Demo panels borrow the hero transcript's load-in: bubbles rise in turn when a tab becomes active, so switching industries replays the conversation. */ .theme-2026.brand-v2 .demo-panel.is-active .demo-bubbles > * { animation: brand-v2-bubble-in 560ms var(--v2-ease) both; } .theme-2026.brand-v2 .demo-panel.is-active .demo-bubbles > :nth-child(-n + 2) { animation-delay: 160ms; } .theme-2026.brand-v2 .demo-panel.is-active .demo-bubbles > :nth-child(n + 3) { animation-delay: 520ms; } .theme-2026.brand-v2 .demo-panel.is-active .demo-bubbles > :nth-child(n + 5) { animation-delay: 880ms; } .theme-2026.brand-v2 .demo-panel.is-active .demo-bubbles > :nth-child(n + 7) { animation-delay: 1240ms; } /* ---- Hero call-card motion ------------------------------------------------ All three are pure CSS with no JS/observer gate: `opacity: 0` lives ONLY in the keyframe `from` step, so with CSS-but-no-JS (or animations disabled) the card and transcript render at their normal opacity. Only opacity/transform animate, so nothing reflows. The reduced-motion block at the end of this file collapses duration AND delay, which reveals everything instantly. */ @keyframes brand-v2-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--v2-complete) 34%, transparent); } 50% { opacity: .74; transform: scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--v2-complete) 0%, transparent); } } @keyframes brand-v2-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes brand-v2-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .theme-2026.brand-v2 .home-live-card { animation: brand-v2-card-in 900ms var(--v2-ease) both; } /* Label + bubble are separate grid children of one turn, so they share a delay and rise as a unit. Four turns, 360ms apart, starting once the card has mostly landed, so the back-and-forth reads at a conversational pace rather than snapping in. Runs once — the transcript is content, not a loop. */ .theme-2026.brand-v2 .home-live-card__bubbles > * { animation: brand-v2-bubble-in 560ms var(--v2-ease) both; } .theme-2026.brand-v2 .home-live-card__bubbles > :nth-child(-n + 2) { animation-delay: 360ms; } .theme-2026.brand-v2 .home-live-card__bubbles > :nth-child(n + 3) { animation-delay: 720ms; } .theme-2026.brand-v2 .home-live-card__bubbles > :nth-child(n + 5) { animation-delay: 1080ms; } .theme-2026.brand-v2 .home-live-card__bubbles > :nth-child(n + 7) { animation-delay: 1440ms; } /* Hear-it-live: real, callable demo lines below the demo stage. The quiet proof row — real numbers, not decoration. */ .theme-2026.brand-v2 .hear-live { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v2-space-4); margin-top: var(--v2-space-8); padding-top: var(--v2-space-6); border-top: 1px solid var(--v2-rule); } .theme-2026.brand-v2 .hear-live__label { margin: 0; color: var(--v2-quiet); font: 500 11px/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; } .theme-2026.brand-v2 .hear-live__lines { display: flex; flex-wrap: wrap; gap: var(--v2-space-3) var(--v2-space-6); } .theme-2026.brand-v2 .hear-live__line { display: inline-flex; align-items: baseline; gap: var(--v2-space-2); text-decoration: none; color: var(--v2-ink); font-size: 14px; transition: color 200ms var(--v2-ease); } .theme-2026.brand-v2 .hear-live__line span { color: var(--v2-quiet); transition: color 200ms var(--v2-ease); } .theme-2026.brand-v2 .hear-live__line b { font-family: var(--display); font-weight: 500; letter-spacing: .01em; } .theme-2026.brand-v2 .hear-live__line:hover { color: var(--v2-signal); } .theme-2026.brand-v2 .hear-live__line:hover span { color: var(--v2-signal); } /* Marketing sections and information cards. */ .theme-2026.brand-v2 .home-section { padding: clamp(var(--v2-space-9), 10vw, var(--v2-space-11)) 0; border-bottom: 1px solid var(--v2-rule); background: var(--v2-ground); } .theme-2026.brand-v2 .home-section--paper { background: var(--v2-paper); } .theme-2026.brand-v2 .home-section__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .62fr); align-items: end; gap: var(--v2-space-8); margin-bottom: var(--v2-space-7); } .theme-2026.brand-v2 .home-section__head--single { grid-template-columns: 1fr; align-items: start; gap: var(--v2-space-4); } .theme-2026.brand-v2 .home-section__head h2, .theme-2026.brand-v2 .home-cta-band h2 { max-width: 760px; margin: 0; color: var(--v2-ink); font-size: clamp(40px, 4.6vw, 60px); font-weight: 300; line-height: .98; letter-spacing: -.035em; text-wrap: balance; } .theme-2026.brand-v2 .home-section__head h2 strong, .theme-2026.brand-v2 .home-cta-band h2 strong { font-weight: 500; } .theme-2026.brand-v2 .home-section__intro { max-width: 680px; color: var(--v2-quiet); font-size: 17px; line-height: 1.6; } .theme-2026.brand-v2 .home-card-grid { display: grid; gap: var(--v2-space-5); } .theme-2026.brand-v2 .home-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .theme-2026.brand-v2 .home-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .theme-2026.brand-v2 .home-info-card { display: flex; flex-direction: column; gap: var(--v2-space-4); min-width: 0; padding: var(--v2-space-6); border: 1px solid var(--v2-rule); border-radius: var(--v2-radius-sm); background: var(--v2-paper); } .theme-2026.brand-v2 .home-section--paper .home-info-card { background: var(--v2-ground); } .theme-2026.brand-v2 .home-info-card h3 { margin: 0; color: var(--v2-ink); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; } .theme-2026.brand-v2 .home-info-card p { color: var(--v2-quiet); font-size: 15px; line-height: 1.55; } .theme-2026.brand-v2 .home-icon-chip { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--v2-radius-sm); color: var(--v2-signal); background: color-mix(in srgb, var(--v2-signal) 12%, transparent); } .theme-2026.brand-v2 .home-icon-chip svg { width: var(--v2-space-5); height: var(--v2-space-5); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .theme-2026.brand-v2 .home-cost-card { gap: var(--v2-space-3); } .theme-2026.brand-v2 .home-cost-footer { margin-top: var(--v2-space-7); color: var(--v2-ink); font-size: 18px; font-weight: 500; line-height: 1.55; } /* Progressive-enhancement demo tabs: every panel is visible by default. JS adds .is-enhanced only after listeners are installed. */ .theme-2026.brand-v2 .home-demo__layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: var(--v2-space-8); } .theme-2026.brand-v2 .home-demo__intro { position: sticky; top: calc(var(--v2-nav-height) + var(--v2-space-5)); } .theme-2026.brand-v2 .home-demo .home-section__head { margin-bottom: var(--v2-space-6); } .theme-2026.brand-v2 .demo-tabs { display: flex; flex-wrap: wrap; gap: var(--v2-space-3); } .theme-2026.brand-v2 .demo-tab { min-height: 44px; padding: 0 var(--v2-space-5); border: 1px solid var(--v2-rule-strong); border-radius: var(--v2-radius-pill); color: var(--v2-quiet); background: var(--v2-paper); font-family: var(--display); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 220ms var(--v2-ease), border-color 220ms var(--v2-ease), box-shadow 220ms var(--v2-ease), color 220ms var(--v2-ease); } .theme-2026.brand-v2 .demo-tab:hover { color: var(--v2-ink); background: var(--v2-paper-soft); } .theme-2026.brand-v2 .demo-tab[aria-selected="true"] { color: var(--v2-signal); border-color: var(--v2-signal); box-shadow: inset 0 0 0 1px var(--v2-signal); } .theme-2026.brand-v2 .demo-stage { display: grid; gap: var(--v2-space-5); } .theme-2026.brand-v2 .demo-panel { display: block; min-width: 0; padding: var(--v2-space-6); border: 1px solid var(--v2-rule); border-radius: var(--v2-radius-sm); background: var(--v2-paper); box-shadow: var(--v2-shadow); } .theme-2026.brand-v2 .home-demo.is-enhanced .demo-panel { display: none; } .theme-2026.brand-v2 .home-demo.is-enhanced .demo-panel.is-active { display: block; } .theme-2026.brand-v2 .demo-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-4); margin-bottom: var(--v2-space-5); color: var(--v2-ink); font: 500 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; } .theme-2026.brand-v2 .demo-panel__live { display: inline-flex; align-items: center; gap: var(--v2-space-2); } .theme-2026.brand-v2 .demo-panel__tag { padding: var(--v2-space-1) var(--v2-space-3); border: 1px solid var(--v2-rule); border-radius: var(--v2-radius-pill); color: var(--v2-quiet); background: var(--v2-paper-soft); } .theme-2026.brand-v2 .demo-bubble-label { color: var(--v2-quiet); } .theme-2026.brand-v2 .demo-bubble { max-width: 88%; border-color: var(--v2-rule); font-size: 15px; } .theme-2026.brand-v2 .demo-bubble--caller { justify-self: start; color: var(--v2-ink); background: var(--v2-paper-soft); } .theme-2026.brand-v2 .demo-bubble--agent { justify-self: end; color: var(--v2-paper); background: var(--v2-signal); border-color: var(--v2-signal); } .theme-2026.brand-v2 .demo-panel__footer { color: var(--v2-quiet); border-top-color: var(--v2-rule); } /* Integration icon wall. Official App Store artwork (see .omo/evidence/integration-app-icons.json for sources). One continuous grid, no visible category labels or brand names at rest. */ .theme-2026.brand-v2 .integration-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(var(--v2-space-3), 3.5vw, var(--v2-space-5)); align-items: center; justify-items: center; margin-top: var(--v2-space-3); list-style: none; padding: 0; } /* Equal grid slots; tile is centered inside each cell. */ .theme-2026.brand-v2 .integration-icon { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--v2-space-2) 0; } /* Fixed display box with one shared mask/radius/edge/shadow system. Hairline edge keeps white/near-white icons visible against the paper section background. */ .theme-2026.brand-v2 .integration-icon__tile { position: relative; display: block; width: 72px; height: 72px; border-radius: 17px; overflow: hidden; background: var(--v2-paper, #fff); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06); transition: transform .25s var(--v2-ease), box-shadow .25s var(--v2-ease); } /* No recoloring; artwork stays exactly as supplied. */ .theme-2026.brand-v2 .integration-icon__tile img { display: block; width: 100%; height: 100%; object-fit: cover; } .theme-2026.brand-v2 .integration-icon:hover .integration-icon__tile, .theme-2026.brand-v2 .integration-icon:focus-within .integration-icon__tile { transform: translateY(-2px) scale(1.03); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 18px rgba(0, 0, 0, 0.10); } /* Tablet: same 7-column rhythm with slightly smaller icons. */ @media (max-width: 1120px) { .theme-2026.brand-v2 .integration-icon__tile { width: 68px; height: 68px; border-radius: 16px; } } /* Mobile: 2-column grid so 14 icons fill 7 even rows with no orphan. */ @media (max-width: 680px) { .theme-2026.brand-v2 .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-2026.brand-v2 .integration-icon__tile { width: 64px; height: 64px; border-radius: 15px; } } /* ===== Call player: one call, four outcomes =============================== A focused player — one large beat at a time (Answers, Understands, Acts, Records) with a slim spine for orientation. Slow cross-fades, 3.2s dwell. Without JS or enhancement the four beats stack fully visible; reduced motion keeps instant, click-driven switching. */ .theme-2026.brand-v2 #how .call-player { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: var(--v2-space-6); align-items: stretch; } .theme-2026.brand-v2 #how .call-player__stage { position: relative; border: 1px solid var(--v2-rule-strong); border-radius: 4px; background: var(--v2-paper); box-shadow: var(--v2-shadow); overflow: hidden; } .theme-2026.brand-v2 #how .call-beat { padding: clamp(28px, 4vw, 48px); } .theme-2026.brand-v2 #how .call-beat__label { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--v2-space-5); color: var(--v2-faint); font: 500 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; } .theme-2026.brand-v2 #how .call-beat__label span { color: var(--v2-signal); } .theme-2026.brand-v2 #how .call-beat__hero { margin: 0; color: var(--v2-ink); font-size: clamp(34px, 4.2vw, 54px); font-weight: 400; letter-spacing: -.03em; line-height: 1.04; } .theme-2026.brand-v2 #how .call-beat__hero.mono { font-family: var(--mono); font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.02em; } .theme-2026.brand-v2 #how .call-beat__note { max-width: 460px; margin: var(--v2-space-4) 0 0; color: var(--v2-quiet); font-size: 15px; line-height: 1.55; } .theme-2026.brand-v2 #how .call-beat__quote { max-width: 560px; margin: var(--v2-space-6) 0 0; padding: var(--v2-space-4) var(--v2-space-5); border: 1px solid var(--v2-rule); border-left: 2px solid var(--v2-signal); color: var(--v2-ink); font-size: 16px; line-height: 1.5; } .theme-2026.brand-v2 #how .call-beat__quote--agent em { color: var(--v2-signal); font-style: normal; } .theme-2026.brand-v2 #how .call-beat__rows { display: grid; gap: 0; margin: var(--v2-space-5) 0 0; border-top: 1px solid var(--v2-rule); } .theme-2026.brand-v2 #how .call-beat__rows > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--v2-rule); align-items: baseline; } .theme-2026.brand-v2 #how .call-beat__rows dt { color: var(--v2-faint); font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; } .theme-2026.brand-v2 #how .call-beat__rows dd { margin: 0; color: var(--v2-ink); font-size: 15px; } .theme-2026.brand-v2 #how .call-beat__rows dd.ok { color: var(--v2-complete); font-family: var(--mono); font-size: 13px; } .theme-2026.brand-v2 #how .call-beat__slots { display: flex; gap: var(--v2-space-2); margin-top: var(--v2-space-5); } .theme-2026.brand-v2 #how .call-beat__slots span { min-width: 64px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--v2-rule); color: var(--v2-quiet); font: 500 13px/1 var(--mono); } .theme-2026.brand-v2 #how .call-beat__slots .chosen { border-color: var(--v2-signal); background: var(--v2-signal); color: #fff; font-weight: 600; } .theme-2026.brand-v2 #how .call-beat__result { display: flex; align-items: center; justify-content: space-between; max-width: 460px; margin: var(--v2-space-5) 0 0; padding-top: var(--v2-space-4); border-top: 1px solid var(--v2-rule); color: var(--v2-ink); font-size: 15px; } .theme-2026.brand-v2 #how .call-beat__result b { color: var(--v2-complete); font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; } .theme-2026.brand-v2 #how .call-beat__records { margin-top: var(--v2-space-2); border-top: 1px solid var(--v2-rule); } .theme-2026.brand-v2 #how .call-beat__records > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--v2-rule); } .theme-2026.brand-v2 #how .call-beat__records span { color: var(--v2-ink); font-size: 15px; } .theme-2026.brand-v2 #how .call-beat__records b { color: var(--v2-complete); font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; } .theme-2026.brand-v2 #how .call-beat__handoff { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: var(--v2-space-5) 0 0; padding: var(--v2-space-4) var(--v2-space-5); border: 1px solid color-mix(in srgb, var(--v2-handoff) 45%, transparent); color: var(--v2-ink); font-size: 15px; } .theme-2026.brand-v2 #how .call-beat__handoff span { color: var(--v2-handoff); font: 500 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; } .theme-2026.brand-v2 #how .call-player__replay { position: absolute; right: 20px; bottom: 16px; padding: 8px 0; border: 0; background: none; color: var(--v2-quiet); font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; transition: color 200ms var(--v2-ease); } .theme-2026.brand-v2 #how .call-player__replay:hover { color: var(--v2-signal); } .theme-2026.brand-v2 #how .call-player__replay::before { content: "\21BA "; color: var(--v2-signal); } /* Spine */ .theme-2026.brand-v2 #how .call-player__spine { position: relative; display: grid; align-content: space-between; gap: var(--v2-space-3); margin: 0; padding: 0 0 0 var(--v2-space-7); list-style: none; } .theme-2026.brand-v2 #how .call-player__rail { position: absolute; left: 2px; top: 6px; bottom: 6px; width: 1px; background: var(--v2-rule-strong); } .theme-2026.brand-v2 #how .call-player__rail-fill { display: block; width: 1px; height: 100%; background: linear-gradient(180deg, var(--v2-signal) 0%, var(--v2-signal) 82%, var(--v2-complete) 100%); transform: scaleY(var(--fill, 0)); transform-origin: top center; transition: transform 900ms var(--v2-ease); } .theme-2026.brand-v2 #how .spine-step { position: relative; display: grid; gap: 6px; width: 100%; padding: var(--v2-space-4) var(--v2-space-4) var(--v2-space-4) var(--v2-space-7); border: 1px solid transparent; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; transition: background-color 260ms var(--v2-ease), border-color 260ms var(--v2-ease); } .theme-2026.brand-v2 #how .spine-step::before { content: ""; position: absolute; left: calc(-1 * var(--v2-space-7) - 6px); top: var(--v2-space-5); width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--v2-rule-strong); background: var(--v2-ground); transition: border-color 320ms var(--v2-ease), background-color 320ms var(--v2-ease), box-shadow 320ms var(--v2-ease); } .theme-2026.brand-v2 #how .spine-step .spine-idx { color: var(--v2-faint); font: 500 10px/1 var(--mono); letter-spacing: .08em; } .theme-2026.brand-v2 #how .spine-step .spine-name { color: var(--v2-ink); font-size: 18px; font-weight: 500; letter-spacing: -.02em; } .theme-2026.brand-v2 #how .spine-step .spine-note { color: var(--v2-quiet); font-size: 12.5px; line-height: 1.4; } .theme-2026.brand-v2 #how .spine-step:hover { background: color-mix(in srgb, var(--v2-paper) 88%, var(--v2-signal) 12%); } .theme-2026.brand-v2 #how .spine-step.is-done::before { border-color: var(--v2-signal); background: var(--v2-signal); } .theme-2026.brand-v2 #how .spine-step.is-active { background: var(--v2-paper); border-color: var(--v2-rule-strong); box-shadow: var(--v2-shadow-soft); } .theme-2026.brand-v2 #how .spine-step.is-active::before { border-color: var(--v2-signal); background: var(--v2-paper); box-shadow: inset 0 0 0 2.5px var(--v2-signal); } .theme-2026.brand-v2 #how .spine-step.is-active .spine-name { color: var(--v2-signal); } .theme-2026.brand-v2 #how .spine-step:last-child.is-done::before, .theme-2026.brand-v2 #how .spine-step:last-child.is-active::before { border-color: var(--v2-signal); background: var(--v2-signal); } /* Enhanced (JS) mode: one beat visible at a time, slow cross-fade. */ .theme-2026.brand-v2 #how .call-player.is-enhanced .call-player__stage { min-height: 480px; } .theme-2026.brand-v2 #how .call-player.is-enhanced .call-beat { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 640ms var(--v2-ease), transform 640ms var(--v2-ease); } .theme-2026.brand-v2 #how .call-player.is-enhanced .call-beat.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; } .theme-2026.brand-v2 #how .call-player.is-enhanced .call-player__replay[hidden] { display: none; } @media (max-width: 960px) { .theme-2026.brand-v2 #how .call-player { grid-template-columns: 1fr; } .theme-2026.brand-v2 #how .call-player__spine { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v2-space-2); padding: var(--v2-space-5) 0 0; order: -1; } .theme-2026.brand-v2 #how .call-player__rail { left: 6px; right: 6px; top: 0; bottom: auto; width: auto; height: 1px; } .theme-2026.brand-v2 #how .call-player__rail-fill { width: 100%; height: 1px; background: linear-gradient(90deg, var(--v2-signal) 0%, var(--v2-signal) 82%, var(--v2-complete) 100%); transform: scaleX(var(--fill, 0)); transform-origin: left center; } .theme-2026.brand-v2 #how .spine-step { padding: var(--v2-space-4) var(--v2-space-3) var(--v2-space-3); } .theme-2026.brand-v2 #how .spine-step::before { display: none; } .theme-2026.brand-v2 #how .spine-step .spine-note { display: none; } .theme-2026.brand-v2 #how .call-player.is-enhanced .call-player__stage { min-height: 520px; } } /* Two-plan pricing. */ .theme-2026.brand-v2 .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-space-5); } .theme-2026.brand-v2 .plan-card { display: flex; flex-direction: column; gap: var(--v2-space-5); min-width: 0; padding: var(--v2-space-6); border: 1px solid var(--v2-rule); border-radius: var(--v2-radius-sm); background: var(--v2-ground); } /* Same light surface as the base card so both options read as equally deliberate; emphasis comes from the signal border, tag and lift alone. */ .theme-2026.brand-v2 .plan-card--featured { border-color: var(--v2-signal); box-shadow: var(--v2-shadow); } .theme-2026.brand-v2 .plan-tag { display: inline-flex; align-self: flex-start; padding: var(--v2-space-1) var(--v2-space-3); border-radius: var(--v2-radius-pill); color: var(--v2-quiet); background: var(--v2-paper-soft); font: 500 10px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; } .theme-2026.brand-v2 .plan-card--featured .plan-tag { color: var(--v2-paper); background: var(--v2-signal); } .theme-2026.brand-v2 .plan-card h3 { margin: 0; color: var(--v2-ink); font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; } .theme-2026.brand-v2 .plan-sub { color: var(--v2-quiet); font-size: 16px; line-height: 1.55; } .theme-2026.brand-v2 .plan-card ul { display: grid; gap: var(--v2-space-3); margin: 0; padding: 0; list-style: none; } .theme-2026.brand-v2 .plan-card li { position: relative; padding-left: var(--v2-space-5); color: var(--v2-quiet); font-size: 15px; line-height: 1.5; } /* Drawn check rather than a "✓" glyph: two borders rotated 45deg, the same technique as the FAQ chevron. Transparent ground, green stroke only — no filled block behind the tick. Decorative; the list text carries meaning. */ .theme-2026.brand-v2 .plan-card li::before { content: ""; position: absolute; left: 3px; top: .3em; /* centers the 9px box on the first line's cap height */ width: 5px; height: 9px; border-right: 2px solid var(--v2-complete); border-bottom: 2px solid var(--v2-complete); transform: rotate(45deg); } .theme-2026.brand-v2 .plan-card__cta { margin-top: auto; padding-top: var(--v2-space-2); } /* Native disclosure FAQ. */ .theme-2026.brand-v2 .faq-list { border-top: 1px solid var(--v2-rule); } .theme-2026.brand-v2 .faq-item { border-bottom: 1px solid var(--v2-rule); } .theme-2026.brand-v2 .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--v2-space-5); padding: var(--v2-space-5) 0; color: var(--v2-ink); font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; list-style: none; cursor: pointer; transition: color 220ms var(--v2-ease); } .theme-2026.brand-v2 .faq-item summary:hover { color: var(--v2-signal); } .theme-2026.brand-v2 .faq-item summary::-webkit-details-marker { display: none; } .theme-2026.brand-v2 .faq-item summary::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 220ms var(--v2-ease); } .theme-2026.brand-v2 .faq-item[open] summary::after { transform: rotate(-135deg); } .theme-2026.brand-v2 .faq-item p { max-width: 760px; margin: 0; padding: 0 0 var(--v2-space-6); color: var(--v2-quiet); font-size: 16px; line-height: 1.6; } /* Dark final action band mirrors the hero without repeating its card UI. */ .theme-2026.brand-v2 .home-cta-band { min-height: 72svh; display: grid; align-items: center; padding: var(--v2-space-11) 0; color: var(--v2-paper); background: var(--v2-band); } .theme-2026.brand-v2 .home-cta-band__inner { width: 100%; max-width: var(--v2-content-max); } .theme-2026.brand-v2 .home-cta-band .home-eyebrow { color: color-mix(in srgb, var(--v2-paper) 66%, transparent); } .theme-2026.brand-v2 .home-cta-band h2 { max-width: 980px; color: var(--v2-paper); font-size: clamp(52px, 6.8vw, 88px); line-height: .96; } .theme-2026.brand-v2 .home-cta-band h2 strong { color: color-mix(in srgb, var(--v2-signal) 62%, var(--v2-paper)); } .theme-2026.brand-v2 .home-cta-band__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--v2-space-7); margin-top: var(--v2-space-7); padding-top: var(--v2-space-6); border-top: 1px solid color-mix(in srgb, var(--v2-paper) 20%, transparent); } .theme-2026.brand-v2 .home-cta-band__foot > p { max-width: 620px; color: color-mix(in srgb, var(--v2-paper) 68%, transparent); font-size: 18px; line-height: 1.55; } @media (max-width: 1100px) { .theme-2026.brand-v2 .home-section__head { grid-template-columns: 1fr; align-items: start; gap: var(--v2-space-5); } .theme-2026.brand-v2 .home-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Narrow desktop: drop the Login link and tighten the CTA's side padding so the right cluster clears the menu. Size/case now come from the base CTA rule. */ @media (min-width: 961px) and (max-width: 1300px) { .theme-2026.brand-v2 .nav-2026-desktop .nav-2026__login { display: none; } .theme-2026.brand-v2 .nav-2026-desktop .nav-2026__cta { padding-inline: var(--v2-space-4) !important; } } @media (max-width: 960px) { .theme-2026.brand-v2 .home-hero { min-height: auto; } .theme-2026.brand-v2 .home-hero__photo { display: none; } .theme-2026.brand-v2 .home-hero__grid { grid-template-columns: 1fr; gap: var(--v2-space-7); } .theme-2026.brand-v2 .home-hero__copy { max-width: 680px; } .theme-2026.brand-v2 .home-live-card { max-width: none; justify-self: stretch; } .theme-2026.brand-v2 .home-demo__layout { grid-template-columns: 1fr; gap: var(--v2-space-7); } .theme-2026.brand-v2 .home-demo__intro { position: static; } .theme-2026.brand-v2 .plan-grid { grid-template-columns: 1fr; } .theme-2026.brand-v2 .home-cta-band { min-height: auto; } .theme-2026.brand-v2 .home-cta-band__foot { grid-template-columns: 1fr; align-items: start; gap: var(--v2-space-6); } } @media (max-width: 760px) { .theme-2026.brand-v2 .home-section, .theme-2026.brand-v2 .home-cta-band { padding: var(--v2-space-9) 0; } .theme-2026.brand-v2 .home-hero { padding: var(--v2-space-9) 0; } .theme-2026.brand-v2 .home-hero__title { font-size: clamp(42px, 13vw, 58px); } .theme-2026.brand-v2 .home-hero__lede { font-size: 18px; } .theme-2026.brand-v2 .home-section__head h2 { font-size: clamp(36px, 10vw, 48px); } .theme-2026.brand-v2 .home-card-grid--three { grid-template-columns: 1fr; } .theme-2026.brand-v2 .home-cta-band h2 { font-size: clamp(48px, 14vw, 68px); } } @media (max-width: 480px) { .theme-2026.brand-v2 .nav-2026-mobile__cta { display: none !important; } .theme-2026.brand-v2 .home-hero, .theme-2026.brand-v2 .home-section, .theme-2026.brand-v2 .home-cta-band { padding: var(--v2-space-8) 0; } .theme-2026.brand-v2 .home-eyebrow { font-size: 9px; } .theme-2026.brand-v2 .home-eyebrow::before { width: 28px; } .theme-2026.brand-v2 .home-actions { display: grid; width: 100%; } .theme-2026.brand-v2 .home-button { width: 100%; padding-inline: var(--v2-space-4); white-space: normal; } .theme-2026.brand-v2 .home-hero__proof { display: grid; } .theme-2026.brand-v2 .home-live-card, .theme-2026.brand-v2 .demo-panel, .theme-2026.brand-v2 .home-info-card, .theme-2026.brand-v2 .plan-card { padding: var(--v2-space-5); } .theme-2026.brand-v2 .home-card-grid--four { grid-template-columns: 1fr; } .theme-2026.brand-v2 .demo-tabs { display: grid; grid-template-columns: 1fr; } .theme-2026.brand-v2 .demo-tab { width: 100%; } .theme-2026.brand-v2 .home-bubble, .theme-2026.brand-v2 .demo-bubble { max-width: 95%; font-size: 14px; } .theme-2026.brand-v2 .faq-item summary { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .theme-2026.brand-v2 *, .theme-2026.brand-v2 *::before, .theme-2026.brand-v2 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; /* Staggered reveals carry delays up to 1440ms; without this reset the hero transcript would stay invisible for that long under reduced motion. The nav dots are ::before pseudo-elements, hence the selector list: the open-state pulse collapses to a single .01ms run whose 100% keyframe is opacity 1 / scale 1, so the dot stays fully visible and static. */ animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============================================================ REUSABLE SECTION COMPONENTS — for any brand-v2 page Compose pages from these patterns. Each is self-contained and works inside .home-section / .home-section--paper. ============================================================ */ /* Split feature: copy left, visual right (or reversed). */ .theme-2026.brand-v2 .home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--v2-space-8); align-items: center; } .theme-2026.brand-v2 .home-split--reverse .home-split__copy { order: 2; } @media (max-width: 960px) { .theme-2026.brand-v2 .home-split { grid-template-columns: 1fr; gap: var(--v2-space-7); } .theme-2026.brand-v2 .home-split--reverse .home-split__copy { order: 0; } } .theme-2026.brand-v2 .home-split__copy h2 { margin: 0; font-size: clamp(36px, 4.2vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -.035em; } .theme-2026.brand-v2 .home-split__copy h2 strong { font-weight: 500; } .theme-2026.brand-v2 .home-split__copy p { margin: var(--v2-space-5) 0 0; color: var(--v2-quiet); font-size: 17px; line-height: 1.6; max-width: 520px; } /* Steps timeline: numbered process. */ .theme-2026.brand-v2 .home-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v2-space-5); counter-reset: step; } @media (max-width: 960px) { .theme-2026.brand-v2 .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .theme-2026.brand-v2 .home-steps { grid-template-columns: 1fr; } } .theme-2026.brand-v2 .home-step { counter-increment: step; display: flex; flex-direction: column; gap: var(--v2-space-3); } .theme-2026.brand-v2 .home-step::before { content: "0" counter(step); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--v2-signal-bright); } .theme-2026.brand-v2 .home-step h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.01em; } .theme-2026.brand-v2 .home-step p { margin: 0; color: var(--v2-quiet); font-size: 14px; line-height: 1.55; } /* Stat block: big qualitative statement. */ .theme-2026.brand-v2 .home-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-space-6); } @media (max-width: 760px) { .theme-2026.brand-v2 .home-stat-grid { grid-template-columns: 1fr; } } .theme-2026.brand-v2 .home-stat { display: flex; flex-direction: column; gap: var(--v2-space-2); padding: var(--v2-space-5) 0; border-top: 1px solid var(--v2-rule); } .theme-2026.brand-v2 .home-stat__label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-faint); } .theme-2026.brand-v2 .home-stat__value { font-size: clamp(28px, 3.2vw, 42px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; color: var(--v2-ink); } .theme-2026.brand-v2 .home-stat__detail { color: var(--v2-quiet); font-size: 14px; line-height: 1.5; } /* Logo strip: powered-by / partners row. */ .theme-2026.brand-v2 .home-logos { display: flex; align-items: center; justify-content: center; gap: clamp(var(--v2-space-5), 4vw, var(--v2-space-8)); flex-wrap: wrap; margin-top: var(--v2-space-7); } .theme-2026.brand-v2 .home-logos__card { min-width: 160px; min-height: 90px; display: grid; place-items: center; border: 1px solid var(--v2-rule); background: rgba(255, 255, 255, 0.02); } .theme-2026.brand-v2 .home-logos__card img { max-width: 120px; max-height: 40px; opacity: 0.9; } .theme-2026.brand-v2 .home-logos__plus { color: var(--v2-signal-bright); font-size: 32px; font-weight: 600; } /* Inline email form (for CTA bands). */ .theme-2026.brand-v2 .home-form-inline { display: flex; gap: var(--v2-space-3); flex-wrap: wrap; align-items: center; } .theme-2026.brand-v2 .home-form-inline input[type="email"] { min-height: 54px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 15px; font-family: var(--v2-display); min-width: 260px; } .theme-2026.brand-v2 .home-form-inline input[type="email"]:focus { outline: 3px solid var(--v2-focus); outline-offset: 2px; } .theme-2026.brand-v2 .home-form-inline .cf-turnstile { margin-top: var(--v2-space-3); opacity: 0.7; transform: scale(0.85); transform-origin: left center; } /* Form card: full intake form inside a white v2 panel. */ .theme-2026.brand-v2 .home-form-card { display: flex; flex-direction: column; gap: var(--v2-space-4); } .theme-2026.brand-v2 .home-form-card .generalform.w-form { margin: 0; } .theme-2026.brand-v2 .home-form-card .generalformcontainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v2-space-3); } .theme-2026.brand-v2 .home-form-card .generalformcontainer > label.sr-only { position: absolute; } .theme-2026.brand-v2 .home-form-card .inputall { width: auto; margin: 0; min-width: 0; } .theme-2026.brand-v2 .home-form-card .inputform { width: 100%; min-height: 54px; margin: 0; padding: 14px 15px; border: 1px solid var(--v2-rule-strong); border-radius: var(--v2-radius-sm); background: var(--v2-ground); color: var(--v2-ink); font-family: var(--mono); font-size: 14px; line-height: 1.35; } .theme-2026.brand-v2 .home-form-card .inputform::placeholder { color: var(--v2-faint); } .theme-2026.brand-v2 .home-form-card .inputform:focus { outline: none; border-color: var(--v2-signal-bright); box-shadow: 0 0 0 3px rgba(94, 85, 253, 0.18); } .theme-2026.brand-v2 .home-form-card textarea.inputform { grid-column: 1 / -1; min-height: 148px; resize: vertical; } .theme-2026.brand-v2 .home-form-card .errorbanner, .theme-2026.brand-v2 .home-form-card .btnfake, .theme-2026.brand-v2 .home-form-card .btnsforms::before, .theme-2026.brand-v2 .home-form-card .btnsforms::after { display: none !important; content: none !important; } .theme-2026.brand-v2 .home-form-card .cf-turnstile, .theme-2026.brand-v2 .home-form-card .btnsforms { grid-column: 1 / -1; } .theme-2026.brand-v2 .home-form-card .btnsforms { margin: 0; position: relative; } .theme-2026.brand-v2 .home-form-card .home-button { width: 100%; justify-content: center; } .theme-2026.brand-v2 .home-form-card .w-form-done, .theme-2026.brand-v2 .home-form-card .w-form-fail { display: none; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--v2-rule); border-radius: var(--v2-radius-sm); background: var(--v2-paper-soft); color: var(--v2-ink); font-family: var(--mono); font-size: 13px; } .theme-2026.brand-v2 .home-form-card .w-form-fail { border-color: rgba(255, 122, 145, 0.34); color: #b23b4e; } @media (max-width: 600px) { .theme-2026.brand-v2 .home-form-card .generalformcontainer { grid-template-columns: 1fr; } } /* Brief list: eyebrow-style labels + short statements. Adapts to dark hero or light sections via existing tokens. */ .theme-2026.brand-v2 .home-brief-list { display: grid; gap: var(--v2-space-3); margin-top: var(--v2-space-6); } .theme-2026.brand-v2 .home-brief-list div { padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--v2-radius-sm); background: var(--surface); color: var(--muted); font-family: var(--mono); font-size: 13px; line-height: 1.45; } .theme-2026.brand-v2 .home-brief-list span { display: block; margin-bottom: 5px; color: var(--indigo-bright); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }