/* =====================================================================================
   premium-vcpility.css — Round 11, 9 Sep 2026. Homepage only, loaded LAST by
   tools/recipes/sunnyaid-00-foundation.cjs, gated on `html.sa-skin-vcpility`.

   Owner: "have a look at the vcpility.com website, use the same template, clone it, but use the
   contents of lydndis.com, use the smiley feature as well and make it more noticable and
   interactive."

   VCPility is Sharktech Global's own platform, the one this site's own copy names ("Underneath sits
   VCPility, Sharktech Global's AI CRM and business automation platform"), so this is a house
   template moving between two house properties, not a copy of someone else's design.

   WHAT THE TEMPLATE ACTUALLY IS. Measured off vcpility.com rather than eyeballed:

     Type      Plus Jakarta Sans throughout, 400 to 800. The display is enormous and very tightly
               tracked: 97px at weight 600 with -3.5px letter-spacing and a 1.0 line-height. Section
               headings are 48-54px at 700/800 with about -2px. Eyebrows are tiny, 11.5-12.5px at
               weight 700, uppercase, with +2.2px tracking, in a deeper blue, sometimes on a pale
               blue chip. Body sits at 15-16px.
     Corners   ZERO. Every button and every card measured border-radius 0px. The single exception on
               the whole page is the eyebrow chip at 6px. This is the biggest single difference from
               the SunnyAid template underneath, which is built from rounded plates and pills.
     Ground    near-black bookends, #05070A behind the hero and #0A0A0B for the dark band and the
               footer, with light bands between them cycling #EDEDEE / #F6F6F7 / #F4F5F2.
     Cards     pure white, 34-36px of padding, no radius, NO SHADOW, numbered 01. 02. 03.
     Accent    electric blue #ED1C24 for fills, a deeper #B00E12 for labels and links on light.
     Rhythm    140.8px of padding top and bottom on every band. That is the whole vertical system.
     Motion    rise (fade plus translateY), blink (a typewriter caret), spin (a 360 loop), bob
               (a few px of float), twinkle (scale plus rotate). Word-by-word heading reveals driven
               by a `--w` index per word, and a huge low-contrast "ghost" word behind each heading.

   WHAT DID NOT COME ACROSS, and why:

     The hero video. vcpility.com runs videos/fluid-hero-bg-vid.mp4 under a three-stop dark veil.
     That asset is not ours to serve from here, and Round 8 removed the LYD hero video on the
     owner's instruction because care footage was pulling the page into the wrong category. The
     ground here is therefore a CSS mesh: three radial gradients over the near-black. No new file,
     no new imagery, and nothing to download.

     The palette question. The accent that means "act" was yellow through Round 8 and picked up a
     CareX red for the UI in Round 9. Cloning this template moves that accent to VCPility's blue,
     applied to exactly the same places the yellow occupied, so the OWNER'S RULE survives intact:
     one colour means act, and it is rationed to the CTAs. Only the hue changed.

     The one deliberate exception is the smile mark, which keeps #FFD470. On a near-black page with
     a blue accent it is now the only warm object anywhere, which is most of why it reads louder
     than it ever has. See section 9.

   This sheet re-dresses; it does not restructure. Every fix from Rounds 8 to 10 is keyed on
   `sa-skin-product`, the switch keeps that class on under this skin, and all of it still applies:
   the reserved heights that hold CLS at 0.006, the focus rings that follow their ground, the
   drawer that scrolls, the dialog semantics, the reserved measures. Nothing here undoes any of it.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   1. TOKENS. The SunnyAid layers below read about a hundred rules off these names, so
   re-pointing them here re-dresses most of the page before a single component rule is written.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility {
  /* the VCPility palette, sampled from the live site */
  --vc-night: #05070A;          /* behind the hero */
  --vc-ink: #0A0A0B;            /* dark bands, the footer */
  --vc-ink-2: #141417;          /* a card on a dark band */
  --vc-base: #EDEDEE;           /* the body ground */
  --vc-alt: #F6F6F7;            /* the alternating light band */
  --vc-warm: #F4F5F2;           /* the third light band */
  --vc-card: #FFFFFF;
  /* Three steps, because one blue cannot do all three jobs. VCPility's #ED1C24 measures 3.93:1
     against white, so a white label on it FAILS 1.4.3 for normal text - it fails on their site too.
     It is kept for everything that is not text-on-fill (icons, rules, the hero mesh), where the 3:1
     non-text bar applies and it clears on both grounds. Buttons take one step deeper. */
  /* Owner, 10 Sep 2026: the hero takes a blue-to-red gradient, and every other blue element takes
     the red from its far end. So the accent family is red now and named for what it is rather than
     for the hue it happened to start as. Same three-step structure as before, and for the same
     reason: one red cannot do all three jobs.

     #ED1C24 is the gradient's own red and measures 4.38:1 against white, so a white label on it
     fails 1.4.3 for normal text. It is kept for everything that is NOT text-on-fill, where the 3:1
     non-text bar applies and it clears on both grounds. Fills go one step deeper, labels two. */
  --vc-accent: #ED1C24;         /* graphics only: 4.5:1 on #0A0A0B, 3.8:1 on #EDEDEE */
  --vc-accent-fill: #D40F17;    /* button fills: white on it 5.41:1 */
  --vc-accent-deep: #B00E12;    /* labels and links on light: 6.2:1 on #EDEDEE, 7.2:1 on white */
  --vc-accent-soft: #FF9A93;    /* the pale step on dark bands: 9.7:1 on #0A0A0B, ink on it 9.4:1 */
  --vc-accent-tint: #FDEAEA;    /* chip grounds: ink 16.6:1, the deep red on it 6.2:1 */
  /* the gradient itself, so the hero and anything that echoes it stay in step */
  --vc-grad-a: #0B2E8F;
  --vc-grad-b: #7A1A56;
  --vc-grad-c: #ED1C24;
  --vc-line: rgba(10, 10, 11, 0.14);
  --vc-line-dark: rgba(255, 255, 255, 0.14);
  --vc-muted: #3F4540;          /* 8.0:1 on #EDEDEE */
  --vc-on-dark: rgba(255, 255, 255, 0.72);
  --vc-band: 8.8rem;            /* 140.8px, the whole vertical system */

  /* re-point the skin tokens the layers below already consume */
  --sa-cream: var(--vc-base);
  --sa-white: var(--vc-card);
  --sa-teal: var(--vc-ink);
  --sa-teal-deep: var(--vc-night);
  --sa-ink: #0C0F16;
  --sa-on-teal: var(--vc-on-dark);
  --sa-ui: var(--vc-accent-deep);
  --sa-ui-soft: #FF9A93;        /* on the dark bands: 7.4:1 on #0A0A0B */
  --sa-ui-tint: #FDEAEA;
  --sa-yellow: var(--vc-accent-fill);
  --sa-yellow-deep: var(--vc-accent-deep);
  --sa-yellow-soft: #FF9A93;
  --sa-yellow-tint: var(--sa-ui-tint);

  /* square. everything. */
  --sa-radius-panel: 0px;
  --sa-radius-card: 0px;
  --sa-radius-pill: 0px;
  --sa-radius: 0px;

  /* type */
  --sa-font-heading: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif;
  --sa-font-body: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif;
  --sa-h1: clamp(2.5rem, 6.4vw, 6.08rem);
  --sa-h2: clamp(2rem, 3.9vw, 3.375rem);

  /* the tick disc, re-inlined in blue: the fill is baked into the data URI */
  --sa-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' fill='%23D40F17'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --sa-ring-src: none;
}

/* Plus Jakarta Sans everywhere, including the places earlier layers pinned by name. */
html.sa-skin-vcpility body,
html.sa-skin-vcpility :is(h1, h2, 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;
}

/* -------------------------------------------------------------------------------------
   2. GROUNDS. Near-black bookends, light bands between. The SunnyAid layers paint several bands
   with !important at high specificity, so these carry the ID compound where they have to.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility body { background: var(--vc-base) !important; color: var(--sa-ink); }

/* the hero: a CSS mesh over near-black, standing in for the template's fluid video */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero {
  /* THE HERO GRADIENT (10 Sep 2026). Owner: "use gradient this as the background transition from
     blue to red, keep it only for the hero". Three stops, because a straight two-stop blue-to-red
     interpolation passes through a muddy grey-violet; the plum midpoint is what the reference band
     actually shows.

     The 16% black veil over the top is not decoration. White on the gradient's red end measures
     4.38:1, which is fine for the 97px display but under the bar for the lede beside it, and the
     hero copy column crosses that end at narrow widths. Sixteen percent takes the worst point to
     5.8:1 and costs almost nothing of the colour. Only the hero: every other band keeps its own
     ground, which is what "keep it only for the hero" asks for. */
  background-color: var(--vc-grad-a) !important;
  background-image:
    linear-gradient(rgba(5, 7, 10, 0.16), rgba(5, 7, 10, 0.16)),
    linear-gradient(100deg, var(--vc-grad-a) 0%, var(--vc-grad-b) 52%, var(--vc-grad-c) 100%) !important;
  color: #fff;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero :is(h1, h2, h3, .sa-hero__lede, p) { color: #fff !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__lede,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero p:not(.sun-smile__line) { color: var(--vc-on-dark) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero::after { display: none !important; }

/* dark bands and the footer go to the template's flat near-black, halftone off */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"],
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-band-teal,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-strip,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid footer.footer-deep {
  background: var(--vc-ink) !important;
  background-image: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"]::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"]::after { display: none !important; }

/* The light bands. Note the DESCENDANT selector: only three sections are direct children of #main
   on this page and the rest are nested, so `#main > section` reached almost nothing. VCPility never
   uses pure white as a band ground - white is reserved for cards - so the bands cycle its three
   greys and the band rhythm becomes the template's single 8.8rem step. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:not(.sa-hero):not([data-band="deep"]):not(.sa-strip):not(.band-photo) {
  background: var(--vc-base) !important;
  background-image: none !important;
  /* Owner, 10 Sep 2026: "remove this empty area". The template's 140.8px is right where a light band
     meets a dark one, and this page has five light bands in a row: each pair contributed 115px of
     its own and the junction read as a 230px void rather than a boundary. Light bands now run at
     72px, so a junction is 144px, and the dark bands keep the full rhythm below. */
  padding-block: clamp(2.75rem, 5.2vw, 4.5rem) !important;
}
/* The alternation runs off data-vc-band, which the recipe stamps down the light sections in
   document order. `:nth-of-type(even)` reached almost nothing, because only three sections on this
   page are direct children of #main and the rest are nested, so consecutive bands came out the same
   grey and the 115px each of them contributes read as one 230px void rather than a boundary. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:not(.sa-hero):not([data-band="deep"]):not(.sa-strip):not(.band-photo)[data-vc-band="b"] { background: var(--vc-alt) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:not(.sa-hero):not([data-band="deep"]):not(.sa-strip):not(.band-photo)[data-vc-band="a"] { background: var(--vc-base) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"] { padding-block: clamp(4rem, 8vw, var(--vc-band)) !important; }

/* the care photography loses its band-filling role: on this template a photograph is a flat panel,
   never a ground. The five images stay exactly as they are, cropped, not replaced. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.band-photo { background: var(--vc-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-photo img { filter: saturate(0.82) contrast(1.04); }

/* -------------------------------------------------------------------------------------
   3. SQUARE. The template's defining move, and the one that does the most work.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility :is(
  .btn, a.btn, button, .sa-btn, .sa-card, .sa-panel, .sa-plate, [data-slot="card"],
  .sa-kicker, .td-kicker, .sa-chip, .sa-badge, .sa-arrow, .sa-arrow__ico,
  .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-pricing-faq-plate,
  .sa-facts__cell, .sa-stages-aeo-card, .sa-whynow-plate, .rd-card-doc, .cap-link,
  .pipe__frame, .sa-hero__frame, .sa-hero__screen, .demo-frame, input, textarea, select,
  img, figure, .rd-photo, .rd-photo-fig, .sa-hero__fact, .contact-card, .sun-smile
),
html.sa-skin-vcpility :is([class*="rounded"], [class*="radius"]) {
  border-radius: 0 !important;
}
/* the one 6px exception the template itself keeps: the eyebrow chip */
html.sa-skin-vcpility :is(.sa-kicker, .td-kicker) { border-radius: 4px !important; }
/* discs stay discs: a circle is a shape, not a corner */
html.sa-skin-vcpility :is(
  .sun-smile__btn, .sa-hero__fact-ico, .contact-social > a, .sa-stages-aeo-num,
  .rd-hero-abn, [class*="social"] a, .pipe__avatar, .sa-cf-social a, .disc
) { border-radius: 999px !important; }

