/* =====================================================================
   LYD NDIS — SUNNYAID foundation layer (html.sunnyaid). Loaded LAST, homepage only.
   Owner, 8 Sep 2026: "use this zip as the web template" (sunnyaid-ndis-disability-service-template).
   The template IS the design source. This file carries the system only:
   fonts, tokens, the palette re-point, the band grounds and the reusable components.
   It deliberately restyles NO individual homepage section - the six
   premium-sunnyaid-<area>.css files own their own bands and load after this one.

   Template system (read from assets/scss/abstracts/_variables.scss, base/_typography.scss,
   components/_sec-title.scss, _buttons.scss, _service.scss, _cta.scss):
     ground #F7F5F2 cream · panels #0B3948 teal · primary #ffd470 yellow with ink text ·
     body #5d6a83 slate · borders #EFF5F8 · cards white / 20px / hairline / 0 4px 13px 0 #e9e9e4 ·
     headings Recoleta 500, h2 54/64 -> 44/56 (<=1199) -> 32/38.5 (<=767), letter-spacing -0.02em ·
     kicker: white pill, 30px radius, 12px uppercase teal, same soft shadow ·
     signature motif: a hand-drawn yellow ring behind the last word(s) of a heading.

   Measured text pairs (WCAG AA, sRGB):
     ink #0f2e38 on yellow #FFD470  10.1:1   ·  teal #0B3948 on white       12.0:1
     teal #0B3948 on cream #F7F5F2  11.4:1   ·  white on teal #0B3948       12.0:1
     slate #5D6A83 on cream          5.0:1   ·  slate on white               5.5:1
     #d8e3f8 on teal                 9.6:1   ·  #FFE3A8 on teal              9.6:1
     white on rgba(255,255,255,.10) over teal (kicker--onteal)               9.2:1
     white on the smile glass rgba(9,42,54,.66) over mid footage             9.7:1
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Recoleta — the template's bundled heading face (preview/tpl/fonts/)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-Regular.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-Medium.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-Medium.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-SemiBold.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-SemiBold.woff") format("woff");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Recoleta";
  src: url("/tpl/fonts/Recoleta-Bold.woff2") format("woff2"),
       url("/tpl/fonts/Recoleta-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------
   2. Template tokens. Section builders consume these, never raw hexes.
   --------------------------------------------------------------------- */
