/* premium-sunnyaid-stages-aeo.css — owner: the SunnyAid STAGES + AEO builder
   (section[data-section="eco"] four stages and section[data-section="aeo"] the AI band, phone mock,
   typed question). Loaded after premium-sunnyaid.css; tokens and .sa-* components come from there.

   Sources, read not guessed:
     eco  = the template's "our working process" row - assets/scss/components/_work.scss
            (.xb-work: 298px centred column, .xb-item--img 20px radius + overflow hidden,
             .xb-item--number a 40px white disc, 1px #e5ecfb, shadow 0 4px 13px 0 rgba(11,57,72,.25),
             teal numeral; .xb-item--title the BODY face 600 at 26/28 with 17px under it;
             .xb-item--content 16px) plus assets/img/shape/work-shape01.png, the dashed rounded step
            that links the tiles. The step is redrawn here as two dashed borders on a pseudo-element
            so it needs no new asset and follows the grid at any width.
     aeo  = the template's teal feature panel - shots/sunnyaid/home-01.png (dotted halftone panel with
            a white floating card laid on it) and home-04.png (yellow scalloped ticks, one yellow
            button). The dots, the radius and the on-teal text come from .sa-panel in the foundation.

   Specificity: `html.luxe.sunlit.sunnyaid #main …` (1,4,n) is used wherever premium.css,
   -luxe, -color, -compact, -sunlit or the foundation itself set the same property with !important
   (premium-color.css reaches (0,14,2) on the old hscroll panel fills through its :not(._a)…:not(._j)
   idiom, so a class-only prefix is not enough - the id compound is). Plain
   `html.sunnyaid .sa-stages-aeo-*` is used for markup this recipe creates.

   Measured text pairs (sRGB, against the real composite):
     teal #0B3948 on cream #F7F5F2                     11.4:1   stage name + number disc numeral
     ink #0f2e38 on cream                              11.6:1   stage title
     slate #5D6A83 on cream                             5.0:1   stage body, bridge lede
     #FFFFFF on the aeo panel #0B3948                  12.0:1   h2, tick items
     #d8e3f8 on #0B3948                                 9.6:1   lede, composer label
     #FFE3A8 on rgba(255,255,255,.10) over #0B3948      8.9:1   "Simulated example" chip
     ink #0f2e38 on the white search pill              11.6:1   the typed question
     slate on white                                     5.5:1   "Try it yourself" note body
     ink on --sa-yellow #FFD470                        10.1:1   question bubbles, primary button
     #d8e3f8 on rgba(255,255,255,.09) over #082B37      9.2:1   answer bubbles
   ===================================================================================== */

/* =====================================================================================
   1. ECO - the band. The template's process row sits on the cream ground (home-03), and
   the recipe moves data-band from "deep" to "cream" to get there; these rules only have
   to follow the .hscroll wrappers, which premium.css painted petrol by class.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco,
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__runway,
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__stage {
  background: var(--sa-cream) !important;
  color: var(--sa-slate);
}
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco { overflow: clip; }
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__runway { height: auto !important; }
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-eco .hscroll__stage {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}

/* the header block: centred kicker + ringed h2, the template's process title */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-head {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: var(--sa-head-gap) !important;
  text-align: center;
}
html.sunnyaid .sa-stages-aeo-headtext { max-width: 46rem; margin: 0 auto; }
/* premium-compact.css:98 sets every h2.font-display without a text-center class to text-align:left
   directly on the heading, so inheriting from the centred header block is not enough. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-head h2 { margin-bottom: 0 !important; text-align: center !important; }
/* the kicker on this band is .inline-flex.bg-lyd-yellow, not .td-kicker: every rule that made it a
   gold hairline label keyed on [data-band="deep"], so it becomes the template's white pill here. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0 12px !important;
  border: 0;
  border-radius: 30px;
  background: var(--sa-white) !important;
  box-shadow: var(--sa-shadow-pill);
  font-family: var(--sa-font-body);
  font-size: 12px !important;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-kicker::before { display: none !important; }

/* =====================================================================================
   2. ECO - the process grid. One column under 640, two to 1199, four from 1200, so all
   four stages and all four sets of copy are on the page at every width.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(2.5rem, 4vw, 3.25rem) 3rem !important;
  align-items: start !important;
  justify-items: center;
  /* the track sits outside the band's .band-inner, so it carries the same gutter itself - otherwise
     the tiles do not line up with the hand-off row underneath (premium.css:76: 80rem, 1rem / 2rem) */
  width: auto !important;
  max-width: 80rem !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  transform: none !important;
}
@media (min-width: 768px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { padding: 0 2rem !important; }
}
@media (min-width: 640px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 3rem !important; }
  /* the template's process row is not level: work-shape01.png steps down and back up between the
     tiles. 2rem is the step, and it is what the dashed connectors below span. */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid > .sa-stages-aeo-stage:nth-of-type(2n) { margin-top: 2rem !important; }
}

