/* =====================================================================
   Round 8 — the homepage as a software company's homepage. Loaded LAST.
   Owner: "it should give the feel that we are a software and ai company who provides crms to many
   ndis providers … also the yellow element everywhere."
   Three moves: yellow is rationed to the act, headings return to Manrope, and the hero carries a
   product window instead of footage. Every rule here is an override; deleting this file and its two
   SHEETS entries restores Round 7 exactly.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. A second accent, so yellow can mean one thing.
   Petrol-blue is the site's own link family. Measured pairings:
     --sa-ui      #C32B2B   5.2:1 on cream · 5.7:1 on white · white on it 5.7:1
     --sa-ui-soft #F0918A   5.4:1 on teal · 6.5:1 on teal-deep · ink on it 6.2:1
     --sa-ui-tint #FCE7E3   ink on it 12.1:1 · --sa-ui on it 4.8:1
   --------------------------------------------------------------------- */
/* The UI accent is CareX Australia's red (9 Sep 2026, owner: "make the blue pallette red, basically
   take inspiration from carexaustralia.com.au, use that red"). #C32B2B is the red that actually covers
   that site by area; their brighter #EC2126 is only 4.36:1 on white, so it cannot carry text or sit
   under white text and is not used. The pale and tint steps are luminance twins of the petrol pair
   they replace (0.645 vs 0.660, 0.839 vs 0.847), which is why every contrast pairing the Round 8
   harness checked holds without re-tuning: soft-on-teal 8.4:1, ink-on-soft 9.7:1, ink-on-tint 12.4:1.
   The deep teal bands are NOT touched: that petrol ground is the brand across all 37 pages and an
   owner decision from 31 Aug. CareX pairs its red with navy; if the full reference look is wanted,
   the one-line follow-up is --sa-teal to their #212361. */
html.sunnyaid {
  --sa-ui: #C32B2B;
  --sa-ui-soft: #F0918A;
  --sa-ui-tint: #FCE7E3;
}

/* ---------------------------------------------------------------------
   THE SKIN SWITCH. Everything from here to section 5 is the Round 8 *identity*: the yellow ration,
   Manrope headings and the retired ring. It is gated on `html.sa-skin-product`, which the recipe adds
   by default and a tiny head script removes when the URL says `?skin=sunnyaid`.
   So the SunnyAid template is never discarded - it is one query string away, and the layers that
   define it (premium-sunnyaid.css and the six section files) are untouched by Round 8.
     ?skin=sunnyaid  -> Recoleta headings, the hand-drawn ring, the template's yellow accent
     ?skin=product   -> back to the software-company identity (the default)
   The choice is remembered per browser, like the existing ?v=luxe / ?v=classic switch.
   The structural work below section 5 (the product window, the company strip, the six replaced
   tools, the facts row) is deliberately NOT gated: it is content and layout, not palette.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid {
  /* The flip. ~95 rules across the seven skin files read these four tokens, so re-pointing them
     here retints every tick, chip, dot, badge, toggle, rule and heading colour in one move. Yellow
     is handed back below, scoped to the four things that are an action. */
  --sa-yellow: var(--sa-ui-soft);
  --sa-yellow-deep: var(--sa-ui);
  --sa-yellow-soft: var(--sa-ui-soft);
  --sa-yellow-tint: var(--sa-ui-tint);

  /* the tick disc, re-inlined: the fill is baked into the data URI, so the token has to be redeclared
     rather than recoloured. Same path geometry as the shipped mark, --sa-ui disc, white check. */
  --sa-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23C32B2B'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6' fill='none' stroke='%23FFFFFF' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* the hand-drawn ring is care-brand vocabulary and its fill is baked into the SVG, so under this
     skin it goes and the emphasis survives as colour (section 3). ?skin=sunnyaid brings it back. */
  --sa-ring-src: none;
}