html.sunnyaid {
  /* grounds */
  --sa-cream: #F7F5F2;          /* body + "cream" bands */
  --sa-white: #FFFFFF;          /* alternating white bands, cards */
  --sa-teal: #0B3948;           /* dark panels + teal bands */
  --sa-teal-deep: #082B37;      /* a step deeper: insets inside a teal panel */
  --sa-ink: #0f2e38;            /* LYD petrol: headings + text on yellow (kept for continuity) */
  /* accents */
  --sa-yellow: #FFD470;         /* primary button, ticks, the scribble ring */
  --sa-yellow-deep: #F6BA2E;    /* hover/edge of the yellow, ring stroke in the SVG */
  --sa-yellow-soft: #FFE3A8;    /* yellow TEXT on teal (9.6:1) - never use --sa-yellow for text */
  --sa-yellow-tint: #FFF4DC;    /* selected/pressed light chip */
  /* text */
  --sa-slate: #5D6A83;          /* body copy on cream/white */
  --sa-slate-2: #4C6A6D;        /* the template's second body tone */
  --sa-on-teal: #d8e3f8;        /* body copy on teal (9.6:1) */
  --sa-on-teal-strong: #FFFFFF; /* headings + list items on teal */
  /* lines, radii, shadows */
  --sa-border: #EFF5F8;         /* the template's border token */
  --sa-hairline: #EEE5E5;       /* card hairline */
  --sa-radius-card: 20px;
  --sa-radius-panel: 24px;
  --sa-radius-img: 20px;
  --sa-radius-pill: 999px;
  --sa-shadow-card: 0 4px 13px 0 #e9e9e4;
  --sa-shadow-pill: 0 4px 13px 0 #e9e9e4;
  --sa-shadow-arrow: 0 1px 6px 0 rgba(93, 106, 131, 0.25);
  /* type */
  --sa-font-heading: "Recoleta", Georgia, "Times New Roman", serif;
  --sa-font-body: var(--font-sans, "Inter", system-ui, sans-serif);
  --sa-h1: clamp(2rem, 4.9vw, 3.75rem);       /* 32 -> 60px */
  --sa-h1-lh: 1.08;
  --sa-h2: clamp(2rem, 3.9vw, 3.375rem);      /* 32 -> 54px, the template's .title */
  --sa-h2-lh: 1.19;                            /* 64/54 */
  --sa-h3: clamp(1.375rem, 1.6vw, 1.625rem);  /* 22 -> 26px */
  --sa-track: -0.02em;
  /* rhythm: the template's 130px top / 125px bottom desktop */
  --sa-sec-pt: clamp(4rem, 9vw, 130px);
  --sa-sec-pb: clamp(3.75rem, 8.7vw, 125px);
  --sa-head-gap: clamp(2rem, 3.8vw, 55px);    /* heading block -> content */
  /* assets */
  --sa-ring-src: url("/tpl/img/scribble-ellipse.svg");
  --sa-ring-h: 1.24em;           /* the ellipse height, relative to the heading size */
  --sa-tick-src: url("/tpl/img/check_icon.svg"); /* the shipped asset: TEAL disc + YELLOW check */
  /* the template renders the tick the other way round - a YELLOW scalloped disc with a TEAL check
     (see shots/sunnyaid/home-04.png). Same path geometry as check_icon.svg, fills swapped, inlined
     so it cannot 404 and so the disc colour is a token, not a file. This is what .sa-ticks uses. */
  --sa-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6 4 22 22'%3E%3Cpath d='M28 15C28 15.9387 26.8468 16.7123 26.6158 17.5777C26.3775 18.4723 26.9807 19.719 26.5278 20.5018C26.0677 21.2975 24.6835 21.3928 24.0382 22.0382C23.3928 22.6835 23.2975 24.0677 22.5018 24.5278C21.719 24.9807 20.4723 24.3775 19.5777 24.6158C18.7123 24.8468 17.9387 26 17 26C16.0613 26 15.2877 24.8468 14.4223 24.6158C13.5277 24.3775 12.281 24.9807 11.4982 24.5278C10.7025 24.0677 10.6072 22.6835 9.96183 22.0382C9.3165 21.3928 7.93233 21.2975 7.47217 20.5018C7.01933 19.719 7.6225 18.4723 7.38417 17.5777C7.15317 16.7123 6 15.9387 6 15C6 14.0613 7.15317 13.2877 7.38417 12.4223C7.6225 11.5277 7.01933 10.281 7.47217 9.49817C7.93233 8.7025 9.3165 8.60717 9.96183 7.96183C10.6072 7.3165 10.7025 5.93233 11.4982 5.47217C12.281 5.01933 13.5277 5.6225 14.4223 5.38417C15.2877 5.15317 16.0613 4 17 4C17.9387 4 18.7123 5.15317 19.5777 5.38417C20.4723 5.6225 21.719 5.01933 22.5018 5.47217C23.2975 5.93233 23.3928 7.3165 24.0382 7.96183C24.6835 8.60717 26.0677 8.7025 26.5278 9.49817C26.9807 10.281 26.3775 11.5277 26.6158 12.4223C26.8468 13.2877 28 14.0613 28 15Z' fill='%23FFD470'/%3E%3Cpath d='M20.2599 12.3792L16.4496 16.08L14.4743 14.1632C14.0456 13.7468 13.3499 13.7468 12.9212 14.1632C12.4924 14.5796 12.4924 15.2553 12.9212 15.6717L15.6922 18.3631C16.1092 18.7682 16.7866 18.7682 17.2036 18.3631L21.8114 13.8877C22.2401 13.4713 22.2401 12.7956 21.8114 12.3792C21.3826 11.9628 20.6886 11.9628 20.2599 12.3792Z' fill='%230B3948'/%3E%3C/svg%3E");
  --sa-arrow-src: url("/tpl/img/arrow_rgiht.svg");
  /* the dotted halftone that edges every dark panel in the template */
  --sa-halftone: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  --sa-halftone-size: 8px 8px;
}

/* ---------------------------------------------------------------------
   3. THE RE-POINT. premium-sunlit.css defines its whole palette as custom
   properties on html.sunlit and then reads them in ~150 rules. Redefining
   them here (same selector, later file, plus .sunnyaid so only the homepage
   moves) re-skins every one of those rules in a single block.
   Every variable premium-sunlit.css declares is listed; nothing is left behind.
   --------------------------------------------------------------------- */