html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage {
  position: relative;
  display: block !important;
  width: 100% !important;
  max-width: 24rem;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  /* rich-photos.css puts overflow:clip on .hscroll__panel so the old bleeding card photo stayed
     inside its radius; the photograph now clips inside its own tile, and a clipping panel would
     swallow the dashed connector that reaches into the gap. `visible` is neither a clipping box nor
     a scroll container, so the drift's view() timeline still resolves to the document. */
  overflow: visible !important;
  /* premium.js gives every .hscroll__panel the pointer tilt it gives cards, as inline --rx/--ry.
     A photo tile is not a card, and a tilting column drags the dashed connector out of line. */
  --rx: 0deg !important;
  --ry: 0deg !important;
}

/* the photo tile: 20px radius, clipped, the template's 253x282 crop */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  flex: none !important;
  aspect-ratio: 253 / 282;
  overflow: hidden;
  border-radius: var(--sa-radius-img);
  background: rgba(11, 57, 72, 0.06);
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
}
@media (max-width: 639px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile { aspect-ratio: 4 / 3; }
}
@media (min-width: 1200px) {
  /* the template's tile is narrower than its column (253 in 298), which is what gives the dashed
     step a run long enough to read; --sa-stages-tile is that width, and the connector geometry
     below is written against it */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-grid { --sa-stages-tile: 15.5rem; }
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tile { max-width: var(--sa-stages-tile); margin: 0 auto; }
}

/* the copy column starts exactly at the tile's bottom edge, which is what the number disc and the
   connectors are positioned against (the tile itself clips, so neither can live inside it) */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-copy {
  position: relative;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 2.125rem 0 0 !important;
  gap: 0 !important;
}
/* the white number disc, straddling the tile's bottom edge (the template's .number02 position) */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-num {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 2;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  transform: translateX(-50%);
  border: 1px solid #e5ecfb;
  border-radius: 100%;
  background: var(--sa-white) !important;
  box-shadow: 0 4px 13px 0 rgba(11, 57, 72, 0.25);
  font-family: var(--sa-font-body) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
  color: var(--sa-teal) !important;
  opacity: 1 !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-name {
  margin: 0 0 0.5rem !important;
  font-family: var(--sa-font-body);
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sa-teal) !important;
}
/* .xb-item--title: the template sets its process titles in the BODY face at 600, exactly as it sets
   card titles - only true section headings take Recoleta. The foundation puts .hscroll__panel h3 in
   its Recoleta group at (0,4,3)!important, so this is (1,4,3)!important and scoped to this band. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title {
  margin: 0 0 17px !important;
  font-family: var(--sa-font-body) !important;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem) !important;   /* the template's 26px cap */
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-text {
  max-width: 298px;
  margin: 0 auto !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--sa-slate) !important;
}

/* hover: the disc takes the template yellow, the tile deepens. Colour only - no transform, so the
   connectors never move and the drifting photograph keeps its own animation. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:hover .sa-stages-aeo-num {
  background: var(--sa-yellow) !important;
  border-color: var(--sa-yellow-deep);
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:hover .sa-stages-aeo-tile { box-shadow: 0 18px 40px -26px rgba(11, 57, 72, 0.55); }
html.sunnyaid.pm .sa-stages-aeo-num,
html.sunnyaid.pm .sa-stages-aeo-tile { transition: background 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s; }

/* =====================================================================================
   3. ECO - the dashed step connectors (work-shape01.png, redrawn in CSS). One rounded
   elbow per gap: along the tile's bottom line, then down (or up) the height of the step
   into the next tile. Four across only - below 1200 the tiles stack and there is no gap
   to bridge, so they are simply not drawn.
   ===================================================================================== */