/* -------------------------------------------------------------------------------------
   4. TYPE. Enormous, tightly tracked display; small loud eyebrows.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h1,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h1.font-display,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h1:not(.font-display) {
  font-size: var(--sa-h1) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.036em !important;
  text-wrap: balance;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h2,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main h2.font-display,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main section[class] h2.font-display:not([class*="text-xs"]) {
  font-size: var(--sa-h2) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.038em !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(h3, .leaks__title, .sa-gaps-title, .sa-stages-aeo-title, .sa-pricing-faq-qt, .sa-replaces__name) {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(p, li) { letter-spacing: 0 !important; }
/* Body copy takes the template's muted grey ON LIGHT GROUNDS ONLY. The first version of this rule
   set it everywhere and put #3F4540 on the near-black strip at 2.01:1, which the harness caught.
   The dark grounds are named explicitly and the light rule excludes them, so a paragraph's colour
   now follows the band it is in rather than the sheet it is styled by. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(p, li):not(.sun-smile__line):not(.sa-hero__lede) { color: var(--vc-muted); }
/* Text on the dark grounds, EXCLUDING anything inside a light surface nested in them. That
   exclusion is the whole trick: the hero contains a white product window, white fact cards and
   pale status chips, and the closing band contains a white contact card, so a blanket
   "everything in a dark section is light text" rule painted 0.72-alpha white onto white and
   measured 1.0:1. The list below is not guesswork - it is every element inside a dark section
   whose own computed background came back light, enumerated by walking the built page. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero,
  #main section[data-band="deep"],
  #main section.band-photo,
  #main section.vc-photo-band,
  #main section.sa-strip,
  #main .sa-band-teal,
  footer.footer-deep
) :is(p, li, figcaption, small, dd, dt):not(:is(.pipe__frame, .pipe__auto, .pipe__status, .sa-hero__fact, .sa-card, [data-slot="card"], .contact-card, .rd-card-doc, .cap-link, .sa-facts__cell, .sa-whynow-plate, .sa-gaps-card, .sa-stages-aeo-card, .sa-pricing-faq-card, .rd-aeo-msg, .rd-aeo-try, .rd-card-hours, .rd-card-doc__thumb, .sa-cf-doc__go, .sa-hero__fact-ico) *) { color: var(--vc-on-dark) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero,
  #main section[data-band="deep"],
  #main section.band-photo,
  #main section.vc-photo-band,
  #main section.sa-strip,
  footer.footer-deep
) :is(h1, h2, h3, h4, strong, b):not(:is(.pipe__frame, .pipe__auto, .pipe__status, .sa-hero__fact, .sa-card, [data-slot="card"], .contact-card, .rd-card-doc, .cap-link, .sa-facts__cell, .sa-whynow-plate, .sa-gaps-card, .sa-stages-aeo-card, .sa-pricing-faq-card, .rd-aeo-msg, .rd-aeo-try, .rd-card-hours, .rd-card-doc__thumb, .sa-cf-doc__go, .sa-hero__fact-ico) *) { color: #fff !important; }

/* the eyebrow: tiny, uppercase, wide-tracked, in the deeper blue on a pale blue chip */
/* The chip's ground is OPAQUE. VCPility's own is a 10% blue over a solid band, which composites to
   a fixed colour anyway, but a translucent fill leaves a checker guessing when the band behind it
   carries a gradient or a photograph, and it reported these as failures. Stated outright, the light
   pair measures 5.4:1 and the dark pair 9.4:1 at 12.5px. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-kicker, .td-kicker) {
  display: inline-block;
  background: #FDEAEA !important;
  color: var(--vc-accent-deep) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 0.5rem 1rem !important;
  /* the shipped chip carries a fixed h-5 (20px) from the utility layer, which clipped the label the
     moment the type grew and the padding went on. */
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
/* on every dark ground, the hero included. The hero is not [data-band="deep"], so it was taking the
   light treatment and putting a mid blue on a pale blue tint over near-black: 1.9:1. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(main > section.sa-hero, #main section[data-band="deep"], #main section.band-photo, #main section.sa-strip) :is(.sa-kicker, .td-kicker, [class*="badge"]) {
  background: #3A1416 !important;
  color: #FFB3AC !important;
}

/* -------------------------------------------------------------------------------------
   5. BUTTONS. Square, hairline, two weights only: a blue fill and a hairline ghost.
   Metrics lifted from the live site: 0.8px border, 15px/25px padding, 15px at weight 600.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(main, header, footer) :is(.btn, a.btn, .sa-btn, .sa-pricing-faq-cta) {
  border-radius: 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 0.9375rem 1.5625rem !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, border-color 0.3s, color 0.3s !important;
}
/* the act colour: blue fill, white label. Same four places the yellow held. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  main .btn-primary-dark,
  main .btn-primary-light
) {
  background: var(--vc-accent-fill) !important;
  border: 0.8px solid var(--vc-accent-fill) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  main .btn-primary-dark,
  main .btn-primary-light
):hover { background: #96090D !important; border-color: #96090D !important; transform: translateY(-2px); }

/* the ghost: a hairline that takes its colour from the ground it sits on */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(.btn-ghost-light, .sa-hero__btn2, .sa-pricing-faq-cta:not(.sa-pricing-faq-cta--primary)) {
  background: transparent !important;
  border: 0.8px solid var(--vc-line) !important;
  color: var(--sa-ink) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(section.sa-hero, section[data-band="deep"], section.band-photo, .sa-panel) :is(.btn-ghost-light, .btn-ghost-dark, .sa-hero__btn2) {
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(.btn-ghost-light, .btn-ghost-dark, .sa-hero__btn2):hover {
  background: rgba(237, 28, 36, 0.1) !important;
  border-color: var(--vc-accent) !important;
  transform: translateY(-2px);
}
/* THE MENU BAR, LIGHT. Owner, 10 Sep 2026: "menu bar, make it lighter so that the ndis logo is
   seen". It had been a dark scrim carrying the white version of the wordmark, and the white mark on
   near-black is a whisper: the logo is red and navy and neither of those survives being flattened
   to white. So the bar becomes light frosted glass instead, the wordmark goes back to its own
   colours, and the navigation goes dark on it.

   Glass rather than a solid fill because the bar floats over a near-black hero: a solid white strip
   would cut the top off the page, while a blurred, brightened panel keeps the hero visible through
   it and still gives the labels a light ground. `header.pm-scrolled` is premium.js's own scroll
   flag, so the more opaque scrolled state comes free. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid 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.sa-skin-vcpility.luxe.sunlit.sunnyaid header.pm-scrolled { background: rgba(246, 246, 247, 0.94) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header :is(a, button, span, .nav-link) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header .nav-link::after { background: var(--vc-accent) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header #v2-menu-toggle {
  border-color: rgba(10, 10, 11, 0.25) !important;
  color: var(--sa-ink) !important;
}
/* an engine without backdrop-filter gets an opaque bar, because a see-through one would be unreadable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid header { background: rgba(246, 246, 247, 0.97) !important; }
}
/* the drawer opens over the hero, so it needs its own ground rather than inheriting a see-through
   header. It is the only navigation a phone has (see Round 10), so it cannot be translucent. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #v2-mobile-menu {
  background: var(--vc-alt) !important;
  border-top-color: rgba(10, 10, 11, 0.12) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #v2-mobile-menu :is(a, span, button) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #v2-mobile-menu a { border-color: rgba(10, 10, 11, 0.1) !important; }

/* the header pill becomes the template's hairline enquire button */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header a[class~="bg-lyd-yellow"] {
  background: transparent !important;
  color: var(--sa-ink) !important;
  border: 0.8px solid rgba(10, 10, 11, 0.6) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid header a[class~="bg-lyd-yellow"]:hover {
  background: var(--vc-accent-fill) !important;
  border-color: var(--vc-accent-fill) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------------------
   6. CARDS. White, flat, square, generous padding, no shadow at all. The lift and the
   shadow the luxe layer gives every card have to come off, which takes the ID compound.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(
  .sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card,
  .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate
) {
  /* .sa-pricing-faq-plate joins the card set: the token re-point had turned it near-black while its
     own type stayed dark, at 1.03:1. In this template an FAQ row is a white card like any other. */
  background: var(--vc-card) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: clamp(1.5rem, 2.4vw, 2.125rem) !important;
}
/* Cards stay WHITE on dark bands too, which is what the template does and what stops a whole class
   of bug. The first pass darkened them to #141417 and immediately produced dark-on-dark text at
   1.08:1, because the box moved and the type inside it did not - the type is coloured by six earlier
   layers, several with !important. A white card on a near-black band needs no text rules at all. */
/* A whitened card sets its own text, whatever band it is in. Without this the why-now plates
   inherited white type from their photo band (correct when the plate was a dark blue) and kept it
   after this sheet turned the plate white, which measured 1.0:1. Colour has to travel with the box
   it is painted on, not with the section the box happens to sit in. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate) :is(h1, h2, h3, h4, h5, strong, b, dt, a:not(.btn)) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, [data-slot="card"], .sa-gaps-card, .sa-replaces__card, .sa-pricing-faq-card, .sa-stages-aeo-card, .sa-whynow-plate, .contact-card, .sa-facts__cell, .sa-pricing-faq-plate) :is(p, li, figcaption, small, dd, span:not([class*="badge"]):not(.sa-kicker):not(.td-kicker):not([class*="ico"])) { color: var(--vc-muted) !important; }
/* the halftone dot pattern was drawn to sit on a dark plate; on a white one it is grit */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-whynow-plate.sa-halftone { background-image: none !important; }

/* the hero product window keeps its job, in the template's grammar: square, hairline, flat */
/* Owner, 10 Sep 2026: "remove this black box, make it seamless". The product window was a
   near-black panel with a hairline, which was right when the hero was near-black too. On the
   gradient it reads as a hole punched in the colour. The frame goes; what is left is the white
   Enquiries table sitting directly on the gradient, which is what the window always actually was.
   The caption under it keeps its light colour, because it is now on the gradient rather than on the
   panel, and the gradient is darker than the caption at every point. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero :is(.sa-hero__frame, .sa-hero__screen) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main .pipe__frame { border-radius: 0 !important; }

/* -------------------------------------------------------------------------------------
   7. THE GHOST WORD. A huge, very low contrast word set behind each section heading, which is
   the template's strongest structural device after the square corners. Added by the recipe as
   `.vc-ghost`; aria-hidden, so it is decoration and never reaches the accessibility tree.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-ghost {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: -0.42em;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  font-size: clamp(3.5rem, 11vw, 10.5rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  white-space: nowrap;
  color: rgba(10, 10, 11, 0.05);
  user-select: none;
}
/* drawn, not written: see the note in the recipe */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-ghost::before { content: attr(data-ghost); }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"] .vc-ghost { color: rgba(255, 255, 255, 0.06); }
/* positioned off :has(), not off the class, because a later recipe can rewrite a class list but
   cannot remove the child. The ghost anchors to the heading it belongs to, so it is placed against
   the h2 rather than the whole heading block, which keeps it off the eyebrow chip. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.vc-ghost-host, *:has(> .vc-ghost)) { position: relative; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.vc-ghost-host, *:has(> .vc-ghost)) > *:not(.vc-ghost) { position: relative; z-index: 1; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-ghost + * { margin-top: 0; }

/* -------------------------------------------------------------------------------------
   8. MOTION. The template's five movements, all of them gated on html.pm, which premium.js only
   sets when the visitor has NOT asked for reduced motion. Word-by-word heading reveals ride on a
   `--w` index the recipe writes per word.
   ------------------------------------------------------------------------------------- */
/* NOTE: the template's word-by-word heading reveal is deliberately absent. premium.js already
   splits h1 and h2.font-display into its own word spans at runtime and premium-motion.css animates
   them; a second nested split would put two transforms on the same glyphs. The four movements
   below carry the template's feel without that fight. */
html.sa-skin-vcpility.pm #main .vc-caret { animation: vc-blink 1s steps(1, end) infinite; }
@keyframes vc-blink { 50% { opacity: 0; } }

html.sa-skin-vcpility.pm #main .vc-seal { animation: vc-spin 22s linear 3; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
html.sa-skin-vcpility.pm #main .vc-seal__arrow { animation: vc-bob 2.2s ease-in-out 2; }
@keyframes vc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* the card reveal: the template's long, slow, staggered fade-and-lift */
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card) {
  animation: vc-card 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card):nth-child(2) { animation-delay: 0.18s; }
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card):nth-child(3) { animation-delay: 0.34s; }
html.sa-skin-vcpility.pm #main .pm-in :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card):nth-child(4) { animation-delay: 0.5s; }
@keyframes vc-card { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main :is(.vc-word, .vc-caret, .vc-seal, .vc-seal__arrow, .sa-card, .sa-gaps-card, .sa-replaces__card, .sa-facts__cell, .sa-stages-aeo-card) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* the rotating seal in the hero's lower corner, the template's signature ornament */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 999px !important;
  border: 0.8px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  padding: 1rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-seal__arrow { display: block; font-size: 1rem; margin-top: 0.25rem; }

/* -------------------------------------------------------------------------------------
   9. THE SMILE MARK. Owner: "use the smiley feature as well and make it more noticable and
   interactive."

   NOTICEABLE. Two things do the work. It goes up again, to 10rem on a laptop, and it is now the
   ONLY warm object on a near-black, blue-accented page, so nothing competes with it for the eye.
   The plate becomes a square hairline panel in the template's grammar with a warm inner glow.

   INTERACTIVE. It used to have exactly two states and a binary toggle: flat line, then smile. It
   now RESPONDS BEFORE YOU COMMIT. premium-vcpility.js writes a 0-to-1 `--sm-near` as the pointer
   closes on the mark, and the mouth lifts, the ring brightens and the halo grows in proportion, so
   the mark is visibly alive under the hand rather than waiting for a click. Keyboard focus jumps
   straight to the same mid state, because a response only pointers can reach is not a response.
   The tap still completes it: full arc, staggered sparks, and the message the site already carries.

   What it deliberately does NOT do: gate the message behind the interaction (the resting caption
   states the scenario in full), multiply itself (one instance, in the hero), require a drag (2.5.7),
   or move without a way out (every response is reversible and reduced motion keeps the states while
   dropping the movement).
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile {
  --sm-near: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 0.8px solid rgba(255, 212, 112, calc(0.28 + 0.42 * var(--sm-near))) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 calc(1.5rem + 2.5rem * var(--sm-near)) calc(-1rem + -0.25rem * var(--sm-near)) rgba(246, 186, 46, calc(0.18 + 0.3 * var(--sm-near))) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile::after { display: none !important; }

/* the disc: bigger than it has ever been, and the only warm thing on the page */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 7.5rem; height: 7.5rem; }
@media (min-width: 768px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 9rem; height: 9rem; }
}
@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 10rem; height: 10rem; }
}