html.sunlit.sunnyaid {
  /* sunflower family -> the template yellow */
  --sun: var(--sa-yellow);            /* was #ffc533 */
  --sun-2: var(--sa-yellow-soft);     /* was #ffd666 - this one is TEXT on dark, so the soft tint */
  --sun-tint: var(--sa-yellow-tint);  /* was #fff4cc */
  /* coral family -> the yellow primary button (paired with ink text everywhere it is used)
     and the teal accent ink for text/focus rings on light grounds */
  --coral: var(--sa-yellow);          /* was #ff6b57  (button fills, dots, badges) */
  --coral-2: var(--sa-yellow-soft);   /* was #ff8f7f  (text + borders on dark) */
  --coral-ink: var(--sa-teal);        /* was #b3361f  (accent TEXT on light, focus rings) */
  --coral-hover: var(--sa-yellow-deep); /* was #f25a45 */
  --coral-tint: var(--sa-yellow-tint);
  /* aqua family -> yellow ticks on dark, teal ticks and panels on light */
  --aqua: var(--sa-yellow);           /* was #19c3b3  (ticks on the deep bands) */
  --aqua-ink: var(--sa-teal);         /* was #0b6f66  (ticks + icons on light, stage-01 panel) */
  --aqua-tint: var(--sa-border);      /* was #ddf7f3 */
  /* violet family -> teal. The template has no violet: the ticker band, the AI band and the
     numerals all become the one deep teal, and the FAQ ground becomes cream. */
  --violet: var(--sa-teal);           /* was #6d5df6 */
  --violet-deep: var(--sa-teal);      /* was #4b3dd9  (ticker bg, AI band bg, numerals) */
  --violet-dark: var(--sa-teal-deep); /* was #1e1466  (the phone mock inside the AI band) */
  --violet-tint: var(--sa-cream);     /* was #ece9ff  (FAQ ground) */
  /* ground + ink: cream body, white as the alternating band (the template's cream -> white) */
  --ink: var(--sa-ink);               /* unchanged #0f2e38: LYD's petrol is the template's teal */
  --paper: var(--sa-cream);           /* was #ffffff -> body + [data-band="cream"] */
  --paper-2: var(--sa-white);         /* was #f6f8fb -> [data-band="surface"] */
  /* the luxe tokens sunlit already re-pointed, followed through to the template palette */
  --gold: var(--coral); --gold-2: var(--sun-2); --gold-3: var(--coral-ink);
  --gold-ink: var(--coral-ink); --gold-grad: var(--coral);
  --ivory: var(--paper); --ivory-2: var(--paper-2); --ink-2: var(--ink);
  --color-lyd-gold-ink: var(--coral-ink);
  --color-lyd-yellow: var(--sun);
  --color-lyd-yellow-deep: var(--sun);
  /* body-copy tokens from premium.css, moved to the template's slate / on-teal pair */
  --color-lyd-secondary: var(--sa-slate);
  --color-lyd-dark-body: var(--sa-on-teal);
  --color-lyd-line-strong: #c9d2da;
}

/* ---------------------------------------------------------------------
   4. Grounds. Cream body, the alternating white band, the teal band.
   --------------------------------------------------------------------- */
html.sunnyaid body,
html.luxe.sunlit.sunnyaid body,
html.luxe.sunlit.sunnyaid main section[data-band="cream"],
html.luxe.sunlit.sunnyaid .pin-over { background: var(--sa-cream) !important; }
html.luxe.sunlit.sunnyaid main section[data-band="surface"] { background: var(--sa-white) !important; border-color: rgba(11, 57, 72, 0.08) !important; }
html.luxe.sunlit.sunnyaid main section[data-band="deep"]:not(.band-photo) { background: var(--sa-teal) !important; }
html.luxe.sunlit.sunnyaid main section[data-section="faq"] { background: var(--sa-cream) !important; }
/* opt-in ground classes for markup the section builders create */
html.sunnyaid .sa-band-cream { background: var(--sa-cream); }
html.sunnyaid .sa-band-white { background: var(--sa-white); }
html.sunnyaid .sa-band-teal { background: var(--sa-teal); color: var(--sa-on-teal); }
html.sunnyaid .sa-band-teal :is(h1, h2, h3, h4, h5, h6) { color: var(--sa-on-teal-strong); }

/* the deep bands lost their violet/coral glow with the re-point: warm it with the template yellow */
html.luxe.sunlit.sunnyaid main section[data-band="deep"]::before {
  background: radial-gradient(42% 40% at 88% 0%, rgba(255, 212, 112, 0.13), transparent 70%),
              radial-gradient(34% 38% at 8% 100%, rgba(255, 212, 112, 0.08), transparent 70%);
}