@media (min-width: 1200px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-copy::after {
    content: "";
    position: absolute;
    /* from this tile's right edge to the next tile's left edge: the column is 100% wide, the tile is
       centred at --sa-stages-tile, and 3rem is the grid gap */
    left: calc(50% + var(--sa-stages-tile) / 2);
    width: calc(100% + 3rem - var(--sa-stages-tile));
    height: 2rem;                       /* = the step between neighbouring stages */
    border-style: dashed;
    border-color: rgba(11, 57, 72, 0.34);
    border-width: 0;
    pointer-events: none;
  }
  /* stages 1 and 3 step DOWN into the next tile */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:nth-of-type(odd) .sa-stages-aeo-copy::after {
    top: -1px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-top-right-radius: 14px;
  }
  /* stage 2 steps back UP */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:nth-of-type(even) .sa-stages-aeo-copy::after {
    top: calc(-2rem - 1px);
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-bottom-right-radius: 14px;
  }
  /* the last stage has nothing to connect to */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-stage:nth-of-type(4) .sa-stages-aeo-copy::after { content: none; }
  /* with motion allowed the step draws itself in behind the tiles as the row lands
     (premium.js stamps .pm-in on .hscroll__track and --i on each stage) */
  html.luxe.sunlit.sunnyaid.pm #main .sa-stages-aeo-grid .sa-stages-aeo-copy::after {
    clip-path: inset(0 100% 0 0);
  }
  html.luxe.sunlit.sunnyaid.pm #main .sa-stages-aeo-grid.pm-in .sa-stages-aeo-copy::after {
    clip-path: inset(0);
    transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 75ms + 320ms);
  }
}

/* =====================================================================================
   4. ECO - the hand-off row. premium.css styles .eco-bridge for a dark band by class
   (a white hairline, --color-lyd-dark-body copy) and .btn-ghost-dark is white-on-dark,
   so all three are re-pointed for the cream ground.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge {
  margin-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-top: clamp(2rem, 3vw, 2.75rem) !important;
  border-top: 1px solid var(--sa-border) !important;
  text-align: center;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge p {
  margin: 0 auto 1.5rem !important;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sa-slate) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge .eco-bridge__row { justify-content: center; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge .btn-ghost-dark {
  border-color: rgba(11, 57, 72, 0.3) !important;
  color: var(--sa-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-bridge .btn-ghost-dark:hover {
  border-color: var(--sa-yellow-deep) !important;
  background: rgba(255, 212, 112, 0.18) !important;
  color: var(--sa-teal) !important;
}

/* =====================================================================================
   5. AEO - the band and the feature panel. The band drops a step to --sa-teal-deep so the
   panel reads as a panel, and the panel is .sa-panel: 24px radius, the dotted halftone
   masked in from both edges, on-teal body copy, white headings.
   ===================================================================================== */
