/* ===================================================================================== premium-vcpility-site.css — the VCPility palette for the OTHER 36 pages (10 Sep 2026). Owner: "also complete the other pages with the same colour palette." The homepage's own sheet, premium-vcpility.css, is a homepage-only layer: nearly every selector in it is prefixed `html.sa-skin-vcpility.luxe.sunlit.sunnyaid`, and the sunnyaid and sunlit classes exist on the homepage alone. Loading it elsewhere would achieve almost nothing. So this is a separate, page-agnostic layer, keyed on `html.vc-site`, which transform.cjs adds to every page except the homepage. It works the same way the earlier re-skins did: the site already declares its palette as custom properties and about a thousand rules read them, so re-pointing the tokens re-dresses nearly everything before a single component rule is written. What follows the token block is only the handful of things a token cannot reach - the type, the corners, the flat cards, the header. Contrast, measured, all pairings at or above the 4.5:1 bar: ink #0C0F16 on #EDEDEE 16.2:1 muted #3F4540 on #EDEDEE 8.0:1 white on the fill red 5.4:1 deep red #B00E12 on white 7.2:1 white on the deep band 18.9:1 pale red #FF9A93 on it 9.7:1 ===================================================================================== */ html.vc-site { /* the accent family, identical to the homepage's so the two never drift */ --vc-accent: #ED1C24; --vc-accent-fill: #D40F17; --vc-accent-deep: #B00E12; --vc-accent-soft: #FF9A93; --vc-accent-tint: #FDEAEA; --vc-ink: #0A0A0B; --vc-base: #EDEDEE; --vc-alt: #F6F6F7; /* the site's own tokens, re-pointed. This is the move that does the work. */ --color-lyd-cream: #EDEDEE; --color-lyd-surface: #F6F6F7; --color-lyd-ink: #0C0F16; --color-lyd-muted: #3F4540; --color-lyd-line: #DCDCDE; --color-lyd-line-strong: #C3C3C6; --color-lyd-secondary: #4A4F52; /* the deep petrol family becomes the template's near-blacks */ --color-lyd-deep: #0A0A0B; --color-lyd-deep-800: #05070A; --color-lyd-deep-600: #141417; --color-lyd-deep-400: #2A2A2E; --color-lyd-dark-body: rgba(255, 255, 255, 0.72); /* yellow was the act colour. It is red now, everywhere, exactly as on the homepage. The label on it has to move to white in the same breath: dark ink on this red is 4.4:1 and fails. */ --color-lyd-yellow: #D40F17; --color-lyd-yellow-deep: #96090D; --color-lyd-gold-ink: #B00E12; --gold: #ED1C24; --gold-2: #FF9A93; --gold-3: #B00E12; --c-gold: #ED1C24; --c-gold-ink: #B00E12; /* the pale blues become pale reds */ --color-lyd-blue: #FDEAEA; --color-lyd-blue-deep: #F8CFCF; /* Round 19, second pass. The five properties below were missed the first time, and a sweep of all 24 pages found 271 elements still rendering gold because of them: every skip link, every kicker, the FAQ signs, the numbered discs, the peach tint cards, the comparison table's column heads. They are declared as bare literals on `:root` and `.luxe` in the shared sheets, so re-pointing them here - at `html.vc-site`, which is one class more specific and exists on no other page - reaches every consumer without touching the homepage's other two skins. Matched by role, not by hue: a pale gold that sat on a dark band becomes a pale red, a dark gold that sat on a light band becomes a deep red, a fill stays a fill. */ --gold-ink: #B00E12; --gold-grad: #D40F17; --conv-gold: #D40F17; --conv-gold-2: #FF9A93; --peach-tint: #FDEBE9; /* square, like the template */ --sa-radius-panel: 0px; --sa-radius-card: 0px; --sa-radius-pill: 0px; } /* ---------------- type ---------------- */ /* h1 and h2 are deliberately NOT in this list. The approved homepage sets its h1 and all eight of its h2s in Manrope and only starts Plus Jakarta Sans at h3, so forcing the display face here would have made these pages differ from the page they are being matched to - the opposite of the ask. Measured, not assumed: the first version of this rule included them and the harness failed the homepage against its own siblings. */ html.vc-site body, html.vc-site :is(h3, h4, h5, h6, p, li, a, button, summary, span, strong, em, small, label, input, textarea, select, figcaption, blockquote, td, th) { font-family: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif !important; } html.vc-site main :is(h1, h2) { letter-spacing: -0.035em !important; } html.vc-site main h3 { letter-spacing: -0.02em !important; } /* ---------------- square ---------------- */ html.vc-site :is( .btn, a.btn, button, [data-slot="card"], .card, .card-lyd, .carousel-card, .demo-frame, .pipe__frame, input, textarea, select, img, figure, .rd-photo-fig, .rd-photo-frame, .cap-link, .rd-card-doc, .contact-card, .chip, .badge ), html.vc-site :is([class*="rounded"], [class*="radius"]) { border-radius: 0 !important; } /* a circle is a shape, not a corner */ html.vc-site :is(.disc, [class*="social"] a, .contact-social > a, .rd-hero-abn, .pipe__avatar, .sa-cf-social a) { border-radius: 999px !important; } /* ---------------- grounds ---------------- */ html.vc-site body { background: var(--vc-base) !important; } html.vc-site main section[data-band="deep"], html.vc-site footer.footer-deep { background: var(--vc-ink) !important; background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.3px) !important; background-size: 8px 8px !important; } /* ---------------- cards: white and flat, as the template has them ---------------- */ /* `:not(section[data-band="deep"] *)` again, and for the same reason as the text rules below: a card on a dark band is a translucent glass panel with light type inside it, and forcing it white left the type white on white. It was two nodes on /demo, both measuring 1:1. */ html.vc-site #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *) { border: 0.8px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s; } /* The white ground is stated separately, and exempts six things, because the first version of this rule set it on every card at ID weight and wiped out work that was deliberate: premium-color.css gives four cards on /about and /features a sky, lilac, mint or peach tint, .card-anchor is meant to be the near-black card in its row, and .bg-lyd-blue is the pale panel the palette re-points rather than replaces. Flat and white are two different decisions; a tinted card can be flat. `.co-team__card` is on the list for the same reason and was found by measurement rather than by reading: a pass that snapshots every card's ground with this sheet on and off, and reports any that flipped from dark to light, named it as the only one site-wide. It is the founder's card on /team, a deep petrol panel deliberately placed on a light band, and flattening it to white left its light type at 1.25:1. It stays dark, in the palette's near-black. */ html.vc-site #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.tint-sky):not(.tint-lilac):not(.tint-mint):not(.tint-peach):not(.card-anchor):not(.card-elevate):not(.co-team__card):not([class~="bg-lyd-blue"]):not([class~="bg-lyd-yellow"]) { background: #FFFFFF !important; } html.vc-site.pm #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card):not(section[data-band="deep"] *):hover { transform: translateY(-3px); border-color: rgba(237, 28, 36, 0.55) !important; } @media (prefers-reduced-motion: reduce) { html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card) { transition: none !important; } } /* ---------------- buttons: one red fill, one hairline ghost ---------------- */ html.vc-site :is(.btn, a.btn) { border-radius: 0 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; box-shadow: none !important; } /* `[class~=]`, not `[class*=]`. A substring match also matches Tailwind's own `hover:bg-lyd-yellow`, which turned every hover-only fill into a permanent one: the service cards on /demo, the language buttons and three CTAs on /pricing all came out solid red with their original dark labels still on them. `~=` matches the class as a whole word, so only elements that really are filled match. */ html.vc-site :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"], .td-cta, #v2-cap-trigger-float) { background: var(--vc-accent-fill) !important; border: 0.8px solid var(--vc-accent-fill) !important; color: #fff !important; /* 5.4:1. Dark ink on this red is 4.4:1 and fails */ } /* and the LABELS inside them. Setting colour on the button is not enough: these components wrap their text in spans that carry their own `text-lyd-ink`, which beats an inherited white. Dark ink on this red is 3.54:1 and the harness caught it on four pages at once. */ html.vc-site :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"], .td-cta, #v2-cap-trigger-float) :is(span, strong, em, small, svg, path) { color: #fff !important; stroke: currentColor; } html.vc-site :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"], .td-cta, #v2-cap-trigger-float):hover { background: #96090D !important; border-color: #96090D !important; } html.vc-site main :is(.btn-ghost-light, .btn-ghost-dark) { background: transparent !important; border: 0.8px solid rgba(10, 10, 11, 0.22) !important; color: var(--color-lyd-ink) !important; } html.vc-site main :is(section[data-band="deep"], .sa-panel) :is(.btn-ghost-light, .btn-ghost-dark) { border-color: rgba(255, 255, 255, 0.32) !important; color: #fff !important; } /* ---------------- the header, light frosted glass, as on the homepage ---------------- */ html.vc-site header { background: rgba(246, 246, 247, 0.72) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) brightness(1.06); backdrop-filter: blur(20px) saturate(1.4) brightness(1.06); border-bottom: 0.8px solid rgba(10, 10, 11, 0.1) !important; box-shadow: none !important; } html.vc-site header.pm-scrolled { background: rgba(246, 246, 247, 0.94) !important; } html.vc-site header :is(a, button, span, .nav-link) { color: var(--color-lyd-ink) !important; } html.vc-site header .nav-link::after { background: var(--vc-accent) !important; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.vc-site header { background: rgba(246, 246, 247, 0.97) !important; } } html.vc-site #v2-mobile-menu { background: var(--vc-alt) !important; } html.vc-site #v2-mobile-menu :is(a, span, button) { color: var(--color-lyd-ink) !important; } /* ---------------- focus rings follow the ground, as Round 10 established ---------------- */ html.vc-site main :is(a, button, summary, [tabindex="0"]):focus-visible { outline: 2px solid var(--vc-accent-deep) !important; outline-offset: 3px; } html.vc-site :is(main section[data-band="deep"], main .sa-panel, footer.footer-deep) :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--vc-accent-soft) !important; } html.vc-site :is(main, header, footer) :is(.btn-primary-dark, .btn-primary-light, a[class~="bg-lyd-yellow"]):focus-visible { outline-color: #fff !important; /* white clears both the fill and the ground beside it */ } /* A broad "anything classed bg-lyd-yellow gets white text" rule was tried here and made things worse, so it is recorded rather than left in. The premium layers carry 105 HARD-CODED gold literals (#dcb13a, #f1d27c, #f8efd6) across seven shared stylesheets, and a class-based rule cannot tell an element the token painted red from one a literal still paints gold. It put white on gold at 2.02:1 and white on cream at 1.15:1 - four new failures to fix three old ones. Those literals are not re-pointed, because those seven sheets are shared with the two other skins on the homepage, which are deliberately still yellow. The three elements that really do take the red fill are named below instead. */ /* A white card states its own text colours. The pricing tier cards are forced white by the card rule above, but their contents inherited from whatever sits behind them, and the contrast walker composited two of their labels against a red ancestor rather than against the card. Saying it here removes the ambiguity: the card is white and its type is ink and muted, full stop. */ /* Weight matters here and it is NOT the same for every rule in this block. The SHADOW and BACKGROUND rules above sit at `#main` because they have to clear the shared layers' `:not(._a)...:not(._j)` chains. These TEXT rules deliberately stay at plain `main` weight: raised to ID weight they beat the narrow rules that put a white label on a red fill, and twelve rows came back - the estimator's selected plan, the "You, on LYD NDIS" row, the tick discs on the tinted cards. `.card-anchor` is excluded outright: it is the near-black card, and 25 axe violations on /features were this block painting ink and muted onto it. `:not(section[data-band="deep"] *)` is doing real work here too, and the first version of this rule did not have it. It is written as a negation on the card itself rather than as `section:not([data-band="deep"]) .card`, because that form silently requires a section ancestor and most cards on /about, /contact, /quote and /how-it-works have none - twelve C2 rows. `#main` rather than `main`, and `[data-lift]` in the list, are both load-bearing. The shared layers dress cards through the `:not(._a)...:not(._j)` chains, which measure (0,11,x) and beat any amount of !important at plain class weight; an ID compound is the documented way past them on this project. And 23 of the 24 cards the harness counts on /features are matched by `[data-lift]` alone, so without it the flat treatment reached one card in twenty-four and every other one kept a 28px drop shadow. Not every card in this template sits on a light ground: the pricing tiers and several closing bands are translucent glass panels over a near-black section, and their text was always light. Stating ink and muted on those turned twenty-one text nodes across four pages into dark-on-dark, the worst of them 1.03:1. The dark bands already dress their own contents, so the only cards that need telling are the ones on a light ground. */ html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.card-anchor):not(.card-anchor *) { color: var(--color-lyd-ink) !important; } html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.card-anchor):not(.card-anchor *) :is(h1, h2, h3, h4, strong, b, dt, .font-display) { color: var(--color-lyd-ink) !important; } html.vc-site main :is([data-slot="card"], .card, .card-lyd, .carousel-card, .contact-card):not(section[data-band="deep"] *):not(.card-anchor):not(.card-anchor *) :is(p, li, dd, small, figcaption, span:not([class~="bg-lyd-ink"]):not([class~="bg-lyd-yellow"])) { color: var(--color-lyd-muted) !important; } /* except the badges, which paint their own ground and carry their own label */ html.vc-site main :is([data-slot="card"], .card) :is([class~="bg-lyd-ink"], [class~="bg-lyd-yellow"]) { color: #fff !important; } /* ---------------- anything the act colour fills carries a white label ---------------- */ /* These are the elements a token re-point turned from a light yellow ground into a deep red one while leaving the dark label that used to sit on the yellow. Named one by one rather than swept by class, for the reason recorded above: a class cannot tell red from the gold a literal still paints. Each was measured on the page - 2.89:1 before, 5.4:1 after. */ /* A sweep by CLASS was tried here for the third time and failed for the third time, so the reasoning is left in place. `[class~="bg-lyd-yellow"]` matches two different things that look identical in the markup: the small solid chips the token now paints deep red, which do want a white label, and the large tinted panels a premium literal paints pale, which emphatically do not. Whitening both put white on #F8EFD6 at 1.15:1 on six text nodes across /demo and /pricing. The panels are handled by re-colouring their GROUND in premium-vcpility-golds.css instead, and only the elements that really are a red fill are named here. */ html.vc-site main :is(.pipe__status.is-booked, .pipe__status.is-won) { color: #fff !important; } /* The discriminator the class-based attempts were missing, found by reading what the generated sheet actually does. The pale treatment in premium-luxe.css is `[class*="bg-lyd-yellow"] [class*="p-"]:not(.race-win):not(.btn)` - a padded panel is a tint, an unpadded one is a fill. So the elements the act colour really does fill solid are the small round tick discs, which carry no padding class, and the one row that rule explicitly excludes. Their contents were dark ink left over from the yellow, 2.89:1 on the red; white measures 5.4:1. The ticks are covered too: an icon that carries meaning answers to the 3:1 non-text bar and was also failing. */ html.vc-site main [class~="bg-lyd-yellow"]:not([class*="p-"]), html.vc-site main [class~="bg-lyd-yellow"]:not([class*="p-"]) :is(span, strong, small, svg, path), html.vc-site main [class~="bg-lyd-yellow"].race-win, html.vc-site main [class~="bg-lyd-yellow"].race-win > :is(span, strong, small, p, h2, h3, h4) { color: #fff !important; } /* the pale-red sample chip reads as pink-on-white at 2.04:1, so on a light ground it takes the deep red instead. Its hairline stays pale: a border answers to 3:1, not 4.5:1. */ html.vc-site main .pipe__sample { color: var(--vc-accent-deep) !important; } /* ---------------- the pricing estimator's selected state ---------------- */ /* The page's own scoped rule is `.est-plan.is-active { background: var(--color-lyd-yellow) }`, written when that token was a light yellow that dark labels sat on happily. The token is a deep red now, so the two labels inside the selected button measured 3.54:1 and 1.53:1. The fill is right - selection is an act, and red is the act colour on this site - so the labels move to white (5.4:1) and the sub-label to a white at 82%, which still measures 4.6:1 and keeps the two lines distinguishable from each other. */ html.vc-site main :is(.est-plan, .est-website, .est-billing, .billing-btn):is(.is-active, .is-on), html.vc-site main :is(.est-addon, .est-platform).is-on { border-color: var(--vc-accent-fill) !important; } html.vc-site main :is(.est-plan, .est-website, .est-billing, .billing-btn):is(.is-active, .is-on) :is(span, strong, small, em), html.vc-site main :is(.est-addon, .est-platform).is-on :is(span, strong, small, em) { color: #fff !important; } html.vc-site main :is(.est-plan, .est-website, .est-billing, .billing-btn):is(.is-active, .is-on) span.text-lyd-muted, html.vc-site main :is(.est-addon, .est-platform).is-on span.text-lyd-muted { color: rgba(255, 255, 255, 0.92) !important; /* 4.7:1 on the fill; 0.82 measured 3.95:1 */ } /* ---------------- the /demo pipeline mock ---------------- */ /* Not a Round 19 regression: disabling both vcpility sheets and dropping the vc-site class reproduces it exactly, so this has been on /demo since the mock was placed there. The frame is a white plate, but it sits inside a navy band, and the chrome inherits that band's white type, so the "Enquiries" title and the Replay label were white on white - 1:1, invisible, and the Replay control has no other affordance. The homepage's copy of the same mock is unaffected: it is placed on the hero gradient, where the chrome is dressed by premium-vcpility.css. The ghost button needs its hairline moved too, or it is an invisible border on white. */ html.vc-site main .pipe__frame :is(.pipe__title, .pipe__chrome, .pipe__meta, .rd-proof-replay) { color: var(--color-lyd-ink) !important; } /* The Replay button needs the extra weight, and the rule it is beating is one of mine: the deep-band ghost-button rule further up this sheet measures (0,3,3) and paints every ghost button on a dark band white. That is right for a ghost button ON the band and wrong for one inside a white plate that happens to sit on it. Naming the chrome and the tag takes this to (0,4,3), which is the smallest step that wins. */ html.vc-site main .pipe__frame .pipe__chrome button.btn.rd-proof-replay { color: var(--color-lyd-ink) !important; border-color: rgba(10, 10, 11, 0.28) !important; } html.vc-site main .pipe__frame .pipe__chrome button.btn.rd-proof-replay:hover { border-color: var(--vc-accent-fill) !important; color: var(--vc-accent-deep) !important; } /* ---------------- a light panel inside the dark anchor card ---------------- */ /* premium.css:429 paints every heading inside a .card-anchor white, which is right, because the anchor is the near-black card. On /features that anchor also contains a PALE panel, and its heading - "It's a second engine, not a new one." - was white on it: 1.15:1, six words axe reports as serious, and a heading nobody can read. Not a Round 19 regression; the panel was a pale gold before it was a pale red. The word spans have to be named as well as the heading, because the reveal animation wraps each one and the white is declared on the span. */ /* The first version of this rule required a `.card-anchor` ancestor, because that is where premium.css:429 declares the white. Measuring the actual element showed the panel is not inside an anchor at all and the white is INHERITED, which is why no rule matched the span and why the first fix did nothing. So the rule keys on the panel instead, and sets the colour on the span directly rather than hoping inheritance carries it. `.race-win` is the one bg-lyd-yellow element that really is a solid red fill, so it is excluded. */ /* and `:not(section[data-band="deep"] *)` for the third time in this sheet. Without it this rule reached the .proof-card on /demo, which also carries bg-lyd-yellow but is a glass panel over a navy band: ink on navy, 1.2:1. A pale act-colour panel wants ink; the same class on a dark band does not. */ html.vc-site main [class~="bg-lyd-yellow"]:not(.race-win):not(section[data-band="deep"] *) :is(h1, h2, h3, h4, .font-display), html.vc-site main [class~="bg-lyd-yellow"]:not(.race-win):not(section[data-band="deep"] *) :is(h1, h2, h3, h4, .font-display) :is(span, .word, .pm-w, .pm-w > span) { color: var(--color-lyd-ink) !important; } /* The numbered discs. The act colour fills them and the numeral inside was inherited dark ink, 2.89:1 - four serious axe rows on /team and three more pages carrying the same component. They are aria-hidden, so this is not a text-contrast obligation, but a numeral you cannot read is a numeral there is no point drawing. */ html.vc-site main :is(.disc, .co-disc):is([class~="bg-lyd-yellow"], .co-disc) { color: #fff !important; } /* ---------------- the pipeline table at phone width ---------------- */ /* At 390 the mock's table lays out 375px wide inside a 358px frame whose overflow is hidden, so the Status column is cut off with nothing to scroll. `table-layout: fixed` with a full-width table makes the columns share what there is; the cells hold "Amara S.", "7:42pm" and "Assigned", so they wrap rather than truncate. Scrolling the frame instead was the other option and was not taken: a scrollable region needs to be reachable by keyboard, and this is a decorative mock. */ @media (max-width: 640px) { html.vc-site main .pipe__frame table { width: 100% !important; table-layout: fixed !important; } html.vc-site main .pipe__frame :is(th, td) { padding-left: 0.5rem !important; padding-right: 0.5rem !important; overflow-wrap: anywhere; } } /* the founder's card on /team keeps being a dark card on a light band, in the new near-black */ html.vc-site #main .co-team__card { background: var(--vc-ink) !important; border-color: rgba(255, 255, 255, 0.14) !important; } html.vc-site #main .co-team__card .td-kicker { color: var(--vc-accent-soft) !important; } /* ---------------- one headline size, the homepage's ---------------- */ /* Owner: "the font size in features, about, pricing and all, use the font size of Automate, Market and Grow". Measured rather than guessed, and it turned out to be a reduction: the homepage H1 renders 56px at 1440 and 36px at 390, while every other page was running 73.6px and 38.4px - a third larger on desktop. The clamp below reproduces the homepage's own two endpoints exactly. Weight and line height come with it, because a 56px heading at 700 next to a 56px heading at 600 still does not look like the same page. */ /* `#main`, because the interior-hero size is set five times over in the shared layers and the winner was premium-compact.css at `.luxe main > section:first-of-type h1.font-display`, which measures (0,2,3). A plain `html.vc-site main h1` is (0,1,3) and lost silently. */ html.vc-site #main h1 { font-size: clamp(2.25rem, 3.9vw, 3.5rem) !important; font-weight: 600 !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; } /* ===================================================================================== THE INNER-PAGE HERO GRADIENT, and the rhythm band (10 Sep 2026). The background itself is set inline by zz-inner-polish.cjs - see that file for why a stylesheet cannot win it. Everything below is the inversion the gradient forces: those heroes were built dark-on-light, so the kicker, the H1, the lede and the buttons all have to be restated. Missing any one of them leaves a line of near-black type on a mid-blue ground. ===================================================================================== */ html.vc-site #main > section.inner-grad { color: #fff !important; } /* The `:not(... *)` chain is load-bearing. Several inner heroes contain a WHITE panel - the contact form's fallback line, a card, the pipeline frame - and inverting everything in the hero painted that panel's own type white on white. 1:1, on /contact and /quote. The gradient is the hero's ground, not the ground of everything sitting on it. */ html.vc-site #main > section.inner-grad :is(h1, h2, h3, h4, strong, b, .font-display):not([data-slot="card"] *):not(.card *):not(.card-lyd *):not(.contact-card *):not([class~="bg-white"] *):not(.conv-form *):not(.pipe__frame *) { color: #fff !important; } html.vc-site #main > section.inner-grad :is(p, li, .text-lede, .co-lede):not([data-slot="card"] *):not(.card *):not(.card-lyd *):not(.contact-card *):not([class~="bg-white"] *):not(.conv-form *):not(.pipe__frame *) { color: rgba(255, 255, 255, 0.82) !important; } /* the kicker chip: pale red on a translucent ground reads as a label rather than a button */ html.vc-site #main > section.inner-grad .td-kicker, html.vc-site #main > section.inner-grad [class*="kicker"] { color: #FFC7C2 !important; } html.vc-site #main > section.inner-grad .td-kicker::before { background: #FFC7C2 !important; } /* the marker highlight behind an emphasis word was tuned for a light ground */ html.vc-site #main > section.inner-grad .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(255, 255, 255, 0.22) 2.6%, rgba(255, 255, 255, 0.14) 95.6%, transparent 98.8%) !important; color: #fff !important; } /* buttons: the filled one keeps its red, the ghost goes light */ html.vc-site #main > section.inner-grad :is(.btn-ghost-light, .btn-ghost-dark, a.cro-demoted) { border-color: rgba(255, 255, 255, 0.4) !important; color: #fff !important; background: transparent !important; } html.vc-site #main > section.inner-grad :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: #fff !important; } /* breadcrumbs and any small print riding in the hero */ html.vc-site #main > section.inner-grad :is(nav a, small, figcaption, time):not([data-slot="card"] *):not(.card *):not(.card-lyd *):not(.contact-card *):not([class~="bg-white"] *):not(.conv-form *):not(.pipe__frame *) { color: rgba(255, 255, 255, 0.78) !important; } /* ---------------- the second dark band ---------------- */ /* data-band="deep" already carries the site's dark grammar, so this only adds the ground and the dot pattern the homepage's deep bands use. The text is handled by that existing grammar. */ html.vc-site #main > section.inner-rhythm { background: var(--vc-ink) !important; background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.3px) !important; background-size: 8px 8px !important; } /* ---------------- devices already built, reused ---------------- */ /* card hover, matching the homepage's flat-card lift */ html.vc-site.pm #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card):not(section[data-band="deep"] *):hover { transform: translateY(-3px); border-color: rgba(237, 28, 36, 0.55) !important; } @media (prefers-reduced-motion: reduce) { html.vc-site.pm #main :is([data-slot="card"], [data-lift], .card, .card-lyd, .carousel-card):hover { transform: none; } } /* ===================================================================================== ARTICLE BODY (10 Sep 2026) - shared by generated blog posts and any long-form page. The first long-form page shipped its own scoped