/* the sunlit re-point, corrected: only the button-fill family stays on yellow */
html.sa-skin-product.sunlit.sunnyaid {
  --sun: var(--sa-ui-soft);
  --sun-2: var(--sa-ui-soft);
  --sun-tint: var(--sa-ui-tint);
  --coral-2: var(--sa-ui-soft);
  --aqua: var(--sa-ui-soft);
  --aqua-ink: var(--sa-ui);
  --gold-2: var(--sa-ui-soft);
  --gold-3: var(--sa-ui);
  --gold-ink: var(--sa-ui);
  --color-lyd-gold-ink: var(--sa-ui);
  --color-lyd-yellow: var(--sa-ui-soft);
  --color-lyd-yellow-deep: var(--sa-ui);
}

/* ---------------------------------------------------------------------
   2. Yellow, handed back to the four things that are an action.
   Custom properties inherit, so scoping the original values onto these subtrees restores the
   template yellow inside them without touching a single component rule.
   --------------------------------------------------------------------- */
html.sa-skin-product.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,
  .sun-smile
) {
  --sa-yellow: #FFD470;
  --sa-yellow-deep: #F6BA2E;
  --sa-yellow-soft: #FFE3A8;
  --sa-yellow-tint: #FFF4DC;
}
/* the header carried a second, identical "Book a free demo" pill 200px above the hero's. One ask per
   screen: the header becomes an outline so the hero's is the only filled button in the fold. */
html.sa-skin-product.luxe.sunlit.sunnyaid header a[class*="bg-lyd-yellow"] {
  background: transparent !important;
  color: var(--sa-teal) !important;
  /* 0.45 alpha over the near-white header computed to 2.32:1, under the 3:1 that 1.4.11 asks of a
     control boundary. This is the only persistent way to act for 22 of the page 23 phone screens,
     so the edge has to be visible. 0.6 alpha measures 3.75:1. */
  border: 1px solid rgba(11, 57, 72, 0.6) !important;
  box-shadow: none !important;
  /* the cta-drift keyframes still ran here forever against a background this block sets to
     transparent, recalculating style every frame and painting nothing. */
  animation: none !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid header a[class*="bg-lyd-yellow"]:hover { background: rgba(11, 57, 72, 0.06) !important; }

/* the hard-coded rgba(255,212,112,x) literals the foundation sweep uses, restated in the UI hue */
html.sa-skin-product.luxe.sunlit.sunnyaid main [data-section="pricing"] [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark),
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"]:has(.card-elevate) [data-slot="card"]:not(.card-elevate):not(.card-anchor):not([class*="bg-lyd-yellow/"]) :is(.btn-primary-light, .btn-primary-dark) { border-color: rgba(240, 145, 138, 0.55) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid .btn-ghost-dark:hover { border-color: var(--sa-ui-soft) !important; background: rgba(240, 145, 138, 0.12); }
html.sa-skin-product.sunlit.sunnyaid .editorial-photo::before,
html.sa-skin-product.sunlit.sunnyaid .hero-photo::before { box-shadow: inset 0 0 0 1px rgba(240, 145, 138, 0.5); }
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"]:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .hscroll__panel:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main [data-slot="card"]:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-lyd:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main .carousel-card:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main a.demo-frame:hover { border-color: rgba(195, 43, 43, 0.5) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-elevate,
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-elevate[data-slot="card"],
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"],
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"] {
  background: rgba(240, 145, 138, 0.1) !important;
  border: 1px solid rgba(240, 145, 138, 0.55) !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid main .card-elevate::before { background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(240, 145, 138, 1) 76%, transparent 92%); }