/* the halo tracks the pointer's approach rather than sitting at one strength */
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile__btn::after {
  inset: calc(-12% - 6% * var(--sm-near));
  background: radial-gradient(circle,
    rgba(255, 212, 112, 0) 0 calc(42% - 4% * var(--sm-near)),
    rgba(255, 212, 112, calc(0.34 + 0.34 * var(--sm-near))) 54%,
    rgba(255, 212, 112, 0) 80%);
  filter: blur(calc(4px + 3px * var(--sm-near)));
  transition: inset 0.3s, filter 0.3s;
}
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile__ring {
  stroke: rgba(255, 212, 112, calc(0.7 + 0.3 * var(--sm-near))) !important;
  stroke-width: calc(4px + 2.5px * var(--sm-near));
  fill: rgba(255, 212, 112, calc(0.06 + 0.06 * var(--sm-near)));
  transition: stroke 0.3s, stroke-width 0.3s, fill 0.3s;
}
/* THE MOUTH LIFTS AS YOU APPROACH. The flat line and the full arc are both in the SVG already;
   crossfading them on --sm-near turns a binary toggle into a continuous response, and the tap
   still takes it all the way. transform-origin sits on the mouth so the lift reads as a curve. */
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile[data-state="idle"] .sun-smile__flat {
  opacity: calc(1 - 0.85 * var(--sm-near));
  transform: translateY(calc(-1px * var(--sm-near)));
  transition: opacity 0.3s, transform 0.3s;
}
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile[data-state="idle"] .sun-smile__arc {
  opacity: var(--sm-near);
  transform: scaleY(calc(0.2 + 0.42 * var(--sm-near)));
  transition: opacity 0.3s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile__tap {
  fill: rgba(255, 212, 112, calc(0.75 + 0.25 * var(--sm-near))) !important;
  font-size: 12px;
  letter-spacing: 0.26em;
}
/* the caption and the link, in the template's square grammar */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__line { color: #fff !important; font-weight: 500; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link {
  border-radius: 0 !important;
  border: 0.8px solid rgba(255, 212, 112, 0.55) !important;
  font-weight: 600;
}
/* The label colour is scoped to the RESTING state. Unscoped, it painted #FFD470 over the yellow
   fill the smiling state gives this pill and the label vanished - a failure no automated pass on
   this page can see, because nothing in the harness taps the mark. Caught by screenshotting the
   tapped state, which is now part of the check. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile[data-state="idle"] .sun-smile__link { color: #FFD470 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile[data-state="on"] .sun-smile__link {
  background: #FFD470 !important;
  border-color: #FFD470 !important;
  color: #0A0A0B !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link:hover,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sun-smile__link:focus-visible {
  background: #FFD470 !important;
  border-color: #FFD470 !important;
  color: #0A0A0B !important;
}
/* pointer response is decoration: under reduced motion the states remain, the tracking stops */
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility .sa-hero__smile--compact .sun-smile { --sm-near: 0 !important; }
  html.sa-skin-vcpility .sa-hero__smile--compact :is(.sun-smile, .sun-smile *) { transition: none !important; }
}