html.luxe.sunlit.sunnyaid #main section.sa-stages-aeo-aeo { background: var(--sa-teal-deep) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-panel {
  background: var(--sa-teal) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--sa-radius-panel) !important;
  box-shadow: 0 34px 90px -50px rgba(0, 0, 0, 0.6) !important;
  gap: clamp(2.5rem, 4vw, 3.5rem) !important;
  align-items: center !important;
}
@media (min-width: 1024px) {
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-panel { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr) !important; }
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-side h2 { margin-bottom: 0 !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-lede { margin-top: 1.75rem !important; color: var(--sa-on-teal) !important; }

/* the typed question becomes the template's white search pill */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q {
  margin-top: 1.75rem !important;
  padding: 0.9375rem 1.375rem !important;
  gap: 0.875rem !important;
  border: 1px solid var(--sa-border) !important;
  border-radius: var(--sa-radius-pill) !important;
  background: var(--sa-white) !important;
  /* --sa-shadow-card is the template's light-ground shadow; on the teal panel it reads as a halo,
     so the two white surfaces here take the same shape in shadow instead */
  box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.6) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q > svg { color: var(--sa-teal) !important; }

/* premium-sunlit.css:182 paints every p / li / li span inside [data-section="aeo"]
   rgba(255,255,255,.94) !important, and it does it at (1,6,6) - `#main` plus a :not() chain - because
   it assumes the whole band is dark. Two surfaces in the template's feature panel are white (the
   search pill and the floating note card), so those two have to outrank it. The :not(._a)… idiom is
   how this codebase buys specificity without inventing markup (premium-color.css does the same);
   these are (1,8,3) against (1,6,6). Measured after the change: ink 11.6:1 and slate 5.5:1 on white. */
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-q p[data-typewriter],
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-q p[data-typewriter] * { color: var(--sa-ink) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-note p { color: var(--sa-slate) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-note p strong { color: var(--sa-ink) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-lede { color: var(--sa-on-teal) !important; }
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-ticks > li,
html.luxe.sunlit.sunnyaid #main section[data-section="aeo"]:not(._a):not(._b):not(._c) .sa-stages-aeo-ticks > li > span:last-child { color: var(--sa-on-teal-strong) !important; }
/* rich-aeo.css sets the Copy control white at (0,3,2) because the box used to be a dark surface;
   on the template's white pill it takes the teal, and so does its focus ring - the foundation's
   dark-band policy would otherwise put a yellow ring on white (1.4:1). */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy {
  color: var(--sa-teal) !important;
  border-color: rgba(11, 57, 72, 0.3) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy .rd-aeo-copy__label { color: inherit !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy .rd-aeo-copy__tick { color: var(--sa-teal) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy:hover,
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q .rd-aeo-copy.is-done {
  border-color: var(--sa-teal) !important;
  background: var(--sa-yellow-tint) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-q :is(a, button):focus-visible {
  outline: 2px solid var(--sa-teal) !important;
  outline-offset: 3px;
}

/* the three bullets become the template's yellow scalloped tick list. .sa-ticks cannot be used here:
   rich-aeo.css owns li::before (the bar that lights the bullet the current answer speaks to), and the
   yellow disc already exists as a real span, so the span is masked into the template's scalloped
   silhouette instead - nothing is hidden and nothing is drawn twice. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-ticks { margin-top: 2rem !important; display: grid; gap: 12px; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-ticks > li {
  gap: 14px !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  color: var(--sa-on-teal-strong) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-ticks > li > span:last-child { color: var(--sa-on-teal-strong) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tick {
  width: 20px !important;
  height: 20px !important;
  margin-top: 0.22em !important;
  border-radius: 0 !important;
  background: var(--sa-yellow) !important;
  -webkit-mask: var(--sa-tick) center / contain no-repeat;
  mask: var(--sa-tick) center / contain no-repeat;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-tick > svg { color: var(--sa-teal) !important; }

html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-btns { margin-top: 2.25rem !important; gap: 0.75rem !important; }

/* =====================================================================================
   6. AEO - the phone as a floating card, and the note as the white card laid over it
   (home-01: the white "Get Directions" card sitting on the dotted teal panel).
   ===================================================================================== */
html.sunnyaid .sa-stages-aeo-stack { position: relative; }
html.sunnyaid .sa-stages-aeo-float {
  position: relative;
  z-index: 1;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 40px 90px -52px rgba(0, 0, 0, 0.75);
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: var(--sa-teal-deep) !important;
  box-shadow: none !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-chip {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--sa-yellow-soft) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-toggle:hover { border-color: var(--sa-yellow) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-msg--q {
  border: 0 !important;
  border-radius: 16px 16px 4px 16px !important;
  background: var(--sa-yellow) !important;
  color: var(--sa-ink) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-msg--a {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px 16px 16px 4px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--sa-on-teal) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-phone .rd-aeo-msg--dots { color: var(--sa-yellow-soft) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-composer {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--sa-radius-pill) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-composer > span:first-child { color: var(--sa-on-teal) !important; }

html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note {
  position: relative;
  z-index: 2;
  margin: -1.75rem 0 0 !important;
  padding: 1.25rem 1.375rem !important;
  border: 1px solid var(--sa-hairline) !important;
  border-radius: var(--sa-radius-card) !important;
  background: var(--sa-white) !important;
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.62) !important;
  gap: 0.875rem !important;
}
@media (min-width: 1024px) {
  /* laid over the phone's bottom corner and pushed a little past it, the way the template lays its
     white "Get Directions" card over the dotted panel (home-01) */
  html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note { margin: -1.25rem -1.5rem 0 2.5rem !important; }
}
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note > svg { color: var(--sa-teal) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note p { color: var(--sa-slate) !important; }
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-note p strong { color: var(--sa-ink) !important; font-weight: 600; }

/* =====================================================================================
   7. Reduced motion: the connector is drawn in full from the start and nothing transitions.
   The static design is complete without any of it.
   ===================================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.sunnyaid .sa-stages-aeo-copy::after { clip-path: none !important; transition: none !important; }
  html.sunnyaid :is(.sa-stages-aeo-num, .sa-stages-aeo-tile, .sa-stages-aeo-float, .sa-stages-aeo-note) {
    transition: none !important;
    animation: none !important;
  }
}


/* Integrator fix (9 Sep 2026): the AI panel (--sa-teal) sat 1.20:1 against its own band (--sa-teal-deep),
   so its edge was invisible and the band read as one flat slab. A hairline plus a cast shadow makes it read
   as the template's lifted plate without moving either fill, so every measured on-teal pairing still holds. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-panel {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.75) !important;
}

/* 9 Sep 2026 audit: premium-luxe.css scopes text-wrap: balance to .font-display, and these headings
   are deliberately set in the body face, so they were left wrapping with one-word last lines (the
   worst measured 16% last-line fill). These are the stage titles. */
html.luxe.sunlit.sunnyaid #main .sa-stages-aeo-title { text-wrap: balance; }