html.sa-skin-product.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"] .btn-ghost-light { border-color: rgba(240, 145, 138, 0.45) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid footer.footer-deep,
html.sa-skin-product.luxe.sunlit.sunnyaid footer.footer-full.footer-deep { border-top: 1px solid rgba(240, 145, 138, 0.26) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid footer.footer-deep [class*="rounded-full"][class*="border"]:hover { border-color: var(--sa-ui-soft) !important; background: rgba(240, 145, 138, 0.12) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .pipe__frame { border-color: rgba(240, 145, 138, 0.28) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .pipe__chrome .pipe__sample { border-color: rgba(240, 145, 138, 0.55); color: var(--sa-ui-soft); }
html.sa-skin-product.luxe.sunlit.sunnyaid main .demo-frame::after { background: var(--sa-ui-soft); box-shadow: 0.95rem 0 0 rgba(240, 145, 138, 0.6), 1.9rem 0 0 rgba(255, 255, 255, 0.5); }
html.sa-skin-product.luxe.sunlit.sunnyaid main .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(240, 145, 138, 0.55) 2.6%, rgba(240, 145, 138, 0.62) 95.6%, transparent 98.8%); }
html.sa-skin-product.luxe.sunlit.sunnyaid header .nav-link::after { background: var(--sa-ui) !important; }
/* Focus rings, split by ground (9 Sep 2026 audit). The pale step was applied in every context,
   which made the ring 2.10:1 against the hero cream and 2.27 to 2.30:1 on the white cards, below the
   3:1 that 1.4.11 Non-text Contrast asks of a focus indicator. It only ever passed on the dark bands,
   where it measures 5.2:1 to 8.0:1. So light grounds take the deep accent and dark grounds keep the
   pale step. The dark rule carries more compounds than the light one, so it wins where it applies. */
html.sa-skin-product.sunlit.sunnyaid a.skip-link { color: var(--sa-ui); }
html.sa-skin-product.sunlit.sunnyaid a.skip-link:focus-visible { outline-color: var(--sa-ui); }
html.sa-skin-product.luxe.sunlit.sunnyaid main :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--sa-ui) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid :is(
  main section[data-band="deep"],
  main section.band-photo,
  main .sa-panel,
  main .sa-band-teal,
  footer.footer-deep
) :is(a, button, summary, [tabindex="0"]):focus-visible { outline-color: var(--sa-ui-soft) !important; }
/* the featured pricing card's border literal, and its 6px rule */
html.sa-skin-product.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card--feature { border-color: rgba(195, 43, 43, 0.45) !important; }
/* the smile plate's own frame stays warm, it is the one playful object */
html.sa-skin-product.sunnyaid .sun-smile { border-color: rgba(255, 212, 112, 0.45); }
html.sa-skin-product.sunnyaid .sun-smile[data-state="on"] { border-color: rgba(255, 212, 112, 0.85); }
html.sa-skin-product.sunnyaid .sun-smile__btn::before { background: rgba(255, 212, 112, 0.26); }
html.sa-skin-product.sunnyaid .sun-smile__link { border-color: rgba(255, 212, 112, 0.6); }

/* ---------------------------------------------------------------------
   3. Emphasis without the hand-drawn ring. The ring span stays in the DOM (recipes still find it,
   the text is byte-identical); it just carries colour instead of a scribble.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid .sa-ring { padding: 0; margin: 0; color: var(--sa-ui); }
html.sa-skin-product.sunnyaid main section[data-band="deep"] .sa-ring,
html.sa-skin-product.sunnyaid main section.closing-band .sa-ring,
html.sa-skin-product.sunnyaid main section.sa-stages-aeo-aeo .sa-ring,
html.sa-skin-product.sunnyaid main section.sa-whynow .sa-ring { color: var(--sa-ui-soft); text-shadow: none !important; }

/* ---------------------------------------------------------------------
   4. Type. Manrope at the weights the README's Round 1 scale specifies. The Recoleta @font-face
   blocks stay in premium-sunnyaid.css but nothing references the family, so no file is fetched.
   --------------------------------------------------------------------- */