/* -------------------------------------------------------------------------------------
   10. Focus rings, restated for this skin's grounds. Round 10 established the rule that the ring
   follows the ground rather than the skin; these are the same two cases with this palette's
   colours. Measured: #B00E12 is 6.3:1 on #EDEDEE and 8.6:1 on white; #FF9A93 is 7.4:1 on #0A0A0B.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--vc-accent-deep) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero,
  main section[data-band="deep"],
  main section.band-photo,
  main section.vc-photo-band,
  main .sa-panel,
  main .sa-band-teal,
  main section.sa-strip,
  footer.footer-deep
) :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: #FF9A93 !important; }
html.sa-skin-vcpility a.skip-link { color: var(--vc-accent-deep); }
html.sa-skin-vcpility a.skip-link:focus-visible { outline-color: var(--vc-accent-deep); }

/* -------------------------------------------------------------------------------------
   11. Photographs as flat panels. The luxe layer gives every figure a lift and a soft shadow,
   which is the SunnyAid grammar; on this template an image is a square panel with a hairline and
   nothing else. The five photographs are untouched as files: this is presentation only.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(figure, .rd-photo-fig, .rd-photo-frame, .sa-gaps-fig, .hero-photo, img) {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.rd-photo-fig, .rd-photo-frame, .sa-gaps-fig) {
  border: 0.8px solid var(--vc-line) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(figure, .rd-photo-fig)::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(figure, .rd-photo-fig)::after { border-radius: 0 !important; }

/* -------------------------------------------------------------------------------------
   12. The open FAQ row. The SunnyAid layer inverts an expanded row to a teal panel with light type
   (`.sa-pricing-faq-plate:has(> details[open])`, !important, and boosted by the :has()). Under this
   skin's tokens that teal became near-black, so an opened question read as dark type on near-black
   at 1.03:1 - and it beat the card rule above, which is why whitening the plate alone did not fix
   it. VCPility does not invert an expanded row, so the inversion comes off here rather than being
   recoloured: the row stays a white card in both states. The compound has to carry the same :has()
   to outrank the rule it is answering.
   ------------------------------------------------------------------------------------- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) {
  background: var(--vc-card) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(h1, h2, h3, h4, strong, b, summary, .sa-pricing-faq-qt) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(p, li, dd, figcaption, small) { color: var(--vc-muted) !important; }
/* the answer body's own comparison rows are light-on-teal in the SunnyAid design and their rule
   carries the same :has() boost, so they have to be answered at the same specificity rather than by
   the broad .rd-faq-line rule further down. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(.rd-faq-comp, .rd-faq-comp *, .rd-faq-line) { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) a:not(.btn) { color: var(--vc-accent-deep) !important; }
/* its focus ring follows the row, which is light in both states now */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-pricing-faq-plate:has(> details[open]) :is(a, button, summary):focus-visible { outline-color: var(--vc-accent-deep) !important; }

/* The FAQ aside's connector lines carry their heading's text for layout and measure 0x0, so nothing
   is visible either way, but they were set light for a dark ground that this skin turns white. They
   take the ink colour so the page reports honestly rather than carrying a phantom failure. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(.rd-faq-line, .rd-faq-aside__item, .rd-faq-aside__item *) { color: var(--sa-ink) !important; }

/* A filled blue button takes a WHITE focus ring. The dark-ground rule gives #FF9A93, which is 10:1
   against the near-black hero on the ring's outer edge but only 2.5:1 against the #D40F17 fill on
   its inner edge, and 1.4.11 asks for 3:1 against adjacent colours - both of them. White measures
   4.9:1 against the fill and 15.9:1 against the hero ground, so it clears on both sides. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark,
  main .sa-pricing-faq-cta--primary,
  main .btn-primary-dark,
  main .btn-primary-light
):focus-visible { outline-color: #fff !important; outline-offset: 3px !important; }


/* =====================================================================================
   13. ROUND 12 (10 Sep 2026). Three owner asks: drop the word "software", remove the
   registration dot-grid, and "make the website more dynamic so that people stay on the page".
   ===================================================================================== */

/* The dot grid is gone, so the why-now head is a single column again. Left at two columns it
   reserved 38% of the row for nothing and the heading measured 44 characters a line against a
   ceiling of 75, which is a narrow, hard-to-scan column with empty space beside it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-whynow .sa-whynow-top {
  grid-template-columns: minmax(0, 1fr) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-whynow .sa-whynow-top .sec-head-split { max-inline-size: 58rem; }

/* ---------------------------------------------------------------------
   MOTION THAT EARNS ITS PLACE. Four devices, chosen because each one answers a reason people
   leave a long page rather than because it moves. Every one is gated on html.pm, which premium.js
   sets only when the visitor has NOT asked for reduced motion, and every one is transform- or
   opacity-only, so none of them can shift layout or touch the 0.007 CLS the last two rounds bought.
   --------------------------------------------------------------------- */

/* 1. THE SCROLL CUE, built and then removed. The template's bobbing arrow was rebuilt as a real
   button with a name and a keyboard path, and it kept colliding: anchored to the section it fell
   below the fold, where a scroll cue has nothing to say, and anchored to the first screen it sat on
   the smile mark at 1280x800 and became unclickable. There is nowhere left for it, because unlike
   VCPility's hero this one has no dead space. It is also the least needed of the four: the fact
   cards are already half visible at the fold, which says "there is more below" better than an arrow
   does. Three devices remain, and each answers a reason people leave rather than simply moving. */

/* 2. THE PROGRESS RULE. A hairline that fills as you read. On a page this long it answers "how much
   is left", which is the question that decides whether someone keeps going. It sits in the header's
   own bottom edge, is 2px tall, and is aria-hidden because it duplicates the scrollbar's meaning. */
html.sa-skin-vcpility .vc-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--vc-read, 0));
  transform-origin: 0 50%;
  background: var(--vc-accent);
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { html.sa-skin-vcpility .vc-progress { display: none; } }

/* 3. THE GHOST WORDS DRIFT. They are already the template's strongest structural device; tying them
   to scroll turns each section's arrival into something that happens rather than something that is
   simply there. Pure translate on an element that is 5% ink and aria-hidden, so there is nothing to
   read and nothing to reflow. */
html.sa-skin-vcpility.pm #main .vc-ghost {
  transform: translateX(calc(-50% + var(--vc-drift, 0px)));
  will-change: transform;
}

/* 4. CARDS ANSWER THE POINTER. The template's cards are deliberately flat, which reads as static
   when a whole band of them sits still under the cursor. A hairline that turns blue and a 3px lift
   is the smallest possible answer, and it costs no layout because both are transforms and borders
   that were already reserved. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell) {
  border: 0.8px solid transparent !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
}
/* the hover carries the full skin compound: the base rule above is (1,5,1) and the luxe layer sets
   its own card transforms, so a shorter hover selector loses to both and resolved to the rest state. */
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell):hover {
  transform: translateY(-3px) !important;
  border-color: rgba(237, 28, 36, 0.55) !important;
  box-shadow: 0 10px 30px -18px rgba(237, 28, 36, 0.5) !important;
}
/* and a keyboard visitor gets the same answer, since hover is not a state they have */
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card):focus-within {
  border-color: rgba(237, 28, 36, 0.55) !important;
  box-shadow: 0 10px 30px -18px rgba(237, 28, 36, 0.5) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main :is(.sa-card, .sa-gaps-card, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell) { transition: none !important; }
  html.sa-skin-vcpility #main .vc-ghost { transform: translateX(-50%) !important; }
  }

/* -------------------------------------------------------------------------------------
   14. ROUND 13 (10 Sep 2026). The four-cell facts row is gone, the light bands alternate so two
   of them meeting is a boundary rather than a void, and the hero statistics count up.
   ------------------------------------------------------------------------------------- */

/* The counting figures. min-width is set from the finished value before the count starts, so the
   digits cannot change the box while they run: without it "0" and "263,145" are different widths
   and the icon beside them would step sideways for a second and a half. The figures already carry
   tabular numerals from Round 10, so every intermediate value lands on the same grid. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero [data-vc-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* An earlier attempt trimmed the junction with an adjacent-sibling rule. It matched nothing: these
   sections sit at different depths and are not siblings at all. The trim is on the light-band
   padding itself, above, which does not care how the sections are nested. */