/* ---------------------------------------------------------------------
   5. Type. Recoleta on h1/h2/h3 at the template's sizes and letter-spacing.
   Specificity note: premium.css and premium-compact.css both size these with
   !important at (0,2,3), so every rule here is (0,4,3) + !important.
   Card titles inside a .sa-card stay on the body face - so does the template.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main h1.font-display,
html.luxe.sunlit.sunnyaid main h1:not(.font-display) {
  font-family: var(--sa-font-heading) !important;
  font-size: var(--sa-h1) !important;
  line-height: var(--sa-h1-lh) !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
}
html.luxe.sunlit.sunnyaid main h2.font-display,
html.luxe.sunlit.sunnyaid main section[class] h2.font-display:not([class*="text-xs"]) {
  font-family: var(--sa-font-heading) !important;
  font-size: var(--sa-h2) !important;
  line-height: var(--sa-h2-lh) !important;
  letter-spacing: var(--sa-track) !important;
  font-weight: 500 !important;
  text-transform: none;
}
html.luxe.sunlit.sunnyaid main h3.font-display,
html.luxe.sunlit.sunnyaid main .leaks__title,
html.luxe.sunlit.sunnyaid main .hscroll__panel h3 {
  font-family: var(--sa-font-heading) !important;
  font-size: var(--sa-h3) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.015em !important;
  font-weight: 500 !important;
}
/* the template loses the letter-spacing as the heading gets smaller */
@media (max-width: 1199px) { html.sunnyaid { --sa-track: -0.01em; --sa-h2-lh: 1.27; } }
@media (max-width: 767px)  { html.sunnyaid { --sa-track: 0em;     --sa-h2-lh: 1.2; } }
/* small headings that are really labels keep the body face */
html.luxe.sunlit.sunnyaid main :is(h2, h3).font-display:is(.text-lg, .text-xl, .text-2xl, .text-base, [class*="text-xs"]),
html.luxe.sunlit.sunnyaid main .faq-acc summary h3,
html.luxe.sunlit.sunnyaid main .sa-card__title {
  font-family: var(--sa-font-body) !important;
  letter-spacing: -0.01em !important;
}
html.luxe.sunlit.sunnyaid main :is(h1, h2, h3).font-display:not(.text-white):not([class*="text-white"]) { color: var(--sa-ink); }
/* anything on a dark ground inverts. These must outrank the rule above (0,6,2), hence the repeats. */
html.luxe.sunlit.sunnyaid main section[data-band="deep"]:not(._x) :is(h1, h2, h3, h4).font-display,
html.luxe.sunlit.sunnyaid main .sa-panel:not(._x) :is(h1, h2, h3, h4),
html.luxe.sunlit.sunnyaid main .sa-band-teal:not(._x) :is(h1, h2, h3, h4),
html.luxe.sunlit.sunnyaid main .sa-card--onteal:not(._x) :is(.sa-card__title, h2, h3, h4) { color: var(--sa-on-teal-strong) !important; }
html.sunnyaid .sa-panel :is(h1, h2, h3, h4),
html.sunnyaid .sa-band-teal :is(h1, h2, h3, h4),
html.sunnyaid .sa-card--onteal .sa-card__title { color: var(--sa-on-teal-strong); }
html.luxe.sunlit.sunnyaid ::selection { background: var(--sa-yellow); color: var(--sa-ink); }

/* ---------------------------------------------------------------------
   6. The ringed heading. The template's signature: scribble-ellipse.svg
   drawn BEHIND the last word(s) of a heading (viewBox 0 0 212 65,
   preserveAspectRatio="none", so it stretches to any word width).
   It is the span's own background, not an absolutely positioned child, for one
   reason that matters here: an inline-block child puts a line break into
   innerText, so the heading's extracted copy became "over and over ." - and the
   copy is canonical. An inline background is byte-identical to the plain text,
   is by definition painted under the element's own glyphs, and survives
   premium.js splitting the heading into .pm-w word spans.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-ring {
  display: inline;
  color: inherit;
  white-space: nowrap;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background-image: var(--sa-ring-src);
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 100% var(--sa-ring-h);
}
/* when motion is allowed the ring draws itself in as the heading arrives */
html.sunnyaid.pm .pm-split .sa-ring { background-size: 0% var(--sa-ring-h); transition: background-size 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
html.sunnyaid.pm .pm-split.pm-in .sa-ring { background-size: 100% var(--sa-ring-h); }
/* Integrator fix (9 Sep 2026): on a dark ground the yellow ring is brighter than the white glyphs, so it
   read as a strike-through rather than a ring drawn behind the word. A tight dark halo on the glyphs puts
   them back in front of it. The why-now band proved the technique in its own file; generalised here so the
   AI-answers and closing headings match. premium.js splits the h2 into .pm-w spans, so the shadow is
   declared on the ring span AND on whatever it wraps. */
html.sunnyaid main section[data-band="deep"] h2 .sa-ring,
html.sunnyaid main section[data-band="deep"] h2 .sa-ring *,
html.sunnyaid main section.closing-band h2 .sa-ring,
html.sunnyaid main section.closing-band h2 .sa-ring *,
html.sunnyaid main section.sa-stages-aeo-aeo h2 .sa-ring,
html.sunnyaid main section.sa-stages-aeo-aeo h2 .sa-ring * {
  text-shadow: 0 0 2px #082b37, 0 0 4px #082b37, 0 0 6px rgba(8, 43, 55, 0.95);
}
@media (max-width: 767px) {
  /* At 32px the ellipse is proportionally taller than the word. nowrap is also dropped: a phrase that
     cannot fit the line must be allowed to break rather than run off a 390 viewport, and
     box-decoration-break:clone gives each fragment its own complete ellipse instead of half of one. */
  html.sunnyaid { --sa-ring-h: 1.5em; }
  html.sunnyaid .sa-ring {
    white-space: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-position: center 56%;
  }
}

/* ---------------------------------------------------------------------
   7. The kicker. The template replaces the 2px rule + letterspaced label
   with a small white uppercase pill. .td-kicker is the shipped kicker on
   every homepage band, so it becomes the pill; .sa-kicker is for new markup.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-kicker,
html.luxe.sunlit.sunnyaid main .td-kicker,
html.luxe.sunlit.sunnyaid main > section.hero-interior .td-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 12px;
  border-radius: 30px;
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-pill);
  border: 0;
  font-family: var(--sa-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-teal) !important;
}
/* the old 2px rule is part of the label, not the pill */
html.luxe.sunlit.sunnyaid main .td-kicker::before,
html.luxe.sunlit.sunnyaid main > section.hero-interior .td-kicker::before,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] .td-kicker::before,
html.luxe.sunlit.sunnyaid main section[data-section="aeo"] .td-kicker::before { display: none !important; }
/* the horizontal-scroll band labels its own kicker differently (.inline-flex.bg-lyd-yellow, with a
   2rem hairline in ::before from premium-luxe.css at (0,1,4)); it becomes the same pill */