html.sa-skin-product.sunnyaid {
  --sa-font-heading: "Manrope", var(--font-sans), system-ui, sans-serif;
  --sa-h1: clamp(2.25rem, 4.6vw, 3.5rem);
  --sa-h2: clamp(1.875rem, 3.4vw, 3rem);
}
html.sa-skin-product.luxe.sunlit.sunnyaid main h1.font-display,
html.sa-skin-product.luxe.sunlit.sunnyaid main h1:not(.font-display) { font-weight: 700 !important; letter-spacing: -0.03em !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main h2.font-display,
html.sa-skin-product.luxe.sunlit.sunnyaid main section[class] h2.font-display:not([class*="text-xs"]) { font-weight: 600 !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main h3.font-display,
html.sa-skin-product.luxe.sunlit.sunnyaid main .leaks__title,
html.sa-skin-product.luxe.sunlit.sunnyaid main .hscroll__panel h3 { font-weight: 600 !important; }
/* the section files that pinned weight 500 on the heading face */
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig { font-weight: 700 !important; }
html.sa-skin-product.sunnyaid main section.sa-whynow .home-pull p { font-weight: 600 !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid main .sa-gaps-cap strong { font-weight: 600; }
html.sa-skin-product.luxe.sunlit.sunnyaid #main .sa-pricing-faq-name { font-weight: 700 !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid #main .sa-pricing-faq-card .rd-tier-num { font-weight: 700 !important; }

/* ---------------------------------------------------------------------
   5. The hero frame is now a product window, not a viewport onto footage.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__frame.sa-hero__screen {
  aspect-ratio: auto !important;
  display: flex;
  align-items: center;
  padding: clamp(0.9rem, 1.6vw, 1.5rem);
  background: var(--sa-teal);
  /* the table sets a min-content width, so without min-width:0 the flex item grows past its column
     and the last column is clipped by the section's overflow */
  min-width: 0;
  overflow: hidden;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media { min-width: 0; }
/* Service and Source leave the hero copy of the table: three columns fit the column at every width */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .sa-hero__col-drop { display: none !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen figure.pipe { margin: 0; width: 100%; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__frame {
  background: #fff !important;
  border: 1px solid rgba(11, 57, 72, 0.14) !important;
  border-radius: 14px;
  box-shadow: 0 30px 70px -34px rgba(6, 22, 28, 0.6) !important;
  overflow: hidden;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__chrome { background: var(--sa-teal-deep) !important; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__title { color: #fff; }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen :is(.pipe__table, .pipe__table th, .pipe__table td) { color: var(--sa-ink); }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__table thead th { color: var(--sa-slate); }
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen figcaption {
  margin-top: 0.85rem;
  font-family: var(--sa-font-body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sa-on-teal);
}
/* the media column no longer bleeds to the viewport edge: a window has an edge */
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media { margin-right: 0; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__grid { grid-template-columns: 1.02fr 0.98fr; }
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__media::before { display: none; }
/* ---------------------------------------------------------------------
   5b. THE SMILE MARK, made noticeable (9 Sep 2026, owner: "make the smile icon more noticeable as
   well"). Round 8 had shrunk it to 4.25rem so it would not out-shout the product window; the owner
   wants it read as the interactive thing it is. So it goes back up past its pre-Round-8 size and
   gains three static affordances, because an animation that has finished cannot invite anyone:
     - a permanent yellow halo behind the disc (::after, so the animated ::before keeps its own job),
     - a 2px yellow edge and a warm outer glow on the plate, which is otherwise flat teal,
     - a larger TAP label and a thicker ring.
   Yellow here is on-rule: the mark is one of the four things that mean *act* (see the positioning
   note). Not gated on the skin - prominence is not palette, so the template skin gets it too.
   Still ONE instance, still in the hero, and the message under it is never gated behind the tap. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile {
  padding: clamp(1rem, 1.5vw, 1.35rem);
  gap: clamp(1rem, 1.7vw, 1.6rem);
  border-width: 2px;
  border-color: rgba(255, 212, 112, 0.7);
  box-shadow:
    0 26px 60px -38px rgba(11, 57, 72, 0.75),
    0 16px 42px -24px rgba(246, 186, 46, 0.42);
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__line { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
/* the disc: 112px on a phone, 144px on a laptop. Bigger than it was before Round 8 shrank it. */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 7rem; height: 7rem; }
@media (min-width: 480px) and (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 6.5rem; height: 6.5rem; }
}
@media (min-width: 768px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 8rem; height: 8rem; }
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__smile--compact .sun-smile__btn { width: 9rem; height: 9rem; }
}
/* the always-on halo. The animated ::before carries `animation-fill-mode: both`, so once its eight
   invitations are over it holds opacity 0 - which is exactly when a static cue has to take over. */
html.sunnyaid .sa-hero__smile--compact .sun-smile__btn::after {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 999px;
  /* a RING of light, with the middle left clear. A filled yellow wash at any useful alpha turns the
     centre khaki against the teal plate, because the disc itself is transparent until the mark is
     tapped - so the glow has to sit off the ring stroke rather than behind the whole coin. */
  background: radial-gradient(circle, rgba(255, 212, 112, 0) 0 44%, rgba(255, 212, 112, 0.4) 54%, rgba(255, 212, 112, 0) 78%);
  filter: blur(5px);
  pointer-events: none;
}
/* and a faint warm ground inside the ring, so the idle mark reads as a coin you can press rather
   than as an outline. 8% over teal is a warm shadow, not a colour. */
html.sunnyaid .sa-hero__smile--compact .sun-smile__ring { fill: rgba(255, 212, 112, 0.08); }
html.sunnyaid .sa-hero__smile--compact .sun-smile[data-state="on"] .sun-smile__ring { fill: none; }
html.sunnyaid .sa-hero__smile--compact .sun-smile__btn { z-index: 0; }
html.sunnyaid .sa-hero__smile--compact .sun-smile__ring { stroke-width: 5; }
html.sunnyaid .sa-hero__smile--compact .sun-smile__tap { font-size: 12px; letter-spacing: 0.26em; }
/* and a louder invitation while it runs: a wider stroke swing plus a bob on the whole mark. TWO
   repeats then stop, retimed to 2s each after a 0.8s delay. Eight repeats of 2.4s ran for 20.4
   seconds, and 2.2.2 Pause Stop Hide wants a control for anything moving past five. Two repeats of
   2.4s still totalled exactly 6.0s and measured as a failure; 0.8s + 2 x 2.0s is 4.8s, under the
   threshold with margin and needing no control. The static cues below, the halo and the TAP label and the warm ground, are
   what invite a visitor arriving after the motion has stopped, which is most of them. */
html.sunnyaid.pm .sa-hero__smile--compact .sun-smile:not(.is-touched) .sun-smile__ring {
  animation: sa-smile-ring 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s 2 both;
}
html.sunnyaid.pm .sa-hero__smile--compact .sun-smile:not(.is-touched) .sun-smile__svg {
  animation: sa-smile-bob 2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s 2 both;
}
@keyframes sa-smile-ring { 0%, 100% { stroke-width: 4; opacity: 1; } 50% { stroke-width: 7.5; opacity: 0.7; } }
@keyframes sa-smile-bob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid .sa-hero__smile--compact :is(.sun-smile__ring, .sun-smile__svg) { animation: none !important; }
}

/* --------------------------------------------------------------------- 6. the company strip */
html.sunnyaid main section.sa-strip { padding: clamp(1.75rem, 3vw, 2.5rem) 0; background: var(--sa-teal-deep) !important; }
html.sunnyaid main section.sa-strip .sa-strip__in {
  max-width: min(76rem, calc(100vw - 4rem));
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}
@media (min-width: 900px) { html.sunnyaid main section.sa-strip .sa-strip__in { grid-template-columns: auto 1fr auto; } }
html.sunnyaid main section.sa-strip .sa-strip__mark { height: 1.75rem; width: auto; opacity: 0.95; }
html.sunnyaid main section.sa-strip .sa-strip__lede {
  margin: 0; font-family: var(--sa-font-body); font-size: 1.0625rem; line-height: 1.6; color: #fff;
}
html.sunnyaid main section.sa-strip .sa-strip__lede span { display: block; color: var(--sa-on-teal); font-size: 0.9375rem; margin-top: 0.2rem; }
html.sunnyaid main section.sa-strip .sa-strip__conn { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--sa-on-teal); max-width: 22rem; }
html.sunnyaid main section.sa-strip .sa-strip__conn-label { color: var(--sa-ui-soft); font-weight: 600; }

/* --------------------------------------------------------- 7. the six tools it replaces */
html.sunnyaid main section.sa-replaces { background: var(--sa-white) !important; }
html.sunnyaid main section.sa-replaces .replaces-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: visible !important;
  max-width: min(76rem, calc(100vw - 4rem));
  margin-inline: auto;
}
@media (min-width: 640px) { html.sunnyaid main section.sa-replaces .replaces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { html.sunnyaid main section.sa-replaces .replaces-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.sunnyaid main section.sa-replaces .sa-replaces__card {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  background: var(--sa-white) !important;
  border: 1px solid var(--sa-hairline) !important;
  border-radius: var(--sa-radius-card);
  box-shadow: var(--sa-shadow-card);
  padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}
html.sunnyaid main section.sa-replaces .sa-replaces__card .text-lg { font-family: var(--sa-font-body); font-weight: 600; color: var(--sa-ink); }
html.sunnyaid main section.sa-replaces .sa-replaces__card p { color: var(--sa-slate) !important; }
html.sunnyaid main section.sa-replaces .sa-replaces__card > div:last-child {
  width: 2.75rem !important; height: 2.75rem !important; margin-top: 1.25rem !important;
  border-radius: 12px; background: var(--sa-ui-tint) !important; color: var(--sa-ui) !important;
}
html.sunnyaid main section.sa-replaces .sa-replaces__card svg { color: var(--sa-ui) !important; }
html.sunnyaid main section.sa-replaces .td-kicker { color: var(--sa-ui) !important; }

/* ------------------------------------------------ 8. the facts row under the pricing tiers */
html.sunnyaid main .sa-facts {
  max-width: min(76rem, calc(100vw - 4rem));
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { html.sunnyaid main .sa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html.sunnyaid main .sa-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html.sunnyaid main .sa-facts__cell { padding: 1.1rem 1.25rem; border: 1px solid var(--sa-hairline); border-radius: var(--sa-radius-card); background: var(--sa-white); }
html.sunnyaid main .sa-facts__k {
  display: block; font-family: var(--sa-font-body); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-ui); margin-bottom: 0.4rem;
}
html.sunnyaid main .sa-facts__v { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--sa-slate); }

/* ----------------------------------------- 9. care photography, demoted to supporting crops */
@media (min-width: 1024px) {
  /* the ID compound is needed: premium-sunnyaid-align.css puts this element on the page axis with
     `#main .sa-gaps-fig { max-width: ... !important }`, which an ID-less selector cannot beat */
  html.luxe.sunlit.sunnyaid #main .sa-gaps-layout .sa-gaps-fig {
    aspect-ratio: 21 / 9 !important;
    max-width: 34rem !important;
    margin-inline: auto !important;
  }
}
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile { aspect-ratio: 5 / 3; }
}

/* ---------------------------------------------------------------------
   10. The button system, now that yellow means one thing.
   Yellow = the act (4 places). Solid teal = a real secondary. Outline = tertiary.
   Without this, every filled button inherits the pale UI fill and reads as disabled.
   --------------------------------------------------------------------- */
html.sa-skin-product.luxe.sunlit.sunnyaid :is(.btn-primary-dark, .btn-primary-light) {
  background: var(--sa-teal) !important;
  color: #fff !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid :is(.btn-primary-dark, .btn-primary-light):hover { background: var(--sa-teal-deep) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark
) {
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid :is(
  main > section.sa-hero a.btn.sa-hero__btn1,
  main section.closing-band .sa-cf-cta > a.btn-primary-dark
):hover { background: var(--sa-yellow-deep) !important; }
/* the arrow glyph inside a teal secondary has to flip to white */
html.sa-skin-product.luxe.sunlit.sunnyaid main .btn-primary-dark .sa-hero__btn-ico,
html.sa-skin-product.luxe.sunlit.sunnyaid main .btn-primary-light .sa-hero__btn-ico { background: #fff; }
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero a.btn.sa-hero__btn1 .sa-hero__btn-ico { background: var(--sa-ink); }

/* the Replay control sits on the dark chrome in the hero, where the shipped ghost styling is nearly
   invisible; it is the reduced-motion path for the sequence, so it has to read */
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .rd-proof-replay {
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .rd-proof-replay:hover {
  border-color: var(--sa-ui-soft) !important;
  background: rgba(240, 145, 138, 0.16) !important;
}

/* the hero table on a phone: the frame's inner column is ~329px, and the shipped cell rhythm needs
   373px. The avatar is the one purely decorative cell element, so it goes first, then the rhythm
   tightens. Enquiry / Arrived / Status all stay: the 9:03pm row is the point of the sequence. */
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__avatar { display: none !important; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__table { font-size: 0.8125rem !important; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen :is(.pipe__table th, .pipe__table td) {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__status { padding: 0.2rem 0.5rem !important; font-size: 0.6875rem !important; }
  html.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__screen .pipe__time { white-space: nowrap; }
}

/* two strays the token flip could not reach, both from literals in earlier layers */
/* premium-color.css rotates six pastel tints through these icon squares with a `:not(._a)…:not(._j)`
   specificity chain, and one of the six is a pale yellow. Six hues also undercut the one-accent
   system, so all six become the UI tint. An ID compound is what beats that chain. */
html.luxe.sunlit.sunnyaid #main section.sa-replaces .sa-replaces__card :is([class*="h-14"], [class*="bg-lyd-blue"], [class*="bg-lyd-yellow"]) {
  background: var(--sa-ui-tint) !important;
  color: var(--sa-ui) !important;
}
html.luxe.sunlit.sunnyaid #main section.sa-replaces .sa-replaces__card svg { color: var(--sa-ui) !important; }
html.sa-skin-product.luxe.sunlit.sunnyaid #main section.sa-whynow .sa-whynow-plate--key { border-color: rgba(240, 145, 138, 0.45) !important; }

/* NOT touched, deliberately: the yellow disc in the Aboriginal flag beside the Acknowledgement of
   Country in the footer. It is the flag, not brand colour, and it is reproduced as specified. */

/* =====================================================================
   11. AUDIT FIXES (9 Sep 2026). Items from a six-lens UI/UX audit, each one independently
   reproduced before it was accepted. Every block names the criterion or measurement it answers.
   ===================================================================== */

/* --- keyboard: the floating capability trigger took focus while invisible ----------------------
   Its utility classes only toggle opacity and pointer-events, so at opacity 0 it was still a tab
   stop, stop 64 of the walk at 390, and Enter fired a full-screen overlay from nowhere. Nothing in
   the cascade declares visibility on it, so a bare ID is enough. */
#v2-cap-trigger-float { visibility: hidden; }
#v2-cap-trigger-float[data-shown] { visibility: visible; }

/* --- CLS: the AEO typewriter grew its own box 44px mid-read ------------------------------------
   At 390 the typed question wraps from one line to three as it types, and every section below it
   jolted 22px twice. That was 0.0595 of the 0.0755 mobile CLS, spent on a decorative animation.
   Reserving the final height costs nothing because the text is centred in the box. Desktop grows
   0px and needs no rule. 3lh is three lines of the box own line-height; the px value ahead of it is
   the measured fallback for engines without the lh unit. */
@media (max-width: 767px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q { min-height: 120px; min-height: calc(3lh + 1.875rem); }
}

/* --- CLS: the webfont swap re-wrapped the hero H1 and dropped the CTA 39px at about 1.4s -------
   Manrope is wider than the system fallback, so the balanced H1 went from two lines to three once
   the webfont arrived, carrying the primary CTA, the lede and the smile mark down with it.
   Reserving the three-line height is font-independent, unlike a size-adjust fallback whose correct
   ratio differs per platform: 103% against Segoe UI, 100.4% against Arial. */
@media (max-width: 767px) {
  html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero h1 { min-height: 117px; min-height: 3lh; }
}

/* --- reading measure: two protected honesty blocks were the widest text on the page ------------
   The VCPility strip ran to 91 characters a line and the pipeline caption to 108, against a 75
   ceiling. Capped in rem rather than ch: the paragraph and the span inside it are set at different
   sizes, so a ch cap on the parent never reaches the child. Wording untouched, measure only. */
html.sa-skin-product.sunnyaid main section.sa-strip .sa-strip__lede { max-inline-size: 37rem; }
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .pipe__caption { max-inline-size: 29rem; }

/* --- the third hero statistic rendered at 44px against its siblings 24px ----------------------
   premium-pages.css targets .rd-hero-num:not(.text-2xl) and won inside the hero facts row, so
   "6% to 90%" mixed 44px digits with a 24px arrow and the numerals overlapped their own label by
   3px. Handing the figure own size back down fixes both, and tabular figures line the three cards
   up the way the pricing numerals already are. */
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig .rd-hero-num {
  font-size: inherit;
  line-height: inherit;
  font-variant-numeric: inherit;
}
html.sa-skin-product.luxe.sunlit.sunnyaid main > section.sa-hero .sa-hero__facts .sa-hero__fig { font-variant-numeric: tabular-nums; }

/* --- press feedback: no button on the page had a distinct pressed state -----------------------
   The authored press lost on specificity. `.pm .pm-btn:active` at (0,3,0) outranked `.btn:active`
   at (0,2,0) and every button carries both classes, so :active resolved to the rest position.
   Restored here, plus a non-motion press for reduced-motion visitors, who had no press signal. */
html.pm .pm-btn:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
@media (prefers-reduced-motion: reduce) {
  .btn:active, a.cta-alive:active, .pm-btn:active { filter: brightness(0.94); }
}

/* --- two infinite spinner animations ran on Google Translate off-screen overlay ---------------
   The loader mounts a hidden progress overlay whose SVG spins forever. It paints nothing, but it
   keeps the animation timeline awake for the life of the page. That markup sits in the light DOM,
   so a stylesheet reaches it. */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf svg,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf svg * { animation: none !important; }

/* --- one primary action, on the highest-intent screen on the page --------------------------------
   Measured in one 900px screen at 1440 on the closing band: the yellow primary is 217x52 at 8.80:1
   against the panel, while the secondary beside it is 226x52 (4.4% larger) filled SOLID WHITE at
   12.40:1, which is 41% more contrast. So the brightest, biggest filled control at the moment of
   highest intent was the secondary, and the yellow that the site reserves for "act" was the dimmest
   thing on screen. Worse, the secondary's own hover turned yellow, which put a fifth yellow object
   on the page on interaction. The secondary becomes an outline on teal, matching what the hero
   already does, so the yellow CTA is the only filled control in the band.

   The capability-statement tile in the same screen is 6.96x the primary's area and also solid white,
   and it was left exactly as it is on purpose: README-PREVIEW.md records the PDF at the decision
   moment as a deliberate trust transfer, and for a business owner two thirds of the way through a
   decision a capability statement is a qualified action, not a leak. Changing it is the owner's call,
   not an audit fix. Demoting it here also inverted its own text colours, which are set against white
   further up the cascade, and measured 1.16:1 in a first attempt. */
html.sa-skin-product.luxe.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}
html.sa-skin-product.luxe.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:hover,
html.sa-skin-product.luxe.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:focus-visible {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}