/* Block Gemini — global typography + spacing token system. * * Loaded last in by scripts/swap-legacy-runtime.py. * Token-based authoritative scale: every rule below references * the :root variables, so adjusting any token cascades site-wide. * * Semantic tokens (per spec): * --text-display hero only 72 px / 1.05 / 700 * --text-h1 page titles only 56 px / 1.1 / 700 * --text-h2 section headings 40 px / 1.2 / 700 * --text-h3 sub-headings 30 px / 1.2 / 600 * --text-h4 card / tile headings 24 px / 1.3 / 600 * --text-body-lg hero sub / lead 20 px / 1.6 / 400 * --text-body paragraph text 16 px / 1.7 / 400 * --text-small secondary UI text 14 px / 1.6 / 400 * --text-caption metadata / eyebrow 12 px / 1.5 / 500 (mono uppercase) * * Spacing scale (4 / 8 px modular): * --space-1 …12 4 → 112 px * * /gem is preserved via Section 19 at the very end of this stylesheet * (later source order + matching specificity wins over earlier rules). */ /* ============================================================ 0) DESIGN TOKENS — single source of truth for the whole site ============================================================ */ :root { /* ---- Type sizes (in rem, base 16px) — REFINED HIERARCHY ---- Tightened scale: only true hero headlines feel large; section titles are moderate; everything below is noticeably smaller so supporting content never competes with headlines. Polished-SaaS restraint (cf. Linear / Stripe / Vercel type scales). */ --fs-display: 3.5rem; /* 56px — TRUE HERO ONLY */ --fs-h1: 2.5rem; /* 40px — page hero h1 */ --fs-h2: 1.875rem; /* 30px — section title (moderate) */ --fs-h3: 1.375rem; /* 22px — sub-heading */ --fs-h4: 1.0625rem; /* 17px — card / tile / block title */ --fs-body-lg: 1.125rem; /* 18px — lead / hero sub */ --fs-body: 1rem; /* 16px — paragraph */ --fs-small: 0.875rem; /* 14px — secondary / supporting */ --fs-caption: 0.75rem; /* 12px — caption / eyebrow / label */ /* ---- Mobile floor (used as lower bound of clamp) ---- */ --fs-display-min: 2.25rem; /* 36px */ --fs-h1-min: 1.875rem; /* 30px */ --fs-h2-min: 1.5rem; /* 24px */ --fs-h3-min: 1.125rem; /* 18px */ --fs-h4-min: 0.9375rem; /* 15px */ --fs-body-lg-min: 1rem; /* 16px */ /* ---- Line heights — tightened, less airy ---- */ --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.25; --lh-h4: 1.3; --lh-body-lg: 1.55; --lh-body: 1.6; --lh-small: 1.55; --lh-caption: 1.4; /* ---- Font weights ---- (refined for premium reading — display 600, not 700) */ --fw-bold: 600; --fw-semibold: 600; --fw-medium: 500; --fw-regular: 400; --fw-display: 500; /* Hero Display — even lighter for editorial weight */ /* ---- Polish tokens (radii / motion / shadows) ---- */ --radius-card: 4px; --radius-pill: 9999px; --shadow-card-rest: 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-hover: 0 8px 24px -8px rgba(79,200,255,0.18); --motion-fast: 180ms; --motion-base: 240ms; --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* ---- Letter spacing ---- */ --ls-display: -0.02em; --ls-h1: -0.018em; --ls-h2: -0.018em; --ls-h3: -0.01em; --ls-h4: -0.01em; --ls-mono: 0.14em; --ls-eyebrow: 0.18em; /* ---- Semantic text composites — apply via shorthand classes ---- */ /* Used as .text-h1, .text-body, etc. (see Section 23 below) */ /* ---- Spacing scale (4/8px rhythm, in rem) ---- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 7rem; /* 112px */ --space-13: 8.75rem; /* 140px — hero top clearance */ /* ---- Container widths ---- */ --w-container: 1440px; --w-readable: 1200px; --w-prose: 820px; /* ---- Section padding (responsive) ---- */ --pad-section-y: clamp(var(--space-12), 9vw, var(--space-12)); --pad-hero-top: clamp(var(--space-11), 10vw, var(--space-13)); --pad-hero-bot: clamp(var(--space-10), 9vw, var(--space-12)); } /* ============================================================ 1) ELEMENT-LEVEL SAFETY NET (catches any unstyled

/

/

) ============================================================ */ h1 { font-size: clamp(30px, 3.6vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -0.018em !important; } h2 { font-size: clamp(24px, 3vw, 30px) !important; line-height: 1.15 !important; letter-spacing: -0.018em !important; } h3 { font-size: clamp(18px, 1.8vw, 22px) !important; line-height: 1.25 !important; } h4 { font-size: 17px !important; } h5 { font-size: 14px !important; } /* ============================================================ 2) HERO-HEADLINE CLASSES (any -h1 / -hero-h / -hero-title) These are the design's biggest offenders. ============================================================ */ [class$="-h1"], [class$="-hero-h"], [class$="-hero-h1"], [class$="-hero-title"], [class$="-title"], [class*="-hero "] h1, [class*="-hero "] h2, [class*="-cinema "] h1, [class*="-cinema "] h2, [class*="-cin "] h1, [class*="-cin "] h2, .section-title, .bgh-h1, .bgh-head, .oth-h1, .aisol-cinema h2, .aisol-final h2, .aisol-hero h1, .aip-hero-h1, .aac-hero-h1, .adi-page-hero-h1, .aat-head-h, .actv-h1, .aax-hero-name, .au-hero-h, .av-hero-h1, .bc-hero-h, .bcs-h, .cmp-hero h1, .ct-hero-title, .cva-hero-h, .da-hero-h1, .dat-cin h1, .dfc-hero-h, .cxc-hero-h, .vcc-hero-h, .fc-hero-h, .fin-hero h1, .gem-hero h1, .gem-final-cta h2, .hc-hero h1, .hv2-h, .ihc-h1, .inf-hero-h, .io-hero-h1, .legal-title, .lw-hero-h1, .m-hero-h, .ni-h1, .pcc-h1, .pp-hero h1, .pp-hero-h1, .prod-hero h1, .prod-final h2, .psec-h1, .re-h1, .rh-hero-h1, .rh-sub-h1, .ro-cine-h1, .ro-hero-h1, .rwc-hero-h, .sc-hero-h1, .scs-hero-h1, .ssi-hero-h, .st-hero-h1, .vc-hero-h, .vc-hero-h1, .x-hero-h1, .gofc-hero .gofc-title, .gofc-title, .ind-hub-title, .ind-hero-title, .hero h1, .hero-headline { font-size: clamp(30px, 4vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -0.018em !important; } /* ============================================================ 3) SECTION-LEVEL HEADINGS (any -h2 / -section-title / -final-h) ============================================================ */ [class$="-h2"], [class$="-h"], [class$="-final-h"], [class$="-cta-h"], [class$="-section-title"], .bg-h2, .cw-h2, .feature h2, .bgpd-h h2, .flagship-head h2, .aac-cta-h, .aac-h, .aip-cta-h, .aip-show-h, .adi-dept-title, .aax-h2, .bc-final-h, .cv-pain-h2, .dat-ind-stage-title, .fc-final .fc-h2, .fin-h2, .fin-sub-hero h1, .gal-hero-h, .ihc-final h2, .ind-outcome-n, .legal h2, .m-page .section-title, .pc-cta h2, .pc-title, .pcc-cta-h, .pp-final-h, .prod-sec-head h2, .psec-cta-h, .ro-h2, .rwc-sec-h, .rwc-case-h, .sc-cta-h, .st-cin .st-c-h2, .tc-final h2, .vc-final-h, .x-cta-h, .final-cta h2, .cine-section .cine-head h2 { font-size: clamp(24px, 3vw, 32px) !important; line-height: 1.1 !important; letter-spacing: -0.018em !important; } /* ============================================================ 4) BIG STAT NUMBERS / KPIs The design uses 60-100px for stat cells. Cap them. ============================================================ */ [class$="-stat-n"], [class$="-stat-v"], [class$="-stat-num"], [class$="-out-n"], [class$="-roi-out-num"], [class$="-roi-big"], [class$="-num"], .score-big, .problem-stat .big, .price-card .price, .gem-stat-card .gem-stat-num, .aisol-stack-card .num, .aa-out-num .big, .dc-velo-result-v, .dc-constel-foot .num, .dc-room-tag-num, .hc-stat-val, .ld-initials, .cw-kpi .v, .cw-output-card .v, .cw-output-card.hero .v, .en-roi-big, .flagship-stat .v, .num-cell .v, .psec-out-cell .v, .res-feat-num, .rh-out-n, .scs-metric .v, .cl-fac-city, .df-tvl-v, .adi-int-signal .v { font-size: clamp(22px, 2.4vw, 34px) !important; line-height: 1 !important; } /* ============================================================ 5) HERO + SECTION SUBTITLES ============================================================ */ .bgh-sub, .hero-sub, .hero-engine .bgh-sub, .section-sub, .bg-p, .kicker, .cine-sub, [class$="-hero-sub"], [class$="-section-sub"] { font-size: 15px !important; line-height: 1.55 !important; } /* ============================================================ 6) NAV CHROME (tighten links + eyebrows; buttons follow §26 spec) ============================================================ */ .nav-item { font-size: 12.5px !important; } .mega-title { font-size: 16px !important; } .mega-link .name { font-size: 13px !important; } .mega-link .desc { font-size: 11px !important; } .eyebrow, .bg-eyebrow, .mega-eyebrow, [class$="-eyebrow"] { font-size: 10.5px !important; letter-spacing: 0.16em !important; } /* ============================================================ 7) PRODUCT / CARD HEADERS ============================================================ */ .bgpd-card-h, .bg-card-h, .cine-card h3, .cine-card .h, .card-h, [class$="-card-h"] { font-size: 16px !important; line-height: 1.25 !important; } .bgpd-card-s, .bg-card-s, .cine-card .b, .cine-card p, [class$="-card-s"] { font-size: 13px !important; line-height: 1.5 !important; } .bgpd-card-best, .bgpd-card-cta { font-size: 11px !important; } /* ============================================================ 8) CINE WIDGETS ============================================================ */ .cine-stage-head, .cine-stage-foot { font-size: 13px !important; } .cine-tab { font-size: 12.5px !important; } .cine-chip { font-size: 11px !important; } /* ============================================================ 9) HOMEPAGE CINEMA WINDOW CHROME (".hc-window-*") The design left .hc-window-title without an explicit size so it inherits body — which renders as a giant URL bar. Force browser- address-bar styling: small monospace, muted, single line. ============================================================ */ .hc-window-title { font-family: var(--font-mono, ui-monospace, Menlo, monospace) !important; font-size: 11.5px !important; color: rgba(255,255,255,0.55) !important; letter-spacing: 0.01em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .hc-window-live { font-size: 10px !important; letter-spacing: 0.12em !important; } .hc-window-body { font-size: 13px !important; } /* Section eyebrows + h2 across homepage cinema sections */ .hc-h2 { font-size: clamp(26px, 2.8vw, 40px) !important; line-height: 1.08 !important; } .hc-sub { font-size: 14.5px !important; line-height: 1.55 !important; } .hc-cinema-eyebrow, .hc-ops-eyebrow, .hc-trust-eyebrow, .hc-feed-title, .hc-side-h { font-size: 10px !important; letter-spacing: 0.18em !important; } /* Cinema tab labels */ .hc-cinema-tab .lbl { font-size: 12.5px !important; } .hc-cinema-tab .num { font-size: 9.5px !important; } .hc-cinema-cta span { font-size: 12px !important; } /* Side card list items / metrics */ .hc-side-list li, .hc-side-row { font-size: 11.5px !important; } .hc-side-row.big { font-size: 11.5px !important; } .hc-side-row .v, .hc-side-row .val { font-size: 12.5px !important; } /* KPI strip overlay over the world map */ .hc-kpi .lbl { font-size: 9.5px !important; letter-spacing: 0.14em !important; } .hc-kpi .val { font-size: 16px !important; } /* Live event feed rows */ .hc-feed-city { font-size: 10.5px !important; letter-spacing: 0.12em !important; } .hc-feed-text { font-size: 12px !important; } .hc-feed-count { font-size: 10px !important; } /* Voice + cam + agent + data cards */ .hc-agent-text .name { font-size: 12px !important; } .hc-agent-text .out, .hc-agent-text .dur { font-size: 10px !important; } .hc-voice-line .t { font-size: 12.5px !important; } .hc-cam-meta { font-size: 9px !important; } .hc-data-name { font-size: 11.5px !important; } .hc-gem-stat .val, .hc-coin-card .val { font-size: 18px !important; } .hc-gem-stat .lbl, .hc-coin-card .lbl { font-size: 9px !important; } .hc-coin-stats .val { font-size: 13px !important; } /* Trust band company names */ .hc-trust-name { font-size: 12px !important; } .hc-trust-meta { font-size: 9px !important; } /* ============================================================ 10) BLOCKCHAIN SUITE — SECOND-TO-LAST HOMEPAGE SECTION (".bcs-*") Design ships .bcs-h at clamp(36,4.4vw,60px), tape-foot 22px, stage-h 19px, card-h 16.5px — visibly larger than the Claude Design preview proportions. Re-anchor everything to the site's compact homepage scale. ============================================================ */ .bcs-h { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.08 !important; letter-spacing: -0.018em !important; } .bcs-sub { font-size: 14.5px !important; line-height: 1.55 !important; } .bcs-eyebrow { font-size: 10px !important; letter-spacing: 0.18em !important; } .bcs-cta { font-size: 12.5px !important; padding: 9px 16px !important; } /* Live network tape */ .bcs-tape-h { font-size: 9.5px !important; letter-spacing: 0.16em !important; } .bcs-tape-row { font-size: 11.5px !important; } .bcs-tape-row .sym, .bcs-tape-row .nm, .bcs-tape-row .val { font-size: 11.5px !important; } .bcs-tape-foot .l { font-size: 9px !important; letter-spacing: 0.14em !important; } .bcs-tape-foot .v { font-size: 16px !important; } /* Tabs */ .bcs-tab { font-size: 12px !important; } .bcs-tab .ct { font-size: 9.5px !important; } .bcs-tab .lb { font-size: 12px !important; } /* Stage description */ .bcs-stage-eyebrow { font-size: 10px !important; letter-spacing: 0.16em !important; } .bcs-stage-h { font-size: 15px !important; line-height: 1.45 !important; } .bcs-stage-meta { font-size: 10px !important; letter-spacing: 0.14em !important; } /* Product cards */ .bcs-card-num { font-size: 10px !important; letter-spacing: 0.16em !important; } .bcs-card-h { font-size: 14.5px !important; line-height: 1.25 !important; } .bcs-card-d { font-size: 12.5px !important; line-height: 1.5 !important; } .bcs-card-cta { font-size: 10px !important; letter-spacing: 0.14em !important; } /* A–Z strip */ .bcs-strip-h { font-size: 10px !important; letter-spacing: 0.18em !important; } .bcs-strip-item { font-size: 11.5px !important; } /* ============================================================ 11) CUSTOM AI PRODUCTS PAGE (".cap-*", ".cwt2-*", ".chub2-*", ".inf-cap-*") The page mixes its own .cap-* / .cwt2-* primitives with the AI Infrastructure ".inf-*" system. Several headings and stat values default to 22-28 px which reads oversized against the page hero. Pull everything down to the site's compact scale. ============================================================ */ /* Capability grid cards (Section 03 · CAPABILITIES) */ .inf-cap-num { font-size: 9.5px !important; letter-spacing: 0.16em !important; } .inf-cap-h { font-size: 15px !important; line-height: 1.25 !important; margin: 14px 0 8px !important; } .inf-cap-p { font-size: 12.5px !important; line-height: 1.5 !important; } .inf-section-head .bg-eyebrow, .inf-section-head .eyebrow { font-size: 10px !important; letter-spacing: 0.18em !important; } /* Cinematic widget headings (CAPHubV2 etc.) */ .cwt2-stage-title { font-size: 18px !important; line-height: 1.2 !important; } .cwt2-stage-eyebrow { font-size: 10px !important; letter-spacing: 0.18em !important; } .cwt2-step-num { font-size: 11px !important; } .cwt2-mock-dash-tile .v { font-size: 16px !important; } .cwt2-mock-dash-tile .l { font-size: 9.5px !important; letter-spacing: 0.14em !important; } /* CAP hub stat tiles */ .chub2-stat .v { font-size: 16px !important; } .chub2-stat .l { font-size: 9.5px !important; letter-spacing: 0.14em !important; } /* Comparison / industry / product-type / strategy cards */ .cap-cmp-t { font-size: 17px !important; margin-bottom: 14px !important; } .cap-cmp-h { font-size: 10px !important; letter-spacing: 0.16em !important; } .cap-cmp-list { font-size: 12.5px !important; line-height: 1.55 !important; } .cap-ind-panel h3 { font-size: 18px !important; } .cap-ind-panel p { font-size: 13px !important; line-height: 1.55 !important; } .cap-ind-tabs, .cap-dept-tabs { font-size: 11.5px !important; } .cap-ind-uses li, .cap-ind-uses { font-size: 12px !important; } .cap-type h4 { font-size: 15px !important; margin: 8px 0 8px !important; } .cap-types-grid p { font-size: 12.5px !important; line-height: 1.5 !important; } .cap-strat { font-size: 12.5px !important; } .cap-strat-grid h4, .cap-strat-grid h3 { font-size: 14px !important; } /* Builder / blueprint */ .cap-build-step { font-size: 12px !important; } .cap-build-term { font-size: 11px !important; } .cap-build-blueprint h3, .cap-build-blueprint h4 { font-size: 14px !important; } /* Console chrome */ .cap-console-stat b { font-size: 14px !important; } .cap-console-stat span, .cap-console-row { font-size: 11.5px !important; } .cap-console-chrome { font-size: 10.5px !important; letter-spacing: 0.14em !important; } /* Pipeline strip + arch layer titles */ .cap-pipe-h { font-size: 10px !important; letter-spacing: 0.16em !important; } .cap-pipe-cell { font-size: 11.5px !important; } .cap-arch-layer h4 { font-size: 14px !important; } /* Screens grid (mock dashboards) */ .cap-screen-chrome { font-size: 10px !important; letter-spacing: 0.14em !important; } .cap-screen-body { font-size: 12px !important; } /* Shared cap-conv band (Inline CTAs) */ .aa-cv-eyebrow { font-size: 10px !important; letter-spacing: 0.18em !important; } .aa-cv-title { font-size: 18px !important; line-height: 1.25 !important; } .aa-cv-flow-num { font-size: 18px !important; } /* dat-* reused on this page (KPIs / dash tiles) */ .dat-kpi-v { font-size: 16px !important; } .dat-kpi-l { font-size: 9.5px !important; letter-spacing: 0.14em !important; } .dat-dash-tile .v { font-size: 16px !important; } .dat-dash-tile .l { font-size: 9.5px !important; letter-spacing: 0.14em !important; } .dat-aa h4 { font-size: 14px !important; margin: 12px 0 6px !important; } /* ---- Final aggressive sweep — heading/value patterns on this page ---- */ /* dat-* card headings */ .dat-pipe-card h4, .dat-dash-card h4, .dat-ready h4, .dat-sol h4, .dat-sol-h, .dat-pipe-card h4 + p, .dat-cmd-pipe-h, .dat-cmd-alerts-h { font-size: 13.5px !important; line-height: 1.25 !important; } /* cap-* secondary headings */ .cap-arch-layer .t, .cap-arch-layer h4, .cap-strat h4, .cap-strat h3, .cap-strat-grid .t { font-size: 13.5px !important; } .cap-dept-panel p, .cap-dept-panel li { font-size: 13px !important; line-height: 1.55 !important; } .cap-pipe-strip h4, .cap-screens h4 { font-size: 13.5px !important; } /* cwt2-* */ .cwt2-step-h { font-size: 13.5px !important; } .cwt2-mock-appr-q { font-size: 13.5px !important; line-height: 1.35 !important; } .cwt2-stage-title { font-size: 17px !important; } .cwt2-mock-dash-tile .v, .cwt2-mock .v { font-size: 15px !important; } /* chub2-* */ .chub2-core-h, .chub2-core-h2 { font-size: 17px !important; line-height: 1.2 !important; } .chub2-stat .v { font-size: 15px !important; } .chub2-stat .l { font-size: 9.5px !important; letter-spacing: 0.14em !important; } .chub2-sys-h { font-size: 13px !important; } .chub2-foot-pill { font-size: 11px !important; } /* inf-* — fully suppress oversized headings inherited from aiinfra */ .inf-hero-h, .inf-hero-h1 { font-size: clamp(28px, 3.4vw, 46px) !important; } .inf-hero-sub, .inf-final-sub { font-size: 14px !important; line-height: 1.55 !important; } .inf-cmp-h, .inf-ind-h, .inf-dept-h, .inf-tab-h, .inf-final-h { font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.15 !important; } .inf-pipe-step .h, .inf-bene-h, .inf-feat-head .label, .inf-layer-name, .inf-dep-h, .inf-jp .nm, .inf-type-h, .inf-acc-head .label { font-size: 14px !important; line-height: 1.25 !important; } .inf-int-h, .inf-sol-h, .inf-gov-h { font-size: 13.5px !important; } .inf-dept-stat .v { font-size: 18px !important; } .inf-story-h { font-size: 15px !important; } .inf-bp-card .h { font-size: 14.5px !important; } /* ---- Scope-narrow caps for bare h2/h3/h4 on the Custom AI Products page ---- */ /* The page has many

/

with NO className inside cap-* containers, so they fall through to the element-level rules and render up to 18–20px. Cap them harder when nested under the page's own sections. */ [data-screen-label="Custom AI Products"] h2, .cap-arch h2, .cap-cmp h2, .cap-pipe h2, .cap-screens h2, .cap-strat-grid h2, .cap-types-grid h2, .cap-ind-tabs h2, .cap-dept-tabs h2, .cap-band-tight-wrap h2 { font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.15 !important; } [data-screen-label="Custom AI Products"] h3, .cap-arch h3, .cap-cmp h3, .cap-pipe h3, .cap-screens h3, .cap-strat-grid h3, .cap-types-grid h3, .cap-ind-panel h3, .cap-dept-panel h3 { font-size: 14px !important; line-height: 1.25 !important; } [data-screen-label="Custom AI Products"] h4 { font-size: 13px !important; line-height: 1.25 !important; } /* Cinematic "PROCESS · 6 STEPS" rail — chrome was visually bulky. Text is already 10-11 px, but the surrounding step circle was 36×36 and the rail header had 16×20 padding. Tighten everything so the rail reads compact rather than dominant. */ .cwt2-rail-h { padding: 10px 14px !important; font-size: 9.5px !important; letter-spacing: 0.16em !important; } .cwt2-step { padding: 10px 14px !important; gap: 10px !important; } .cwt2-step-num { width: 24px !important; height: 24px !important; font-size: 9.5px !important; letter-spacing: 0.08em !important; flex-shrink: 0 !important; } .cwt2-step-h { font-size: 12.5px !important; line-height: 1.2 !important; } .cwt2-step-s { font-size: 10px !important; letter-spacing: 0.02em !important; } .cwt2-step-arrow { font-size: 14px !important; } .cwt2-rail-foot { padding: 10px 14px !important; font-size: 10.5px !important; line-height: 1.4 !important; } /* Section subtitle / lead paragraph (.bg-p, .inf-section-head p, .cap-section-sub) */ .inf-section-head p, .inf-section-head .bg-p, .inf-section-head + p, [data-screen-label="Custom AI Products"] .bg-p, [data-screen-label="Custom AI Products"] .inf-hero-sub, [data-screen-label="Custom AI Products"] .inf-final-sub, [data-screen-label="Custom AI Products"] .section-sub { font-size: 13.5px !important; line-height: 1.55 !important; } /* ============================================================ 12) VOICE & CHAT AI PAGE (".vc-*", ".vca-*", ".vcg-*", ".vp-*") Design ships several primary headings at 22–32 px and stat values at 24 px; tighten to the site's compact scale. ============================================================ */ .vc-hero-sub { font-size: 14px !important; line-height: 1.55 !important; } .vc-arch-orb-title { font-size: 15px !important; } .vc-pillar-plus { font-size: 14px !important; } .vc-pillar-name { font-size: 15px !important; line-height: 1.2 !important; } .vc-ind-h { font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.15 !important; } .vc-dash-card-v { font-size: 17px !important; } .vc-deploy-title { font-size: 14px !important; } .vc-enable-col h3 { font-size: 16px !important; line-height: 1.2 !important; } .vc-pack-tier { font-size: 19px !important; } .vc-pack-price { font-size: 17px !important; } .vc-faq-q { font-size: 14px !important; } .vc-faq-a { font-size: 13px !important; line-height: 1.55 !important; } .vc-final-h { font-size: clamp(28px, 3.4vw, 44px) !important; } .vc-final-sub { font-size: 14px !important; } /* Cinematic cards (.vca-*) */ .vca-cine-h { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.08 !important; } .vca-orb-title { font-size: 15px !important; } .vca-mini-stat .v { font-size: 14px !important; } /* Graphics + pillars secondary */ .vcg-wa-back { font-size: 13px !important; } .vp-pillar-h { font-size: 15px !important; } /* ============================================================ 13) SITE-WIDE FINAL NORMALIZATION Catches heading + lead patterns common to deep-dive pages that weren't covered by earlier wildcards. All caps align with the homepage scale (hero 46 / section h2 38 / stat 34 / body 14.5). Excludes anything prefixed .gem-* — that page is the benchmark. ============================================================ */ /* Deep-dive page hero/section titles (.adi-*, .cxc-*, .dfc-*, .fc-*) */ .adi-dept-title, .adi-int-title, .cxc-section-title, .cxc-hero-title, .dfc-section-title, .dfc-hero-title, .fc-section-title, .fc-hero-title { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.1 !important; letter-spacing: -0.018em !important; } /* Bento card name scale across all deep-dive pages */ .adi-card-name, .adi-card.feat .adi-card-name, .adi-card.tall .adi-card-name { font-size: clamp(15px, 1.6vw, 20px) !important; line-height: 1.2 !important; } .adi-card.feat .adi-card-name { font-size: clamp(18px, 2vw, 26px) !important; } .adi-card-lede, .adi-card.feat .adi-card-lede { font-size: 13px !important; line-height: 1.5 !important; } /* Deep-dive section sub paragraphs */ .adi-dept-sub, .adi-int-sub, .cxc-section-sub, .dfc-section-sub, .fc-section-sub { font-size: 14.5px !important; line-height: 1.55 !important; } /* Page eyebrows / crumb / tag labels — uniform mono token */ [class$="-eyebrow"], [class*="-eyebrow "], [class$="-crumb"], [class$="-tag"], [class*="-tag "] { letter-spacing: 0.16em !important; } /* Lead paragraphs on every page — site-body scale */ [class$="-lead"], [class*="-lead "], [class$="-page-sub"], [class$="-section-sub"], [class$="-hero-sub"], [class$="-sub"] { font-size: 14.5px !important; line-height: 1.55 !important; } /* Card body / list text */ [class$="-card-d"], [class$="-card-b"], [class$="-card-p"], [class$="-card-s"], [class$="-card-lede"] { font-size: 13px !important; line-height: 1.5 !important; } /* ============================================================ 14) FINAL COMPONENT NORMALIZATION Tightens the last residuals — weight, letter-spacing, radius — so every page renders inside the homepage system. Excludes `.gem-*` (the locked benchmark page). ============================================================ */ /* Heading weight + tracking — homepage standard */ h1, h2, h3, h4, [class$="-h1"], [class$="-h"], [class$="-h2"], [class$="-h3"], [class$="-h4"], [class$="-title"], [class$="-hero-h"], [class$="-section-title"], [class$="-hero-title"], [class$="-final-h"] { font-weight: 500 !important; letter-spacing: -0.018em !important; text-wrap: balance; } h4, [class$="-h4"] { letter-spacing: -0.01em !important; } /* Body text + paragraph normalization */ p, [class$="-p"], [class$="-d"], [class$="-desc"] { font-weight: 400 !important; letter-spacing: 0 !important; } /* Eyebrows / mono labels — uniform tracking + weight */ .eyebrow, .bg-eyebrow, .mega-eyebrow, [class$="-eyebrow"], [class*="-eyebrow "], [class$="-kicker"], [class$="-crumb"], [class$="-tag"] { font-family: var(--font-mono, ui-monospace, Menlo, monospace) !important; font-weight: 500 !important; text-transform: uppercase !important; } /* Card / panel — homepage corner radius (subtle, square-leaning) */ .card, .cine-card, .module-card, [class$="-card"]:not([class*="bgpd-card-"]):not([class*="-card-"]) { border-radius: 2px; } /* Buttons inside any "-ctas" / "-cta-row" container must use homepage button rules. If a page wraps a bare without the .btn class, give it inline-flex defaults so layout is consistent. */ [class$="-ctas"] a:not(.btn-link):not(.btn-ghost):not(.btn-primary), [class$="-cta-row"] a:not(.btn-link):not(.btn-ghost):not(.btn-primary) { display: inline-flex; align-items: center; gap: 8px; } /* Stat values — homepage scale family */ [class$="-num"], [class$="-n"], [class$="-val"], [class$="-v"], [class$="-stat-num"], [class$="-stat-n"] { font-weight: 500 !important; letter-spacing: -0.018em !important; } /* ============================================================ 15) INDUSTRY-PAGE CARD HEADINGS — final tightening Inner headings in cards / tiles / stages / use-case panels on every industry & deep-dive page. Capped to body-scale 14 px so the boxes read as compact tiles, not editorial subheads. Excludes anything prefixed .gem-* (locked benchmark). ============================================================ */ /* Card / tile / stage / use-case / pattern / sub-card heading classes */ [class$="-card-h"], [class$="-tile-h"], [class$="-stage-h"], [class$="-uc-h"], [class$="-pat-h"], [class$="-prod-h"], [class$="-role-h"], [class$="-role-name"], [class$="-flow-n"], [class$="-step-h"], [class$="-strat-h"], [class$="-mod-h"], [class$="-comm-h"], [class$="-bp-h"], [class$="-stage-name"], [class$="-tile-n"], [class$="-card-t"], [class$="-card-h3"], [class$="-sub-card-t"], [class$="-day-action"], [class$="-day-persona-n"], [class$="-pm-chart h4"], .en-pm-chart h4, .en-pm-alerts h4 { font-size: 14px !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; font-weight: 500 !important; } /* Paragraphs / leads inside cards on industry pages — match body scale */ [class$="-card-d"], [class$="-card-p"], [class$="-card-s"], [class$="-tile-p"], [class$="-tile-d"], [class$="-uc-p"], [class$="-uc-d"], [class$="-stage-p"], [class$="-stage-d"], [class$="-pat-p"], [class$="-pat-d"], [class$="-role-d"], [class$="-card-lede"] { font-size: 13px !important; line-height: 1.5 !important; } /* Industry section/final paragraph + arrows — match body scale */ .cxc-final .cxc-sub, .dfc-final .dfc-sub, .fc-final .fc-sub, .cxc-btn span, .dfc-btn span, .fc-btn span, .tc-cta span, .tc-hero p, .fd-flow-arrow, .tc-flow-arrow, .en-sec-sub, .en-final p { font-size: 14.5px !important; } /* "Counter" / live KPI values on industries (Newsreader serif at 17px) → site stat token */ [class$="-counter"] .n, [class$="-tile-chip"] .v, [class$="-hero-slide-t"] { font-size: 14.5px !important; letter-spacing: -0.01em !important; } /* ============================================================ 16) INDUSTRY HERO H1 — strict unification across all 13 pages .ni-h1 (NIHub) is the reference. .fin-hero h1 (Finance/Healthcare) and .psec-h1 (Public Sector) get the same tokens so every industry header renders identically — same font, size, weight, LH, tracking. Accent spans (.ac / em) keep their per-page theme gradients/fonts. ============================================================ */ .ni-h1, .fin-hero h1, .psec-h1 { font-family: var(--font-display, 'Instrument Sans', ui-sans-serif, system-ui, sans-serif) !important; font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.06 !important; font-weight: 500 !important; letter-spacing: -0.018em !important; margin: 0 0 24px !important; text-wrap: balance; } /* Themed accent spans inside the hero h1 keep their gradient/font. Only weight + line-height are normalized so they sit on the same baseline. */ .ni-h1 em, .ni-h1 .ac, .fin-hero h1 em, .fin-hero h1 .ac, .psec-h1 em, .psec-h1 .ac { font-weight: 500 !important; line-height: inherit !important; letter-spacing: inherit !important; } /* ============================================================ 17) INDUSTRY-PAGE BLOCK STAT VALUES — cap to 20px Hero livestat boxes + any block-style accent / metric values on industry pages were rendering up to 34 px at wide screens, which read as oversized inside compact info boxes. ============================================================ */ .ni-livestat .v, .fin-livestat .v, .psec-livestat .v, .ni-stat-v, .ni-block-v, .ni-metric-v, [class$="-livestat"] .v, [class$="-block"] .v, [class$="-metric"] .v { font-size: 20px !important; line-height: 1.1 !important; } /* All big white headings inside industry-page content blocks (block / panel / card title or h3/h4) — uniform 24px cap. */ .ni-section-title, .fin-section-title, .psec-section-title, .ni-block h2, .ni-block h3, .ni-block h4, .fin-block h2, .fin-block h3, .fin-block h4, .psec-block h2, .psec-block h3, .psec-block h4, [class^="ni-"][class$="-block"] h2, [class^="ni-"][class$="-block"] h3, [class^="fin-"][class$="-block"] h2, [class^="fin-"][class$="-block"] h3, [class^="psec-"][class$="-block"] h2, [class^="psec-"][class$="-block"] h3, .ni-products-h, .ni-cases-h, .ni-custom-body h2, .ni-custom-body h3, .ni-cta-body h2, .ni-cta-body h3, .psec-h-card h2, .psec-h-card h3, .fin-h-card h2, .fin-h-card h3 { font-size: 20px !important; line-height: 1.15 !important; } /* ============================================================ 18) STRICT GLOBAL TYPOGRAPHY SCALE (homepage as source of truth) This section authoritatively defines the entire site's type scale. Loaded last + uses !important so it overrides every earlier rule. `/gem` is preserved by a dedicated block at the very end of the file. ============================================================ */ /* ---- Element-level baseline (catches bare h1-h4 anywhere) — all token-driven ---- */ h1 { font-size: clamp(var(--fs-h1-min), 4.5vw, var(--fs-h1)) !important; line-height: var(--lh-h1) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-h1) !important; } h2 { font-size: clamp(var(--fs-h2-min), 3.2vw, var(--fs-h2)) !important; line-height: var(--lh-h2) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-h2) !important; } h3 { font-size: clamp(var(--fs-h3-min), 2.4vw, var(--fs-h3)) !important; line-height: var(--lh-h3) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--ls-h3) !important; } h4 { font-size: clamp(var(--fs-h4-min), 1.8vw, var(--fs-h4)) !important; line-height: var(--lh-h4) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--ls-h4) !important; } /* ---- HOMEPAGE HERO ONLY — Hero Display 72px ---- */ .bgh-h1 { font-size: clamp(var(--fs-display-min), 5.4vw, var(--fs-display)) !important; line-height: var(--lh-display) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-display) !important; } /* ---- H1 scale (non-homepage hero h1 patterns) — token-driven ---- */ [class$="-h1"]:not(.bgh-h1), [class$="-hero-h"]:not(.bgh-hero-h), [class$="-hero-h1"], [class$="-hero-title"], .ni-h1, .psec-h1, .fin-hero h1, .adi-page-hero-h1, .hc-hero h1, .gem-hero h1 ~ none { font-size: clamp(var(--fs-h1-min), 4.5vw, var(--fs-h1)) !important; line-height: var(--lh-h1) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-h1) !important; } /* ---- H2 scale (section headings) ---- */ [class$="-h2"], [class$="-section-title"], [class$="-section-h"], .ni-section-title, .psec-section-title, .fin-section-title, .bgh-h2, .hc-h2, .bg-h2, .bcs-h { font-size: clamp(var(--fs-h2-min), 3.2vw, var(--fs-h2)) !important; line-height: var(--lh-h2) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-h2) !important; } /* ---- H3 scale (block / card titles) ---- */ [class$="-h3"], [class$="-card-h"], [class$="-stage-h"], [class$="-strat-h"], .ni-products-h, .ni-cases-h, .ni-custom-body h2, .ni-custom-body h3, .ni-cta-body h2, .ni-cta-body h3 { font-size: clamp(var(--fs-h3-min), 2.4vw, var(--fs-h3)) !important; line-height: var(--lh-h3) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--ls-h3) !important; } /* ---- H4 scale (sub-cards / tiles / use-cases) ---- */ [class$="-h4"], [class$="-tile-h"], [class$="-uc-h"], [class$="-pat-h"], [class$="-prod-h"], [class$="-role-h"], [class$="-step-h"], [class$="-mod-h"], [class$="-bp-h"], [class$="-comm-h"], [class$="-card-t"], [class$="-tile-n"], [class$="-card-name"] { font-size: clamp(var(--fs-h4-min), 1.8vw, var(--fs-h4)) !important; line-height: var(--lh-h4) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--ls-h4) !important; } /* ---- Large body / hero sub / lead ---- */ .bgh-sub, [class$="-hero-sub"], [class$="-page-sub"], [class$="-section-sub"], [class$="-lead"], .ni-sub, .psec-sub, .fin-hero p { font-size: clamp(var(--fs-body-lg-min), 1.6vw, var(--fs-body-lg)) !important; line-height: var(--lh-body-lg) !important; font-weight: var(--fw-regular) !important; } /* ---- Body ---- */ body { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; } p:not([class*="gem"]), [class$="-card-p"], [class$="-card-d"], [class$="-card-s"], [class$="-tile-p"], [class$="-tile-d"], [class$="-uc-p"], [class$="-uc-d"], [class$="-stage-p"], [class$="-stage-d"], [class$="-pat-p"], [class$="-pat-d"], [class$="-role-d"], [class$="-card-lede"] { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; } /* ---- Small ---- */ .small, [class$="-small"], [class$="-meta"], [class$="-cap"], [class$="-foot"], [class$="-caption"], .row-sub, .module-card-d { font-size: var(--fs-small) !important; line-height: var(--lh-small) !important; } /* ---- Caption / Micro — eyebrows / tags / crumbs / mono labels ---- */ .eyebrow, .bg-eyebrow, .mega-eyebrow, [class$="-eyebrow"], [class*="-eyebrow "], [class$="-tag"], [class$="-crumb"], [class$="-kicker"], [class$="-pill"], .ni-tag, .psec-eyebrow { font-family: var(--font-mono, ui-monospace, Menlo, monospace) !important; font-size: var(--fs-caption) !important; line-height: var(--lh-caption) !important; letter-spacing: var(--ls-mono) !important; font-weight: var(--fw-medium) !important; text-transform: uppercase !important; } /* ---- Layout — container + readable widths (token-driven) ---- */ .container { max-width: var(--w-container) !important; } .container-narrow, .container-readable, [class$="-readable"] { max-width: var(--w-readable) !important; } /* Prose / long-form text content auto-constrains to readable width */ .prose, .legal-content, .article-body, [class$="-prose"], [class$="-article"] { max-width: var(--w-prose) !important; } .bgh-sub, [class$="-hero-sub"], [class$="-page-sub"] { max-width: var(--w-prose) !important; } /* ============================================================ 19) GEM PRESERVATION — restore /gem to its locked values Sits at the absolute end of this stylesheet so it wins via source order over Section 18 above. Same specificity as the global rules; last !important rule in the cascade wins. ============================================================ */ .gem-hero h1, .gem-final h1 { font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.06 !important; font-weight: 500 !important; letter-spacing: -0.018em !important; } .gem-section-head h2, .gem-final h2 { font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.1 !important; font-weight: 500 !important; letter-spacing: -0.018em !important; } .gem-cred-card h3, .gem-cmp-col h3, .gem-ind-panel h3 { font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.15 !important; font-weight: 500 !important; } .gem-uc-card h4, .gem-mc-source .ttl, .gem-cmp-t { font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.25 !important; } .gem-stat-num, .gem-rec-auto-num, .gem-cc-side .bal, .gem-cc-side .num, .gem-an-kpis .val, .gem-cred-card ul li b { font-size: clamp(22px, 2.4vw, 34px) !important; font-weight: 500 !important; line-height: 1 !important; } .gem-hero p, .gem-final p, .gem-section-head p, .gem-uc-card p { font-size: 14.5px !important; line-height: 1.55 !important; } /* ============================================================ 20) PUBLIC SECTOR USE-CASE BLOCK HEADINGS — explicit 24px `.psec-case-h` ends in `-h`, so wildcards in earlier sections pulled it up to section-h2 scale. Pin to flat 24px per spec. ============================================================ */ .psec-case-h, .psec-prod h3 { font-size: 18px !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* Use-case / card-numeric labels (e.g., "USE CASE · 01") — these are mono eyebrows, not stat numbers. Section 4 was catching them via [class$="-num"] and treating them as oversized KPIs. Pin to caption token (small mono uppercase). */ .en-uc-num, [class$="-uc-num"], [class$="-case-num"], [class$="-uc-tag"], [class$="-uc-no"], [class$="-case-no"] { font-family: var(--font-mono, ui-monospace, Menlo, monospace) !important; font-size: 10px !important; line-height: var(--lh-caption) !important; letter-spacing: 0.16em !important; font-weight: var(--fw-medium) !important; text-transform: uppercase !important; } /* ============================================================ 22) SITE-WIDE CARD / BLOCK HEADING CAP — flat 24px The new global H3 scale (clamp 24–30) reads correctly for section h3s above a grid, but feels oversized as the *title of an individual card inside that grid*. Pin all block-card headings to a flat 24px so every grid card on every page is visually consistent. Excludes /gem (preserved by Section 19 above with later source order and per-page selectors). ============================================================ */ /* Suffix wildcards — catch every page-prefix variant in one rule */ [class$="-card-h"], [class$="-card-name"], [class$="-card-t"], [class$="-card-h3"], [class$="-card-title"], [class$="-tile-h"], [class$="-tile-n"], [class$="-tile-name"], [class$="-tile-title"], [class$="-prod-h"], [class$="-prod-name"], [class$="-prod-title"], [class$="-case-h"], [class$="-case-title"], [class$="-pat-h"], [class$="-pat-name"], [class$="-pat-title"], [class$="-mod-h"], [class$="-mod-name"], [class$="-mod-title"], [class$="-role-h"], [class$="-role-name"], [class$="-role-title"], [class$="-uc-h"], [class$="-uc-name"], [class$="-uc-title"], [class$="-stage-h"], [class$="-stage-name"], [class$="-stage-title"], [class$="-step-h"], [class$="-step-title"], [class$="-feat-h"], [class$="-feat-name"], [class$="-feature-h"], [class$="-feature-name"], [class$="-block-h"], [class$="-block-name"], [class$="-block-title"], [class$="-strat-h"], [class$="-strat-name"], [class$="-bp-h"], [class$="-comm-h"], [class$="-comm-name"], /* Bare h3 / h4 inside common card / tile / panel containers */ [class$="-card"] h3, [class$="-card"] h4, [class$="-tile"] h3, [class$="-tile"] h4, [class$="-prod"] h3, [class$="-prod"] h4, [class$="-product"] h3, [class$="-product"] h4, [class$="-products"] h3, [class$="-products"] h4, [class$="-case"] h3, [class$="-case"] h4, [class$="-cases"] h3, [class$="-cases"] h4, [class$="-pat"] h3, [class$="-pat"] h4, [class$="-pattern"] h3, [class$="-pattern"] h4, [class$="-mod"] h3, [class$="-mod"] h4, [class$="-module"] h3, [class$="-module"] h4, [class$="-uc"] h3, [class$="-uc"] h4, [class$="-stage"] h3, [class$="-stage"] h4, [class$="-step"] h3, [class$="-step"] h4, [class$="-block"] h3, [class$="-block"] h4, [class$="-feature"] h3, [class$="-feature"] h4, [class$="-features"] h3, [class$="-features"] h4, [class$="-panel"] h3, [class$="-panel"] h4, [class$="-role"] h3, [class$="-role"] h4, [class$="-cell"] h3, [class$="-cell"] h4, [class$="-item"] h3, [class$="-item"] h4, [class$="-row"] h3, [class$="-row"] h4, [class$="-tile-card"] h3, [class$="-tile-card"] h4, [class$="-grid-card"] h3, [class$="-grid-card"] h4, [class$="-grid-item"] h3, [class$="-grid-item"] h4, [class*="-grid "] h3, [class*="-grid "] h4, [class*="-grid-"] h3, [class*="-grid-"] h4, [class*="-cards "] h3, [class*="-cards "] h4, [class*="-blocks "] h3, [class*="-blocks "] h4, /* Specific named selectors (catch what wildcards miss) */ .adi-card-name, .ni-case-t, .ni-product-t, .ni-pat-h, .hc-tile-h, .hc-prod-h, .hc-card-h, .fin-card-h, .fin-tile-h, .fin-stage-h, .cxc-card-h, .cxc-mod-h, .cxc-tile-h, .dfc-card-h, .dfc-strat-h, .fc-card-h, .fc-tile-h, .fc-stage-h, .en-uc-h, .en-tile-h, .en-card-t, .en-sub-card-t, .en-day-persona-n, .en-day-action, .ihc-tile-h, .ihc-pat-h, .ihc-stage-name, .tc-role-h, .tc-role-name, .psec-case-h, .psec-prod h3, .psec-cust-doc-h, .psec-card-h, .cx-sec-h, .cx-aud-h, .cx-launch-t, .cx-mod-t, .cx-mod-n, .cx-val-t, .cx-val-n, .cx-delivery-t, .cx-delivery-n, .hc-deploy-title, .apt-int-rwt-h, .cap-cmp-t, .cap-ind-panel h3, .cap-type h4, .cap-arch-layer .t, .inf-cap-h, .inf-type-h, .inf-bp-card .h, .inf-acc-head .label, .bgpd-card-h, .cine-card h3, .cine-card .h, .card-h, /* Broader block-heading wildcards — catch any *-launch-*, *-val-*, *-mod-*, *-aud-*, *-delivery-*, *-pillar-*, *-area-*, *-panel-*, *-strat-*, *-segment-* heading-style class across every page. */ [class$="-launch-t"], [class$="-launch-h"], [class$="-launch-name"], [class$="-launch-title"], [class$="-val-h"], [class$="-val-t"], [class$="-val-n"], [class$="-val-name"], [class$="-val-title"], [class$="-aud-h"], [class$="-aud-t"], [class$="-aud-name"], [class$="-aud-title"], [class$="-mod-t"], [class$="-mod-n"], [class$="-delivery-t"], [class$="-delivery-h"], [class$="-delivery-n"], [class$="-delivery-name"], [class$="-pillar-h"], [class$="-pillar-t"], [class$="-pillar-name"], [class$="-pillar-title"], [class$="-area-h"], [class$="-area-t"], [class$="-area-name"], [class$="-area-title"], [class$="-panel-h"], [class$="-panel-t"], [class$="-panel-name"], [class$="-panel-title"], [class$="-segment-h"], [class$="-segment-t"], [class$="-segment-name"], [class$="-service-h"], [class$="-service-t"], [class$="-service-name"], [class$="-service-title"], [class$="-flow-h"], [class$="-flow-t"], [class$="-flow-name"], [class$="-step-name"], [class$="-step-n"], [class$="-bp-name"], [class$="-bp-t"], [class$="-track-h"], [class$="-track-t"], [class$="-track-name"], [class$="-layer-h"], [class$="-layer-t"], [class$="-layer-name"], [class$="-tier-name"], [class$="-tier-t"], [class$="-tier-title"] { font-size: 18px !important; line-height: 1.25 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* ============================================================ 21) UNIFIED HERO SLIDER CHROME — match homepage .bgh-dot / .bgh-nav Every hero slider across the site (Customer Experience, DeFi, Energy, Finance, Healthcare, Retail Hospitality, Real Estate, Telecom, Public Sector, Voice/Chat, AI Industries, Gallery) uses the same dot + arrow pattern as the homepage hero. Excludes `/gem`. ============================================================ */ /* Dot containers — flex row, small gap, center alignment */ [class$="-hero-dots"], [class$="-hero-nav"], .psec-hero-nav, .bgh-dots { display: flex !important; gap: 7px !important; align-items: center !important; z-index: 10; } /* Individual dot — 6×6 circle, transitions to gradient pill when active */ [class$="-hero-dot"], [class$="-hero-dots"] button, [class$="-hero-dots"] .dot, [class$="-hero-nav"] button, .psec-hero-dot { width: 6px !important; height: 6px !important; min-height: 0 !important; flex: 0 0 6px !important; max-width: none !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: rgba(255,255,255,0.22) !important; cursor: pointer; position: relative; overflow: hidden; transition: width 280ms cubic-bezier(0.22,0.86,0.34,1), flex-basis 280ms cubic-bezier(0.22,0.86,0.34,1), background 220ms ease, box-shadow 220ms ease, border-radius 220ms ease !important; } [class$="-hero-dot"]:hover, [class$="-hero-dots"] button:hover, [class$="-hero-nav"] button:hover { background: rgba(255,255,255,0.5) !important; } /* Active state — morph into a 22px gradient pill with glow */ [class$="-hero-dot"].on, [class$="-hero-dot"].is-active, [class$="-hero-dot"][aria-current="true"], [class$="-hero-dots"] button.on, [class$="-hero-dots"] button.is-active, [class$="-hero-dots"] button[aria-current="true"], [class$="-hero-nav"] button.on, .psec-hero-dot.on { width: 22px !important; flex-basis: 22px !important; border-radius: 3px !important; background: linear-gradient(90deg, #2a8eff, #5be3a8) !important; box-shadow: 0 0 12px rgba(42,142,255,0.55) !important; } /* Page-specific overrides where the dot is targeted by name with higher specificity than the wildcard above — ensures consistency. */ .cxc-hero-dots, .dfc-hero-dots, .fc-hero-dots, .fin-hero-dots, .en-hero-dots, .tc-hero-dots, .re-hero-dots, .rh-hero-dots, .gal-hero-dots, .vcc-hero-dots { /* Default position (inline at bottom of left text col); pages that want bottom-center can override per-page. */ margin-top: 28px; } /* Nav arrows — circular glass button matching homepage .bgh-nav */ .bgh-nav, .psec-hero-prev, .psec-hero-next, .cxc-hero-prev, .cxc-hero-next, .dfc-hero-prev, .dfc-hero-next, .fin-hero-prev, .fin-hero-next, [class$="-hero-prev"], [class$="-hero-next"], [class$="-hero-arr-prev"], [class$="-hero-arr-next"] { position: absolute; top: 50%; transform: translateY(-50%); width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)), rgba(8,14,28,0.6) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 50% !important; color: rgba(235,240,255,0.92) !important; cursor: pointer; z-index: 10; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 8px 24px -6px rgba(0,0,0,0.55) !important; transition: transform 220ms cubic-bezier(0.22,0.86,0.34,1), box-shadow 220ms ease, background 220ms ease, border-color 220ms ease; } .bgh-nav:hover, [class$="-hero-prev"]:hover, [class$="-hero-next"]:hover { background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)), rgba(20,40,80,0.7) !important; border-color: rgba(120,180,255,0.45) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 32px -6px rgba(0,0,0,0.65), 0 0 0 4px rgba(70,150,255,0.12), 0 0 24px rgba(70,150,255,0.35) !important; color: #fff !important; transform: translateY(-50%) scale(1.08); } .bgh-nav-prev, [class$="-hero-prev"], [class$="-hero-arr-prev"] { left: -22px; } .bgh-nav-next, [class$="-hero-next"], [class$="-hero-arr-next"] { right: -22px; } @media (max-width: 720px) { .bgh-nav, [class$="-hero-prev"], [class$="-hero-next"], [class$="-hero-arr-prev"], [class$="-hero-arr-next"] { width: 38px !important; height: 38px !important; } .bgh-nav-prev, [class$="-hero-prev"], [class$="-hero-arr-prev"] { left: 8px; } .bgh-nav-next, [class$="-hero-next"], [class$="-hero-arr-next"] { right: 8px; } } /* ============================================================ 23) SEMANTIC TYPOGRAPHY UTILITY CLASSES Opt-in classes that any new component can apply directly, matching the spec's named tokens (text-display, text-h1, …). These are token-driven shorthands — adjusting any :root variable updates everything that uses them. ============================================================ */ .text-display { font-size: clamp(var(--fs-display-min), 5.4vw, var(--fs-display)); line-height: var(--lh-display); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); } .text-h1 { font-size: clamp(var(--fs-h1-min), 4.5vw, var(--fs-h1)); line-height: var(--lh-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-h1); } .text-h2 { font-size: clamp(var(--fs-h2-min), 3.2vw, var(--fs-h2)); line-height: var(--lh-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-h2); } .text-h3 { font-size: clamp(var(--fs-h3-min), 2.4vw, var(--fs-h3)); line-height: var(--lh-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h3); } .text-h4 { font-size: clamp(var(--fs-h4-min), 1.8vw, var(--fs-h4)); line-height: var(--lh-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-h4); } .text-body-lg { font-size: clamp(var(--fs-body-lg-min), 1.6vw, var(--fs-body-lg)); line-height: var(--lh-body-lg); font-weight: var(--fw-regular); } .text-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); } .text-small { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); } .text-caption { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); letter-spacing: var(--ls-mono); text-transform: uppercase; } /* Stack utilities — vertical rhythm using the 4/8 spacing scale */ .stack-1 > * + * { margin-top: var(--space-1); } .stack-2 > * + * { margin-top: var(--space-2); } .stack-3 > * + * { margin-top: var(--space-3); } .stack-4 > * + * { margin-top: var(--space-4); } .stack-5 > * + * { margin-top: var(--space-5); } .stack-6 > * + * { margin-top: var(--space-6); } .stack-7 > * + * { margin-top: var(--space-7); } .stack-8 > * + * { margin-top: var(--space-8); } /* ============================================================ 24) PREMIUM POLISH PASS — Apple/Stripe-level refinement Subtle, system-wide UX upgrades that elevate execution without redesigning anything. All token-driven. ============================================================ */ /* ---- Brand text selection — replaces default browser blue ---- */ ::selection { background: rgba(79, 200, 255, 0.28); color: #fff; } ::-moz-selection { background: rgba(79, 200, 255, 0.28); color: #fff; } /* ---- Smooth scroll + reduce-motion respect ---- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Universal focus ring — accessible + premium ---- */ :focus-visible { outline: 2px solid var(--site-cyan, #4FC8FF); outline-offset: 2px; border-radius: 1px; } button:focus-visible, a:focus-visible, input:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--site-cyan, #4FC8FF); outline-offset: 3px; } /* ---- Tabular numerals on every stat / KPI / number value ---- Numbers stop jittering width when they animate. */ [class$="-v"], [class$="-val"], [class$="-num"], [class$="-n"], [class$="-stat-v"], [class$="-stat-val"], [class$="-stat-num"], [class$="-stat-n"], [class$="-kpi-v"], [class$="-kpi-val"], [class$="-counter"], .bgh-rot-bar, .bgh-h1 .ac { font-variant-numeric: tabular-nums lining-nums; } /* ---- Unified card hover motion (one grammar site-wide) ---- Every card-style element gets the same micro-lift + border hint + soft cyan shadow on hover. 240 ms / token-based easing. */ [class$="-card"]:not(.bgpd-card-pill):not(.module-card), [class$="-tile"]:not(.cwt2-step):not([class*="-strip"]), [class$="-prod"], [class$="-case"], [class$="-pat"], [class$="-mod"], .adi-card, .bgpd-card, .module-card, .cine-card, .ni-case, .ni-product, .psec-case, .psec-prod, .psec-h-card, .fin-card, .fc-card, .cxc-card, .dfc-card, .hc-card, .en-uc, .en-tile, .ihc-tile, .ihc-pat, .cap-card, .cap-cmp-col, .inf-cap, .inf-bp-card { transition: transform var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); will-change: transform; } [class$="-card"]:not(.bgpd-card-pill):not(.module-card):hover, [class$="-tile"]:not(.cwt2-step):not([class*="-strip"]):hover, [class$="-prod"]:hover, [class$="-case"]:hover, [class$="-pat"]:hover, [class$="-mod"]:hover, .adi-card:hover, .bgpd-card:hover, .module-card:hover, .cine-card:hover, .ni-case:hover, .ni-product:hover, .psec-case:hover, .psec-prod:hover, .fin-card:hover, .fc-card:hover, .cxc-card:hover, .dfc-card:hover, .hc-card:hover, .en-uc:hover, .en-tile:hover, .ihc-tile:hover, .ihc-pat:hover, .cap-card:hover, .cap-cmp-col:hover, .inf-cap:hover, .inf-bp-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); } /* ---- Image crispness on transform-scaled cards ---- */ [class$="-card"] img, [class$="-tile"] img, [class$="-prod"] img, [class$="-case"] img, .adi-card img, .bgpd-card img, .module-card img, .ni-case img, .ni-product img, .psec-case img, .fin-card img, .cxc-card img, .hc-card img { image-rendering: -webkit-optimize-contrast; transform-origin: center center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform var(--motion-base) var(--motion-ease); } /* ---- Universal card radius — one value site-wide ---- Only applies where the card doesn't have its own radius opinion. */ [class$="-card"]:not(.bgpd-card):not([class*="-radius"]), [class$="-tile"]:not([class*="-radius"]), .module-card, .cine-card, .ni-case, .ni-product, .psec-case, .psec-prod, .psec-h-card, .fin-card, .fc-card, .cxc-card, .dfc-card, .hc-card, .en-uc, .en-tile, .ihc-tile, .ihc-pat, .cap-card, .cap-cmp-col, .inf-cap, .inf-bp-card { border-radius: var(--radius-card); } /* ---- Button polish — refined motion + subtle hover lift ---- */ .btn, .btn-primary, .btn-ghost, .btn-link, [class$="-cta"]:not(.oth-cta):not(.inf-cta):not(.pc-cta):not(.ro-final-cta):not([class*="-row"]):not([class*="-body"]):not([class*="-band"]), [class$="-btn"]:not([class*="-row"]):not([class*="-grid"]) { transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .btn-primary:hover, [class$="-cta"].primary:hover, [class$="-btn"].primary:hover { box-shadow: 0 4px 14px -2px rgba(0, 85, 255, 0.42); } /* ---- Hairline separators on consecutive dark sections ---- Without changing background color, define rhythm via a 1px line. */ [class$="-section"] + [class$="-section"], .ni-section + .ni-section, [class$="-sec"] + [class$="-sec"] { position: relative; } [class$="-section"] + [class$="-section"]:not(.alt)::before, .ni-section + .ni-section:not(.deep)::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1200px, 92%); height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.06) 20%, rgba(255, 255, 255, 0.06) 80%, transparent 100% ); transform: translateX(-50%); pointer-events: none; } /* ---- Optical refinement — Hero Display weight ---- Apply --fw-display (500) specifically to the homepage hero, keeping h1 elsewhere at the new --fw-bold (600). */ .bgh-h1 { font-weight: var(--fw-display) !important; } /* ---- Eyebrow / caption micro-refinement — subtle baseline lift ---- */ .eyebrow, .bg-eyebrow, [class$="-eyebrow"], [class$="-tag"], [class$="-crumb"] { font-feature-settings: "ss01", "cv01"; font-variant-caps: all-small-caps; } /* ---- Anchor link refinement (text links inside copy) ---- */ p a:not(.btn):not(.btn-link):not([class*="-cta"]), [class$="-card-d"] a, [class$="-card-p"] a { color: var(--site-cyan, #4FC8FF); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; transition: background-size var(--motion-base) var(--motion-ease); } p a:not(.btn):not(.btn-link):not([class*="-cta"]):hover, [class$="-card-d"] a:hover, [class$="-card-p"] a:hover { background-size: 100% 1px; } /* ============================================================ 25) UNIFIED SECTION PADDING — flat 100 px top / bottom Every section across the site uses identical 100 px vertical padding. Excludes hero sections (heroes keep their own clamp for nav clearance + 600 px min-height behavior). Excludes /gem sections via :not selectors so the locked benchmark page is unaffected. Mobile: scales down to 64 px via clamp so it doesn't crush small screens; the spec value (100 px) is the desktop ceiling. ============================================================ */ /* Token (so future tuning is one-line) */ :root { --pad-section: clamp(64px, 9vw, 100px); } /* Generic section wildcards. `:not([class*="-c-sec"])` keeps the wildcard off card/widget LABEL classes like .ro-twobot-c-sec ("CAPABILITIES" / "COMMON MISSIONS") — those end in -sec but are tiny labels, not sections, and were getting section-scale vertical padding forced onto them. */ [class$="-section"]:not([class*="hero"]):not([class*="gem"]), [class$="-sec"]:not([class*="hero"]):not([class*="gem"]):not([class*="-c-sec"]), [class*="-section "]:not([class*="hero"]):not([class*="gem"]), /* Page-family-specific section selectors */ .ni-section:not(.ni-hero), .psec-sec:not(.psec-hero), .fin-section, .hc-section, .cap-section, .cxc-section:not(.cxc-hero), .dfc-section:not(.dfc-hero), .fc-section:not(.fc-hero), .en-sec:not(.en-hero), .ihc-sec:not(.ihc-hero), .tc-section:not(.tc-hero), .pc-section, .pc-cta, .bcs-suite, .hc-stats, .hc-deploy, .hc-cases, .hc-testim, .hc-cta, .aisol-cinema, .aisol-marquee, .aisol-products, .aisol-stack, .aisol-outcomes, .aisol-industries, .aisol-final, .aa-section:not(.aa-hero), .au-section, .inf-section:not(.inf-hero), .aip-section:not(.aip-hero), .aac-section:not(.aac-hero), .bcs-section, .adi-deep, .adi-final, .bgpd:not([class*="hero"]), .cw-section, .cs-section, .legal-section, .fin-fraud, .fin-cta-strip, .vc-arch, .vc-pillars, .vc-industries, .vc-scen, .vc-how, .vc-dash, .vc-benefits, .vc-deploy, .vc-enable, .vc-pack, .vc-faq, .vc-final, .vcg-what, .vcg-ways, .vcg-faq, .vp-pillars { padding-top: var(--pad-section) !important; padding-bottom: var(--pad-section) !important; } /* ============================================================ 26) UNIFIED BUTTON SYSTEM — primary / secondary site-wide Every CTA / button class with a .primary or .ghost/.secondary modifier renders identical to homepage .btn-primary / .btn-ghost. Base button shape (padding · font · radius) is enforced on every *-cta / *-btn class, so the visual system is one regardless of which page-prefixed wrapper class was used. Excludes /gem. ============================================================ */ /* ---- Base button shape — applies to every CTA / button class ---- Figma spec: padding 12 / 16, gap 8, center-aligned. */ .btn, .btn-primary, .btn-ghost, .btn-link, /* .nav-cta is the nav's layout cluster (logo-side CTA group), NOT a button — exclude it so this net can't pad it 12/16 + add a border. .sc-hero-cta is the same: the supply-chain hero's button-group wrapper, not a button — excluded for the same reason. */ [class$="-cta"]:not(.nav-cta):not(.sc-hero-cta):not(.oth-cta):not(.inf-cta):not(.pc-cta):not(.ro-final-cta):not(.final-cta):not(.bc-final-cta):not(.ni-cta):not(.ind-cta):not(.ld-cta):not(.tc-product-cta):not(.tc-sub-cta):not(.sc-cta):not([class$="-cta-row"]):not([class$="-cta-body"]):not([class$="-cta-band"]):not([class$="-cta-h"]):not([class$="-cta-sub"]):not([class$="-cta-strip"]):not([class$="-cta-wrap"]):not([class$="-cta-grid"]):not(.sc-cta-actions):not(.sc-cta-trust), [class$="-btn"]:not([class$="-btn-row"]):not([class$="-btn-grid"]):not([class$="-btn-wrap"]):not([class*="bgc-"]), [class$="-cta-primary"], [class$="-cta-ghost"], [class$="-cta-secondary"], [class$="-btn-primary"], [class$="-btn-ghost"], [class$="-btn-secondary"] { /* Excludes [class*="bgc-"] concierge widget buttons — they're small phone-style icon-above-label controls (.bgc-mob-btn, .bgc-switch-btn) designed with their own 9–9.5px font + vertical flex-column layout in concierge.css. Without the exclusion the .primary modifier dodged this net by ending the class string with "primary" instead of "-btn", making the Demo button visually smaller than its peers while Chat / WhatsApp / Voice got bulldozed into the 14px Figma button shape. */ display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 12px 16px !important; font-family: var(--font-display) !important; font-size: var(--fs-small) !important; /* 14 px */ font-weight: var(--fw-medium) !important; /* 500 */ line-height: 1 !important; letter-spacing: 0 !important; border-radius: 0 !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease) !important; border: 1px solid transparent !important; } /* ---- PRIMARY variant — Figma spec: bg #1E57F6 ---- */ .btn-primary, [class$="-cta"].primary, [class$="-cta"].prim, [class$="-cta"].is-primary, [class$="-btn"].primary, [class$="-btn"].prim, [class$="-btn"].is-primary, [class$="-cta-primary"], [class$="-btn-primary"], .psec-cta.primary, .ni-btn.primary, .fin-cta.primary, .cxc-btn.primary, .dfc-btn.primary, .fc-btn.primary, .tc-cta.primary, .en-cta.primary, .en-cta.prim, .ihc-cta.primary, .vcc-cta.primary, .rwc-cta.primary, .aip-cta.primary, .aac-cta.primary, .act-btn.primary, .bcs-cta.primary { background: #1E57F6 !important; color: #fff !important; border-color: #1E57F6 !important; } .btn-primary:hover, [class$="-cta"].primary:hover, [class$="-cta"].prim:hover, [class$="-cta"].is-primary:hover, [class$="-btn"].primary:hover, [class$="-btn"].prim:hover, [class$="-btn"].is-primary:hover, [class$="-cta-primary"]:hover, [class$="-btn-primary"]:hover, .psec-cta.primary:hover, .ni-btn.primary:hover, .fin-cta.primary:hover, .cxc-btn.primary:hover, .dfc-btn.primary:hover, .fc-btn.primary:hover, .tc-cta.primary:hover, .en-cta.primary:hover, .en-cta.prim:hover, .ihc-cta.primary:hover, .vcc-cta.primary:hover, .rwc-cta.primary:hover, .aip-cta.primary:hover, .aac-cta.primary:hover, .act-btn.primary:hover, .bcs-cta.primary:hover { background: #3D72FF !important; border-color: #3D72FF !important; box-shadow: 0 4px 14px -2px rgba(30, 87, 246, 0.42) !important; transform: translateY(-1px); } /* ---- SECONDARY variant — Figma spec: outline rgba(255,255,255,0.50) ---- */ .btn-ghost, [class$="-cta"].ghost, [class$="-cta"].gho, [class$="-cta"].secondary, [class$="-cta"].is-secondary, [class$="-btn"].ghost, [class$="-btn"].gho, [class$="-btn"].secondary, [class$="-btn"].is-secondary, [class$="-cta-ghost"], [class$="-cta-secondary"], [class$="-btn-ghost"], [class$="-btn-secondary"], .psec-cta.ghost, .ni-btn.ghost, .fin-cta.ghost, .cxc-btn.ghost, .dfc-btn.ghost, .fc-btn.ghost, .tc-cta.ghost, .en-cta.ghost, .en-cta.gho, .ihc-cta.ghost, .vcc-cta.ghost, .rwc-cta.ghost, .aip-cta.ghost, .aac-cta.ghost, .act-btn.ghost, .bcs-cta.ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.50) !important; } .btn-ghost:hover, [class$="-cta"].ghost:hover, [class$="-cta"].gho:hover, [class$="-cta"].secondary:hover, [class$="-cta"].is-secondary:hover, [class$="-btn"].ghost:hover, [class$="-btn"].gho:hover, [class$="-btn"].secondary:hover, [class$="-btn"].is-secondary:hover, [class$="-cta-ghost"]:hover, [class$="-cta-secondary"]:hover, [class$="-btn-ghost"]:hover, [class$="-btn-secondary"]:hover, .psec-cta.ghost:hover, .ni-btn.ghost:hover, .fin-cta.ghost:hover, .cxc-btn.ghost:hover, .dfc-btn.ghost:hover, .fc-btn.ghost:hover, .tc-cta.ghost:hover, .en-cta.ghost:hover, .en-cta.gho:hover, .ihc-cta.ghost:hover, .vcc-cta.ghost:hover, .rwc-cta.ghost:hover, .aip-cta.ghost:hover, .aac-cta.ghost:hover, .act-btn.ghost:hover, .bcs-cta.ghost:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.80) !important; transform: translateY(-1px); } /* ---- Text-link CTA variant — kept as inline underlined link ---- */ .btn-link { display: inline-flex !important; align-items: center !important; gap: 8px; color: #fff !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0 !important; padding: 0 0 4px !important; font-size: var(--fs-small) !important; font-weight: var(--fw-medium) !important; white-space: nowrap; transition: border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease) !important; } .btn-link:hover { color: var(--site-cyan, #4FC8FF) !important; border-color: var(--site-cyan, #4FC8FF) !important; } /* ============================================================ 27) SINGLE FONT FAMILY — strict site-wide enforcement Every element across the site renders in the same font (var(--font-display) → Instrument Sans). Includes elements that previously used JetBrains Mono (eyebrows, tags, crumbs, KPI labels). Wildcard + !important — no page-specific override can escape this. ============================================================ */ *, *::before, *::after { font-family: var(--font-display, "Instrument Sans", ui-sans-serif, system-ui, sans-serif) !important; } /* ============================================================ 28) ZERO BORDER RADIUS — strict site-wide enforcement Every element across the site renders with sharp 0 px corners. Universal wildcard + !important — beats every per-page radius declaration regardless of specificity. Excludes /gem (preserved by Section 19's source order). ============================================================ */ *, *::before, *::after { border-radius: 0 !important; } /* Update tokens so the design system's "card / pill" radii also resolve to 0 — any CSS using var(--radius-card) or var(--radius-pill) gets sharp corners. */ :root { --radius-card: 0 !important; --radius-pill: 0 !important; } /* ============================================================ 29) FULL-WIDTH FINAL CTA SECTIONS — every page The pre-footer "BUILD WITH BLOCK GEMINI" / "BOOK A WORKSHOP" / "TALK TO US" CTA strip on every page renders at 100% viewport width (full-bleed). Inner content wraps still constrain text to the 1440 container; this affects the outer section only. ============================================================ */ .hc-cta, .adi-final, /* NOTE: .bcs-cta is the chain-suite BUTTON class, not a section — it must NOT be in this full-bleed list or every BCS button stretches to 100% and the .bcs-cta-row wraps into a broken stack. Do not re-add it. */ .aa-final, .aac-cta, .aip-final, .au-final, .inf-final, .cap-cta, .cxc-final, .dfc-final, .fc-final, .fin-final, .fin-cta-strip, .tc-final, .en-final, .ihc-final, .vcc-final, .rwc-final, /* .ni-section.deep gets full-bleed BACKGROUND only — its inner .container must stay capped at 1440 (the deep variant is reused for the use-cases picker, not just the final CTA). The inner .ni-cta strip below carries its own full-bleed treatment via the .ni-cta selector. */ .ni-cta, .ni-section.deep, .ni-section.deep .ni-cta, .psec-final, .cw-final, .bgpd-cta, /* Suffix wildcards — catch every page-prefix variant in one rule */ [class$="-final"]:not([class*="-h"]):not([class*="-name"]):not([class*="-h2"]):not([class*="-h3"]):not([class*="-sub"]):not([class*="-p"]):not([class*="-wrap"]):not([class*="-content"]):not([class*="-bg"]):not([class*="-inner"]):not([class*="-ctas"]):not([class*="-ctas-"]), [class$="-final-cta"], [class$="-cta-strip"] { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; /* Box-sizing safety so any pre-existing padding doesn't cause overflow. */ box-sizing: border-box; } /* ============================================================ 30) GLOBAL SECTION MAX-WIDTH — 1440 px enforced site-wide Every section's content wrapper / inner container caps at 1440 px regardless of which page-prefix CSS defined it. Outer section elements keep their full-bleed backgrounds (Section 29 still enforces 100% on final-CTA sections); this rule only governs CONTENT WIDTH inside the section. ============================================================ */ .container, .container-narrow, .container-readable, /* Exclude nav-related wrappers (sticky nav must stay full-bleed), plus card/tile-inner wrappers which size to their grid cells. */ [class$="-wrap"]:not(.nav-wrap):not([class*="nav-"]):not([class*="-cta-wrap"]):not([class*="-card-wrap"]):not([class*="-tile-wrap"]):not([class*="-footer-wrap"]):not([class*="bgc-"]), [class$="-inner"]:not([class*="nav-"]):not([class*="-card-inner"]):not([class*="-tile-inner"]), [class$="-content"]:not([class*="nav-"]):not([class*="-card-content"]):not([class*="-tile-content"]), [class$="-frame"]:not([class*="-card-frame"]), .bgh-wrap, .hc-wrap, .ni-page .container, .psec-hero-wrap, .psec-sec-wrap, .psec-final-wrap, .fin-hero-grid, .fin-section-wrap, .cxc-hero-inner, .cxc-section-head, .cxc-final-inner, .dfc-hero-inner, .dfc-section-head, .dfc-final-inner, .fc-hero-inner, .fc-section-head, .fc-final-inner, .tc-hero-inner, .tc-deep-section, .tc-final-inner, .en-sec-wrap, .ihc-sec-wrap, .fd-pillars, .fd-flow, .fd-related, .cxd-head, .cxd-row, .cxd-grid, .cap-section-wrap, .cap-final-wrap, .aac-section-wrap, .aip-section-wrap, .adi-deep .container, .adi-final .container, .bgpd-wrap, .pc-wall-wrap, .pc-hero-wrap, .vc-section .container, .vc-final .container, .vcg-section .container, .bcs-suite-wrap, .hc-cta-content, .home-section-wrap { max-width: 1440px !important; margin-left: auto !important; margin-right: auto !important; padding-left: clamp(20px, 4vw, 32px); padding-right: clamp(20px, 4vw, 32px); box-sizing: border-box; } /* Body fallback (kept for any element bypassing the system) */ body { font-size: var(--fs-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } p { font-size: inherit; } /* ============================================================ 31 — NAV MENU RESTORATION Re-establishes nav typography + pill radii that Sections 27/28 over-zealously flattened. Must come AFTER 27/28/30. ============================================================ */ /* a) Nav-wrap must stay edge-to-edge (sticky bar background spans the viewport). It keeps full width + zero margin here, but it DOES own a 20px side gutter (set in styles.css). Padding sits inside the border-box, so the background still spans edge-to-edge — do NOT zero the padding here, or the gutter collapses. */ .nav-wrap, header.nav-wrap, .nav-wrap[class] { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* b) Inner .nav container DOES get capped + padded by .container — leave it. */ /* c) Restore mono-font on labelly/utility nav bits */ .nav-status, .nav-status *, .nav-search-kbd, .mega-eyebrow, .bgh-chip, .bgh-chip *, .bgh-pill, .bgh-pill * { font-family: var(--font-mono, ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace) !important; letter-spacing: 0.08em !important; } /* d) Restore pill / circle radii on nav chrome */ .nav-status, .bgh-chip, .bgh-pill { border-radius: 9999px !important; } .nav-search-btn { border-radius: 9999px !important; } .nav-search-kbd { border-radius: 4px !important; } .bgh-dot, .nav-status::before, .bgh-chip .bgh-dot { border-radius: 50% !important; } /* e) Mega menu wrappers must not be capped by Section 30 wildcards. They sit inside .nav-wrap and overlay the full top region. */ .mega, .mega-grid, .mega-cols, .mega-card, .mega-inner { max-width: none !important; width: auto !important; } /* f) Ensure nav CTA buttons keep their pill / sharp look as designed, not forced into the global button radius=0 rule for unrelated bits. */ .nav-cta .btn, .nav-cta .btn-primary, .nav-cta .btn-ghost { border-radius: 0 !important; /* keep buttons sharp — matches site spec */ } /* ============================================================ 32 — FIGMA BUTTON SPEC LOCK Doubled-class selectors (specificity 0,2,0) override any page-level .bgh-cta / .{prefix}-cta rule that also uses !important. Applies the Figma spec sizing universally. Primary fill: #1E57F6 · Secondary border: rgba(255,255,255,.5) Padding 12 / 16 · gap 8 · radius 0 ============================================================ */ /* Base shape — locks padding/gap/justify regardless of source order */ .btn.btn, .btn-primary.btn-primary, .btn-ghost.btn-ghost, .btn-link.btn-link, .bgh-cta.bgh-cta, .bgh-cta-primary.bgh-cta-primary, .bgh-cta-ghost.bgh-cta-ghost, .hc-cta-btn.hc-cta-btn, .hc-cta-cta.hc-cta-cta, .psec-cta.psec-cta, .ni-btn.ni-btn, .fin-cta.fin-cta, .cxc-btn.cxc-btn, .dfc-btn.dfc-btn, .fc-btn.fc-btn, .tc-cta.tc-cta, .en-cta.en-cta, .ihc-cta.ihc-cta, .vcc-cta.vcc-cta, .rwc-cta.rwc-cta, .aip-cta.aip-cta, .aac-cta.aac-cta, .act-btn.act-btn, .bcs-cta.bcs-cta, .rh-btn.rh-btn, .hcare-cta.hcare-cta, .cw-cta.cw-cta, .adi-cta.adi-cta, .au-cta.au-cta, .cap-cta.cap-cta { display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; padding: 12px 16px !important; font-family: var(--font-display) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; border-radius: 0 !important; white-space: nowrap !important; text-decoration: none !important; cursor: pointer; border: 1px solid transparent !important; } /* Primary fill — Figma #1E57F6 */ .btn-primary.btn-primary, .bgh-cta-primary.bgh-cta-primary, .psec-cta.primary.primary, .ni-btn.primary.primary, .fin-cta.primary.primary, .cxc-btn.primary.primary, .dfc-btn.primary.primary, .fc-btn.primary.primary, .tc-cta.primary.primary, .en-cta.primary.primary, .en-cta.prim.prim, .ihc-cta.primary.primary, .vcc-cta.primary.primary, .rwc-cta.primary.primary, .aip-cta.primary.primary, .aac-cta.primary.primary, .act-btn.primary.primary, .bcs-cta.primary.primary, .rh-btn.primary.primary, .hcare-cta.primary.primary, .cw-cta.primary.primary, .adi-cta.primary.primary, [class$="-cta"].primary.primary, [class$="-btn"].primary.primary { background: #1E57F6 !important; color: #fff !important; border-color: #1E57F6 !important; } .btn-primary.btn-primary:hover, .bgh-cta-primary.bgh-cta-primary:hover, [class$="-cta"].primary.primary:hover, [class$="-btn"].primary.primary:hover { background: #3D72FF !important; border-color: #3D72FF !important; box-shadow: 0 4px 14px -2px rgba(30, 87, 246, 0.42) !important; transform: translateY(-1px); } /* Secondary outline — Figma rgba(255,255,255,0.50) */ .btn-ghost.btn-ghost, .bgh-cta-ghost.bgh-cta-ghost, .psec-cta.ghost.ghost, .ni-btn.ghost.ghost, .fin-cta.ghost.ghost, .cxc-btn.ghost.ghost, .dfc-btn.ghost.ghost, .fc-btn.ghost.ghost, .tc-cta.ghost.ghost, .en-cta.ghost.ghost, .ihc-cta.ghost.ghost, .vcc-cta.ghost.ghost, .rwc-cta.ghost.ghost, .aip-cta.ghost.ghost, .aac-cta.ghost.ghost, .act-btn.ghost.ghost, .bcs-cta.ghost.ghost, .rh-btn.ghost.ghost, .hcare-cta.ghost.ghost, .cw-cta.ghost.ghost, .adi-cta.ghost.ghost, [class$="-cta"].ghost.ghost, [class$="-cta"].secondary.secondary, [class$="-btn"].ghost.ghost, [class$="-btn"].secondary.secondary { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.50) !important; } .btn-ghost.btn-ghost:hover, .bgh-cta-ghost.bgh-cta-ghost:hover, [class$="-cta"].ghost.ghost:hover, [class$="-cta"].secondary.secondary:hover, [class$="-btn"].ghost.ghost:hover, [class$="-btn"].secondary.secondary:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.80) !important; transform: translateY(-1px); } /* Nav-bar buttons inherit the same Figma spec */ .nav-cta .btn.btn, .nav-cta .btn-primary.btn-primary, .nav-cta .btn-ghost.btn-ghost { padding: 12px 16px !important; font-size: 14px !important; font-weight: 500 !important; gap: 8px !important; } /* ============================================================ 33 — STANDARD ARROW IN PRIMARY BUTTONS Every primary CTA across the site renders a single uniform arrow at the end (matching the nav-bar primary). Hides any existing inline children that were used as per-page arrow icons (Ic.arrowRight / AA_Ic.arrowR / CV_Ic.arrowR variants) so the visual is identical site-wide. Excludes /gem. ============================================================ */ /* Hide direct-child SVGs AND unclassed arrows inside every primary button. EXCEPTION: .bgh-cta (homepage hero) now renders a real inline arrow in its JSX — identical to the nav button — so it is deliberately NOT in this hide list and gets no ::after. */ .btn-primary > svg, .btn-primary > span:not([class]), [class$="-cta"].primary:not(.bgh-cta) > svg, [class$="-cta"].primary:not(.bgh-cta) > span:not([class]), [class$="-cta"].prim > svg, [class$="-cta"].prim > span:not([class]), [class$="-btn"].primary > svg, [class$="-btn"].primary > span:not([class]), [class$="-btn"].prim > svg, [class$="-btn"].prim > span:not([class]), .psec-cta.primary > svg, .psec-cta.primary > span:not([class]), .ni-btn.primary > svg, .ni-btn.primary > span:not([class]), .fin-cta.primary > svg, .fin-cta.primary > span:not([class]), .cxc-btn.primary > svg, .cxc-btn.primary > span:not([class]), .dfc-btn.primary > svg, .dfc-btn.primary > span:not([class]), .fc-btn.primary > svg, .fc-btn.primary > span:not([class]), .tc-cta.primary > svg, .tc-cta.primary > span:not([class]), .en-cta.primary > svg, .en-cta.primary > span:not([class]), .en-cta.prim > svg, .en-cta.prim > span:not([class]), .ihc-cta.primary > svg, .ihc-cta.primary > span:not([class]), .vcc-cta.primary > svg, .vcc-cta.primary > span:not([class]), .rwc-cta.primary > svg, .rwc-cta.primary > span:not([class]), .aip-cta.primary > svg, .aip-cta.primary > span:not([class]), .aac-cta.primary > svg, .aac-cta.primary > span:not([class]), .act-btn.primary > svg, .act-btn.primary > span:not([class]), .bcs-cta.primary > svg, .bcs-cta.primary > span:not([class]), .rh-btn.primary > svg, .rh-btn.primary > span:not([class]), .hcare-cta.primary > svg, .hcare-cta.primary > span:not([class]) { display: none !important; } /* Append the standard arrow as a pseudo-element for primary CTAs that don't carry their own inline SVG. .bgh-cta is excluded — the homepage hero renders a real arrow in markup instead. Uses an inline SVG data-URI (16×16 viewBox, same path as Ic.arrowRight). */ .btn-primary::after, [class$="-cta"].primary:not(.bgh-cta)::after, [class$="-cta"].prim::after, [class$="-btn"].primary::after, [class$="-btn"].prim::after, .psec-cta.primary::after, .ni-btn.primary::after, .fin-cta.primary::after, .cxc-btn.primary::after, .dfc-btn.primary::after, .fc-btn.primary::after, .tc-cta.primary::after, .en-cta.primary::after, .en-cta.prim::after, .ihc-cta.primary::after, .vcc-cta.primary::after, .rwc-cta.primary::after, .aip-cta.primary::after, .aac-cta.primary::after, .act-btn.primary::after, .bcs-cta.primary::after, .rh-btn.primary::after, .hcare-cta.primary::after { content: ''; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; /* Fully URL-encoded white arrow SVG (same path as window.Ic.arrowRight). Uses background-image — NOT mask — so it renders reliably across browsers regardless of alpha/luminance mask-mode differences. Primary buttons have white text, so a white arrow matches. */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208h10M9%204l4%204-4%204'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: middle; transition: transform var(--motion-fast) var(--motion-ease); } /* Subtle nudge on hover, matching the rest of the system */ .btn-primary:hover::after, [class$="-cta"].primary:not(.bgh-cta):hover::after, [class$="-btn"].primary:hover::after { transform: translateX(2px); } /* Homepage hero: nudge the real inline SVG arrow on hover instead */ .bgh-cta.primary:hover > svg { transform: translateX(2px); transition: transform var(--motion-fast, 160ms) var(--motion-ease, ease); } /* /gem preserves its own button arrows — never touched. */ .gem-page .btn-primary::after, .gem-section .btn-primary::after, .gem-cta::after { display: none !important; } /* ---- Homepage hero CTAs: left-align with the text ---- styles-hero-apple.css centers .bgh-ctas; the buttons should sit flush-left under the headline/sub copy. Higher specificity (.bgh-left / .bgh-grid descendant) beats that !important rule. */ .bgh-left .bgh-ctas, .bgh-grid .bgh-ctas, .bgh .bgh-ctas { justify-content: flex-start !important; align-items: center !important; } /* ============================================================ 34 — RESPONSIVE NAV (3-tier collapse) ------------------------------------------------------------ The bar is full-width with a constant 20px side gutter on .nav-wrap → a 1440px-capped, zero-padding .container → a 100%-wide .nav-inner flex row (logo · links · CTA cluster). It degrades in three tiers so it never overflows or crowds: Tier 1 >= 1340px : full — logo · 6 links · SYSTEMS LIVE pill · search · ghost CTA · primary CTA Tier 2 <= 1339px : drop the SYSTEMS LIVE pill + ghost CTA (decorative / secondary); 6 links stay Tier 3 <= 1100px : collapse to logo · search · hamburger; links + both CTAs live in the drawer (.nav-mobile renders them) High specificity + !important is required to beat Section 32's `display: inline-flex !important` button lock — a plain `display:none` in styles.css loses to it. ============================================================ */ /* Tier 2 — compact desktop / large tablet */ @media (max-width: 1339px) { .nav-cta .nav-status { display: none !important; } .nav-cta .btn-ghost.btn-ghost, .nav-cta a.btn-ghost { display: none !important; } } /* Tier 3 — tablet + mobile: logo · search · hamburger only */ @media (max-width: 1100px) { /* Hide desktop nav links */ .nav-wrap .nav-items, .nav-inner .nav-items { display: none !important; } /* Hide the remaining (primary) CTA from the top bar */ .nav-cta .btn.btn, .nav-cta a.btn, .nav-cta .btn-primary.btn-primary { display: none !important; } /* Keep visible: logo, search button, hamburger toggle */ .nav-logo { display: inline-flex !important; } .nav-cta .nav-search-btn { display: inline-flex !important; } .nav-cta .nav-mobile-toggle, .nav-mobile-toggle { display: flex !important; } } /* nav-cta — ZERO padding forced on tablet + mobile. The root fix is the `:not(.nav-cta)` exclusion on the §32 button net (it ends in "-cta", so the net would otherwise pad it 12/16 + add a 1px border + spill it past the 60px bar). This is the explicit guarantee: the search + hamburger cluster sits flush to the 20px gutter, mirroring the logo. */ @media (max-width: 1024px) { .nav-wrap .nav-cta, .nav-wrap .nav-inner .nav-cta { padding: 0 !important; } } /* ============================================================ 35 — GLOBAL RESPONSIVE SAFETY NET Site-wide responsive baseline. bg-typography.css loads last on every page, so these rules act as the authoritative fallback / override for layouts that don't collapse cleanly on their own. Breakpoints (3-tier): Desktop > 1024px (untouched) Tablet 641–1024px Phone ≤ 640px Excludes /gem (Section 19 preserves it via source order). ============================================================ */ /* ---- A) Universal overflow + media guards (all viewports) ---- */ html, body { overflow-x: clip !important; max-width: 100% !important; } img, svg, video, canvas, iframe, picture { max-width: 100% !important; } img, video, picture { height: auto; } /* Flex/grid children with long content must be allowed to shrink, otherwise they force horizontal overflow on small screens. */ [class*="-grid"] > *, [class*="-cols"] > *, [class*="-row"] > *, [class*="-flex"] > *, [class*="-cards"] > * { min-width: 0; } /* Wide media tables scroll inside their own box instead of the page */ table { max-width: 100%; } /* ============================================================ TABLET — ≤ 1024px ============================================================ */ @media (max-width: 1024px) { /* Hero / feature side-by-side 2-col layouts → stack vertically */ [class$="-hero-grid"], [class$="-hero-grid2"], [class$="-hero-inner"], [class$="-hero-stack"]:not(.psec-hero-stack), .bgh-grid, .oth-slide, .fin-hero-grid, .psec-hero-grid2, .feature, .feature.reverse, .hero-inner, [class$="-split"], [class$="-two-col"], [class$="-2col"] { grid-template-columns: 1fr !important; } /* Dense content grids (3+ cols) → 2 cols on tablet. SCOPED TO HOMEPAGE ONLY (per request 2026-05-15) — the global form of this rule was causing site-wide cascade fights with per-page responsive grids (gallery, ai-agents, rwa, chain-suite all had to rename/!important their way around it). Homepage keeps the tablet 2-col collapse because its dense product grids depend on it. Excludes small-element rows that should stay inline. */ [data-screen-label^="Homepage"] [class$="-grid"]:not([class*="stat"]):not([class*="chip"]):not([class*="tab"]):not([class*="badge"]):not([class*="dot"]):not([class*="nav"]):not([class*="logo"]):not([class*="icon"]):not([class*="hero"]):not([class*="foot"]), [data-screen-label^="Homepage"] [class$="-cards"]:not([class*="stat"]), [data-screen-label^="Homepage"] [class$="-tiles"], [data-screen-label^="Homepage"] [class$="-cols"]:not([class*="chip"]):not([class*="tab"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Trim oversized fixed section padding */ [class$="-section"], [class$="-hero"], section { padding-left: clamp(20px, 4vw, 40px) !important; padding-right: clamp(20px, 4vw, 40px) !important; } } /* ============================================================ PHONE — ≤ 640px ============================================================ */ @media (max-width: 640px) { /* Every content grid / card grid / column layout → single column. Small-element rows (chips, tabs, dots, nav, badges, stats, logos, icons) are excluded so they keep flowing inline. Includes the `[data-screen-label^="Homepage"]` variants so they beat the `≤1024px` homepage-scoped rule (which is (0,12,0)!important) on specificity at phone widths. */ [class$="-grid"]:not([class*="chip"]):not([class*="tab"]):not([class*="badge"]):not([class*="dot"]):not([class*="nav"]):not([class*="logo"]):not([class*="icon"]):not([class*="pill"]):not([class*="foot"]), [class$="-grid2"], [class$="-cards"], [class$="-cols"]:not([class*="chip"]):not([class*="tab"]), [class$="-tiles"], [class$="-bento"], [class$="-masonry"], [class*="-grid "]:not([class*="chip"]):not([class*="tab"]):not([class*="dot"]), /* Homepage variants — extra :not() clauses to overtake the ≤1024 homepage rule's (0,12,0) specificity. Source order then wins because this block comes later. */ [data-screen-label^="Homepage"] [class$="-grid"]:not([class*="chip"]):not([class*="tab"]):not([class*="badge"]):not([class*="dot"]):not([class*="nav"]):not([class*="logo"]):not([class*="icon"]):not([class*="pill"]):not([class*="foot"]):not([class*="hero"]):not([class*="stat"]), [data-screen-label^="Homepage"] [class$="-cards"]:not([class*="stat"]):not([class*="hero"]), [data-screen-label^="Homepage"] [class$="-tiles"]:not([class*="stat"]):not([class*="hero"]), [data-screen-label^="Homepage"] [class$="-cols"]:not([class*="chip"]):not([class*="tab"]):not([class*="stat"]):not([class*="hero"]) { grid-template-columns: 1fr !important; gap: clamp(16px, 4vw, 24px) !important; } /* Stat strips: 3–4 across is fine on phone as 2-up, not 1 */ [class*="stat"][class$="-grid"], [class$="-stats"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* CTA / button rows → full-width stacked buttons */ [class$="-ctas"], [class$="-cta-row"], [class$="-btn-row"], [class$="-actions"], [class$="-buttons"], .oth-cta, .bgh-ctas { flex-direction: column !important; align-items: stretch !important; width: 100%; } [class$="-ctas"] > a, [class$="-ctas"] > button, [class$="-cta-row"] > a, [class$="-cta-row"] > button, .oth-cta > a, .bgh-ctas > a { width: 100% !important; justify-content: center !important; } /* Section padding — tighten vertical + horizontal rhythm */ [class$="-section"], [class$="-hero"], section, [class$="-deep"], [class$="-final"], [class$="-cta"]:not(.sc-hero-cta) { padding-left: clamp(16px, 5vw, 24px) !important; padding-right: clamp(16px, 5vw, 24px) !important; } [class$="-section"], section { padding-top: clamp(48px, 12vw, 72px) !important; padding-bottom: clamp(48px, 12vw, 72px) !important; } /* Display / hero typography — cap so it never overflows the viewport */ [class$="-hero-h"], [class$="-hero-h1"], [class$="-hero-title"], [class$="-h1"], .bgh-h1, .oth-h1, h1 { font-size: clamp(32px, 8.5vw, 44px) !important; line-height: 1.1 !important; } [class$="-h2"], [class$="-section-title"], h2 { font-size: clamp(26px, 6.5vw, 34px) !important; line-height: 1.15 !important; } /* Big stat numbers shouldn't blow past the screen edge */ [class$="-stat-n"], [class$="-stat-num"], [class$="-num"], [class$="-big-n"], [class$="-metric-v"] { font-size: clamp(28px, 9vw, 44px) !important; } /* Side-by-side flex blocks that weren't grids → stack */ [class$="-split"], [class$="-two-col"], [class$="-2col"], [class$="-detail"], [class$="-stage-body"] { grid-template-columns: 1fr !important; flex-direction: column !important; } /* Horizontal scrollers / wide tables get their own scroll box */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Kill oversized fixed widths that cause horizontal scroll */ [class$="-card"], [class$="-tile"], [class$="-panel"], [class$="-stage"] { max-width: 100% !important; } } /* ---- /gem exclusion: revert the net for the locked page ---- Was firing at all viewports — `revert !important` resolves to the user-agent default `none`, which collapsed every gem grid to a single column on desktop. The original intent was only to undo the global tablet/mobile `[class$="-grid"]` net's force-collapse on /gem (the page is design-locked and brings its own responsive rules). Wrap in @media so desktop layout stays intact. */ @media (max-width: 1024px) { .gem-page [class*="-grid"], .gem-page [class*="-cols"], .gem-section [class*="-grid"] { grid-template-columns: revert !important; } } /* ============================================================ 36 — CONTENT TEXT SIZE TRIM Stat numbers, box values, data displays, and card/feature titles were maxing at 40px — visually competing with the 40px section-header (H2) scale. Trimmed so content reads clearly BELOW headers. Section headers (-section-title, -h1, -h2, *-hero-h) and all 46px hero headlines are intentionally NOT touched. Excludes /gem. ============================================================ */ /* Stat numbers / box values / data displays — kept moderately prominent but well below the section-title scale. */ .aac-out-v, .cw-output-card .v, .cw-ba-side .stat .n, .inf-obs-stat .big, .loc-map-stat .num, .dc-rev-h-num, .dc-fore-h-num, .esg-sc-ring-num .num, .ind-hub-counter .n, .ind-stat-n, .sc-cold-temp, .dtp-pass-air .code { font-size: clamp(20px, 2vw, 26px) !important; } /* Card / feature / panel titles inside content blocks — aligned to the refined card-title scale (~18px), never headline-sized. */ .hc-case-title, .res-feat-ttl, .hv-ind-h, .ld-cta h3 { font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.3 !important; } /* ============================================================ 37 — TYPOGRAPHY HIERARCHY: BYPASS COVERAGE Extends the token scale to classes that escaped Sections 18 & 22 either by off-pattern suffix (.v / .val / -num / -name / -ttl) or by compound-selector specificity (.x-head h3, .x-content h4). These were the "still inconsistent" sections — stat values ranged 22–46px and competed with section headlines. Pins every supporting element to its correct, subordinate tier. Excludes /gem (:not([class*="gem"])) and nav chrome. ============================================================ */ /* ---- A) Stat / KPI / metric VALUES → consistent moderate tier. Prominent enough to read as data, never headline-sized (max 24px sits clearly below the 30px section-title). ---- */ [class$="-v"]:not([class*="gem"]):not([class*="nav"]), [class$="-val"]:not([class*="gem"]), [class$="-num"]:not([class*="gem"]), [class$="-stat-n"]:not([class*="gem"]), [class$="-proof-n"]:not([class*="gem"]), [class$="-roi-big"]:not([class*="gem"]), [class$="-big"]:not([class*="gem"]):not([class*="-cta-big"]), [class*="-stat"] > .v, [class*="-stat"] > .val, [class*="-stat"] > .num, [class*="-stat"] > .n, [class*="-kpi"] > .v, [class*="-kpi"] > .val, [class*="-metric"] > .v, [class*="-livestat"] > .v, .hc-kpi .val, .hc-gem-stat .val, .adi-stat .v, .adi-deep-stat .v, .aax-hero-kpi .v, .kpi-tile .val, .inv-card .v, .scs-metric .v, .psec-chat-stat .v, .psec-out-cell .v, .pcc-out-card .v, .ni-livestat .v, .cw-tl-out .v, .cw-input-label .val, .aat-tele-cell .v, .av-cin .av-c-outcomes-grid .v, .da-cin .da-c-outcomes-strip-item .v, .lw-cin .lw-c-outcomes-grid .v, .st-cin .st-c-outcomes-grid .v, .st-cin .st-c-recall-totals .v, .cv-flow-foot-cell .v, .rwc-sim-r-summary .v, .vc-dash-card-v, .dw-bal-val, .hic-kpi-v, .sc-mock-v, .pb-model-num, .pp-stage-num, .en-proof-n, .en-roi-big, .fin-kpi-tile-v, .fin-sub-stat-v, .ihc-proof-n, .pcc-leak-summary .big, .inf-obs-stat .big, .ind-hero-marketchip-n, .ind-hub-card-market .n, .aa-cv-final-proof-row .num, .gofc-stat-num, .hv-sys-v, .re-ex-stat-n { font-size: clamp(20px, 1.8vw, 24px) !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; } /* ---- B) Off-pattern card / item titles → card-title tier (~17px). Were 22–24px, reading as mini-headlines. ---- */ [class$="-name"]:not([class*="gem"]):not([class*="nav"]):not([class*="-eyebrow"]):not([class*="-tag"]):not([class*="-stage-name"]), [class$="-ttl"]:not([class*="gem"]), [class$="-subj"]:not([class*="gem"]), [class$="-city"]:not([class*="gem"]), [class$="-cell-h"]:not([class*="gem"]), .aat-stage-name, .ihc-stage-name, .aa-pick-name, .re-sub-card-name { font-size: clamp(15px, 1.4vw, 17px) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.005em !important; } /* ---- C) Compound-selector headings that bypassed via specificity. h3/h4 nested inside block containers — pin to card-title scale so a card sub-heading never competes with the section. */ [class$="-head"] h3:not([class*="gem"]), [class$="-head"] h4, [class*="-content"] h3:not([class*="gem"]), [class*="-content"] h4, [class$="-card"] h3:not([class*="gem"]), [class$="-card"] h4, [class$="-panel"] h3:not([class*="gem"]), [class$="-panel"] h4, [class$="-col"] h3:not([class*="gem"]), [class$="-col"] h4, .aac-bus-head h3, .aac-run-head h3, .aip-wf-head h3, .gem-launch-content h3 ~ none { font-size: clamp(16px, 1.5vw, 18px) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* ---- D) Misc content text that read too large ---- */ .av-tower-iata, .gofc-card-flag, .res-news-ttl, .pc-brief-subj, .dc-scene-meta-h, .cw-tl-h, .sc-portal-h, .au-faq-tg, .aa-cv-faq-q .x, .legal-section-p { font-size: clamp(14px, 1.2vw, 16px) !important; line-height: 1.45 !important; font-weight: 500 !important; } /* ============================================================ 38 — GRAPHIC-WIDGET HEADINGS The §3 [class$="-h"] section-heading wildcard was catching headings INSIDE graphic widgets and inflating ALL of them to the 32px section-title scale — including 9.5px mono labels. Every graphic's internal hierarchy collapsed (labels screaming as loud as section titles). Restored to three disciplined tiers: micro-label, widget-heading, scene-heading. Covers: /ai-agents + /ai-infrastructure graphic components. ============================================================ */ /* Tier A — graphic micro-labels → mono caption scale (~11px) */ .aa-cv-bldr-log-h, .aa-cv-form-h, .aa-proof-logos-h, .aat-col-h, .aat-card-h, .tcp-rbac-h, .tcp-aq-col-h, .tcp-aq-card-h, .tcp-audit-h, .tcp-mon-h, .tcp-fs-stage-h, .tcp-fs-events-h, .inf-cmd-tools-h, .inf-builder-h, .inf-obs-h, .orch-mem-band-h, .inf-router-col .col-h, .inf-router-side .rule-h, /* /computer-vision §02 stage + tabs: -num / -title suffixes were inflated by §2 (-title→44px) and §37 (-num→24px). */ .cv-stepgfx-num, .cv-stage-bezel-title, .cv-stage-caption-num, .cv-stage-tab-num { font-size: 11px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* /computer-vision §02 — stage caption + bottom-tab titles (designed at 14px, were blown up to 44px by the -title wildcard). */ .cv-stage-caption-title, .cv-stage-tab-title { font-size: 14px !important; line-height: 1.3 !important; font-weight: 500 !important; letter-spacing: -0.01em !important; } /* Tier B — graphic-widget headings → unified ~17px. These label a sub-block inside a graphic; they must read as widget chrome, never as a page section title. */ .aa-flow-h, .aa-intx-h, .aa-why-h, .aa-cv-flow-h, .aa-cv-pain-h, .aa-cv-gov-h, .aa-cv-outsoft-h, .aa-cv-dept-h, .aa-cv-way-h, .aax-outc-h, .tcp-rbac-agent-h, .tcp-fs-node-h, .cw-roi-h, .cw-tl-h, .aa-tx-name, .inf-cmp-h, .inf-cap-h, .inf-type-h, .inf-int-h, .inf-bene-h, .inf-gov-h, .inf-dep-h, .inf-story-h, .inf-tab-h, .inf-sol-h { font-size: clamp(15px, 1.5vw, 17px) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } /* Tier B+ — scene-level graphic heading: the most prominent heading inside a graphic, but still clearly subordinate to real 30px section titles. */ .aa-ind-scene-h { font-size: clamp(17px, 1.8vw, 20px) !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: -0.015em !important; } /* ============================================================ 39 — SEARCH MODAL CHROME .bgs-result-title ends in "-title", so §2's [class$="-title"] hero-headline wildcard was inflating the search suggestion titles to clamp(30–44px). Restore them to the compact UI size the search modal was designed for. ============================================================ */ .bgs-result-title { font-size: 13.5px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: 0 !important; } /* /industry-supply-chain — Mission Control console header bar. `.sc-console-title` ends in "-title", so §2's [class$="-title"] wildcard (and the mobile `[class$="-title"]:not()...` net) blew this mono console-chrome label up to clamp(30-44px). Restore the compact 12px UI size it was designed for. Selector specificity is raised past the mobile :not()-net (0,4,0) so it wins on phones. */ .sc-section .sc-console .sc-console-head .sc-console-title:not([class*="gem"]) { font-size: 12px !important; line-height: 1.3 !important; letter-spacing: 0.14em !important; font-weight: 400 !important; } @media (max-width: 560px) { .sc-section .sc-console .sc-console-head .sc-console-title:not([class*="gem"]) { font-size: 10.5px !important; letter-spacing: 0.1em !important; } } /* ============================================================ 40 — UNIFIED CTA SECTION STYLE Every pre-footer CTA section across the site gets ONE consistent treatment — same subtle dark wash with a blue top-glow, same section rhythm, same 1px top separator — while each section's internal layout is left untouched. Selectors are scoped to the `section` ELEMENT (e.g. `section[class$="-cta"]`), which can NEVER match an /