/* premium-sunnyaid-pricing-faq.css — owner: the SunnyAid PRICING + FAQ builder (section[data-section="pricing"] tiers + section[data-section="faq"] accordion). Loaded after premium-sunnyaid.css; every token and .sa-* component comes from there. SPECIFICITY NOTES, all measured with getComputedStyle, not guessed: 1. This file is last in . `html.luxe.sunlit.sunnyaid main ...` (0,4,n) was NOT enough: rich-tiers.css writes `:is([data-section="pricing"], #plans)` and `:is()` takes the specificity of its MOST specific argument, so those rules are (1,3,1) — an id. The prefix used throughout this file is therefore `html.luxe.sunlit.sunnyaid #main ...` = (1,4,n), which beats rich-tiers' (1,3,1), premium-luxe's (0,10,7) card chain and the foundation's (0,9,1) dark-band CTA rule.
is shipped markup, not something added here. 2. sunnyaid-pricing-faq.cjs removes `data-luxe-band="deep"` from the pricing section, so premium.js no longer promotes it to `data-band="deep"` and the ~20 dark-band rules in premium-luxe.css (lines 73, 106, 120, 133-152, 189, 222-229) stop matching this section altogether. That is why almost nothing below needs !important to fight premium-luxe. 3. premium-sunnyaid.css section 14 (line 563) still paints the two NON-featured pricing CTAs `rgba(255,255,255,.06)` + `#fff` for a dark band, at (0,9,1) with !important. On the light band that is white-on-white, so the teal-outline rule below takes it at (1,5,0). 4. rich-tiers.css line 17-18 paint .rd-tier-num / .rd-tier-unit `var(--gold-2)` !important under html.luxe. gold-2 re-points to --sa-yellow-soft (#FFE3A8), which is ~1.3:1 on a white card. Overridden below to --sa-ink / --sa-slate. THIS WAS A REAL CONTRAST BUG once the band went light; do not remove those two rules. 5. premium-compact.css owns `.faq-acc summary::after` (the "+" glyph and the 45deg rotation) at (0,2,2), and premium-sunlit.css line 198 forces its colour with !important at (0,2,2). The circular-toggle rules below are (1,4,1) + !important, so they take the box and the colour while compact keeps supplying `content` and the rotation. premium-luxe.css line 101 also repaints the "Most popular" badge (`[class*="bg-lyd-yellow"][class*="p-"]`) and the featured card `#f8efd6` with !important; the (1,4,0) badge/card rules below take those back. RICH HOOKS KEPT (nothing rebuilt): rich-tiers R7 (.rd-tier-price/-num/-unit, the .rd-mask price plate, .rd-tier-ledger, .rd-tier-inherit and the .rd-tier-ladder overlay + its JS geometry) and rich-closing-faq R11 (.rd-faq-idx, .rd-faq-comp, .rd-faq-aside switching). Their colours are re-tinted here; their structure and their JS contracts are untouched. -------------------------------------------------------------------------------------------- */ /* ============================================================================================= 1. PRICING — the band. The template alternates cream -> white -> teal; the band above this one (aeo) is teal and the band below (faq) is cream, so pricing takes the WHITE step and the cards read off it the way the template's own card grid does (hairline + soft shadow, home-02.png). ============================================================================================= */ html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq { background: var(--sa-white) !important; } html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq::before, html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq::after { content: none !important; background: none !important; } /* heading block: centred kicker pill + ringed Recoleta h2 + a narrowed lede (the template uses 571px; 40rem keeps this one to three lines) */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-head { max-width: none; margin: 0 auto var(--sa-head-gap) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-lede { max-width: 40rem; margin: 1.25rem auto 0 !important; font-size: 1.0625rem !important; line-height: 1.75 !important; color: var(--sa-slate) !important; } /* the grid. The template's gutter is 30px; the shipped gap-4 is 16px. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-grid { gap: clamp(1.25rem, 2.1vw, 30px); align-items: stretch; } /* ============================================================================================= 2. PRICING — the card. _service.scss: 20px radius, 1px #eee5e5, 45px 40px 50px, and the template's `0 4px 13px 0 #e9e9e4` card shadow. ============================================================================================= */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card { background: var(--sa-white) !important; border: 1px solid var(--sa-hairline) !important; border-radius: var(--sa-radius-card) !important; box-shadow: var(--sa-shadow-card) !important; overflow: hidden; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card--feature { background: var(--sa-yellow-tint) !important; border-color: rgba(246, 186, 46, 0.6) !important; box-shadow: 0 18px 42px -24px rgba(11, 57, 72, 0.34), var(--sa-shadow-card) !important; } /* the 6px accent rule above the featured tier (a shipped div.h-1.5). Absolute, so it does not consume 6px of flow and push the featured card's name/price/ticks out of line with its siblings. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card--feature { position: relative; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-rule { position: absolute; top: 0; left: 0; right: 0; height: 6px !important; background: var(--sa-yellow-deep) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-body { padding: clamp(1.75rem, 2.7vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.25rem) clamp(2rem, 3vw, 2.75rem) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cardhead { gap: 0.75rem; margin-bottom: 0 !important; min-height: 2rem; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-name { font-family: var(--sa-font-heading) !important; font-size: clamp(1.5rem, 1.9vw, 1.75rem) !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: -0.02em; color: var(--sa-ink) !important; } /* "Most popular", as the template's pill: yellow ground, ink text (10.1:1), pill shadow */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-badge { height: auto !important; flex: none; padding: 0.5rem 0.95rem !important; border: 0 !important; border-radius: var(--sa-radius-pill) !important; background: var(--sa-yellow) !important; color: var(--sa-ink) !important; box-shadow: var(--sa-shadow-pill); font-family: var(--sa-font-body) !important; font-size: 0.6875rem !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } /* the price. Recoleta at display size with a quiet Inter unit beside it. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-price { margin-top: 1.35rem; align-items: baseline; gap: 0.45rem; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .rd-tier-num { font-family: var(--sa-font-heading) !important; font-size: clamp(2.75rem, 3.7vw, 3.375rem) !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -0.03em !important; color: var(--sa-ink) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .rd-tier-unit { font-family: var(--sa-font-body) !important; font-size: 0.9375rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--sa-slate) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-blurb { margin-top: 0.9rem !important; font-size: 1rem !important; line-height: 1.7 !important; color: var(--sa-slate) !important; } /* the three blurbs run to one, two and one line; reserving two keeps the separator, the first tick and the ladder hairline on one baseline across the row, which a price table needs */ @media (min-width: 1024px) { html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-blurb { min-height: 3.4em; } } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-sep { margin: clamp(1.5rem, 2vw, 1.85rem) 0 !important; background: var(--sa-border) !important; } /* ============================================================================================= 3. PRICING — the tick list. The template's tick is a YELLOW scalloped disc with a TEAL check (--sa-tick). The shipped markup already ships a yellow disc + a check svg, so the disc is upsized to the template's 18px and the check is recoloured teal — nothing is hidden or removed, and rich-tiers.js still finds `.rd-tier-inherit > span.rounded-full` to anchor the ladder. ============================================================================================= */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-ticks { margin-bottom: clamp(1.75rem, 2.4vw, 2.25rem) !important; display: grid; gap: 0.7rem; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1rem !important; line-height: 1.55; color: var(--sa-ink) !important; } /* the template's inclusion rows have no rules; rich-tiers.css adds a 1px ledger rule at (0,3,n) */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-ticks > li + li { border-top: 0 !important; padding-top: 0 !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick__disc { flex: none; width: 18px !important; height: 18px !important; margin-top: 0.18rem !important; border-radius: var(--sa-radius-pill); background: var(--sa-yellow) !important; display: flex; align-items: center; justify-content: center; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick__disc > svg { width: 10px !important; height: 10px !important; stroke-width: 3.2; color: var(--sa-teal) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick__t { color: var(--sa-ink) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-tick.rd-tier-inherit .sa-pricing-faq-tick__t { font-weight: 600; } /* the rich-tiers ladder: a hairline from each card's right edge to the next card's "Everything in ..." tick. Champagne #f1d27c re-tinted to the template yellow. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-grid .rd-tier-ladder__link { background: var(--sa-yellow-deep) !important; } /* below 1024 rich-tiers replaces the hairline with a short vertical connector above the "Everything in ..." tick; it was drawn for a 16px disc, so it is re-centred on the 18px one */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-grid .rd-tier-inherit::before { left: 8.5px !important; top: -0.72rem !important; height: 0.62rem !important; background: var(--sa-yellow-deep) !important; } /* ============================================================================================= 4. PRICING — the CTAs. ONE yellow pill (Elevate) with teal-outline siblings. ============================================================================================= */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta { margin-top: auto !important; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 3.25rem !important; padding: 0.9rem 1.5rem !important; border-radius: var(--sa-radius-pill) !important; font-family: var(--sa-font-body); font-size: 1.0625rem !important; font-weight: 500 !important; line-height: 1.15; letter-spacing: -0.01em; text-decoration: none; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--primary { background: var(--sa-yellow) !important; color: var(--sa-ink) !important; border: 1px solid transparent !important; box-shadow: var(--sa-shadow-pill) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--primary:hover, html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--primary:focus-visible { background: var(--sa-yellow-deep) !important; color: var(--sa-ink) !important; } /* (1,5,0) + !important, to beat premium-sunnyaid.css line 563's dark-band ghost button (0,9,1) */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--ghost { background: transparent !important; color: var(--sa-teal) !important; border: 1px solid var(--sa-teal) !important; box-shadow: none !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--ghost:hover, html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .sa-pricing-faq-cta--ghost:focus-visible { background: var(--sa-teal) !important; color: #fff !important; border-color: var(--sa-teal) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta:focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 3px; } /* the decorative glyph becomes the template's own 12px diagonal arrow, masked so it takes currentColor (the same asset .sa-btn__ico and .sa-arrow__ico use) */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta__ico { flex: none; width: 12px; height: 12px; font-size: 0; line-height: 0; background: currentColor; -webkit-mask: var(--sa-arrow-src) center / contain no-repeat; mask: var(--sa-arrow-src) center / contain no-repeat; } html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-cta__ico { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-cta:hover .sa-pricing-faq-cta__ico { transform: translate(3px, -3px); } /* ============================================================================================= 5. FAQ — the band and the two columns. Cream (the foundation's ground for this section), with the template's 130/125 rhythm from .sa-section. ============================================================================================= */ html.luxe.sunlit.sunnyaid #main section.sa-pricing-faq-faq { background: var(--sa-cream) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqgrid { gap: clamp(2.25rem, 4vw, 60px) !important; } /* the shipped `lg:sticky lg:top-32` offsets this grid item by its own 128px sticky top even when its static position already clears the threshold (measured: head y=258 vs accordion y=130; with `top:0` both land on 130). A heading that sits 128px below the list it belongs to reads as a mistake, and pinning it at top:0 would put it behind the fixed header, so the column goes static and the two columns share a baseline - which is also what the template does. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead { position: static; align-self: start; } /* "Read all FAQs" as the template's circular arrow link */ html.luxe.sunlit.sunnyaid #main a.sa-pricing-faq-all { margin-top: 1.85rem !important; gap: 1.25rem; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--sa-teal) !important; text-decoration: none !important; } /* ============================================================================================= 6. FAQ — the accordion. The shipped ONE card becomes the container for FOUR plates (_faq.scss `.accordion_box .block`: white, own shadow, 20px apart). ============================================================================================= */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-acc { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; --tw-ring-shadow: 0 0 #0000; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-acc__in { padding: 0 !important; display: grid; gap: 20px; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-hide { display: none !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate { position: relative; overflow: hidden; padding: clamp(1.4rem, 2.3vw, 2.15rem) clamp(1.15rem, 2.1vw, 2rem) !important; background: var(--sa-white) !important; border: 1px solid var(--sa-hairline); border-radius: var(--sa-radius-card); box-shadow: 0 8px 15px 0 rgba(220, 220, 220, 0.25); } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate > * { position: relative; } /* the template's `active-block`: the open plate is a teal panel with the dotted halftone */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) { background: var(--sa-teal) !important; border-color: var(--sa-teal); box-shadow: 0 22px 44px -26px rgba(11, 57, 72, 0.5); } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; background-image: var(--sa-halftone); background-size: var(--sa-halftone-size); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, transparent 62%); } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open])::before { opacity: 1; } html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-plate { transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* the question row */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q { display: flex; align-items: center; gap: clamp(0.6rem, 1vw, 1rem); min-height: 44px; padding: 0.35rem 0; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q .rd-faq-idx { flex: none; width: auto !important; min-width: 1.9rem; font-family: var(--sa-font-body) !important; font-size: clamp(1.0625rem, 1.25vw, 1.25rem) !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--sa-slate) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-qt { flex: 1 1 auto; min-width: 0; margin: 0 !important; font-family: var(--sa-font-body) !important; font-size: clamp(1.0625rem, 1.35vw, 1.375rem) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.01em !important; color: var(--sa-teal) !important; } /* the toggle: premium-compact.css supplies content "+" and the 45deg rotation; this takes the box and the colour (both !important, to beat premium-sunlit.css line 198) */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q::after { flex: none; display: grid; place-items: center; width: 44px !important; height: 44px !important; border-radius: var(--sa-radius-pill); background: var(--sa-yellow) !important; color: var(--sa-teal) !important; box-shadow: var(--sa-shadow-pill); font-family: var(--sa-font-body) !important; font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1 !important; text-align: center; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-q::after { background: var(--sa-yellow) !important; color: var(--sa-teal) !important; box-shadow: none; } html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-q::after { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q:hover::after { background: var(--sa-yellow-deep) !important; } /* focus ring follows the plate's ground, per the foundation's policy: teal on the white plates (yellow would be ~1.4:1 there), yellow on the open teal one */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q:focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 4px; border-radius: 10px; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-q:focus-visible { outline-color: var(--sa-yellow) !important; } /* The OPEN plate is teal, so everything inside it inverts. EVERY inversion is scoped by the same `:has(> details[open])` that turns the plate teal, never by `[open] >` alone: in a browser without :has() the plate stays white, so the whole block has to fall away together or the copy would be #d8e3f8/#fff on white. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-qt { color: var(--sa-on-teal-strong) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-idx { color: var(--sa-yellow-soft) !important; } /* rich-closing-faq's 1px gold rule under the open question */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-q::before { left: 0 !important; right: 0 !important; bottom: -0.55rem !important; background: rgba(255, 255, 255, 0.22) !important; } /* Chromium keeps a CLOSED details' children laid out (content-visibility), so the contrast walker reads them: the answer only goes on-teal once its own plate is open, or a closed answer would be #d8e3f8 on white (measured at 1.29:1 before this split). */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-a { margin-top: 1.4rem !important; font-size: 1.0625rem !important; line-height: 1.75 !important; color: var(--sa-slate) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .sa-pricing-faq-a { color: var(--sa-on-teal) !important; } /* the answer aligns under the question text, not under the numeral (the template indents its `.content` to 92px for the same reason) */ @media (min-width: 480px) { html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-a, html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-item > .rd-faq-comp { margin-left: calc(1.9rem + clamp(0.6rem, 1vw, 1rem)); } } /* the R11 companion sits inside the open (teal) plate below 1024 */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp { border-top-color: rgba(255, 255, 255, 0.2) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp .rd-faq-line { color: var(--sa-on-teal-strong) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp .rd-faq-k { color: var(--sa-yellow-soft) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp a.rd-faq-link { color: var(--sa-yellow-soft) !important; text-decoration-color: rgba(255, 227, 168, 0.55) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) .rd-faq-comp a.rd-faq-link:focus-visible { outline-color: var(--sa-yellow) !important; } /* the R11 aside on the cream left column */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead .rd-faq-aside { border-top-color: var(--sa-yellow-deep) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead .rd-faq-line { color: var(--sa-ink) !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-faqhead a.rd-faq-link { color: var(--sa-teal) !important; text-decoration-color: rgba(11, 57, 72, 0.4) !important; } /* ============================================================================================= 7. Small screens. The template drops to one column, loses the letter-spacing and tightens the plate padding; the ladder is already replaced by rich-tiers' static connector below 1024. ============================================================================================= */ @media (max-width: 1023px) { html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-head { max-width: none; } } @media (max-width: 767px) { html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cardhead { flex-wrap: wrap; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q { gap: 0.6rem; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q::after { width: 40px !important; height: 40px !important; font-size: 1.05rem !important; } html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-a, html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-item > .rd-faq-comp { margin-left: 0; } } /* ============================================================================================= 8. Reduced motion. The static design is complete: the plates keep their teal open state, the halftone stays, the toggle still rotates as a STATE (transform on [open] is set by compact, not by an animation), and only the transitions stop. ============================================================================================= */ @media (prefers-reduced-motion: reduce) { html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate, html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-q::after, html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-cta__ico { transition: none !important; } html.luxe.sunlit.sunnyaid.pm #main .sa-pricing-faq-cta:hover .sa-pricing-faq-cta__ico { transform: none !important; } } /* 9 Sep 2026 audit: premium-luxe.css scopes text-wrap: balance to .font-display, and these headings are deliberately set in the body face, so they were left wrapping with one-word last lines (the worst measured 16% last-line fill). These are the FAQ questions. */ html.luxe.sunlit.sunnyaid #main .sa-pricing-faq-qt { text-wrap: balance; }