/* =====================================================================================
   15. ROUND 14 (10 Sep 2026). The six gap cards flip instead of expanding.
   Owner: "when i click on the card, only that card should flip and the information should be there".

   The shipped control does all the work. rich-gaps-whynow.js already toggles `is-open` on the row
   from the "What closes it" button, with aria-expanded and aria-controls correct; this sheet spends
   that class on a rotation rather than on an expanding panel. Nothing about the keyboard path or the
   announcement changes, which is why this is a stylesheet and a DOM regroup rather than a new widget.

   The front face stays in flow so the card keeps an intrinsic height with scripts off; the back is
   laid over it. Both faces set `visibility` on a delay, so the hidden one leaves the accessibility
   tree and the tab order at the halfway point of the turn rather than instantly or never.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* 2600px, not 1400. A 420px-wide card seen through a 1400px perspective warps hard as it turns:
     the near edge balloons, the far edge collapses, and the whole thing reads as a skew rather than
     a turn. Frame-by-frame it looked cheap. A far longer focal length keeps the rotation calm and
     the card's proportions believable, which is what a flip is supposed to feel like. */
  perspective: 2600px;
  overflow: visible !important;
}
/* while it turns it may briefly reach past its cell, so it goes on top rather than under */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip:hover { z-index: 2; }
/* A STATIC PLATE behind the two faces. At exactly 90 degrees both faces are edge-on and
   backface-visibility hides them, so for one frame the card is a hole and you see straight through
   to the photograph behind the band. On a plain ground nobody notices; on a photograph it reads as
   the card blinking out. The plate does not rotate, so there is always a card there and what turns
   is its content. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--vc-card);
  pointer-events: none;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__inner {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  height: 100%;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main .vc-flip__inner {
  /* A symmetrical ease, not the out-expo used everywhere else on this page. Out-expo puts almost
     all of the movement in the first third, so a 180-degree turn whips through the edge-on moment
     and then crawls: the eye reads that as a stutter. An even curve turns at a constant-feeling
     rate, which is how a physical card behaves. */
  transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.25, 1);
  will-change: transform;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open .vc-flip__inner { transform: rotateY(180deg); }

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__face {
  background: var(--vc-card);
  border: 0.8px solid transparent;
  padding: clamp(1.5rem, 2.4vw, 2.125rem);
  display: flex;
  flex-direction: column;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: visibility 0s linear 0.275s;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__front { position: relative; min-height: 100%; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  visibility: hidden;
  justify-content: space-between;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open .vc-flip__back { visibility: visible; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .rd-gap-row.is-open .vc-flip__front { visibility: hidden; }

/* the answer is the whole point of the back, so it is simply open there: the collapsing grid the
   expanding version used has nothing left to do once the panel has a face of its own. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back .rd-gap-panel {
  grid-template-rows: 1fr !important;
  visibility: inherit !important;
  margin: 0 !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back .rd-gap-panel p {
  border-left-color: var(--vc-accent) !important;
  color: var(--vc-muted) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back-btn {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: 0.8px solid var(--vc-line);
  background: transparent;
  color: var(--vc-accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__back-btn:hover { background: var(--vc-accent-tint); border-color: var(--vc-accent); }

/* the whole card answers the pointer now, and the chevron points the way it will turn */
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip:hover .vc-flip__face { border-color: rgba(237, 28, 36, 0.55); }
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip:hover { transform: none !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-gaps-card.vc-flip { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main .vc-flip__inner { transition: none !important; }
  html.sa-skin-vcpility #main .vc-flip__face { transition: none !important; }
}
/* with scripts off the panel is open in the markup, so the back would sit invisibly over a front
   that is also visible. No JS means no flip, so the two faces go back to being one column. */
html:not(.js) .sa-gaps-card.vc-flip { perspective: none; }
html:not(.js) .vc-flip__back { position: static; transform: none; visibility: visible; }
html:not(.js) .vc-flip__back-btn { display: none; }

/* =====================================================================================
   16. The gaps photograph as the band's ground (10 Sep 2026).
   Owner: "can you make the photo as the background". The veil is a three-stop gradient in the
   template's own idiom, heavy enough that white type clears 4.5:1 anywhere over it and the six
   white cards still read as cards rather than as holes. The caption keeps its words and moves to
   the foot of the band, where it reads as a credit rather than as a label on a panel.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band {
  position: relative;
  /* No `isolation: isolate` and no negative z-index on the layer. Together those two put the
     photograph BEHIND the section's own opaque background, where it was invisible even once it
     loaded. The section colour is now purely a fallback: the layer paints over it at z-index 0 and
     everything else in the band is lifted to 1. */
  background: var(--vc-night) !important;
  overflow: hidden;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > *:not(.vc-bandphoto) { position: relative; z-index: 1; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 42% !important;
  filter: saturate(0.72) contrast(1.02);
  /* The reveal wipe has to go. The shipped figure animates in behind clip-path: inset(0 100% 0 0),
     released when its own container is revealed; moved to the front of the section as a band ground
     it never gets that release, so the image sat clipped to zero width and the band read as solid
     black. Three passes at the veil were spent on a photograph that was not being painted at all.
     The drift stays: a slow parallax is exactly right for a ground. */
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 1 !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A MODERATE veil over the whole photograph, and a local scrim behind the text (below). The two
     earlier attempts both scrimmed the whole band, at 0.78-0.92 and then 0.82-0.5, and in both the
     photograph was invisible: the band is 1288px tall and the six white cards cover everything
     below the header, so a uniform veil dark enough for white type leaves nothing to see. Splitting
     it means the photograph reads in the margins and around the cards, while the heading gets the
     darkness it needs from a scrim of its own. */
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.58) 0%, rgba(5, 7, 10, 0.44) 38%, rgba(5, 7, 10, 0.6) 100%);
}
/* the caption keeps its words and becomes the band's foot */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto .sa-gaps-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  z-index: 1;
  margin: 0 !important;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66) !important;
  background: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto .sa-gaps-cap strong {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-right: 0.4em;
}
/* the layout that used to hold a photo column beside the grid is now just the grid */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-layout {
  display: block !important;
  grid-template-columns: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-grid { width: 100% !important; }
/* it is a dark band now, so it wants the dark band's padding rather than the light one's */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band {
  padding-block: clamp(4rem, 8vw, var(--vc-band)) !important;
  padding-bottom: clamp(5rem, 9vw, 10rem) !important;
}

/* the template's gold inset ring belonged to the figure when it was a panel; a band ground has no
   frame. premium-sunnyaid-gaps.css draws it on ::before with !important, so it is answered there. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto::before {
  box-shadow: none !important;
  display: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto { box-shadow: none !important; }

/* THE TEXT SCRIM, as glass rather than as a patch.
   Owner, 10 Sep 2026: "the black patch in the background does not look good, can you find a better
   way to blend it in". It was a flat dark rectangle with hard left and right edges, which is exactly
   what it looked like. Three things fix it and they only work together:

     1. It blurs what is behind it instead of only darkening it. A blurred, dimmed photograph reads
        as depth; a flat black panel reads as a hole cut in the page. This is the whole difference.
     2. It is masked, so it fades out on all four sides instead of stopping at an edge. The mask is
        a radial that reaches past the block, so the feather happens in the padding and every line
        of text still sits on the solid part.
     3. It carries a hairline of light along its top edge, which is what makes a glass surface read
        as a surface rather than as a smudge.
   Measured after: the brightest ground behind the heading is 4.9:1 against white and behind the
   lede 15:1, so the blur bought the look without costing any of the legibility. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .sa-gaps-head,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-sechead {
  position: relative;
  z-index: 1;
  padding: clamp(2.25rem, 4.5vw, 4rem) clamp(1.5rem, 6vw, 5rem);
  /* Owner, 10 Sep 2026: "make this like glass". It was already a backdrop-filtered panel, but
     under a 0.52-to-0.62 veil with brightness knocked to 0.42 it read as a solid dark box with
     hard edges - the photograph behind it was doing no work at all. Three changes make it a
     surface instead of a lid:
       - the veil halves, and the brightness knockdown lifts from 0.42 to 0.66, so the picture
         comes back through it
       - saturation goes UP rather than down. Draining colour is what made it look like a smudge;
         real glass keeps the hue of what is behind it and only softens the detail
       - the blur goes up, not down. Blur is what buys the legibility that the veil used to buy,
         and it costs none of the transparency: a bright window behind the panel becomes an even
         wash rather than a hard edge cutting through a line of text
     Measured after the change rather than assumed, by sampling the rendered pixels with the text
     hidden - see the note under the border below. */
  background: linear-gradient(180deg, rgba(5, 7, 10, 0.16) 0%, rgba(5, 7, 10, 0.28) 100%);
  -webkit-backdrop-filter: blur(34px) saturate(1.18) brightness(0.8);
  backdrop-filter: blur(34px) saturate(1.18) brightness(0.8);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 30px 70px -40px rgba(0, 0, 0, 0.6);
  -webkit-mask-image: radial-gradient(ellipse 96% 74% at 50% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 74% at 50% 50%, #000 0%, #000 42%, rgba(0, 0, 0, 0.62) 68%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
}
/* The glass hairline that would normally run along the top edge is deliberately absent. On a panel
   with a hard boundary it is the detail that sells the surface; on one whose whole job is to
   dissolve into a photograph it draws a bright line along exactly the edge the mask is trying to
   make disappear. Tried, looked worse, removed. */
/* engines without backdrop-filter get the flat scrim back, because unreadable is worse than plain */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .sa-gaps-head {
    background: rgba(5, 7, 10, 0.88);
  }
}

/* =====================================================================================
   17. TWO DEVICES BORROWED BACK FROM THE SUNNYAID TEMPLATE (10 Sep 2026).
   Owner: "also use some elements from the sunnyside template if they would look good on this
   though." Two were worth taking and the rest were not, so only two are here.

   THE HAND-DRAWN RING. The template's signature: a scribbled ellipse behind the emphasis words of
   each section heading. It is the best possible thing to borrow onto this page, because this page
   is relentlessly geometric - zero corners, tight grid, one straight accent - and a single
   hand-drawn mark is the counterpoint that stops that reading as cold. The recipe never stopped
   wrapping the words: Round 8 only pointed --sa-ring-src at `none`, so this is the token coming
   back, in a blue copy of the same asset rather than its yellow original.

   It also draws itself. The template animates the ring's background-size from 0% to 100% when the
   heading is revealed, so each section's emphasis is written on as you arrive, which is exactly the
   kind of motion the earlier "more dynamic" ask was after and costs nothing extra.

   THE DOTTED HALFTONE. The template's texture for dark panels. The near-black bands here are
   completely flat, and 16%-white dots at 8px give them a surface without touching contrast: the
   dots sit under the type, not on it.

   NOT BORROWED, and deliberately: the Recoleta serif (it would fight a 97px Plus Jakarta display),
   the circular arrow link (a circle would be a third shape in a design built on one), and the
   cream band alternation (this palette already alternates, in its own greys).
   ===================================================================================== */
html.sa-skin-vcpility.sunnyaid {
  --sa-ring-src: url("/tpl/img/scribble-ellipse-red.svg");
  --sa-ring-h: 1.3em;
}
/* The word has to read ON the ring, which is the whole trap here: the first pass drew a saturated
   blue scribble and left the emphasis word blue as well, so the two cancelled and the heading
   measured 3.9:1 where it had been 17.6:1. Two tints, one per ground: a pale wash on the light
   bands with the deep-blue word on it at 5.1:1, and the saturated fill on the dark bands with the
   word in white at 4.9:1. Measured against the ring itself, not against the band behind it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-ring {
  padding: 0.06em 0.34em 0.1em;
  margin: 0 -0.18em;
  color: var(--vc-accent-deep) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(section[data-band="deep"], section.band-photo, section.vc-photo-band, section.sa-strip) .sa-ring {
  background-image: url("/tpl/img/scribble-ellipse-red-dark.svg") !important;
  color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main .sa-ring { background-size: 100% var(--sa-ring-h) !important; transition: none !important; }
}

/* the halftone, on the dark bands only */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"],
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-strip,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid footer.footer-deep {
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.3px) !important;
  background-size: 8px 8px !important;
}
/* and a whisper of it inside the hero's product window, which is the other flat dark surface */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) !important;
  background-size: 8px 8px !important;
}