html.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow {
  padding: 0 12px !important;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 0.08em !important;
}
html.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .inline-flex.bg-lyd-yellow::before { display: none !important; }

/* on teal (and over footage) the pill goes translucent with white text: 9.2:1 */
html.sunnyaid .sa-kicker--onteal,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] .td-kicker,
html.luxe.sunlit.sunnyaid main section[data-section="aeo"] .td-kicker,
html.luxe.sunlit.sunnyaid main section.band-photo .td-kicker,
html.luxe.sunlit.sunnyaid main > section:first-of-type .td-kicker {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: #fff !important;
}

/* ---------------------------------------------------------------------
   8. The white card. 20px radius, hairline, the template's soft shadow,
   an inner image at the same radius, and the body face for the title.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.25rem, 2.4vw, 2.5rem) clamp(1.75rem, 2.8vw, 3.125rem);
  border-radius: var(--sa-radius-card);
  border: 1px solid var(--sa-hairline);
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-card);
  color: var(--sa-slate);
}
html.sunnyaid .sa-card__title {
  margin: 0 0 20px;
  font-family: var(--sa-font-body);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sa-ink);
}
html.sunnyaid .sa-card__text { margin: 0; color: var(--sa-slate); line-height: 1.75; }
html.sunnyaid .sa-card__img {
  margin: 33px 0 30px;
  overflow: hidden;
  border-radius: var(--sa-radius-img);
}
html.sunnyaid .sa-card__img > img { display: block; width: 100%; height: auto; border-radius: inherit; }
html.sunnyaid .sa-card__foot { margin-top: auto; padding-top: 4px; }
html.sunnyaid .sa-card:hover { border-color: rgba(11, 57, 72, 0.22); }
/* the same card on a teal band */
html.sunnyaid .sa-card--onteal {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  color: var(--sa-on-teal);
}
html.sunnyaid .sa-card--onteal .sa-card__title { color: var(--sa-on-teal-strong); }
html.sunnyaid .sa-card--onteal .sa-card__text { color: var(--sa-on-teal); }

/* ---------------------------------------------------------------------
   9. The circular arrow link ("Read More" + a white disc with a diagonal arrow).
   The arrow is a mask so it inherits currentColor and needs no second asset.
   --------------------------------------------------------------------- */
html.sunnyaid a.sa-arrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  font-family: var(--sa-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--sa-teal);
}
html.sunnyaid a.sa-arrow > .sa-arrow__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--sa-white);
  box-shadow: var(--sa-shadow-arrow);
  color: var(--sa-teal);
}
html.sunnyaid a.sa-arrow > .sa-arrow__ico::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.sunnyaid a.sa-arrow:hover > .sa-arrow__ico,
html.sunnyaid a.sa-arrow:focus-visible > .sa-arrow__ico { background: var(--sa-yellow); transform: rotate(45deg); }
html.sunnyaid a.sa-arrow:focus-visible { outline: 2px solid var(--sa-teal); outline-offset: 3px; border-radius: 6px; }
html.sunnyaid .sa-card--onteal a.sa-arrow,
html.sunnyaid .sa-band-teal a.sa-arrow { color: var(--sa-on-teal-strong); }
html.sunnyaid .sa-card--onteal a.sa-arrow:focus-visible,
html.sunnyaid .sa-band-teal a.sa-arrow:focus-visible { outline-color: var(--sa-yellow); }
html.sunnyaid.pm a.sa-arrow > .sa-arrow__ico { transition: background 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------------------------------------------------------------------
   10. The teal panel with the dotted halftone. 24px radius, the dots dense
   at the top and bottom edges and fading out through the middle - exactly
   how the template edges .xb-cta and its two "With Sunnyaid, you can" cards.
   .sa-halftone is the overlay on its own, for any dark surface.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: clamp(1.75rem, 3.4vw, 3.75rem) clamp(1.5rem, 3.2vw, 3.5rem);
  border-radius: var(--sa-radius-panel);
  background: var(--sa-teal);
  color: var(--sa-on-teal);
}
html.sunnyaid .sa-panel :is(h2, h3, h4) { color: var(--sa-on-teal-strong); }
html.sunnyaid .sa-panel > * { position: relative; }
html.sunnyaid .sa-panel::before,
html.sunnyaid .sa-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--sa-halftone);
  background-size: var(--sa-halftone-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 74%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 74%, #000 100%);
}
html.sunnyaid .sa-halftone { position: relative; z-index: 1; }
html.sunnyaid .sa-halftone > * { position: relative; }
html.sunnyaid .sa-panel--flat::before { display: none; }
html.sunnyaid .sa-panel--deep { background: var(--sa-teal-deep); }

/* ---------------------------------------------------------------------
   11. The yellow tick list. check_icon.svg ships in the template palette
   already (a #FFD470 scalloped disc with a #0B3948 tick), so it is used as
   an image rather than a mask.
   --------------------------------------------------------------------- */
html.sunnyaid ul.sa-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
html.sunnyaid ul.sa-ticks > li {
  position: relative;
  padding-left: 30px;
  font-family: var(--sa-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sa-on-teal-strong);
}
html.sunnyaid ul.sa-ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 18px;
  height: 18px;
  background: var(--sa-tick) center / contain no-repeat;
}
html.sunnyaid ul.sa-ticks--light > li { color: var(--sa-ink); }
html.sunnyaid ul.sa-ticks--lede > li { font-size: 1.0625rem; }

/* ---------------------------------------------------------------------
   12. Buttons. Yellow pill with ink text is the one primary; teal pill with
   white text is the secondary; a white pill is the secondary ON teal.
   The shipped .btn-primary-* already inherit the yellow through the
   re-point above; these classes are for markup the builders create.
   --------------------------------------------------------------------- */
html.sunnyaid .sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 3.25rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: var(--sa-radius-pill);
  font-family: var(--sa-font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
html.sunnyaid .sa-btn > .sa-btn__ico {
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--sa-arrow-src) center / contain no-repeat;
  mask: var(--sa-arrow-src) center / contain no-repeat;
}
html.sunnyaid .sa-btn--primary { background: var(--sa-yellow); color: var(--sa-ink); }
html.sunnyaid .sa-btn--primary:hover,
html.sunnyaid .sa-btn--primary:focus-visible { background: var(--sa-yellow-deep); color: var(--sa-ink); }
html.sunnyaid .sa-btn--secondary { background: var(--sa-teal); color: #fff; }
html.sunnyaid .sa-btn--secondary:hover,
html.sunnyaid .sa-btn--secondary:focus-visible { background: var(--sa-teal-deep); color: #fff; }
html.sunnyaid .sa-btn--onteal { background: var(--sa-white); color: var(--sa-teal); }
html.sunnyaid .sa-btn--onteal:hover,
html.sunnyaid .sa-btn--onteal:focus-visible { background: var(--sa-yellow); color: var(--sa-ink); }
html.sunnyaid .sa-btn:focus-visible { outline: 2px solid var(--sa-teal); outline-offset: 3px; }
html.sunnyaid .sa-band-teal .sa-btn:focus-visible,
html.sunnyaid .sa-panel .sa-btn:focus-visible { outline-color: var(--sa-yellow); }
html.sunnyaid.pm .sa-btn { transition: background 0.25s, color 0.25s, transform 0.25s; }
html.sunnyaid.pm .sa-btn:hover { transform: translateY(-2px); }
html.sunnyaid.pm .sa-btn:hover > .sa-btn__ico { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   13. Section rhythm. Opt-in, because premium-compact.css sizes several
   bands with !important at (0,2,2) - this rule is (0,4,3) + !important.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid main section.sa-section {
  padding-top: var(--sa-sec-pt) !important;
  padding-bottom: var(--sa-sec-pb) !important;
}
html.luxe.sunlit.sunnyaid main section.sa-section--tight {
  padding-top: calc(var(--sa-sec-pt) * 0.62) !important;
  padding-bottom: calc(var(--sa-sec-pb) * 0.62) !important;
}
html.sunnyaid .sa-sechead { margin-bottom: var(--sa-head-gap); }
html.sunnyaid .sa-sechead > :last-child { margin-bottom: 0; }
html.sunnyaid .sa-lede { max-width: 571px; font-size: 1.0625rem; line-height: 1.75; color: var(--sa-slate); }
html.sunnyaid .sa-band-teal .sa-lede,
html.sunnyaid .sa-panel .sa-lede { color: var(--sa-on-teal); }
html.sunnyaid .sa-hairline { border: 0; border-top: 1px solid var(--sa-border); margin: 0; }

/* ---------------------------------------------------------------------
   14. Sweep: premium-sunlit.css hard-codes coral in ~14 rgba() values that
   no variable can reach. Same selectors, later file, so these win.
   --------------------------------------------------------------------- */
html.luxe.sunlit.sunnyaid .btn-primary-dark,
html.luxe.sunlit.sunnyaid .btn-primary-light,
html.luxe.sunlit.sunnyaid header a[class*="bg-lyd-yellow"],
html.luxe.sunlit.sunnyaid main a.bg-lyd-yellow[class*="px-"],
html.luxe.sunlit.sunnyaid main a.bg-primary,
html.luxe.sunlit.sunnyaid main a.bg-lyd-ink[class*="px-"],
html.luxe.sunlit.sunnyaid main .card-elevate .btn-primary-light,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] .btn-primary-light,
html.luxe.sunlit.sunnyaid footer.footer-deep .btn-primary-light {
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
  box-shadow: 0 10px 24px -14px rgba(11, 57, 72, 0.55) !important;
}
html.luxe.sunlit.sunnyaid .pm-btn.btn-primary-dark:hover,
html.luxe.sunlit.sunnyaid .pm-btn.btn-primary-light:hover { box-shadow: 0 16px 30px -14px rgba(11, 57, 72, 0.6) !important; }
html.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.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) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 212, 112, 0.55) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html.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):hover,
html.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):hover {
  background: rgba(255, 212, 112, 0.16) !important;
  border-color: var(--sa-yellow) !important;
}
html.luxe.sunlit.sunnyaid .btn-ghost-dark:hover { border-color: var(--sa-yellow) !important; background: rgba(255, 212, 112, 0.12); }
html.luxe.sunlit.sunnyaid .btn-ghost-light:hover { border-color: var(--sa-teal) !important; color: var(--sa-teal); }
html.sunlit.sunnyaid .editorial-photo::before,
html.sunlit.sunnyaid .hero-photo::before { box-shadow: inset 0 0 0 2px rgba(255, 212, 112, 0.7); }
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"]:hover,
html.luxe.sunlit.sunnyaid main section.hscroll[data-band="deep"] .hscroll__panel:hover,
html.luxe.sunlit.sunnyaid main [data-slot="card"]:hover,
html.luxe.sunlit.sunnyaid main .card-lyd:hover,
html.luxe.sunlit.sunnyaid main .carousel-card:hover,
html.luxe.sunlit.sunnyaid main a.demo-frame:hover { border-color: rgba(255, 212, 112, 0.6) !important; }
html.luxe.sunlit.sunnyaid main .card-elevate,
html.luxe.sunlit.sunnyaid main .card-elevate[data-slot="card"],
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"][class*="bg-lyd-yellow/"],
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [class*="bg-lyd-yellow/"][class*="p-"] {
  background: rgba(255, 212, 112, 0.1) !important;
  border: 1px solid rgba(255, 212, 112, 0.6) !important;
}
html.luxe.sunlit.sunnyaid main .card-elevate::before { background: conic-gradient(from var(--pm-a), transparent 0 58%, rgba(255, 212, 112, 1) 76%, transparent 92%); }
html.luxe.sunlit.sunnyaid main section[data-band="deep"] [data-slot="card"] .btn-ghost-light { border-color: rgba(255, 212, 112, 0.5) !important; }
html.luxe.sunlit.sunnyaid footer.footer-deep,
html.luxe.sunlit.sunnyaid footer.footer-full.footer-deep { border-top: 1px solid rgba(255, 212, 112, 0.28) !important; }
html.luxe.sunlit.sunnyaid footer.footer-deep [class*="rounded-full"][class*="border"] { border-color: rgba(255, 255, 255, 0.34) !important; }
html.luxe.sunlit.sunnyaid footer.footer-deep [class*="rounded-full"][class*="border"]:hover { border-color: var(--sa-yellow) !important; background: rgba(255, 212, 112, 0.12) !important; }
html.luxe.sunlit.sunnyaid main .pipe__frame { border-color: rgba(255, 212, 112, 0.3) !important; }
html.luxe.sunlit.sunnyaid main .pipe__chrome .pipe__sample { border-color: rgba(255, 212, 112, 0.6); color: var(--sa-yellow-soft); }
html.luxe.sunlit.sunnyaid main .demo-frame::after { background: var(--sa-yellow); box-shadow: 0.95rem 0 0 var(--sa-yellow-soft), 1.9rem 0 0 rgba(255, 255, 255, 0.55); }
html.luxe.sunlit.sunnyaid main .marker { background-image: linear-gradient(100deg, transparent 0.4%, rgba(255, 212, 112, 0.55) 2.6%, rgba(255, 227, 168, 0.62) 95.6%, transparent 98.8%); }
html.luxe.sunlit.sunnyaid main > section:first-of-type .hero-scrim {
  background: linear-gradient(100deg, rgba(8, 32, 42, 0.94) 0%, rgba(8, 32, 42, 0.82) 45%, rgba(11, 57, 72, 0.46) 75%, rgba(11, 57, 72, 0.32) 100%) !important;
}
/* the header rule + skip link follow the yellow */
html.luxe.sunlit.sunnyaid header .nav-link::after { background: var(--sa-yellow) !important; }
html.sunlit.sunnyaid a.skip-link { background: var(--sa-teal); color: var(--sa-yellow); }
html.sunlit.sunnyaid a.skip-link:focus-visible { outline-color: var(--sa-yellow); }