/* ---- the hero photo (11 Sep 2026, owner review): replaces the AEO phone mockup.
   Sixth pass, owner: every mask/vignette pass here was still fighting a rectangular photo - the
   actual ask was for just the tiles, not a bordered image of them. images/accessibility_matters.png
   is that photo with the table cut out entirely (a build-time background removal, not CSS), so
   there is no edge left to soften: transparent pixels ARE the hero's own gradient showing
   through. object-fit: contain rather than cover, because there's no background left to crop
   into - the whole "ACCESSIBILITY MATTERS" graphic should stay in frame instead of trading part
   of it for a fuller crop, the trade cover exists to make. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame--photo .sa-hero__photo-img {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
  /* the compiled bundle parks every main img at clip-path: inset(0 100% 0 0) until a scroll-reveal
     it never gets here fires (same trap documented above on .vc-bandphoto img); without this the
     photo sits clipped to zero width and the frame shows only its dot-pattern background. */
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* =====================================================================================
   18. THE OTHER TWO SKINS. The DOM is shared and the skin is a runtime choice, so the two
   structural changes in Round 14 - the gap cards split into faces, and the gaps photograph moved
   to the front of its section - reach ?skin=product and ?skin=sunnyaid as well, where none of the
   styling above applies. Left alone the faces both rendered statically, so every answer was
   permanently open, and the photograph became a full-width block at the top of the band.
   Neither is broken, but neither is what those skins looked like, so they are put back here.
   ===================================================================================== */