/* FOCUS RING POLICY. The re-point sends --coral-ink (the focus colour premium-sunlit.css uses at
   (0,3,2)) to teal, which is right on cream and white and invisible on a dark band or over footage.
   Teal stays the default; every dark ground gets the yellow ring instead. Both are well over 3:1
   against their ground. These are (0,4,x) + !important so they beat premium-sunlit.css line 57. */
html.luxe.sunlit.sunnyaid main > section:first-of-type :is(a, button, summary, [tabindex="0"]):focus-visible,
html.luxe.sunlit.sunnyaid main section[data-band="deep"] :is(a, button, summary, [tabindex="0"]):focus-visible,
html.luxe.sunlit.sunnyaid main section.band-photo :is(a, button, summary, [tabindex="0"]):focus-visible,
html.luxe.sunlit.sunnyaid main .sa-panel :is(a, button, summary):focus-visible,
html.luxe.sunlit.sunnyaid main .sa-band-teal :is(a, button, summary):focus-visible,
html.luxe.sunlit.sunnyaid footer.footer-deep :is(a, button):focus-visible,
html.luxe.sunlit.sunnyaid body.hero-dark header:not(.pm-scrolled) :is(a, button):focus-visible { outline: 2px solid var(--sa-yellow) !important; outline-offset: 3px; }
html.luxe.sunlit.sunnyaid header.pm-scrolled :is(a, button):focus-visible,
html.luxe.sunlit.sunnyaid main section[data-band="cream"] :is(a, button, summary):focus-visible,
html.luxe.sunlit.sunnyaid main section[data-band="surface"] :is(a, button, summary):focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 3px; }