html:not(.sa-skin-vcpility) .sa-gaps-card.vc-flip { perspective: none; }
html:not(.sa-skin-vcpility) .vc-flip__inner { transform: none !important; }
html:not(.sa-skin-vcpility) .vc-flip__face {
  position: static !important;
  transform: none !important;
  visibility: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
/* the panel goes back to collapsing from its own button, which is what it did before */
html:not(.sa-skin-vcpility) .vc-flip__back .rd-gap-panel { grid-template-rows: 0fr; visibility: hidden; }
html:not(.sa-skin-vcpility) .rd-gap-row.is-open .vc-flip__back .rd-gap-panel { grid-template-rows: 1fr; visibility: visible; }
html:not(.sa-skin-vcpility) .vc-flip__back-btn { display: none !important; }
/* and the photograph goes back to being a panel of a sensible size at the head of the band */
html:not(.sa-skin-vcpility) section [data-section="leaks"] > .vc-bandphoto,
html:not(.sa-skin-vcpility) [data-section="leaks"] > .vc-bandphoto {
  position: relative;
  max-width: 46rem;
  margin: 0 auto 2.5rem;
}
html:not(.sa-skin-vcpility) [data-section="leaks"] > .vc-bandphoto img { clip-path: none; }

/* =====================================================================================
   19. PREMIUM, AND MORE OF IT (10 Sep 2026). Owner: "all in all make it more dynamic and a premium
   rich feel should be there." Three additions, all craft rather than novelty: the light in the hero
   answers the pointer, every section draws its own top rule as it arrives, and the white cards get
   the inner highlight that separates an expensive card from a white rectangle.
   ===================================================================================== */

/* 1. THE HERO LIGHT FOLLOWS THE POINTER. The hero ground is three radial gradients; a fourth,
   brighter one is placed at the cursor and eased toward it. It is the single cheapest thing that
   makes a dark page feel lit rather than printed. Transform-free, paint-only, and it stops entirely
   when the hero leaves the screen. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--vc-spot-o, 0);
  background: radial-gradient(42rem 42rem at var(--vc-spot-x, 50%) var(--vc-spot-y, 40%),
    rgba(255, 255, 255, 0.14) 0%, rgba(255, 154, 147, 0.09) 40%, transparent 72%);
  transition: opacity 0.6s ease;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility main > section.sa-hero::after { display: none !important; }
}

/* 2. EVERY SECTION DRAWS ITS OWN TOP RULE. A hairline that runs out from the centre as the band
   arrives. It is two pixels of movement and it does more for the feeling of craft than anything
   larger would, because it marks the moment a section begins. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-vc-band]::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"]::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 50%;
  translate: -50% 0;
  /* an explicit width, not a percentage. `width: 100%` on an absolutely positioned pseudo resolves
     against whichever ancestor happens to be the containing block, and on several of these bands
     that came out at 100px: a stub of a line rather than a rule. */
  width: min(76rem, calc(100vw - 4rem));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vc-rule, rgba(10, 10, 11, 0.16)) 18%, var(--vc-rule, rgba(10, 10, 11, 0.16)) 82%, transparent);
  transform-origin: 50% 50%;
  pointer-events: none;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="deep"] { --vc-rule: rgba(255, 255, 255, 0.16); }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section:is([data-vc-band], [data-band="deep"]) { position: relative; }
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section:is([data-vc-band], [data-band="deep"])::before { scale: 0 1; transition: scale 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section:is([data-vc-band], [data-band="deep"]).pm-in::before { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main section::before { scale: 1 1 !important; transition: none !important; }
}

/* 3. THE CARDS GET AN EDGE. A one-pixel highlight along the top and a hairline all round: the
   difference between a white card and a white rectangle, and it costs nothing at any width. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.sa-card, .sa-gaps-card.vc-flip::before, .sa-replaces__card, .sa-stages-aeo-card, .sa-pricing-faq-card, .sa-facts__cell, .sa-hero__fact, .contact-card) {
  /* the inner highlight only. A companion `0 1px 0` hairline under each card was tried and dropped:
     it is a real drop shadow by any measure, the template's cards are flat on purpose, and the
     harness was right to catch it. The inset alone is what separates an expensive card from a white
     rectangle; the shadow underneath was just weight. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-flip__face { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); }

/* =====================================================================================
   20. GLASSMORPHISM ON THE PHOTOGRAPH BAND, and justified body copy (10 Sep 2026).
   ===================================================================================== */

/* Owner: "make this like glass the background i mean use glassmorphism". The six cards over the
   photograph stop being solid white and become frosted panels: the image carries on through them,
   which is the point of putting a photograph behind a band at all. Only on this band - a glass card
   on a flat grey band has nothing to frost and just looks washed out.

   The numbers had to be checked rather than assumed. White at 0.72 over this photograph composites
   to a ground of L 0.62 at its darkest, so the ink on it measures 8.9:1 and the muted body copy
   5.4:1. The blur is what keeps that true: without it a bright window behind a card would show
   through as detail and the text would sit on a moving ground. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__face {
  /* 0.78, not 0.72. At 0.72 the darkest part of the photograph brought the worst card ground to
     L 0.486, which left the muted body copy at 5.01:1 against a 4.5 bar. Half a point of margin on
     a value that moves with whatever the photograph happens to be doing is not margin at all. */
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip {
  border: 0.8px solid rgba(255, 255, 255, 0.5) !important;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip:hover {
  border-color: rgba(255, 255, 255, 0.85) !important;
}
/* the answer plates inside the card are already a light grey; on glass they need to be lighter still
   or they read as a hole in the frost */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__back .rd-gap-panel p {
  background: rgba(255, 255, 255, 0.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip::before,
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__face {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}

/* Owner: "all the font is left formatted make it justified". Applied to multi-line BODY copy only.
   Headings stay ranged left, because a justified heading stretches three or four words across a
   whole column and reads as broken rather than as tidy.
   `hyphens: auto` comes with it and is not optional: justification without hyphenation opens rivers
   of white space down a narrow column, which is the thing that makes justified text look cheap.
   `text-wrap: pretty` keeps the last line from stranding a single word. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(
  .sa-gaps-card__text, .sa-gaps-lede, .sa-whynow-plate p, .sa-stages-aeo-card p,
  .sec-head-split__lead > p, .sa-replaces__card p, .home-pull p, .sa-strip__lede,
  section[data-section] .band-inner > p, section[data-section] p.text-lede
) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}
/* under 480 a justified line is too short to justify: three or four words per line and the gaps
   become holes. Ranged left below that width. */
@media (max-width: 479px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(
    .sa-gaps-card__text, .sa-gaps-lede, .sa-whynow-plate p, .sa-stages-aeo-card p,
    .sec-head-split__lead > p, .sa-replaces__card p, .home-pull p, .sa-strip__lede,
    section[data-section] .band-inner > p, section[data-section] p.text-lede
  ) { text-align: left; }
}

/* the two question cards in the hero row. They have no figure and no caption, so the question
   itself carries the card: smaller than a numeral, still the loudest thing in its box, and
   balanced against the one card that does hold a figure. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-fact-q {
  display: block;
  font-family: "Plus Jakarta Sans", var(--font-sans), system-ui, sans-serif !important;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
  text-align: left;
  text-wrap: balance;
}
/* the caption is back under the action line, so the box no longer centres its single line and
   the three boxes stack identically. The action sets a shade smaller than the numeral it sits
   beside, because a sentence at numeral size would out-shout the figure it is answering. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-fact--question .sa-hero__fact-body { justify-content: flex-start; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-fact--question .sa-hero__fact-label { margin-top: 0.4rem; }

/* =====================================================================================
   21. THE SCROLL DECK (10 Sep 2026). VCPility's pinned card deck, on the four stages.
   Owner: "use elements from there especially the video which is a scroll animation."

   The section holds still while you scroll past it, the cards fan in perspective on the right, and
   the text column on the left swaps in step. The pin is not new: premium.css already gives this
   runway 300vh at 1024 and up, which is why this section was a horizontal scroller before. What
   changes is what the pinned time is spent on.

   Below 1024 there is no pin and no deck: the runway collapses to auto height and the whole thing
   renders as a plain stack, which is also exactly what a no-JS or reduced-motion visitor gets.
   ===================================================================================== */
/* The deck sits outside the head's max-width wrapper, because it replaced the track rather than
   the stage's inner container. Without its own axis the copy column ran flush to the viewport edge
   and the fanned cards ran off the right of it. It carries the page's own content axis instead. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
  max-width: min(76rem, calc(100vw - 4rem));
  margin-inline: auto;
}
/* the copy blocks inherited spacing from a layout that no longer exists: the body sat indented
   under a heading that starts at the column edge. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel > * { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-text { max-width: 34rem; margin-top: 1rem !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-holder { margin: 0 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-name {
  margin-bottom: 0.5rem !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vc-accent-deep) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-title {
  font-size: clamp(1.75rem, 3vw, 2.6rem) !important;
  line-height: 1.06 !important; letter-spacing: -0.035em !important; text-wrap: balance;
  /* Round 7b gave these titles a min-height so four of them would line up across a row. In a deck
     only one is ever on screen, so the reserved space is just a hole between the heading and the
     paragraph under it. */
  min-height: 0 !important;
}

/* THE PIN, declared here rather than inherited. premium.css gives `.hscroll__runway` 300vh at
   1024 and up, and the old horizontal scroller relied on the Astro bundle making `.hscroll__stage`
   sticky. Measured on the built page, neither was in force any more: the runway computed to 698px
   and the stage to `position: static`, so the deck had no travel to read and never left card one.
   Rather than chase why, the deck states its own pin. It clears the fixed header, so the stage
   never sits under it. */
@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__runway {
    height: 340vh !important;
    position: relative;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__stage {
    position: sticky !important;
    top: 5.5rem;
    min-height: calc(100vh - 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec { padding-block: 0 !important; }
}

@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    min-height: 30rem;
  }
  /* the copy column: every panel occupies the same cell, one visible at a time */
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__copy { display: grid; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.45s;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  /* the stack: the active card square on, the rest fanned back and to the right */
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__stack {
    position: relative;
    perspective: 2200px;
    min-height: 26rem;
    overflow: hidden;                 /* a card fanned past the column edge is clipped, not scrolled */
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(27rem, 72%);
    transform-origin: 50% 50%;
    /* 3.2rem per step, not 5.5: at four cards the old fan reached 16.5rem past the active card and
       out of the column entirely. */
    transform: translate3d(calc(var(--d, 0) * 3.2rem), 0, calc(var(--d, 0) * -7rem)) scale(calc(1 - var(--d, 0) * 0.06));
    opacity: calc(1 - var(--d, 0) * 0.26);
    filter: saturate(calc(1 - var(--d, 0) * 0.45)) brightness(calc(1 - var(--d, 0) * 0.12));
    z-index: calc(20 - var(--d, 0));
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease, filter 0.55s ease;
    pointer-events: none;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card[data-behind] { opacity: 0; }
}

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card .sa-stages-aeo-tile,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  clip-path: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card { overflow: hidden; }
/* the caption on the face of the card, over a foot of shade so it reads on any photograph */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__cardcap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: linear-gradient(rgba(5, 7, 10, 0) 0%, rgba(5, 7, 10, 0.72) 44%, rgba(5, 7, 10, 0.9) 100%);
  color: #fff;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: left;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__cardcap em {
  display: block;
  margin-bottom: 0.35rem;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vc-accent-soft);
}
/* the counter, the reference's own device */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__count {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--vc-muted);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__count b { color: var(--vc-accent-deep); }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel .sa-stages-aeo-num { color: var(--vc-accent-deep) !important; }

/* Below 1024, and for anyone who has asked for less motion, the deck is a stack. Both columns
   simply flow, every panel is visible, and the pin is off. */
@media (max-width: 1023px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__card { position: relative; margin-bottom: 1.5rem; aspect-ratio: 16 / 10; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__panel { margin-bottom: 2rem; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck__count { margin-bottom: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility #main .vc-deck__panel { opacity: 1 !important; visibility: visible !important; transform: none !important; position: static !important; margin-bottom: 2rem; }
  html.sa-skin-vcpility #main .vc-deck__copy { display: block !important; }
  html.sa-skin-vcpility #main .vc-deck__card { position: relative !important; transform: none !important; opacity: 1 !important; filter: none !important; margin-bottom: 1.5rem; aspect-ratio: 16 / 10; }
  html.sa-skin-vcpility #main .vc-deck__stack { perspective: none !important; min-height: 0 !important; }
  /* the pin comes off too, or a reduced-motion visitor scrolls three screens of nothing past a
     stack that is already fully rendered. Same compound as the rule that sets it. */
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__runway { height: auto !important; min-height: 0 !important; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec .hscroll__stage { position: static !important; min-height: 0 !important; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .vc-deck-sec { padding-block: clamp(2.75rem, 5.2vw, 4.5rem) !important; }
}
html:not(.js) .vc-deck__panel { opacity: 1 !important; visibility: visible !important; position: static !important; }
html:not(.js) .vc-deck__card { position: relative !important; transform: none !important; opacity: 1 !important; }

/* =====================================================================================
   21. THE HEADLINE'S TYPED TAIL, and the mock's black strip (10 Sep 2026).
   ===================================================================================== */

/* The rotating word takes a pale red rather than the accent proper. The hero is a blue-to-red
   gradient and the headline crosses all of it, so the word has to clear the DARKEST and the
   LIGHTEST point of that sweep. #D40F17 is invisible against the gradient's own red end; white
   is what the rest of the headline already is, so it would not read as a change at all. #FFC7C2
   sits above both: measured against the veiled red end, which is the worst case, it clears the
   3:1 bar that applies to text this size, and against the blue end it is far clearer still. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type__w { color: #FFC7C2; }
/* the caret. `steps(1)` gives the hard on-off of a real text cursor rather than a soft pulse. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type__c {
  display: inline-block;
  width: 0.055em;
  height: 0.78em;
  margin-left: 0.05em;
  background: #FFC7C2;
  vertical-align: -0.04em;
  animation: vc-caret 1.05s steps(1) infinite;
}
@keyframes vc-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* reduced motion gets the first word, no caret, no loop: the headline still makes sense, it just
   stops moving. The JS sets .is-static and never schedules a frame. */
@media (prefers-reduced-motion: reduce) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type__c { display: none; }
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .vc-type.is-static .vc-type__c { display: none; }

/* Owner, second pass on this mock: "blend the table with the colour gradient, I do not want to
   see the edges of the table". The first pass made the black strip join the white card. This one
   removes the card: it becomes a dark glass surface the gradient shows through, with a feathered
   edge so there is no rectangle at all.

   That inverts everything inside it. The mock was built as dark ink on white - the title, the
   column heads, the names, the suburbs, the times, the source chip, the avatars, the automation
   list - and every one of those has to be restated light, or the table simply disappears. This
   is the whole of that inversion; there is no half of it that works.

   Measured after, by sampling rendered pixels with the glyphs hidden: the brightest ground under
   the table is the gradient's red end, where white measures 9.0:1. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame {
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.34) 0%, rgba(6, 8, 12, 0.46) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  backdrop-filter: blur(26px) saturate(1.1);
  border: 0 !important;
  box-shadow: none !important;
  /* the feather. The radial reaches past the block so the fade happens in the padding and no line
     of text sits on the soft part. */
  -webkit-mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__chrome {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero :is(.pipe__chrome, .pipe__title, .pipe__who, .pipe__time, .pipe__frame td, .pipe__frame span:not(.pipe__status):not(.pipe__source):not(.pipe__avatar):not(.pipe__sample)) {
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame :is(th, .pipe__suburb, .pipe__auto-label) {
  color: rgba(255, 255, 255, 0.68) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame .pipe__auto-item { color: rgba(255, 255, 255, 0.86) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame :is(tr, thead, .pipe__row) { border-color: rgba(255, 255, 255, 0.12) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__auto {
  background: rgba(255, 255, 255, 0.07) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* the small solid objects keep a ground of their own, restated for a dark surface */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__avatar,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__source {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__status.is-assigned {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__sample {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__chrome .rd-proof-replay {
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #fff !important;
  background: transparent !important;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__chrome .rd-proof-replay:hover {
  border-color: #fff !important;
  color: #fff !important;
}
/* The four small objects inside the table needed ID weight. They are dressed by the shared
   layers through the `:not(._a)...:not(._j)` chains and by the generated gold overrides, both of
   which sit above plain class weight; `#main` is the documented way past them on this project.
   Left alone they stayed as pale pills and dark red ticks on a dark surface: legible in two
   cases, invisible in the third, and in every case obviously borrowed from the white card the
   panel used to be. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__avatar {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__status.is-assigned {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}
/* Booked keeps a solid fill, because it is the one state in the sequence that means something
   happened. White on this red measures 5.4:1. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__status.is-booked {
  background: var(--vc-accent-fill) !important;
  color: #fff !important;
}
/* the automation ticks: the deep red is for light grounds and reads as near-black here */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__auto-item svg,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main > section.sa-hero .pipe__auto-item svg * {
  color: var(--vc-accent-soft) !important;
  stroke: var(--vc-accent-soft) !important;
}

/* no backdrop-filter means no glass: the panel goes opaque dark instead of leaving white text
   stranded on a gradient */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__frame {
    background: rgba(6, 8, 12, 0.9) !important;
  }
}

/* =====================================================================================
   22. THE GAPS BAND LOSES ITS PHOTOGRAPH (10 Sep 2026).
   Owner, having seen the glass: "remove the background and make the text black".

   Taken as the whole ground rather than only the panel's fill, because the two cannot be
   separated: black type on that photograph measures about 2:1 and is unreadable, so removing the
   veil without removing the picture would produce a heading nobody can read. The band becomes a
   plain light section like the rest of the page.

   Four things have to move together, and missing any one of them leaves the band half-dressed:
     1. the photograph itself
     2. the glass panel - background, blur, border, shadow and the feather mask, all of which
        exist only to make type legible on a picture that is no longer there
     3. the type, from white to ink and muted
     4. the hand-drawn ring under the emphasis word. There are two of these: a saturated one
        carrying a white word for dark grounds and a pale one carrying a deep-red word for light
        ones. The band is listed in the dark-ground rule, so without this it would keep a white
        word on a pale ring - invisible, and the exact failure this project has hit before.
   ===================================================================================== */

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .vc-bandphoto { display: none !important; }

html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band > .sa-gaps-head,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-sechead {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding-left: 0;
  padding-right: 0;
}
/* The heading needed one more class to win. The rule keeping it white is the dark-band grammar
   near the top of this sheet, which groups every dark ground - deep bands, the photo bands, the
   strip and the footer - and measures (1,6,3). Naming the head block as well takes this to
   (1,7,2), which beats it on class count. Found by disabling stylesheets one at a time: the
   rule matcher could not see it, and the white was neither inherited nor inline. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head :is(h1, h2, h3, h4, strong, b, .font-display),
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-sechead :is(h1, h2, h3, h4, strong, b, .font-display),
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .pm-w,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .pm-w > * { color: var(--sa-ink) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head :is(p, li) { color: var(--sa-muted) !important; }
/* the ring keeps its own deep red against that ink */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .sa-ring,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .sa-ring .pm-w,
/* `.pm-w > *` as well, not just `.pm-w`. The reveal animation wraps each word twice and the ink
   rule above matches the inner span directly at (1,7,3), which outranks a rule that only names
   its parent. This is the same shape of miss as the heading itself. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-head .sa-ring .pm-w > * { color: var(--vc-accent-deep) !important; }

/* The ghost word sat behind a dark panel and read as a watermark. On the light ground it is the
   loudest thing in the block, and it collides with both the chip and the heading. It keeps its
   job - a faint echo of the section's subject - at a weight that suits a pale ground. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-ghost-host::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-ghost {
  color: rgba(10, 10, 11, 0.045) !important;
  opacity: 1 !important;
}

/* the ring goes back to its light-ground pair: pale ellipse, deep-red word */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-ring {
  background-image: url("/tpl/img/scribble-ellipse-red.svg") !important;
  color: var(--vc-accent-deep) !important;
}

/* the six cards were frosted because a picture sat behind them. Over a flat grey, frost reads as
   a washed-out card rather than as glass, so they go solid white with the skin's hairline. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip::before,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__face {
  background: #FFFFFF !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip {
  border: 0.8px solid rgba(10, 10, 11, 0.1) !important;
}
html.sa-skin-vcpility.pm.luxe.sunlit.sunnyaid #main section.vc-photo-band .sa-gaps-card.vc-flip:hover {
  border-color: rgba(237, 28, 36, 0.55) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.vc-photo-band .vc-flip__back .rd-gap-panel p {
  background: rgba(10, 10, 11, 0.04);
}

/* =====================================================================================
   23. THE HERO SCREEN IS THE AI ASSISTANT NOW (10 Sep 2026).
   The float was built to sit on the AEO band's near-black ground with its own dark chrome. On the
   hero gradient it needs the same treatment the Enquiries table got: no hard rectangle, the
   colour showing through, a feathered edge. Its own dark panels stay - a chat window with visible
   message bubbles IS the product being shown - but the shell around them dissolves.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame--aeo { padding: 0 !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-stages-aeo-float {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.34) 0%, rgba(6, 8, 12, 0.46) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
  backdrop-filter: blur(26px) saturate(1.1);
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 96% at 50% 50%, #000 0%, #000 74%, rgba(0, 0, 0, 0.72) 88%, transparent 100%);
}
/* the "Try it yourself" note hung off the float's corner; on the gradient it becomes a line under it */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-stages-aeo-float + *,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame--aeo .rd-aeo-try {
  position: static !important;
  transform: none !important;
  margin-top: 0.9rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.78) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-stages-aeo-float { background: rgba(6, 8, 12, 0.9) !important; }
}
/* the AEO band, now a single column */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-aeo-grid--solo { grid-template-columns: minmax(0, 1fr) !important; max-width: 62rem; }

/* =====================================================================================
   24. THE 9PM SEQUENCE (10 Sep 2026) - replaces the Sharktech company strip.
   Three beats on a clock, then the line that closes them. Built on the site's deep band rather
   than a second gradient: "keep it only for the hero" is a standing instruction from Round 18,
   and the owner's mockup showing a gradient here is flagged rather than acted on unilaterally.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section.sa-nine { padding-block: clamp(3.5rem, 7vw, 6rem) !important; }
/* left, not centred. The deep-band grammar centres section heads, which is right for a band
   whose heading is the whole point; this one introduces a three-beat sequence that reads
   left to right, and a centred head over a left-aligned row looks like two decisions. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__head { max-width: 44rem; text-align: left; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__h,
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__lede { text-align: left !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__h {
  /* Manrope, not the inherited Plus Jakarta Sans. Round 20 measured the approved homepage and
     found its h1 and all eight h2s in Manrope, with Plus Jakarta Sans starting at h3; a new h2
     that inherits the body face breaks that and the harness catches it. */
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif !important;
  margin: 0; color: #fff !important;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__lede {
  margin: 1rem 0 0; color: rgba(255, 255, 255, 0.74) !important;
  font-size: 1.0625rem; line-height: 1.65; max-width: 40rem;
}
/* ---- the timeline (11 Sep 2026, owner review): one connected line through the three beats
   instead of a 3-up grid. A single ::before spans the whole list and stretches to fit however
   tall the copy runs; each dot sits on it via a halo the width of the band's own background,
   the standard trick for a line that visually passes behind a marker rather than through it. ---- */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline {
  position: relative; margin-top: clamp(2rem, 4vw, 3rem); max-width: 44rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline::before {
  content: ""; position: absolute; top: 0.55rem; bottom: 0.55rem; left: 0.35rem;
  width: 1px; background: rgba(255, 255, 255, 0.16);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step {
  position: relative; display: flex; gap: 1.1rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step + .sa-nine__step { margin-top: 1.9rem; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__rail {
  flex: 0 0 0.7rem; display: flex; justify-content: center; padding-top: 0.3rem;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--vc-accent-soft) !important; box-shadow: 0 0 0 4px #0f2e38; position: relative; z-index: 1;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__body { flex: 1 1 auto; min-width: 0; }
/* the same timeline, turned sideways at 900px+: three columns instead of a stack, the line
   rotated from a vertical rule to a horizontal one. The insets are calc(100%/6) rather than a
   fixed value because that's the centre of the outer thirds in a 3-up grid at any width, so the
   line still ends under the first and last dot instead of overshooting past them. */
@media (min-width: 900px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline {
    max-width: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__timeline::before {
    top: 0.75rem; bottom: auto; left: calc(100% / 6); right: calc(100% / 6); width: auto; height: 1px;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step {
    flex-direction: column; align-items: center; text-align: center;
  }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__step + .sa-nine__step { margin-top: 0; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__rail { justify-content: center; padding-top: 0; }
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__body { max-width: 20rem; }
}
/* the clock chip. Pale red on a translucent ground: 9.7:1, and it reads as a timestamp rather
   than as a button, which a solid fill would. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__chip {
  display: inline-block; padding: 0.3rem 0.7rem;
  background: rgba(255, 154, 147, 0.14); color: var(--vc-accent-soft) !important;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__ct {
  margin: 1.1rem 0 0; color: #fff !important;
  font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cb {
  margin: 0.7rem 0 0; color: rgba(255, 255, 255, 0.76) !important; font-size: 0.9375rem; line-height: 1.62;
}
/* the closing line and its CTA */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  margin-top: 1rem; padding: 1.5rem;
  background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.1);
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cta-t {
  margin: 0; flex: 1 1 22rem; color: #fff !important; font-size: 1.0625rem; line-height: 1.55; font-weight: 600;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__cta-t em {
  font-style: normal; color: var(--vc-accent-soft) !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main .sa-nine__btn { flex: 0 0 auto; }

/* =====================================================================================
   25. THE GRADIENT LEAVES THE HERO (10 Sep 2026).
   The owner's artwork for both new bands - the 9pm sequence and the AI-native IT team - shows
   them on the hero gradient, and the owner has separately asked about extending it because the
   inner pages read as dull. So `data-band="grad"` is a real band type now, with the hero's own
   three stops and the same 16% veil, and the two new sections use it.

   This reverses "keep it only for the hero" from Round 18. Reversed deliberately, on the owner's
   own mockups, and easy to undo: change the two data-band values back to "deep".

   At ID weight and after the palette, because a plain `main section[data-band="grad"]` in the
   recipe sheet lands in premium-pages.css, which loads before the colour layers, and lost.
   ===================================================================================== */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] {
  background-color: var(--vc-grad-a) !important;
  background-image:
    linear-gradient(rgba(5, 7, 10, 0.16), rgba(5, 7, 10, 0.16)),
    linear-gradient(100deg, var(--vc-grad-a) 0%, var(--vc-grad-b) 52%, var(--vc-grad-c) 100%) !important;
  color: #fff !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] :is(h2, h3, h4, strong, b, .it-chip, .pb__list li) { color: #fff !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] :is(p, li, .it-lede, .it-card__b, .pb__lede) { color: rgba(255, 255, 255, 0.78) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] :is(.it-kicker, .pb__kicker, .sa-nine__chip) { color: var(--vc-accent-soft) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb__note { color: rgba(255, 255, 255, 0.62) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb__lbl { color: rgba(255, 255, 255, 0.72) !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb__in { color: #fff !important; }
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main section[data-band="grad"] .pb-trigger { color: rgba(255, 255, 255, 0.86) !important; }

/* The IT band's heading, and the playbook's, take Manrope like every other h1/h2 on this site.
   Stated here rather than in the recipe sheet for the third time this round: recipe CSS is
   concatenated into premium-pages.css, which loads BEFORE the site-wide Plus Jakarta Sans rule,
   so a font-family set there is overridden and C4 catches it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid #main :is(.it-h, .pb__h, .pb__fh) {
  font-family: "Manrope", var(--font-sans), system-ui, sans-serif !important;
}

/* ---- 12 Sep 2026: full-bleed hero video with all hero copy overlaid on top, swapping out the
   tiles/gradient treatment. .sa-hero is already position:relative and overflow-hidden (base
   Tailwind utilities on the section), so the video only needs to fill it. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero {
  background-color: #05070a !important;
  background-image: none !important;
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Lightened (12 Sep 2026, owner): the first pass kept a dark-enough floor under the copy column
   regardless of what's bright or dark in a given frame of real footage, but read as too heavy a
   tint over the video. Eased back across every stop while keeping the same left-to-right shape,
   so the text side still has a legibility floor and the footage still shows through more clearly. */
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__vid-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(5, 7, 10, 0.58) 0%, rgba(5, 7, 10, 0.38) 42%, rgba(5, 7, 10, 0.14) 68%, rgba(5, 7, 10, 0.22) 100%),
    linear-gradient(rgba(5, 7, 10, 0.1), rgba(5, 7, 10, 0.1));
}
html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media--hidden { display: none !important; }
@media (min-width: 1024px) {
  html.sa-skin-vcpility.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid { grid-template-columns: 1fr !important; }
}