/* ---------------------------------------------------------------------
   15. The smile mark. Required carry-over, one instance, in the hero.
   Defined in premium-sunlit.css; recoloured here, that file is untouched.
   Yellow disc, petrol smile on it, deep-yellow ring, teal glass plate.
   --------------------------------------------------------------------- */
html.sunnyaid .sun-smile {
  background: rgba(9, 42, 54, 0.66);
  border-color: rgba(255, 212, 112, 0.45);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html.sunnyaid .sun-smile[data-state="on"] { border-color: rgba(255, 212, 112, 0.85); }
html.sunnyaid .sun-smile__ring { stroke: var(--sa-yellow); }
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__ring { stroke: var(--sa-yellow-deep); }
html.sunnyaid .sun-smile__disc { fill: var(--sa-yellow); }
html.sunnyaid .sun-smile__flat,
html.sunnyaid .sun-smile__arc { stroke: var(--sa-yellow); }
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__arc { stroke: var(--sa-ink); }
html.sunnyaid .sun-smile__tap { fill: var(--sa-yellow); }
/* every spark sits inside r=43, i.e. on the disc once it blooms, so on the yellow disc they turn petrol */
html.sunnyaid .sun-smile__spark circle { fill: var(--sa-yellow); }
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__spark circle { fill: var(--sa-ink); }
html.sunnyaid .sun-smile__btn:focus-visible { outline: 2px solid var(--sa-yellow); outline-offset: 4px; }
html.sunnyaid .sun-smile__btn::before { background: rgba(255, 212, 112, 0.26); }
html.sunnyaid .sun-smile__line { font-family: var(--sa-font-body); }
html.sunnyaid .sun-smile__link {
  color: var(--sa-yellow-soft) !important;
  border-color: rgba(255, 212, 112, 0.6);
}
html.sunnyaid .sun-smile[data-state="on"] .sun-smile__link {
  background: var(--sa-yellow);
  color: var(--sa-ink) !important;
  border-color: transparent;
  box-shadow: 0 10px 24px -14px rgba(11, 57, 72, 0.7);
}
html.sunnyaid .sun-smile__link:hover,
html.sunnyaid .sun-smile__link:focus-visible {
  background: var(--sa-yellow-deep);
  color: var(--sa-ink) !important;
  border-color: transparent;
}
html.sunnyaid .sun-smile__link:focus-visible { outline: 2px solid var(--sa-yellow); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   16. Reduced motion: everything this file adds is decoration, so it stops.
   The static design is complete without any of it.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid .sa-ring { background-size: 100% var(--sa-ring-h) !important; transition: none !important; }
  html.sunnyaid :is(.sa-btn, .sa-arrow, .sa-arrow__ico, .sa-card, .sa-panel, .sun-smile, .sun-smile *) {
    transition: none !important;
    animation: none !important;
  }
  html.sunnyaid .sa-btn:hover { transform: none !important; }
  html.sunnyaid a.sa-arrow:hover > .sa-arrow__ico { transform: none !important; }
}