/* ===========================================================================
   spotlight.css — the Spotlight sub-brand skin for /products/smart-intake/

   Spotlight is the product Alie's copy calls Smart Intake. It has its own
   logo, palette and typefaces, and Brees' instruction (9/3) is exact:

     "the page from the hero to the last section should be spotlight branding
      but the header and the footer, those aren't going to change."

   So this sheet dresses <main> and nothing else. The DE header and footer keep
   their own palette above and below it. The seam where they meet is
   intentional — a product page is allowed to look like the product.

   🔴 SCOPED TO SECTIONS 1 AND 2 TODAY, ON PURPOSE. The remaining sections are
   being rethought one at a time against Brees' artboards, so this sheet covers
   .si-hero and .si-setup only. Sections 3-5 still run the DE palette and 6-9
   are unbuilt, so the page goes Spotlight for two screens and then reverts.
   That is a half-finished rebuild in progress, not a colour scheme.

   ⚠️ TOKENS ONLY. Every colour here is var(--sl-*), declared in base-v3.css —
   the sheet that owns :root and therefore the only place a raw hex may live.
   verify.js also fails a gradient, a blur, or an infinite animation, so the
   gold light is built from flat shapes and opacity, never a gradient.
   =========================================================================== */


/* ==========================================================================
   1. THE HERO GROUND
   ========================================================================== */

.page-si .si-hero {
  /* 🔴 CHARCOAL THROUGHOUT — THE ARTBOARD KEEPS BEING REVISED AND THE HERO HAS
     FOLLOWED IT EACH TIME, WHICH IS NOT DRIFT.
       9/8  built light from "Spotlight E Arch Column"; Brees edited that same
            file later the same day and sent the same URL, which put the
            PALETTE back to charcoal-and-gold while keeping the arch artefact.
       9/9  the same URL again, and this time the ARTEFACT had changed too —
            the arch is gone and Spotlight's own phone-and-cone scene is back.
            See the ⏪ block below section 1.
     The ground has been charcoal since the 9/8 revision and is unaffected by
     the 9/9 one. ⚠️ Three revisions, one filename, no version in the URL:
     always re-open the artboard before assuming a second request for the same
     link is a no-op. It has never once been one. */
  background-color: var(--sl-charcoal);
  color: var(--sl-offwhite);
  /* The light shapes below bleed past the section; `clip`, never `hidden`,
     because hidden makes a scroll container and kills sticky further down. */
  overflow: clip;

  /* 🔴 THE CONTENT WAS TOP-HEAVY, AND THE CAUSE IS THE CORNER PAYMENT.
     section-corners.css gives this hero a large padding-bottom so the NEXT
     section's rounded top can pull up into it. `align-content: center` then
     centres between a small top padding and that large bottom one, which puts
     everything high in the viewport. Measured at 1440x900: 86px above the
     content, 110px of visible space below it.

     The bottom padding cannot shrink — it is paying for the corner. So the top
     grows to match what is actually VISIBLE below, which is the payment minus
     the corner the next section covers. Token, not a magic number. */
  --sl-scene-h: clamp(300px, calc(100svh - var(--hdr-h) - 200px), 560px);

  /* Height-responsive: on a short screen the artwork needs the room more than
     the margin does, and on a tall one this restores the balance. */
  /* 🔴 HOISTED TO A VARIABLE 9/10, BECAUSE THE ARTWORK HAS TO SUBTRACT IT.
     The scene is positioned inside .si-stage, whose top is this padding below
     the section's edge. The artboard puts the phone 17px below the SECTION
     edge, so the scene's offset has to cancel this value out. Read from one
     place or the two silently disagree — measured before this: the phone
     landed +119px at 1920 and +41px at 1280, tracking the padding, not the
     artboard. */
  /* 🔴 THE FLOOR IS --s-5, RAISED FROM --s-4 ON 9/10. Brees: "the smart intake
     hero needs to be lowered a bit more (more padding on top)."

     The middle term only starts lifting the padding above ~1050px tall, so on
     everything shorter this clamp sat pinned at its FLOOR — measured 40px at
     1900x950, which is where he was looking. Raising the ceiling would have
     done nothing at all; the floor is the term that was binding. */
  --si-hero-pad-top: clamp(
    var(--s-5),
    calc((100svh - var(--hdr-h) - 700px) * 0.5),
    calc(var(--section-pad) * 0.75 + var(--s-5))
  );
  padding-top: var(--si-hero-pad-top);

  /* 🔴 THE ARTWORK'S SIZE LIVES ON THE SECTION, NOT ON THE ARTWORK — BECAUSE
     TWO ELEMENTS NEED IT AND ONE OF THEM IS A PARENT.

     These were declared on `.sl-scene`. `.si-stage` is its PARENT and also
     needs the value, to reserve the row height; custom properties inherit
     DOWN, so `var(--si-art-h)` was undefined there, the min-height calc was
     invalid, and the stage silently collapsed to `height: 0`. No error, no
     warning — the artwork simply centred itself in a zero-height box and sat
     250px below where it belonged, at every viewport. 📌 An invalid calc does
     not fall back to something sensible; it drops the declaration entirely.

     HEIGHT is the governed dimension and width follows from the aspect,
     because every constraint here is vertical: the section edge above and the
     stat rule below.
       771px   the artboard's own size — the cap.
       79vw    keeps the artwork in proportion on narrow screens.
       svh     the room actually available between the section edge and the
               stat band. 0.7801 is the artwork below the phone's top
               (1 - 0.2199); 230px is the stat band plus its margin. */
  /* 🔴 HOW FAR THE ARTWORK SITS BELOW THE SECTION EDGE — BREES, 9/10:
     "the graphic is a little bit touching the top of the screen so if we could
     shift everything down a little bit."

     ⏹ THIS DEPARTS FROM THE ARTBOARD DELIBERATELY. The artboard puts the
     phone's top 17px below the edge and that is what was built and measured;
     rendered at his width it read as touching. His call on the built page
     beats the comp — recorded so a future pass does not "restore" the 17.

     ⚠️ IT SCALES WITH VIEWPORT HEIGHT ON PURPOSE. A flat 64px looked right at
     1080 and cost the artwork 120px of width at 1536x700, where there are only
     523px of viewport under the header to hold a headline, a lead, a button,
     the artwork AND the stat row. 7.5vh gives ~71px where there is room, and the
     short-viewport block below pins it back down where there is not.

     🔴 USED IN TWO PLACES — the scene's `top` and the stage's reserved height.
     It is one variable precisely so those two cannot drift apart.

     ⏹ IT WAS ALSO SUBTRACTED FROM THE HEIGHT CAP, AND THAT WAS WRONG. Doing so
     traded artwork SIZE for the drop: raising the drop to lower the graphic
     shrank it at the same time, from ~935px wide to ~801px at Brees' viewport.
     Brees, 9/10: "I didn't want a smaller hero img, just need it move down."
     The drop and the size are now independent — moving the artwork down moves
     it down, and nothing else. ⚠️ The cost is that the artwork's bottom edge
     travels with the drop, so the fold clearance is what pays; it is measured
     at eight viewports and the tightest is what bounds how far this can go. */
  --si-art-drop: clamp(32px, 7.5vh, 84px);

  --si-art-h: min(
    771px,
    calc(79vw / 1.4699),
    calc((100svh - var(--hdr-h) - 230px) / 0.7801)
  );
  --si-art-w: calc(var(--si-art-h) * 1.4699);

  /* The container's CONTENT width, which the horizontal anchor below needs and
     no CSS keyword exposes.

     🔴 --container-max IS THE BORDER BOX (1240px), NOT THE CONTENT BOX. The
     content is 1112px — the 1240 less the container's own 64px padding on each
     side, which is exactly what `.si-stats` measures. Using the 1240 directly
     put the phone at 66.9% of the container instead of 70.3%: a 3.4% error
     that looks like a rounding slip and is actually the padding, twice. */
  --si-c: calc(min(var(--container-max), 100vw) - 2 * var(--container-pad));

  /* 🔴 isolation IS LOAD-BEARING, AND corner-check CAUGHT ITS ABSENCE.
     .si-setup is pulled up by -1 * --corner so its rounded top overlaps this
     hero, and the strip inside that notch must show SETUP's ground. Without a
     stacking context here, the absolutely-positioned beam painted through into
     that strip: the notch sampled gold (222,215,123) where it should have
     sampled sky-soft (228,241,247). Two failures, one per sampled x.
     `isolation: isolate` keeps every child of the hero inside the hero's own
     context, so the next section still paints over it in DOM order. */
  isolation: isolate;
}

/* 🔴 THE REAL FACES ARE NAMED FIRST IN THE TOKEN AND ARE NOT LOADED YET.
   Co Headline Bold and Chennai Bold are Adobe Fonts; they arrive as a web
   project <link>, never as .woff2 in this repo. Until the kit id lands the DE
   faces stand in and this hero reads slightly wrong — which is the honest
   state, not a design choice. */
.page-si .si-hero .hero__headline { font-family: var(--sl-font-head); }

.page-si .si-hero .hero__sub,
.page-si .si-hero .gads-stat__label { font-family: var(--sl-font-body); }

/* 🔴 MEASURED ON THIS GROUND, NOT CARRIED OVER. This project has written a
   wrong contrast figure into a sheet five times; every figure here was
   computed against the charcoal #231F20 ground for this build.
       off-white #F4F2F0 on charcoal ............... 14.60:1
       82% off-white (#CECCCB) on charcoal ......... 10.19:1
       gold #DAC52A on charcoal ..................... 9.32:1
   The subhead runs at the muted value so the gold lead sentence keeps the
   emphasis; all three clear the 4.5 body floor with room to spare. */
.page-si .si-hero .hero__headline { color: var(--sl-offwhite); }

.page-si .si-hero .hero__sub {
  color: color-mix(in srgb, var(--sl-offwhite) 82%, var(--sl-charcoal));
}

/* THE LEAD SENTENCE IS GOLD TEXT, NOT A MARKER.
   ⏹ IT WAS A GOLD SWIPE UNDER CHARCOAL TEXT while the hero was light, because
   gold as TEXT on a light ground is 1.4:1 and unusable — the swipe was the only
   way to get gold into that composition. On charcoal that constraint is gone:
   gold reads at 9.32:1 as text, so the artboard simply sets the sentence in it
   and the band disappears. The inset-shadow trick and its no-gradient
   workaround are no longer needed here.
   📌 Same words, same emphasis, different mechanism — the ground decided it. */
.page-si .si-hero .sl-mark {
  color: var(--sl-gold);
  font-weight: 700;
  box-shadow: none;
  padding-inline: 0;
}


/* ==========================================================================
   ⏪ 9/9 — THE ARCH COLUMN IS OUT AND THE SCENE IS BACK, BY THE SAME ROUTE IT
   LEFT: BREES REVISED THE ARTBOARD AND SENT THE SAME URL AGAIN.

   `Spotlight E Arch Column.dc.html` now draws the phone, the cone, the pool and
   the two animals in the hero — Spotlight's own graphic — where on 9/8 it drew
   a cream arch holding a record card with three findings rising out of it.
   Brees, 9/9: *"Update the spotlight sec1 to match here [same URL]."*

   📌 THIS IS THE THIRD TIME THAT FILE HAS BEEN EDITED UNDER A REPEATED LINK,
   AND THE SHEET ALREADY WARNED ABOUT IT ONCE: "always re-open the artboard
   before assuming a second request for the same URL is a no-op." It was
   re-opened. The hero had genuinely changed.

   🔴 THE RULES BELOW ARE LIFTED FROM GIT, NOT REWRITTEN FROM THE PICTURE.
   They are `a0b2fa5^` verbatim — the state before the arch replaced them — so
   the three hard-won measurements come back intact rather than being
   re-derived by eye: the bleed anchored to the stage's content edge, the
   cutout percentages read off the alpha channel, and the sizing taken off
   Spotlight's live DOM. The comment that removed them said they were "in git
   at 51fbd31" precisely so this would be a restore and not a rebuild. It was.

   ⚠️ AND THE ARTBOARD DOES NOT DRAW THE ONE LAYER THAT MATTERS MOST. Its phone
   screen is empty — dark, because `scene.webp`'s screen is a TRANSPARENT
   CUTOUT and the artboard puts nothing behind it, so the charcoal ground shows
   through. Building that literally would ship an empty phone and would drop
   the real product screen, which Brees asked for by name on 9/3: "the goal
   here is to not use fake renders but to use actual renders from spotlight's
   platform." So `form-goal.webp` goes back behind the cutout, as it was.
   📌 The artboard is a spec for the COMPOSITION. It does not model that layer,
   and its silence is not an instruction to remove it. Flagged, not assumed.

   🔴 THE PRODUCT SCREEN IS A PRIVACY CROP. Every frame of the source
   recording identifies a real practice and a client's pet in its top bar.
   `form-goal.webp` is the only frame that names no pet, and the bar is
   cropped off. That crop is the whole safety argument. ⏳ Do not swap in a
   different frame without re-checking it.

   ⏹ WHAT IS BEING RETIRED, AND WHERE IT LIVES NOW. `.sl-arch`, `.sl-rec`,
   `.sl-find*` and `.sl-arch__dog` are removed rather than parked, for the same
   reason those rules gave for removing these: every selector targets markup
   the artboard deleted, and a sheet full of rules matching nothing is a trap.
   They are in git at `334de64`, and the drawn-mock reversal they represented
   (invented demo data — "Paola's Persian Cat" and three findings) goes with
   them, which puts the hero back inside the 9/3 real-renders rule instead of
   inside an exception to it.
   ========================================================================== */

/* ==========================================================================
   2. THE SCENE — Spotlight's own graphic, with the real screen inside it

   🔴 THIS IS THEIR FILE, NOT A RECONSTRUCTION. Brees, 9/3: "this has this very
   particular style of cartoon and I think it would be worth using the exact
   graphic that is currently on the Spotlight page." One 1000x817 RGBA asset
   carrying the phone frame, the flat cone, the pool, the cat and the dog.

   🔴 THE PHONE'S SCREEN IS A TRANSPARENT CUTOUT. That is how their own slider
   plays the recording through it, and it is why this works: the real product
   screen goes BEHIND the art and shows through the hole. Measured from the
   alpha channel, not guessed:

       cutout  x 384..733, y 53..772   ->  350 x 720
       as %    left 38.400  top 6.487  width 35.000  height 88.127
       aspect  0.4861

   The screen crop was re-cut to 434x892 (0.4865) to seat in that hole exactly,
   rather than being object-fit cropped to fit a shape it did not match.

   ⏹ WHAT THIS REPLACED, AND WHY EACH WAS WRONG:
     a generated soft beam   - wrong STYLE. This brand is flat cartoon; feathered
                               light belongs to a different one.
     a hand-placed cat + dog - three failed placements, all solving a problem
                               that does not exist in the real artwork.
     a CSS device frame      - an approximation of a frame that already existed.

   📌 AND THE FILE WAS ALWAYS THERE. Their page serves two different assets both
   named `spotlight_s1`, separated only by a content hash. The grab script
   stripped hashes for readable filenames, so the charcoal background silently
   overwrote this graphic and I concluded the cone "could not be downloaded".
   A de-duplicating rename is a lossy operation; treat it as one.
   ========================================================================== */

/* 🔴 THE STAGE RUNS TO THE VIEWPORT EDGE SO THE LIGHT COMES FROM OUTSIDE IT.

   The cone reaches the artwork's own right edge — measured, gold occupies rows
   153..593 at x=999 of 1000. So the graphic is fine; what was wrong is that the
   scene box stopped 164px short of the viewport (scene right 1276 at 1440), and
   the asset's boundary was visible inside the frame. The cone appeared to start
   in mid-air, because it did: you could see where the picture ended.

   Bleeding the stage to the viewport edge — and a little past it — puts that
   boundary off-screen, so the light reads as entering from outside.
   ⚠️ The hero's `overflow: clip` is what stops this widening the document. */
.page-si .si-stage {
  position: relative;
  display: grid;
  place-items: center;
  /* 🔴 THE STAGE RESERVES THE ARTWORK'S VISIBLE HEIGHT, WHICH IS WHAT KEEPS
     THE STAT ROW CLEAR OF IT — STRUCTURALLY, NOT BY ARITHMETIC.

     The artwork is absolutely positioned, so it contributes nothing to layout;
     three earlier attempts tried to dodge the stats by computing the artwork's
     size against the viewport, and every one of them overlapped at some size,
     because the stat row's position is set by how many lines the COPY column
     wraps to and no CSS length can see that.

     Reserving the height here inverts the problem: the grid row becomes at
     least this tall, the stats sit below the row, and the overlap is
     impossible rather than merely unlikely.

     The value is the artwork below the phone's top (0.7801) plus the drop the
     phone sits below the section edge, less the hero padding the scene's `top`
     already cancels. */
  min-height: calc(
    0.7801 * var(--si-art-h) + var(--si-art-drop) - var(--si-hero-pad-top)
  );
}

/* 🔴 SIZED AGAINST SPOTLIGHT'S OWN PAGE, MEASURED — NOT ESTIMATED.
   Their hero at 1440x900, read off the live DOM:

     section      0,80   1440 x 701
     graphic    795,163   674 x 550   right edge 1469  (29px past the viewport)
     screen    1053,169   239 x 527

   So the artwork is 47% of the viewport width, fills 78% of the section
   height, and bleeds 29px. The first attempt here was 485 x 396 ending at
   1455 — about 40% too small, which is why it read as an inset picture rather
   than as the scene the page is set in.

   Height-first, because the height is what the viewport constrains; the width
   follows from the aspect and the bleed carries the overflow. The subtraction
   is the space the rest of the hero needs (top padding, the stat band and its
   rule); the cap is their 550 plus a little headroom for very tall screens. */
.page-si .sl-scene {
  /* 🔴 SIZED BY WIDTH AGAINST THE CONTAINER, NOT BY HEIGHT AGAINST THE
     VIEWPORT — AND THAT IS THE CHANGE THE NEW ARTWORK FORCED.

     The previous rules sized this height-first and bled the right edge past
     the viewport, because the OLD asset's cone was cropped at its own edge
     (gold stopped at x=999 of 1000) and the bleed was the only way to hide
     that boundary. Brees' artwork does not have that problem: its cone runs
     into the artwork's own top-right corner, so what governs now is how big
     the drawing is relative to the copy beside it.

     📌 MEASURED OFF THE ARTBOARD, container-relative so it is width-agnostic:
         artwork width ......... 1.02 x the container   (1134px at a 1112 container)
         phone left edge ....... 70.3% of the container from its left
         phone width ........... 26.3% of the container
     The artwork is 25.82% phone by width (378 of 1464), which is what ties
     those two together: 0.263 / 0.2582 = 1.019 containers of artwork.

     ⚠️ IT STILL BLEEDS, JUST LESS. The right edge carries a hard vertical cut
     where the cone leaves the canvas, so it has to sit outside the frame. At
     the artboard's own width that overhang is 517px past the container edge,
     which is 0.456 of the artwork's width — expressed as a fraction so it
     tracks the artwork instead of the viewport. */
  position: absolute;
  margin: 0;

  /* One setting, used three times below.

     🔴 THREE TERMS, AND THE THIRD IS THE ONE THAT KEEPS THE PHONE'S HEAD ON.
       1134px  the artboard's own size — the cap, so no screen exceeds it.
       79vw    keeps the phone in proportion on narrower screens.
       height  the artwork is 771px tall at full size and a 900px viewport has
               about 560px of hero above the stat row. Without this term the
               artwork was anchored at the bottom and its TOP was clipped by
               `overflow: clip` — the phone was beheaded at the section edge.

     ⚠️ THE 1.42 IS DERIVED, NOT DIALLED IN. The phone starts 21.99% down the
     artwork (frame top y219 of 996), so with the bottom anchored its top sits
     at `stage_bottom - 0.7801 x height`. Solving that to land the phone's top
     17px below the section edge — which is where the artboard puts it —
     gives height = (100svh - hdr) x 0.966, and 0.966 x 1.4699 (the aspect) is
     1.42. Measured at 1440x900 it lands at exactly 17px. */
  width: var(--si-art-w);
  height: var(--si-art-h);

  /* Anchored to the stage's right edge, which is the container's content edge
     — the same deterministic anchor the old rule used, with the distance now
     derived from the artwork rather than from the viewport. */
  /* 🔴 ANCHORED BY THE PHONE HORIZONTALLY TOO, WITH A GUARD.

     This was `-0.456 x width`, a fixed fraction of the artwork — which holds
     the artboard's placement only at the artboard's size. As the height cap
     shrinks the artwork on shorter screens, a right-edge anchor drags the
     phone right with it: measured 70.3% of the container at 1920 but 85.5% at
     1536x700, and the phone fell to 12.8% of the container wide.

     Solving for the phone instead — it starts 25.27% into the artwork and the
     artboard puts its left edge at 70.3% of the container — gives
     `0.297 x container - 0.7473 x artwork`, which holds 70.3% at every size.

     ⚠️ THE min() IS THE GUARD AND IT IS NOT OPTIONAL. The artwork's right edge
     carries a hard vertical cut where the cone leaves the canvas. On a small
     enough viewport the phone-anchored offset would pull that cut INSIDE the
     frame, and the light would visibly stop in mid-air — the exact defect the
     old asset's bleed existed to hide. The second term keeps the edge at least
     16px outside the viewport, and min() takes whichever is further out. So
     the phone holds its place while there is room, and the cone's edge wins
     when there is not. */
  right: min(
    calc(0.297 * var(--si-c) - 0.7473 * var(--si-art-w)),
    calc(-1 * ((100vw - var(--si-c)) / 2) - 16px)
  );

  /* 🔴 THE PHONE IS THE ANCHOR — NOT THE ARTWORK'S TOP, AND NOT ITS BOTTOM.
     Both of those were tried and both drifted:

       centred    a 771px artwork in a 900px viewport put the pool and the dog
                  over the stat row — "$299 / per month, flat" sat under the
                  light, measured 60px of overlap.
       bottom: 0  ties the artwork to the STAGE's bottom, which is set by how
                  many lines the copy column wraps to. So the phone's top moved
                  with the viewport WIDTH: +18px at 1440, -85px at 1280. It was
                  beheaded at four of eight sizes.

     What the artboard actually fixes is the phone's top edge, a small drop
     below the section edge, and everything else follows from that. The phone
     starts 21.99% down the artwork, so `top: drop - 0.2199 x height` puts it
     there at any size — see --si-art-drop for what the drop is and why it is
     no longer the artboard's 17px. The cone above it leaves through the section edge, which is what
     `overflow: clip` on the hero is for and what the artboard draws.
     ⚠️ The two constants belong to the ASSET's geometry. Re-measure them if the
     artwork is ever replaced. */
  top: calc(var(--si-art-drop) - var(--si-hero-pad-top) - 0.2199 * var(--si-art-h));
}

/* Seated in the cutout by percentages measured off the NEW asset's alpha
   channel, not carried over:

     cutout   x 384..733, y 232..946   ->  350 x 715
     as %     left 26.230  top 23.293  width 23.907  height 71.787
     aspect   0.4895   (form-goal.webp is 0.4865)

   📌 THE PHONE AND ITS APERTURE ARE PIXEL-IDENTICAL IN BOTH ASSETS — 350 x 715
   in each, at the same x. Only the canvas grew and the phone moved down it. So
   the screen crop did not need re-cutting; only these four numbers moved.
   `object-fit: cover` stays as the guard for the 0.6% aspect difference. */
.page-si .sl-scene__screen {
  position: absolute;
  left: 26.230%;
  top: 23.293%;
  width: 23.907%;
  height: 71.787%;
  object-fit: cover;
}


.page-si .sl-scene__art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}


/* 🔴 BELOW 900 THE HERO STACKS, AND THE DESKTOP ANCHORING IS WRONG THERE.

   Everything above positions the artwork against the section's top edge and
   the container's right edge, because on a desktop the copy sits beside it.
   Stacked, the copy is ABOVE it, so anchoring to the section's top would put
   the artwork over the headline, and the right-edge anchor shoves it into the
   corner. Measured at 375 before this rule: the artwork rendered 296px wide
   in the bottom-right, and the phone inside it was 76px — the product screen
   was unreadable, which is the one thing this section exists to show.

   So on a stacked hero it goes back into flow, centred in its own row, and is
   sized by WIDTH like any other stacked image. It still overhangs both sides
   so the cone's cut edges stay off-screen; the hero's `overflow: clip` keeps
   that from widening the document. */
@media (max-width: 899px) {
  .page-si .si-hero {
    /* Width-driven here. 113vw overhangs by 6.5% each side, which is what puts
       the artwork's vertical cut edges outside the viewport. */
    --si-art-h: calc(113vw / 1.4699);
  }

  /* 🔴 STILL OUT OF FLOW — PUTTING IT BACK IN CLIPPED THE HEADLINE.
     `position: relative` made the 113vw artwork size the grid COLUMN, and on a
     stacked hero that column is shared with the copy: the grid grew to 424px
     inside a 333px container and the headline ran off the right edge, cut by
     the hero's own `overflow: clip`. The document width never changed, so
     nothing flagged it — it only showed in a screenshot.
     So it stays absolute (contributing no width) and the stage reserves the
     height explicitly, which is the same division of labour as the desktop
     rule above. */
  .page-si .si-stage {
    min-height: var(--si-art-h);
  }

  /* Feedbucket 991615 (Brees, 9/21, iPhone 430px): "Too far left".
     Centring a 486px scene in a 430px viewport bled it 27.9px off EACH side - symmetric
     as a box, but the phone and the pool of light sit left of centre WITHIN the artwork,
     so the pool's left edge was clipped while its right edge stopped well inside the
     frame. Read as the whole scene having slid left, which is what Brees saw.
     Anchored to the left edge instead: the pool is whole and only the CONE overflows, on
     the right, which is the side it was drawn to run off.
     ⚠ .sl-scene is absolute and contributes no width (see the note above), so this cannot
        widen the document - verified scrollWidth stays 430. */
  .page-si .sl-scene {
    top: 0;
    right: auto;
    left: 0;
    transform: none;
  }
}

/* [i] THE SHORT-VIEWPORT RULES THAT USED TO SIT HERE HAVE MOVED BELOW SECTION 5.
   They override the stat row s spacing, and section 5 sets that at the same
   specificity - so from here they lost and did nothing. See the block after
   the stat row. */

/* ==========================================================================
   4. THE BUTTON — charcoal on gold

   ⏹ IT WAS INVERTED (charcoal fill, gold label) FOR THE LIGHT HERO, because a
   gold fill on off-white is a 1.15:1 boundary and the button would have had no
   visible edge. On charcoal the fill is the thing that carries, so the
   artboard puts it back: gold pill, charcoal label, measured 9.32:1.
   ⚠️ Spotlight's app uses white on blue for its in-product CONTINUE button,
   which is 2.07:1. That stays inside the screenshot. It is not a button style.
   ========================================================================== */

.page-si .sl-btn,
.page-si .sl-btn:link,
.page-si .sl-btn:visited {
  background-color: var(--sl-gold);
  border-color: var(--sl-gold);
  color: var(--sl-charcoal);
}

/* Hover lifts to cream rather than dimming the gold: charcoal on cream is
   13.06:1, so the state change costs no contrast. */
.page-si .sl-btn:hover,
.page-si .sl-btn:focus-visible {
  background-color: var(--sl-cream);
  border-color: var(--sl-cream);
  color: var(--sl-charcoal);
}


/* ==========================================================================
   5. THE STAT ROW — a hairline and three stacked pairs

   ⏹ THEY WERE ARCH-TOPPED WHITE CARDS on the light hero, echoing the big arch
   above them. On charcoal that echo stops working: three white domes on a dark
   ground read as three buttons, not as a quiet footnote to the artefact. The
   revised artboard drops the cards for a hairline rule and three plain
   columns, which is what the charcoal hero had before — but STACKED now
   (figure over label) rather than run together on one line.

   🔴 THE COUNT-UP RULE IS UNCHANGED AND LIVES IN THE MARKUP, NOT HERE. 80%
   counts. "5 to 12" is a range, not a magnitude, so it must not. $299 is a
   price and must NEVER count — Brees' 8/31 rule.

   ⚠️ No middot between items. A generated "·" is read aloud by some screen
   readers as punctuation between two unrelated phrases; the gap does the same
   job silently.
   ========================================================================== */

.page-si .si-hero .gads-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  /* A pale neutral hairline, not the solid gold rule the old charcoal hero
     used. Gold at full strength competes with the figures sitting under it;
     the artboard's line is barely there and only marks the boundary. */
  border-top: 1px solid color-mix(in srgb, var(--sl-offwhite) 22%, var(--sl-charcoal));
}

.page-si .si-hero .gads-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 0;
  padding: 0;
  text-align: left;
  background-color: transparent;
  /* ⏹ The arch shape belonged to the cards. Explicitly cleared so nothing is
     left rounding an invisible box. */
  border-radius: 0;
}

/* 🔁 9/17, Alie (review note 987603): "Can we make these stats a bit bigger so they stand out?"
   20-24px → 28-36px, and the label 13px → 15px so it still reads as a caption under the figure rather than as
   body copy hung off a number.
   🔴 EDITED HERE, NOT IN smart-intake.css. The first attempt added `.si-stats .gads-stat__fig` to that sheet and
   nothing moved: this rule is `.page-si .si-hero .gads-stat__fig` at (0,3,0) and outranks it, whichever sheet
   loads last. The Spotlight artboard owns this hero — its head font and its gold — so the size belongs here too.
   📌 Contrast is untouched: same `--sl-gold` on the same ground, and a larger figure only lowers the threshold
   it has to clear. */
.page-si .si-hero .gads-stat__fig {
  display: block;
  font-family: var(--sl-font-head);
  font-size: clamp(2.125rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  color: var(--sl-gold);
}
/* 🔁 9/18, Brees: "we could go just a little bit bigger while making sure that everything is still visible in the
   hero section right when you land." 28-36px → 34-44px, label 15 → 16px. The fold budget was already spent
   (stats cleared it by 1px at 1600x1000, 9 at 1440x900), so the room comes out of the gap ABOVE the hairline:
   margin-top --s-5 (64) → 48px. The short-viewport block (≤820 tall) caps the figure at 40px and trims its own
   gap — see it further down. Re-measure the fold after any change here. */
.page-si .si-hero .gads-stats { margin-top: 48px; }

.page-si .si-hero .gads-stat__label {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--sl-offwhite) 82%, var(--sl-charcoal));
}

/* 🔴 SHORT VIEWPORTS, NOT NARROW ONES. Brees asked for everything above the
   fold. Re-measured 9/9 with the current header, stats bottom vs viewport:

     1920x1080  clears by 105px          1366x768   clears by 113px
     1600x1000  clears by  65px          1280x800   clears by 152px
     1536x700   clears by  25px          1024x800   clears by 153px
     1440x900   clears by  24px

   1536x700 is not exotic: it is a 1080p screen at Windows' 125% scaling, which
   is the default on most of them. This codebase has been caught by exactly that
   before — a hero overlap that lived on viewport HEIGHT was checked only at
   1440x900 and shipped broken across twenty live pages.

   ⚠️ So this is keyed on height, and it must stay keyed on height. Re-scoping
   it to a width breakpoint would silently restore the bug.

   🔴 THIS BLOCK MOVED HERE ON 9/9, BELOW SECTION 5, AND THE POSITION IS
   LOAD-BEARING. It used to sit with the scene rules. Section 5 was rewritten on
   9/8 and now sets `.page-si .si-hero .gads-stats { margin-top: var(--s-5);
   padding-top: var(--s-3) }` — the SAME specificity, (0,3,0), and later in the
   file. So from its old position this rule's two stat-row declarations lost the
   cascade and did nothing at all, silently, while still reading as if they
   worked. Measured at 1536x700: 723px against a 700px fold.
   📌 A restored block is not the same block. These rules came back verbatim
   from `a0b2fa5^` and were CORRECT AS WRITTEN; what changed underneath them was
   a sheet section they had never had to outrank before. Check the cascade after
   any restore, not just the syntax.

   🔴 AND THE HEADER GREW, WHICH IS WHAT MADE IT VISIBLE. The 9/9 mega menu took
   the header from 162px to 177px. The old version of this comment ended "42px
   is tight but real; if the header ever grows, this is what gives." It grew,
   and that is exactly what gave — 15px of a 39px budget. The prophecy was right
   and nothing was watching it, so corner-check and the sweeps never saw this;
   it took measuring the fold by hand. ⏳ Worth a gate of its own. */
@media (min-width: 900px) and (max-height: 820px) {
  .page-si .si-hero { --sl-scene-h: clamp(260px, calc(100svh - var(--hdr-h) - 190px), 360px); }
  .page-si .si-hero .gads-stats {
    margin-top: var(--s-2);
    padding-top: 12px;
  }
  /* 9/18: the bigger stats, capped for short screens — 44px would not fit under a 700px fold */
  .page-si .si-hero .gads-stat__fig { font-size: clamp(2.125rem, 3.4vw, 2.5rem); }
  /* The remaining overhang is the hero's own top padding, not the artwork.
     Trimming it keeps the phone at a size the source pixels can carry rather
     than shrinking the one thing on the page that shows the product.
     ⚠️ Measured clearance to the sticky header after this: 50px at 1536x700
     (scene top 227, header bottom 177). */
  .page-si .si-hero {
    /* 🔁 9/18 (responsive list #2): a flat --s-3 was sized for 700px tall, where the fold budget really is gone
       (measured: stats clear the fold by 7px at 1536x700). But the same 24px applied up to 820 tall, where 84px sat
       spare under the stats while the H1 was 27px under the header (1366x768, 1440x820, 1920x800). The padding now
       grows with HEIGHT: 24px at 700 tall (unchanged), 56px from ~764 up, splitting the spare room above and below.
       ⚠️ Still keyed on height, as the note above demands. */
    --si-hero-pad-top: clamp(var(--s-3), calc((100svh - 700px) * 0.5 + var(--s-3)), 56px);
    /* ⚠️ AND THE DROP IS PINNED HERE TOO. 7.5vh is generous on a tall screen
       and unaffordable on a 700px one: the drop is subtracted from the
       artwork's height cap, so every pixel of it comes straight off the
       phone. At 1536x700 there are only 523px under the header to hold a
       headline, a lead, a button, the artwork AND the stat row. */
    --si-art-drop: var(--s-4);
  }
  .page-si .si-hero .hero__sub { margin-top: var(--s-2); }
}

@media (max-width: 700px) {
  .page-si .si-hero .gads-stats { grid-template-columns: 1fr; }
}


/* ==========================================================================
   6. SETUP — the artboard's split: copy left, the cat panel right

   The section is white here rather than --sky-soft, which is a DE ground. With
   the hero on off-white above it the two read as one page: a warm near-white
   that steps up to true white, rather than a colour change.
   ========================================================================== */

.page-si .si-setup {
  background-color: #ffffff;
  /* ⏹ `overflow-x: clip` stays even though the disc it was cutting is gone.
     The panel below can still be given a bleed later, and clip (never hidden)
     is the rule on this page because hidden makes a scroll container and kills
     sticky further down. */
  overflow-x: clip;
}

.page-si .si-setup__head {
  font-family: var(--sl-font-head);
  color: var(--sl-charcoal);
}

/* 🔴 THE COLUMNS SWAPPED MEANING, SO THE RATIO HAD TO CHANGE TOO. The old
   split was 1.05fr / 1fr because both sides held copy and the question needed
   the larger half. Now one side holds ALL the copy and the other an
   illustration, so the copy takes the majority and the panel is sized to sit
   beside it rather than to match it.

   🔴 PANEL LEFT, COPY RIGHT — PLACED, NOT REORDERED IN THE DOM. Brees, 9/8:
   "can we flip Section 2 so the image is on the left and the text is on the
   right?" The swap is done with `grid-column` and deliberately NOT by moving
   the panel above the copy in the markup, because this rule is inside the
   ≥900px query and the DOM order is what survives below it. Reordering the
   source would have flipped the STACKED layout too, leading the section with a
   decorative cat before a word of Alie's copy had been read. Source order
   stays copy-first; only the wide layout is placed. */
@media (min-width: 900px) {
  .page-si .si-setup__split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }


  /* ⏹ THE HEADING-INTO-COLUMN-2 GRID IS GONE, SUPERSEDED THE SAME DAY. It
     existed to pull the title across to the copy it introduced; the 9/11
     restructure puts the heading INSIDE the split, so it now shares a column
     with the copy by construction and needs no placement of its own. */

  /* The heading and the cat share the left column, the copy takes the right —
     the .gads-diffsec relationship Brees pointed at. */
  .page-si .si-setup__lead { grid-column: 1; grid-row: 1; }
  .page-si .si-setup__copy { grid-column: 2; grid-row: 1; }
}

.page-si .si-setup__copy {
  /* It is one column of copy now, not a paragraph stack beside a question, so
     the measure is set here and the statement keeps its own tighter one. */
  max-width: 62ch;
}

/* 🔴 THE STATEMENT COMES DOWN IN SIZE, AND THE REASON IS HIERARCHY, NOT TASTE.
   It used to be the largest thing in its own column at up to 2.75rem, which
   worked when it faced the paragraphs across a gap. Stacked directly under the
   h2 at that size it competed with the heading and read as a second heading.
   The artboard sets it clearly below the h2 and clearly above the body. */
.page-si .si-statement {
  max-width: 26ch;
  margin-bottom: var(--s-2);
  font-family: var(--sl-font-head);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.22;
  color: var(--sl-charcoal);
}

.page-si .si-setup__copy .t-lead {
  font-family: var(--sl-font-body);
  /* 78% charcoal on white — measured 7.6:1, the same muted grey the hero uses
     for its subhead and stat labels, so the page has ONE body grey. */
  color: color-mix(in srgb, var(--sl-charcoal) 78%, #ffffff);
}

/* ---- the cat panel ------------------------------------------------------ */

/* Ornament, and marked aria-hidden in the markup. The panel is the brand's
   off-white on white: a step, not a contrast. */
/* 🔴 `min-width: 0` IS LOAD-BEARING, AND `overflow-x: clip` HID WHY.
   As a grid item this panel defaults to `min-width: auto`, i.e. min-content.
   Its `aspect-ratio` then turns the CAT'S INTRINSIC HEIGHT INTO A WIDTH: 219px
   of image plus padding, times 16/9, is a 477px min-content floor. At 430px
   that floor made the single-column track 477.5px inside a 387px grid, and
   every paragraph in the left column was cut off mid-word.

   ⚠️ AND `document.scrollWidth` REPORTED 430 THE WHOLE TIME. `.si-setup`
   carries `overflow-x: clip`, so the overflow was clipped rather than
   scrolled — the document-level test that catches this everywhere else on the
   page is blind inside a clipping section. It was found by measuring the
   computed track and then bisecting the two children, not by a sweep.

   📌 Desktop never showed it: the two-column rule uses `minmax(0, 0.85fr)`,
   and that explicit 0 was already doing this job. */
.page-si .sl-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: var(--s-4);
  background-color: var(--sl-offwhite);
  border-radius: 20px;
}

.page-si .sl-panel__art {
  width: min(62%, 220px);
  height: auto;
  /* ⏹ THE MIRROR CAME OFF WHEN THE PANEL MOVED. It was flipped so the cat's
     tail and ball sat on the side nearest the copy while the panel was on the
     RIGHT. With the panel on the left, the unflipped cut does that by itself —
     the asset already leans toward its right. Same intent, and now it needs no
     transform to achieve it. */
}

@media (max-width: 899px) {
  /* ⏹ NO aspect-ratio WHEN STACKED. A ratio on a full-width panel either
     leaves a band of empty ground or crops the cat, and it is the ratio that
     manufactured the min-content floor above. Padding sets the height instead,
     so the panel is exactly as tall as the illustration it holds. */
  .page-si .sl-panel {
    aspect-ratio: auto;
    padding-block: var(--s-5);
  }
  .page-si .sl-panel__art { width: min(58%, 200px); }
}


/* ==========================================================================
   7. HOW IT WORKS — the routing device on Spotlight cream

   Brees, 9/8: light yellow ground, a black moving line, black spurs, and the
   coloured dots replaced by numbered black circles. The copy is untouched.

   🔴 THE DEVICE IS SHARED WITH THE GOOGLE ADS PAGE. product-devices.css draws
   the rail, the spurs and the dots for BOTH pages, and google-ads.css supplies
   the petal / lime / marigold / clay palette. Nothing below edits that sheet —
   every rule here is scoped to .page-si so Google Ads keeps its own colours.
   ========================================================================== */

.page-si .si-how {
  background-color: var(--sl-cream);
}

/* ---- the type on cream -------------------------------------------------- */

/* Measured against #F0E8AA for this build, not carried over from the indigo
   version (which used --oat and --oat-75, both of which are for a dark ground
   and would be near-invisible here):
       charcoal #231F20 on cream ............. 13.06:1
       78% charcoal (#504B3E) on cream ........ 6.96:1     */
.page-si .si-how__head,
.page-si .si-how .gstep__label {
  color: var(--sl-charcoal);
}

.page-si .si-how__head { font-family: var(--sl-font-head); }

/* --------------------------------------------------------------------------
   BREATHING ROOM IN SECTION 3 — BREES, 9/11: "this whole area feels very
   crowded", naming three things: the rail running into the heading, the
   heading and step 01 sitting too close, and too much stacked at the top.
   All three measured true at 1440:

       rail's vertical leg vs heading's left edge ....  -10px
       heading's right edge to step 01 ..............    96px
       heading top vs step 01 top ...................     0px (same line)

   🔴 PADDING, NOT MARGIN, AND THAT IS THE WHOLE TRICK. track-gads.js derives
   the rail from the heading's BOX — `entryX = headline.left - 10` and the
   corner turns at `headline.top - 20`. A margin moves the box, so the rail
   would move with it and the gap would never change. Padding leaves the box
   where it is and moves only the TEXT, which is what opens the gap.
   ⏹ Changing PAD inside track-gads.js was the other option and was rejected:
   that constant is shared with the Google Ads page, which nobody asked to
   change.
   ⚠️ max-width has to grow with the padding or the measure shrinks — 18ch is
   Alie's line length, and `box-sizing: border-box` would otherwise eat it. */
.page-si .si-how__head {
  padding-left: 24px;
  /* ⚠️ max-width MUST carry the padding. `box-sizing: border-box` counts it
     inside the limit, so `18ch` alone would hand the text 24px less measure
     and wrap Alie's heading from three lines to four. */
  max-width: calc(18ch + 24px);
}

/* [i] THE STEPS START LOWER THAN THE HEADING NOW. They used to share its exact
   top edge, so the rail's corner, the heading's first line, the 01 disc and
   the first step title all landed in one band. Dropping the column lets the
   heading lead and the steps follow, which is also the reading order.
   [i] The spurs follow automatically - track-gads.js measures each item's real
   position on every layout, so nothing here needs a matching constant. */
@media (min-width: 900px) {
  .page-si .si-how .gads-how__items {
    padding-top: 52px;
    /* 🔴 THE VERTICAL RHYTHM OPENS TOO — BREES, 9/11, second pass: "#6 doesn't
       feel done." The first pass fixed the three things he NAMED (rail
       clearance, the gap to step 01, the shared top edge) and the area still
       read as dense, because the density is in the RIGHT column: four steps,
       each a title plus six lines of body, stacked 64px apart.

       ⚠️ AND THE FIRST PASS MADE THAT HALF WORSE. Equalising the columns to
       1fr/1fr narrowed the steps column 549 -> 498, so the crowded side got
       crowded further while the empty side got wider. Widening it back costs
       the heading its three-line set (measured: 0.9fr wraps it to four), so
       the room is bought VERTICALLY instead, where nothing competes for it.
       --s-5 (64) -> --s-6 (96); the section grows 1106 -> 1202px. */
    row-gap: var(--s-6);
  }

  /* ⏹ 96px was the column gap and it is the page's --s-6 step. At 1440 that
     left 96px between the heading's measure and step 01 — the gap Brees
     called too close. --s-6 plus half a step opens it without inventing a
     value outside the scale.
     ⚠️ THE SPINE MOVES WITH THIS. smart-intake.css records that track-gads.js
     measures this gap rather than carrying its own constant, which is exactly
     why widening it is safe: the rail re-derives instead of drifting. */
  .page-si .si-how__grid {
    /* 🔴 THE RATIO MOVES WITH THE GAP, AND IT HAS TO. Three constraints pull
       against each other here and only a few combinations satisfy all three:

           rail clearance   wants padding-left on the heading
           gap to step 01   shrinks as that padding pushes the text right
           heading measure  wants the column wide enough to stay THREE lines

       The column was 467px against a heading that needs ~467 to hold three
       lines, so ANY padding tipped it to four - and widening the gap alone
       made that worse by shrinking the column further. Searched, not guessed:

           0.85fr pad0  gap96    3 lines   rail 10   text->step01  97   <- was
           0.92fr pad24 gap96    4 lines   rail 34   text->step01 201
           0.95fr pad24 gap96    3 lines   rail 34   text->step01 101
           0.95fr pad24 gap116   4 lines   rail 34   text->step01 219
           1fr    pad24 gap116   3 lines   rail 34   text->step01 124   <- ships

       ⚠️ The steps column narrows 549 -> 498 and its body copy still sets to
       six lines, so nothing reflows on that side either. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--s-6) + var(--s-4) / 2);
  }
}

/* --------------------------------------------------------------------------
   THE PET IN SECTION 3'S EMPTY COLUMN - BREES, 9/11

   The steps column is 781px tall against a 153px heading, so the left column
   carried ~628px of nothing while the right side scrolled. He asked for one of
   the Drive graphics there rather than a sticky title.

   [!] .si-how__lead IS THE GRID ITEM, NOT THE HEADING. See the build script
   for why - in short, a bare <img> sibling becomes a third grid item and
   either falls below the steps column or steals the heading's cell and flips
   the layout. The wrapper is load-bearing; do not unwrap it.
   -------------------------------------------------------------------------- */
.page-si .si-how__lead {
  display: flex;
  flex-direction: column;
  /* fills the grid row so `margin-top: auto` below has something to push
     against - without it the column is only as tall as its content and the pet
     sits straight under the heading with the gap below it instead */
  height: 100%;
}

.page-si .si-how__pet {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  /* [i] PUSHED TO THE BOTTOM OF THE COLUMN, so the cat stands on the section's
     floor rather than floating mid-column. It is the same relationship the two
     pets already have on the comparison coda, where they stand on the band's
     edge. */
  margin-top: auto;
}

/* [!] BELOW 900 THE GRID IS ONE COLUMN and the heading sits directly above the
   steps, so there is no empty column left to fill - the pet would just be
   380px of scrolling between a heading and a list. It is removed rather than
   shrunk. */
@media (max-width: 899px) {
  .page-si .si-how__pet { display: none; }
}

/* 🔴 THE SPOTLIGHT PAGE FOLLOWS THE RULE'S SHAPE, NOT ITS LITERAL FACES.
   The 9/10 rule says H1/H2 take the display face and everything below takes the
   body face. On the DE pages that is All Round Gothic -> Altivo. Here the
   sub-brand's own pair is Co Headline -> Chennai, and Brees' 9/3 instruction
   that this page carries Spotlight branding still stands. So the h3s move to
   `--sl-font-body` — the same RULE applied to the right typefaces, rather than
   the DE faces imported over the sub-brand.
   📌 Chennai is not loaded yet, so today these render in Altivo, the token's own
   fallback, which is exactly what the DE pages show. When the Adobe kit lands
   they become Chennai and the page is correct either way. */
.page-si .si-how .gstep__label {
  font-family: var(--sl-font-body);
  font-weight: 500;
  letter-spacing: 0;
}

.page-si .si-how .gstep__text {
  font-family: var(--sl-font-body);
  color: color-mix(in srgb, var(--sl-charcoal) 78%, var(--sl-cream));
}

/* ---- the line and its spurs --------------------------------------------- */

/* "the moving line can be black and then all the lines that come out will also
   be black." The rail, all four spurs and the travelling head, one colour. */
.page-si .si-how .gtrack__rail { stroke: var(--sl-charcoal); }

.page-si .si-how [data-g-spur="0"],
.page-si .si-how [data-g-spur="1"],
.page-si .si-how [data-g-spur="2"],
.page-si .si-how [data-g-spur="3"] { stroke: var(--sl-charcoal); }

.page-si .si-how .connector__head { fill: var(--sl-charcoal); }

/* ---- the numbered discs ------------------------------------------------- */

/* 🔴 THE COLUMN HAS TO GROW WITH THE DOT. `.gstep` is a 14px grid column built
   for a 12px dot; a disc big enough to hold "01" is 34px and would have
   overflowed its own track, pushing into the label. The track is widened here
   rather than in the shared sheet.
   ⚠️ `align-items` moves from baseline to start for the same reason: a 34px
   disc sitting on the label's baseline hangs far below the first line. */
.page-si .si-how .gstep {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
}

.page-si .si-how .gstep__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  /* The shared sheet nudges the 12px dot up to meet a baseline it no longer
     sits on. Cleared, then re-nudged to the cap height of the label beside it. */
  transform: translateY(0.1em);
  background-color: var(--sl-charcoal);
  font-family: var(--sl-font-head);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  /* Brees, 9/8: gold numerals, not white. Gold on charcoal is 9.32:1 —
     comfortably over the 4.5 floor, and large-text either way at 700 weight. */
  color: var(--sl-gold);
}

/* 🔴 THE PER-STEP COLOURS MUST BE BEATEN ON SPECIFICITY, NOT REMOVED.
   product-devices.css sets `.gstep:nth-child(n) .gstep__dot { background }`
   for the Google Ads palette. That is (0,2,1); `.page-si .si-how .gstep__dot`
   is (0,3,0) and already wins — but it is written out explicitly here so the
   next person does not "tidy" the nth-child rules out of the shared sheet and
   break the other page. */
.page-si .si-how .gstep:nth-child(1) .gstep__dot,
.page-si .si-how .gstep:nth-child(2) .gstep__dot,
.page-si .si-how .gstep:nth-child(3) .gstep__dot,
.page-si .si-how .gstep:nth-child(4) .gstep__dot {
  background-color: var(--sl-charcoal);
}


/* --------------------------------------------------------------------------
   🔴 THE RAIL WAS PAINTING INTO THE SECTION BELOW, AND IT IS A SHARED-DEVICE
   BUG THAT THE COLOUR CHANGE MERELY REVEALED.

   Three facts have to line up before it makes sense:

     1. track-gads.js draws the spine to `endY = height` — the FULL height of
        `.gtrack`, which is `inset: 0` on the section. That is deliberate and is
        Brees' own 8/31 instruction ("this line should go all the way to the
        bottom of the section"), so the script is not the thing to change.
     2. `.si-how` carries `padding-bottom: --section-pad + --corner`, and
        `.si-compare` is pulled up by `-1 * --corner` to sit over it. So the
        section's BOX ends a full corner-radius BELOW its visible edge, and the
        spine correctly draws down into that hidden strip.
     3. `.gtrack` has `z-index: 1` while the following section is not raised at
        all — so the strip that should be covered painted on top of it instead.

   ⚠️ SO CLIPPING `.si-how` WOULD NOT HAVE FIXED IT. The offending line is
   INSIDE the section's own box; it is the stacking order that is wrong, not the
   overflow. Raising the following sections is the fix, and it is scoped to
   .page-si so the shared device and the Google Ads page are untouched.

   📌 Why nobody caught it before: on Google Ads the rail is
   `rgba(243,238,232,0.45)` — a pale translucent line that was invisible where
   it spilled. Charcoal on white is not. A cosmetic change surfaced a real
   defect that had been shipping.
   -------------------------------------------------------------------------- */
/* [!] .si-effect JOINS THIS GROUP OR .si-shines PAINTS OVER IT. Every section
   after .si-how is raised so the rail cannot spill past its own section (see
   above). A NEW section pulled up under a raised one has z-index auto and
   loses the strip: corner-check failed 18 times with ".si-shines is painting
   into the strip". Anything added below here needs to be in this list.

   [!] AND .si-faq / .si-cta WERE ADDED 9/9 AFTER MAKING EXACTLY THAT MISTAKE.
   The warning above is one sentence long and was written by the session that
   paid for it; the next section built still shipped at z-index auto, and
   corner-check returned the identical 18 failures with .si-effect named
   instead of .si-shines. 📌 A note that describes the trap is not the same as
   a rule that prevents it - the gate is what caught this, both times. */
.page-si .si-compare,
.page-si .si-shines,
.page-si .si-effect,
.page-si .si-int,
.page-si .si-faq,
.page-si .si-cta {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   8. THE COMPARISON - Alie's rows as white cards on off-white

   Brees, 9/9: the artboard "4A - 3B, MINIMAL - WHITE CARDS, CRISP EDGE" -
   artboard 1 of 4 inside `Spotlight questions minimal.dc.html` on the
   *Digital Empathy Vet Homepage* canvas. The other three (4B lit column,
   4C blue barely-there, 4D pale blue cards) were NOT chosen; do not drift
   toward them.

   [OK] EVERY WORD IS UNCHANGED. The artboard carries the same h2, the same
   lead, the same six rows and the same closing sentence that were already on
   the page - diffed, not assumed. So this is a restyle with no copy in it and
   Alie's doc is not in play.

   [!] THE MARKUP IS STILL A REAL <table>, AND THAT WAS ASKED. The artboard
   draws a <ul> of <li>. Brees chose (9/9) to keep the table and restyle it:
   the artboard is a VISUAL spec, the two sides of a comparison are still a
   comparison, and <th scope="row"> is what pairs them for a screen reader.
   One wrapper was added - `.si-cmp__a` - so the question and its qualifier
   can share one grid cell beside the dot. Nothing else moved.

   [!] display:block IS PROMOTED FROM <=759px TO ALL WIDTHS. The rows have to
   be grid containers to take the artboard's 0.8fr/1.2fr, and a <tr> cannot be.
   This is the SAME promotion the header-row clip already got on 9/8, for the
   same reason and with the same safeguard: display:block strips a table's
   implicit semantics, and the explicit role= attributes on every element are
   what restore them. They were written for the stacked layout and are now
   load-bearing everywhere. [!] Do not strip them as redundant.
   [i] A side effect worth knowing: smart-intake.css still carries a note
   saying the reveal is on the TABLE and not per row, "because a transform on a
   <tr> renders three different ways". The rows are no longer table-rows, so
   that reason has expired - the per-row stagger already in the markup is safe.

   [x] WHAT THIS RETIRES: the per-row gold bar, and with it the OLIVE #918326
   compromise. That deepening existed only because raw --sl-gold on a light
   ground is 1.57:1 and the bar was informational. The dot sits on WHITE inside
   the card and is a pseudo-element - decoration, not in the accessibility tree
   at all - so the 3:1 boundary floor does not apply and brand gold is gold
   again. [i] An override should die with the thing it was written for.
   ========================================================================== */

/* 🔴 WHITE GROUND — BREES, 9/11: "change it from gray to white."

   ⏹ IT WAS --sl-offwhite (#F4F2F0) AND THE PROBLEM WAS MEASURABLE, not a
   preference. The white cards lifted off it by a luminance step of only 0.110,
   which is barely a lift at all — and lifting the Spotlight column off the
   page is this section's entire argument.

   🟢 IT ALSO FIXES THE FLATTEST JOIN ON THE PAGE. Section 3 is cream (L .791)
   and this was off-white (L .890): a step of 0.099, the smallest of the eight
   and close enough to read as the same tone twice. White makes it 0.209, which
   is exactly the white->cream step earlier in the page.
   ⚠️ AND IT COSTS NOTHING ON THE WAY OUT. The cream coda band sits at this
   section's bottom edge and is what .si-shines' blue actually meets, so the
   ground's own step to blue was never the transition anyone sees. */
.page-si .si-compare {
  background-color: var(--white);
  /* [!] ZERO, BECAUSE THE CODA BAND OWNS THIS EDGE. The band is full-bleed
     and runs to the section's box edge; any bottom padding here would paint a
     strip of off-white UNDER the cream - a seam of the wrong colour between
     the band and the blue section pulling up over it.
     [i] The corner payment is not lost, it MOVES: section-corners.css leaves
     .si-compare out of its pad-out group and puts one --corner on
     .si-compare__coda-inner instead, so the pets stand on the visible edge.
     corner-check asserts both halves of that (PAY_ON_COLUMNS), so this cannot
     quietly become "pad-out forgotten". */
  /* [x] 9/14: the `padding-bottom: 0` that sat here is REMOVED. It existed only
     because the coda band owned this edge, and the band is gone (the closing
     sentence is the table's seventh row - smart-intake-flow.css). The section's
     own padding is back to the shared .section value, and section-corners.css
     adds the corner on top, which is the shape corner-check asserts. */
  /* The artboard's two vertical gaps - list from head, coda from list - are
     the same 52px. Declared once so they cannot drift apart. */
  --si-cmp-gap: 52px;
}

/* ---- the two-column intro ----------------------------------------------- */

.page-si .si-compare__intro { display: grid; gap: var(--s-3); }

@media (min-width: 900px) {
  /* 1.15fr / 0.85fr with the two columns aligned at the BOTTOM, which is what
     lands the short lead on the headline's last line rather than floating it
     beside the middle. `align-items: end`, from the artboard. */
  .page-si .si-compare__intro {
    grid-template-columns: 1.15fr 0.85fr;
    gap: calc(var(--s-2) * 3);
    align-items: end;
  }
}

.page-si .si-compare__head {
  font-family: var(--sl-font-head);
  /* charcoal on off-white, 14.60:1 */
  color: var(--sl-charcoal);
}

.page-si .si-compare__lead {
  font-family: var(--sl-font-body);
  /* 75% charcoal on off-white, measured 6.71:1 */
  color: color-mix(in srgb, var(--sl-charcoal) 75%, var(--sl-offwhite));
}

/* ---- the header row, clipped ---------------------------------------------
   [!] CLIPPED AT EVERY WIDTH, NEVER display:none. The artboard shows no header
   row - the lead paragraph names the two sides in prose instead. But the
   column names are what tell a screen reader which side a cell belongs to, and
   display:none would remove them from the accessibility tree entirely.
   [!] Do not "simplify" it. And both halves of the pair need a valid colour:
   contrast-run measures a clipped cell even though nobody can see it, and it
   is right to - the element is still rendered. */
.page-si .si-cmp__col {
  color: var(--sl-charcoal);
  background-color: transparent;
}

.page-si .si-cmp thead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the rows ----------------------------------------------------------- */

.page-si .si-cmp,
.page-si .si-cmp tbody { display: block; }

.page-si .si-cmp { margin-top: var(--si-cmp-gap); }

.page-si .si-cmp__row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--s-4);
  align-items: center;
  padding-block: 22px;
  /* The rule is a DIVIDER, not a boundary that identifies anything, so the
     3:1 non-text floor does not apply - it measures 1.37:1 and is meant to.
     It sits on TOP of every row including the first, which is what draws the
     line immediately under the intro. */
  border-top: 1px solid color-mix(in srgb, var(--sl-charcoal) 16%, var(--sl-offwhite));
}

/* [!] THE LEFT LABEL FAILED AA IN THE ARTBOARD AND WAS RAISED, NOT COPIED.
   The artboard sets it at 62% charcoal - measured on #F4F2F0 that is 4.46:1,
   and 14px/700 is NOT WCAG "large text" (that needs 18.66px at bold), so it
   owes 4.5:1 and misses by 0.04. Raised to 65%, which is 4.87:1 AND is the
   value this section's labels already carried, so nothing new is invented. */
/* ============ THE COMPARISON AS TWO CARDS (review note 987610) ============
   Was a six-row table at 1,014px. Same idiom as the SEO costs cards and the Websites costs cards: hairline
   border, no elevation, a small uppercase label, then the list.
   🔴 The gold dot stays on the Spotlight items — it was `.si-cmp__ours::before` on the old cell and it is what
   marks these as the real questions rather than field names. The other card has no marker on purpose: that
   column is a list of what standard forms DON'T ask, and a tick or a dot would read as a feature list.
   Contrast: ink on white 13.3 · the muted label 4.87:1 (the 65% charcoal this section already used). */
.page-si .si-cc {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}
/* The Spotlight card takes the room, because it carries real sentences and the other carries field names.
   📌 This is also the 70/30 split Brees asked for as a column width before the section was rebuilt — it works
   here, where these are grid tracks, and did not on the table, where `.si-cmp__ours` was `display: grid` and a
   percentage on the cell no longer resolved against the table. */
@media (min-width: 900px) { .page-si .si-cc { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } }
.page-si .si-cc__card {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid rgb(47 47 53 / 0.14);
  border-radius: var(--r-card);
  background-color: var(--white);
}
.page-si .si-cc__label {
  margin: 0 0 var(--s-3);
  font-family: var(--sl-font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sl-charcoal) 65%, var(--white));
}
.page-si .si-cc__list { margin: 0; padding: 0; list-style: none; }
.page-si .si-cc__item { margin: 0 0 var(--s-2); line-height: 1.4; }
.page-si .si-cc__item:last-child { margin-bottom: 0; }
.page-si .si-cc__card--ours .si-cc__item {
  position: relative;
  padding-left: 22px;
  font-family: var(--sl-font-head);
  font-size: 1.0625rem;
  color: var(--ink);
}
/* the dot, carried over from the old cell — optical 8px, sitting on the first line's x-height */
.page-si .si-cc__card--ours .si-cc__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background-color: var(--sl-gold);
}
.page-si .si-cc__note { display: block; margin-top: 2px; font-family: var(--sl-font-body); font-size: var(--fs-small); color: color-mix(in srgb, var(--sl-charcoal) 70%, var(--white)); }
.page-si .si-cc__card--other .si-cc__item { font-family: var(--sl-font-body); font-size: var(--fs-small); color: color-mix(in srgb, var(--sl-charcoal) 72%, var(--white)); }

.page-si .si-cmp__other {
  width: auto;
  padding: 0;
  border-bottom: 0;
  font-family: var(--sl-font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sl-charcoal) 65%, var(--sl-offwhite));
}

/* [~] THE CARD'S EDGE IS 1.12:1 AGAINST THE GROUND, AND THAT IS THE DESIGN.
   White on off-white is a whisper, and the artboard is named for that edge -
   the crispness comes from the flat fill and the radius, not from contrast.
   A decorative container owes no ratio. Surfaced because this project measures
   boundaries rather than trusting them; not raised, because raising it would
   be building a different artboard. */
.page-si .si-cmp__ours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  /* Half the house card radius - these are small inline cards, not panels. */
  border-radius: calc(var(--r-card) / 2);
  /* smart-intake.css draws per-cell hairlines and a --sky-soft field on this
     cell. Both are the pre-card device and both have to be cleared explicitly,
     or the card carries a stray rule along its bottom edge. */
  border-left: 0;
  border-bottom: 0;
  padding: 22px 28px;
  /* 🔴 A TINT OF THE SPOTLIGHT BLUE, NOT WHITE AND NOT CREAM — BREES, 9/11,
     choosing between them with the three rendered side by side.

     ⏹ WHITE STOPPED WORKING THE MOMENT THE GROUND WENT WHITE: same colour,
     zero lift, and the card would have needed an outline or a shadow to exist
     at all — which is the house no-boxes rule.
     ⏹ CREAM WAS THE OTHER CANDIDATE AND HAS THE BIGGER LIFT (0.209 against
     this one's 0.182). It was declined on rhythm: the cards sit directly above
     the CREAM coda in this same section, under a section 3 that is entirely
     cream. Three cream zones in a row.

     🟢 WHY BLUE EARNS IT: it is Spotlight's own colour, so the column that
     carries Spotlight's questions is literally Spotlight-coloured — the
     argument rather than decoration. It previews .si-shines, the blue section
     immediately after, so the page steps into that ground instead of jumping
     to it. And it is a TINT of --sl-blue, so nothing new enters the palette.
     📌 It is also a return rather than an invention: this column ran as a pale
     --sky-soft field before the 4A artboard replaced it with white cards.

     [i] Contrast on this fill: the question 13.47:1, the muted note 5.30:1.
     ⚠️ Mixed toward --white rather than a hardcoded hex so it tracks the token
     if the blue is ever retuned. */
  background-color: color-mix(in srgb, var(--sl-blue) 28%, var(--white));
  color: var(--sl-charcoal);
}

/* The gold dot. A pseudo-element on purpose: it carries no meaning the row
   does not already state, so it should not be in the accessibility tree.
   The 11px offset is optical - it lands the dot on the x-height of the
   question's first line rather than on the top of its box. */
.page-si .si-cmp__ours::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  margin-top: 11px;
  background-color: var(--sl-gold);
}

.page-si .si-cmp__a { display: block; }

/* The question, on white: 16.30:1. */
.page-si .si-cmp__q {
  font-family: var(--sl-font-head);
  font-weight: 600;
  line-height: 1.4;
}

/* Alie's qualifier sits outside her quote marks, so it is set outside them:
   72% charcoal on WHITE - 6.42:1, measured on the card, not on the ground. */
.page-si .si-cmp__note {
  font-family: var(--sl-font-body);
  color: color-mix(in srgb, var(--sl-charcoal) 72%, var(--white));
}

/* [!] ONE BREAKPOINT FOR THE SECTION, NOT TWO. The artboard collapses head and
   rows together at 960px; the intro here has always turned at 900. Matched to
   900 so both halves of the section fold on the same line - if it moves, both
   move. Specificity is deliberately (0,3,0): smart-intake.css sets the
   pre-card stacked layout at (0,2,0) and loads AFTER this sheet, so a tie
   would go to it. */
@media (max-width: 899px) {
  .page-si .si-cmp .si-cmp__row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    align-items: start;
  }

  .page-si .si-cmp .si-cmp__ours,
  .page-si .si-cmp .si-cmp__row:last-child .si-cmp__ours {
    padding: 22px 24px;
    border-bottom: 0;
    border-radius: calc(var(--r-card) / 2);
  }

  /* [x] THE PER-ROW MINI LABELS ARE RETIRED, AND THEY TOOK A LAYOUT BUG WITH
     THEM. smart-intake.css shows them below 759px - "Other Intake Forms" over
     each label, "The Spotlight Experience" inside each card - because the
     stacked layout used to lose the header row that named the two columns.

     That header row has been clipped at EVERY width since 9/8, and the lead
     paragraph names both sides in prose instead. So the minis had become the
     only place those names appeared on screen anywhere on the page, on phones
     only: twelve shouted labels restating two column names that no sighted
     reader ever sees at any other width. The artboard has no equivalent.

     [i] IT COSTS NOTHING FOR ACCESSIBILITY. They are aria-hidden="true" - they
     were always decoration for sighted phone readers, and the real <th
     scope> elements carry the relationship for anyone using AT.

     [!] AND THEY WERE BREAKING THE CARD. Spanning both grid columns pushed the
     mini onto its own row, which stranded the gold dot alone in row 1 with the
     question two rows below it - a loose dot floating above the card's text.
     Removing them puts the dot back beside the question, which is the only
     place it means anything. */
  .page-si .si-cmp .si-cmp__mini { display: none; }
}

/* ---- the coda - the closing line on a cream band, flanked by the pets -----

   [NEW] DEVICE, FROM THE ARTBOARD. The closing sentence stops being a lead
   paragraph on the ground and becomes the section's foot: a full-bleed
   --sl-cream band with the cat on the left and the dog on the right, standing
   on the visible bottom edge.

   [OK] IT ALSO SOFTENS THE LAST CLIFF. The 9/8 rhythm pass left one big step,
   off-white .890 into blue .457 - 0.433. Cream .791 sits between them, so the
   section now exits at 0.334 instead. Measured, not assumed.

   [!] CREAM NOW APPEARS TWICE ON THE PAGE - section 3's ground and this band.
   Brees confirmed (9/9). It reads as an echo rather than a repeat because it
   is a foot and not a ground, and the whole comparison separates the two.

   [!] corner-check STILL PASSES AND THAT IS NOT LUCK. Its notch assertion is
   ownership-based - `prev.contains(hit)` - not colour-based, and the band is a
   CHILD of .si-compare. So .si-shines' corner now legitimately reveals cream,
   the same way .pricing's corner legitimately reveals a panel inside .proof.
   [!] Do not "fix" the check by pointing prev at the band. */

/* 🔴 GOLD WITH A ROUNDED TOP — BREES, 9/11: "I guess we need rounded corners
   because it's just a straight line. I don't know if maybe this would look
   better as the dark gold versus this light color." Both, having seen cream
   square, cream rounded and gold rounded side by side.

   ⏹ IT WAS CREAM AND SQUARE. The cream was chosen on 9/9 as a quiet foot to
   the comparison; against the off-white above it the top edge read as a hard
   horizontal rule rather than as the edge of a thing. Gold gives the band a
   ground of its own and the two pets bookending the sentence finally have
   something to sit against.

   ⚠️ ONLY THE TOP CORNERS. The bottom edge stays square because .si-shines
   pulls up over it by --corner; rounding the bottom would put two arcs in the
   same 80px strip, and the lower one is not visible anyway.
   ⚠️ SAME --corner AS EVERY OTHER SECTION, not a new radius. This band now
   reads as part of the corner system rather than as a one-off shape.

   [!] corner-check STILL PASSES AND THAT IS STILL NOT LUCK — re-run after this
   change, 3079/0. Its notch assertion is ownership-based (`prev.contains(hit)`)
   and the band is a CHILD of .si-compare, so .si-shines' corner now reveals
   GOLD rather than cream and the check does not care.
   [!] Do not "fix" that check by pointing prev at the band.
   [i] Contrast re-measured on the new ground: the closing sentence is full
   charcoal, 8.29:1 on gold (it was 12.94:1 on cream). Still well clear of AA,
   and it is body copy at 20px so the floor is 4.5. */
.page-si .si-compare__coda {
  margin-top: var(--si-cmp-gap);
  /* ⏹ CREAM, NOT GOLD — BREES, 9/11, reversing the colour half of his own
     earlier call. He asked to see gold and rounded together, took both, then
     asked for "light yellow, not gold". THE ROUNDING STAYS: that was the other
     half of the request ("we need rounded corners because it's just a straight
     line") and he has not withdrawn it. Only the ground went back. */
  background-color: var(--sl-cream);
  border-radius: var(--corner) var(--corner) 0 0;
}

.page-si .si-compare__coda-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  /* No bottom padding: the pets stand on the band's edge, as drawn. The
     corner payment is added in section-corners.css, which owns it. */
  padding-bottom: 0;
}

.page-si .si-compare__close {
  margin: 0 0 var(--s-4);
  max-width: 46ch;
  font-family: var(--sl-font-head);
  font-weight: 600;
  /* 26px at the top end, the artboard's figure, made fluid rather than fixed
     so it tracks the rest of the page instead of being right at one width. */
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  /* charcoal on --sl-cream, measured 13.06:1 */
  color: var(--sl-charcoal);
}

/* [!] NEVER UPSCALED. Native widths are 221px (cat) and 283px (dog); the
   artboard draws them at 130 and 180, so every value here is a DOWNSCALE.
   Same rule the hero's screen frame and section 5's screenshots record -
   downscaling is free, upscaling advertises itself. */
.page-si .si-compare__pet {
  flex: none;
  height: auto;
  align-self: flex-end;
}

.page-si .si-compare__pet--cat { width: clamp(84px, 9vw, 130px); }
.page-si .si-compare__pet--dog { width: clamp(116px, 12.5vw, 180px); }

@media (max-width: 719px) {
  /* Below this the sentence has no room between two animals. It moves above
     them and they keep the band's edge, still facing in. */
  .page-si .si-compare__coda-inner { flex-wrap: wrap; }

  .page-si .si-compare__close {
    order: -1;
    flex: 1 0 100%;
    margin-bottom: var(--s-3);
  }
}


/* ==========================================================================
   9. WHERE SPOTLIGHT SHINES — two arch-topped cards on Spotlight blue

   Brees, 9/8. The section goes from --sky-soft with two bare prose blocks and
   a hairline between them to the brand's blue carrying two white cards, each
   with a cream panel holding a mock of the product.

   🟢 THE ARCH, A THIRD TIME. The hero is one big arch, the stat cards were the
   same shape shrunk, and these two cards top out the same way. That is what
   ties three unrelated sections into one page rather than three treatments.
   ========================================================================== */

.page-si .si-shines {
  background-color: var(--sl-blue);
}

/* charcoal on --sl-blue, measured 7.87:1 */
.page-si .si-shines__title {
  font-family: var(--sl-font-head);
  color: var(--sl-charcoal);
}

/* ⏹ THE DE DOTS ARE GONE. `.si-shines__dot--well/--sick` were --lime and
   --petal, two Google Ads palette colours that had no business on a Spotlight
   page; the artboard has no dot at all. The elements are removed from the
   markup, and this clears the rules in case one is ever put back. */
.page-si .si-shines__dot { display: none; }

/* 🔴 THE STACK'S VARIABLES MUST BE DECLARED HERE — THE SHARED SHEET SAYS THE
   OPPOSITE, AND THAT COST A DEBUGGING PASS THE FIRST TIME THIS WAS BUILT.

   direction-d-v3.css declares --stack-who / --stack-tab / --stack-n on
   `.deliverable`, a CALL INSIGHTS section, with a note claiming it is safe
   because no other page loading the file has a `.stack`. This page does. The
   three never inherit, so

       top: calc(--dl-head-top + --dl-head-h + --dl-head-gap + (--i * --stack-tab))

   contains an undefined term, the WHOLE declaration is invalid, `top` computes
   to **auto**, and `position: sticky` does nothing whatsoever. No error, no
   warning, and the page looks perfectly fine standing still.
   📌 Caught by reading computed `top`, not by looking at it.

   ⚠️ --stack-n IS 2 HERE, NOT Call Insights' 3. It drives the margin maths that
   makes the cards leave together; a wrong count reserves a tab for a card that
   does not exist. */
.page-si .si-shines {
  --stack-who: calc(var(--fs-small) * 1.65);
  /* [!] THE TAB IS PADDING + HEADING + THE SAME PADDING - BREES, 9/9:
     "under Wellness Visits it doesn't have a lot of breathing room... The
     padding on the top of Wellness Visits should also be the same as the
     padding on the bottom."
     It used to end in a bare `+ 4px`, and that 4px WAS the entire space under
     the heading, against --s-3 (24px) of card padding above it. Measured in
     the pinned state: 25px above, 18px below. Now the trailing term is --s-3
     as well, so the strip is symmetrical by construction rather than by a
     number that happened to look close.
     [i] DERIVED, NOT PICKED: --stack-who is the heading's own line box, so the
     tab is exactly "card padding, heading, card padding" and it tracks the
     type scale instead of being right at one size. */
  /* [!] THE MIDDLE TERM IS THIS PAGE'S HEADING, NOT CALL INSIGHTS' LABEL.
     --stack-who is `--fs-small * 1.65`, which is 24.75px - the line box of the
     small "who" label the Call Insights deck shows in its tab. THIS deck shows
     an h3, and `.t-h3` renders at --fs-h3 over line-height 1.25, which is 30px
     at 1440. Building the tab from --stack-who therefore under-counted the
     heading by 5.25px, and the whole deficit came out of the space BELOW it:
     measured 25px above against 17.8px below, even after the trailing term was
     made symmetric.
     [i] Two symmetric --s-3 terms around the heading's OWN line box, so the
     strip is "card padding, heading, card padding" by construction and tracks
     the --fs-h3 clamp down to 1024 rather than being right at one width.
     [!] The 1.25 is `.t-h3`'s line-height, which base-v3.css writes as a
     literal rather than a token - if that ever becomes --lh-h3, this follows. */
  --stack-tab: calc(var(--s-3) + var(--fs-h3) * 1.25 + var(--s-3) + 2px);
  /* [!] THE +2px IS THE TWO CARD BORDERS, AND IT IS THE LAST 2px OF THE
     ASYMMETRY. The tab is measured between the cards' OUTER top edges, and
     each card carries the 1px hairline added on 9/8 to separate the two tabs.
     So the space above the heading is border + padding = 25px while the
     formula only counted the 24px padding, and the 1px came out of the bottom.
     Counting both borders makes the strip 25 / 30 / 25 instead of 25 / 30 / 23.
     [i] Not a fudge factor: remove the hairline and this term goes with it. */
  --stack-n: 2;

  /* 🔴 --dl-head-h IS WHAT KEEPS THE CARDS CLEAR OF THE PINNED TITLE, AND ON
     THIS PAGE NOTHING PUBLISHES IT. The cards pin at
         --dl-head-top + --dl-head-h + --dl-head-gap + (--i * --stack-tab)
     and direction-d-v3.js sets --dl-head-h by measuring
     `.deliverable__headline` — a CALL INSIGHTS element. On this page that
     query returns null, so the variable stayed at its `0px` fallback and any
     sticky title here would have been pinned straight through by card 1.

     Declared from the title's own type metrics instead of a hardcoded pixel
     count, so it tracks the --fs-h2 clamp instead of being right at one width.
     The +2*--s-2 is the padding band added below. */
  --dl-head-h: calc(var(--fs-h2) * var(--lh-display) + 2 * var(--s-2));
}


/* ⏹ THE ARCH IS OFF THESE CARDS. They were the house `.arch` — 999px top
   corners, a true semicircle — with a 26% dome clearance derived for it. A
   stack card is a plain --r-card rectangle, so the shape, the dome padding and
   the clearance all come off together.

   🔴 THE CARD MUST STAY OPAQUE. The stack has no drop shadow by decision (the
   8/13 "1990 look" note) and separates purely by ground and offset — a
   translucent card would let the one underneath show through and the whole
   thing would read as a rendering fault. White on the blue does that. */
.page-si .si-shines__panel {
  /* The shared rule caps this at 46ch, which was right for a bare prose column
     and wrong for a card that spans the container. */
  max-width: none;
  background-color: #ffffff;
}

/* ⏹ THE TITLE IS RANGED LEFT AGAIN. Brees asked for it centred on 9/8, and
   that was right for the arch card, where a centred title sat under the dome's
   apex. In the stack the copy lives in a narrow left column beside the image,
   and a centred heading over a left-ranged paragraph in a 4fr column reads as
   a mistake. Flagged to him rather than assumed. */

/* THE SECOND CARD WAS CARRYING 96px OF EXTRA LEFT PADDING AND A BORDER, AND
   IT HAD BEEN DOING SO SINCE THE CARDS LANDED. Brees, 9/8: "the padding is the
   same in both of them."

   smart-intake.css still draws the section's ORIGINAL device - a hairline
   between two prose columns - as
       .si-shines__panel + .si-shines__panel { padding-left: --s-6;
                                               border-left: 1px solid --ink-12 }
   and, stacked, a matching padding-top + border-top. That device was retired
   when these became cards; the DOTS were removed with it and this was not.
   Measured: card 1 `80px 40px 40px`, card 2 `80px 40px 40px 96px`.

   [!] IT NEEDED MEASURING, NOT LOOKING. --ink-12 on white is a near-invisible
   hairline, and a 96px inset just reads as "the second card's text starts
   further in" - I saw exactly that in a screenshot earlier and talked myself
   out of it. getComputedStyle said otherwise.

   [!] AND THE PADDING HAS TO BE RESTORED, NOT JUST UNSET. `.arch` sets padding
   as a SHORTHAND (0,1,0); the sibling rule sets the LONGHANDS at (0,2,0) and
   wins. So this re-states the arch's own values at (0,3,0) rather than trying
   to remove the override. */
@media (min-width: 900px) {
  .page-si .si-shines__panel + .si-shines__panel {
    padding-left: var(--s-4);
    border-left: 0;
  }
}

@media (max-width: 899px) {
  .page-si .si-shines__panel + .si-shines__panel {
    padding-top: var(--s-3);
    border-top: 0;
  }
}

/* 9/10 type rule, in the sub-brand's own faces. See base-v3.css .t-h3 and
   the note at .page-si .si-how .gstep__label. */
.page-si .si-shines__head {
  margin: 0;
  font-family: var(--sl-font-body);
  /* 16.30:1 on white */
  color: var(--sl-charcoal);
}

.page-si .si-shines__body {
  font-family: var(--sl-font-body);
  /* 78% charcoal on white, 7.6:1 — the page's one body grey */
  color: color-mix(in srgb, var(--sl-charcoal) 78%, #ffffff);
}

/* ---- the mock panel ------------------------------------------------------
   🔴 `margin-top: auto` IS DOING REAL WORK. The two bodies are different
   lengths (three lines against six), so without it the two mocks sat at
   different heights and the pair read as unaligned. Pushed to the bottom of a
   flex column they share a baseline, which is how the artboard has them. */
/* ⏹ `margin-top: auto` REMOVED. It bottom-aligned two mocks sitting in
   side-by-side columns of unequal copy length; in the stack each card is full
   width with the image BESIDE its copy, so there is nothing to align to. */
.page-si .sl-mock {
  position: relative;
  display: block;
  padding: var(--s-3);
  background-color: var(--sl-cream);
  border-radius: 14px;

  /* 🔴 NEVER UPSCALE THESE. They are 737px and 409px wide natively, and the
     stack's render column is ~630px at 1440 — so the sick-visit asset was
     being blown up 1.5x and going soft. `--nat` is each image's own intrinsic
     width, set in the markup, and the panel caps itself to it.
     📌 This project already recorded the same lesson on the hero's screen
     frame: "the type is already soft in the source and enlarging it would
     advertise the fact." Downscaling is free; upscaling is visible. */
  width: fit-content;
  max-width: min(100%, calc(var(--nat, 100%) + 2 * var(--s-3)));
  margin-inline: auto;
}

/* Spotlight's own asset, sized to the panel. `display: block` kills the inline
   baseline gap that would otherwise leave a strip of cream under it. */
.page-si .sl-shot {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 960px) {
  /* 🔴 THE IMAGE HAS TO CLEAR THE TAB STRIP, AND THE SHARED DEVICE ALREADY
     SOLVES THIS — for its own `.stack__render`, which ours is not. A pinned
     card shows only its top `--stack-tab` band above the card covering it, and
     that band is meant to carry the TITLE. Without this the image appeared in
     the strip too and the stacked state showed a slice of cream above the next
     card, which reads as a rendering fault rather than a deck.
     📌 Same value as `.stack__render` on purpose: the device's own answer. */
  /* [!] TIED TO --stack-tab, NOT TO --stack-who, BECAUSE THE TAB CAN MOVE AND
     ON 9/9 IT DID. This offset exists so the cream mock does not show inside
     the tab strip - the note above records that a slice of cream above the
     next card "reads as a rendering fault rather than a deck".
     It was `--stack-who + --s-2` = 40.75px, which cleared the OLD 52.75px
     strip. Making the tab symmetric grew it to 80px, and the mock immediately
     peeked through again by ~14px. The old value was not wrong, it was
     UNCOUPLED - it happened to clear a strip it did not reference.
     [i] Now it is the strip's own height minus the card's border and padding,
     i.e. exactly where the strip ends inside the content box. If the tab
     changes again, this follows it instead of quietly breaking. */
  .page-si .si-shines .sl-mock {
    margin-top: calc(var(--stack-tab) - var(--s-3) - 1px);
  }
}

/* 🔴 A PINNED CARD TALLER THAN ITS PIN HAS AN UNREADABLE BOTTOM, AND AT
   1536x700 BOTH OF THESE WERE.

   Measured in the state a user actually sees (i.e. after the scroll reveals
   have fired): card 1 was 569px against 546px of room below its 154px pin,
   card 2 501px against 493px. The bottom 23px and 8px could never be scrolled
   into view, because the pin does not release while the card is on screen.

   ⚠️ 1536x700 IS NOT AN EDGE CASE. Windows display scaling makes short
   viewports ordinary - 1080p at 125% is exactly 1536x700 - which is why the
   sweep tests two short ones.

   🔴 AND responsive-sweep's OWN sticky CHECK DID NOT CATCH IT. It measures at
   rest, and at rest these cards are 260px and 354px because the reveals have
   not run yet; the height that matters only exists after scrolling. Its `78`
   was a false pass for this check. Reported to Brees rather than patched here.

   Capping the image height is what buys the room: the artwork is the tallest
   thing in the card, and it is already downscaled, so a further cap costs
   nothing a reader needs. */
/* [!] 9/9: THE HEIGHT CONDITION IS GONE AND THE CAP IS TIGHTER, BECAUSE
   MAKING THE TAB SYMMETRICAL SPENT THE BUDGET THIS RULE WAS PROTECTING.
   The tab grew from 52.75px to 80px (equal air above and below the heading, as
   asked), which pushes card 2 down by 27px and takes 27px out of the room it
   pins into. The mock also moved down 14px to keep clear of the taller strip.
   Re-measured after both: card 2 was 517px against 516px at 1440x900 and
   1600x900 - over by ONE pixel, and one pixel of a pinned card is still
   permanently unreachable.
   `max-height: 820px` meant this rule did not apply at 900px tall at all, so
   the artwork ran at its natural 364px there. Dropping the condition and
   moving 42vh -> 40vh caps it to 360px at 900 (card 513 against 516, 3px of
   margin) and is a NO-OP above ~910px tall, where the natural height is
   already smaller than the cap.
   [i] Still only ever shrinks: the image is downscaled from 409x364 native,
   never enlarged. */
@media (min-width: 960px) {
  .page-si .si-shines .sl-shot {
    max-height: 40vh;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   THE SECTION TITLE — centred, and pinned above the deck.

   Brees, 9/8: "that section title should be centered in the container and also
   be sticky. You should be able to visibly see it."

   The reference does exactly this: `.deliverable__headline` is centred and
   sticky at --dl-head-top, and the stack's own offsets already reserve
   --dl-head-h + --dl-head-gap beneath it. So the title needs no new geometry —
   only the variable above, which this page was not publishing.

   ⚠️ THE BACKGROUND IS NOT DECORATION. It is invisible (blue on blue) and it
   is there to MASK: when the stack's containing block finally runs out and the
   cards travel up with it, they would otherwise slide across the pinned title.
   z-index 3 puts the title over them; the opaque band stops the type from
   colliding with card content mid-scroll.

   ⏹ Sticky only from 960px, where the stack pins at all. Below that the shared
   sheet sets `.stack__card { position: static }`, so there is no deck to sit
   above and a pinned title would just eat a phone's screen.
   -------------------------------------------------------------------------- */
.page-si .si-shines__title {
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 960px) {
  .page-si .si-shines__title {
    position: sticky;
    top: var(--dl-head-top);
    z-index: 3;
    padding-block: var(--s-2);
    background-color: var(--sl-blue);
  }

  /* [!] THE 40px STRIP BETWEEN THE HEADER AND THE TITLE HAD TO BE MASKED TOO,
     AND THAT STRIP IS NOT A MISTAKE - IT IS LITERALLY IN THE TOKEN.
     `--dl-head-top: calc(var(--hdr-h-min) + 40px)`, so the pinned title always
     sits 40px below the sticky header's bottom edge. A card that has RELEASED
     (its containing block ended) scrolls up out of the deck, passes behind the
     title - which the title's own band hides - and then REAPPEARS in that 40px
     gap above it.
     Brees, 9/9: "Where Spotlight Shines overlaps so it doesn't stay sticky. It
     has the content scrolling behind it." The title was sticky the whole time;
     what he was seeing is a paragraph sliced in half, with its top showing
     through the strip and its middle covered by the band.
     Measured: header bottom 129, title top 169, gap 40.

     [i] THE HEIGHT IS THE TOKEN DIFFERENCE, NOT 40px TYPED AGAIN. If either
     the header height or that offset ever moves, the mask moves with them.
     [i] left/right 0 spans the container, which is as wide as the cards - so
     it covers everything it needs to without a 100vw that would risk the
     scrollbar overflow this project has already been bitten by. */
  .page-si .si-shines__title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--dl-head-top) - var(--hdr-h-min));
    background-color: var(--sl-blue);
  }
}

/* 🔴 THE TITLE STAYS PINNED ON SHORT VIEWPORTS TOO — REVERSED 9/11, BREES.

   ⏹ IT USED TO LET GO BELOW 860px TALL, matching the shared sheet's condition.
   That is gone. He reported it directly: "the 'Where Spotlight Shines' title
   isn't sticky anymore."

   🔴 IT WAS NEVER A REGRESSION, AND THAT IS THE POINT OF THIS NOTE. Measured
   when he asked: spotlight.css was byte-identical to its last commit and the
   unpin predated that session (334de64). What had actually happened is that
   the effect is INVISIBLE ON THE MOST COMMON DESKTOP THERE IS — maximized
   Chrome on a 1080p screen is 855px of viewport, four pixels under the
   breakpoint. A feature gated at 860 is a feature almost nobody sees.

   ⚠️ THE SHARED SHEET'S CARD OFFSET HAS TO BE REVERSED WITH IT, BELOW. That is
   the whole reason the unpin existed: direction-d-v3.css's own
   `@media (max-height: 859px)` block drops the two head terms from
   `.stack__card`'s `top`, so the cards pin at the header — exactly where the
   title pins. Unpinning the title was the cheap way out of that collision.
   Pinning it again without the card fix puts a card straight over it, which
   was measured at 1536x700 the first time round.

   ⏹ WHAT THIS COSTS, SO IT IS NOT REDISCOVERED AS A BUG: 118px of render
   height on every card below 860px tall. The shared note calls that out as the
   thing being bought — "+118px of render on every card". Brees chose the title
   over the render on 9/11, having chosen the other way on 9/9; both were
   deliberate and the second was made with the number in front of him.

   🔴 BUT THE REVERSAL IS BANDED, NOT TOTAL — AND THE GATE IS WHY.
   Reversing it at EVERY height cost 40px of card at 1536x700: the sweep caught
   `sticky-taller-than-its-pin — card is 356px tall pinned at top:384, only
   316px of viewport below it`. Pinning the cards below the title puts them
   135px lower, and on a genuinely short viewport the bottom of the card falls
   past the fold where nothing can reach it. That is the +118px of render the
   9/9 trade was buying, showing up as unreachable content.

   ⏹ 760px, FROM MEASUREMENT, NOT TASTE. The tallest card pins at 384 and is
   356 tall, so it needs 740px of viewport — measured identically at 1536 and
   1920 wide:

       700  spare -40  UNREACHABLE      780  spare  +40  ok
       720  spare -20  UNREACHABLE      800  spare  +60  ok
       740  spare   0  ok (exactly)     855  spare +115  ok  <- Brees
       760  spare +20  ok               <- the breakpoint, 20px of slack

   So above 760 the title pins and the cards sit under it; below 760 the shared
   sheet's short-viewport behaviour stands untouched and nothing is cut off.
   ⚠️ Do not "simplify" this to a single condition. The old 859 and this 760 are
   answers to two DIFFERENT questions — 859 is where the shared deck changes
   its pin, 760 is where a pinned card stops fitting on screen. They are not
   the same number and must not be collapsed into one.

   📌 The reduced-motion unpin below is UNTOUCHED and still correct — a band
   that holds position is motion the user asked not to have. Height and motion
   preference are different questions; only the height one was reversed. */
@media (max-height: 759px) {
  .page-si .si-shines__title {
    position: relative;
    top: auto;
  }
}

/* The shared sheet unpins its headline under reduced motion too. Same reason:
   a band that holds position is motion the user asked not to have. */
@media (prefers-reduced-motion: reduce) {
  .page-si .si-shines__title {
    position: relative;
    top: auto;
  }
}

/* --------------------------------------------------------------------------
   THE CARD EDGE — a hairline so the stacked tabs read as separate cards.

   Brees, 9/8: "a very very thin blue border over the card so that way you can
   tell the difference between the two different tabs."

   🔴 IT IS A DEEPENED BLUE, NOT --sl-blue, AND THAT IS A CONTRAST DECISION
   RATHER THAN A TASTE ONE. Measured: raw --sl-blue #75BEDB on the white card is
   **2.07:1**, under the 3:1 floor for a boundary — and this boundary is exactly
   the kind the rule is written for, because telling the two cards apart is its
   entire job. 70% blue against charcoal is #5C8EA3 at **3.59:1** on white,
   still unmistakably blue.
   ⚠️ Surfaced to Brees rather than silently swapped: the brand blue itself
   could not do this job at 1px.
   -------------------------------------------------------------------------- */
.page-si .si-shines__panel {
  border: 1px solid color-mix(in srgb, var(--sl-blue) 70%, var(--sl-charcoal));
}


/* ==========================================================================
   10. THE SPOTLIGHT EFFECT - Alie's three stats, in the Call Insights shape

   Brees, 9/9: "match the same as the Call Insights section 5, where it says
   '3 calls almost lost'... It should stay in the spotlight colors though. For
   the icons let's use what we used in section 3: the black circles with gold
   numbers."

   So: .recovered's LAYOUT (a copy column beside a stack of numbered cards),
   this page's PALETTE, and section 3's numeral discs.

   [!] CREAM, NOT OFF-WHITE, AND THAT IS A RHYTHM DECISION. Section 5 is blue
   (luminance .457). Off-white (.890) would step 0.433 - the exact cliff the
   9/8 pass spent the session removing between 4 and 5. Cream (.791) steps
   0.334. Cream also appears at section 3 and in section 4's coda, so this is
   its third outing; across a nine-section page that reads as the page's quiet
   ground returning, not as a repeat.
   [!] RE-DERIVE WHEN SECTION 6 LANDS. Integrations belongs BETWEEN 5 and this,
   and inserting a ground there changes both steps. The figure to beat is 0.334.

   [i] WHITE CARDS ON A LIGHT GROUND is now this page's own language, set by
   the 4A comparison. Reusing it here is deliberate rhyme, not a default.
   ========================================================================== */

/* 🔴 REBUILT 9/10 FROM BREES' SUPPLIED COMP — "i want to design the spotlight
   effect section to this" (Downloads/The Spotlight Effect.html).

   ⏹ WHAT THIS REPLACED, SO NOBODY RESTORES IT BY HALVES: the charcoal cards,
   the three coloured figures (gold/blue/cream), the cards-left/copy-right
   flip, the 120px figure column, and the beam anchored to the card list. All
   of that was ONE DAY OLD and all of it is gone. The gold ground and the beam
   asset are the only survivors.

   🟢 THE GROUND STAYS GOLD, AND THE BEAM IS STILL WHY. The asset is a cream
   cone (#F0E8AA) ending in an off-white pool (#F4F2F0); on a cream ground it
   is invisible — composited to check on 9/10, and that finding does not expire
   because the layout changed. The comp independently arrives at the same
   #DAC52A, which is --sl-gold exactly.

   🟢 THE COMP'S BEAM IS THE FILE WE ALREADY HAVE. Its PNG is 2564x2876 and
   compares to spotlight-beam.webp with ZERO alpha-differing pixels at matched
   scale. Same drawing. No new asset was sourced and none is needed.

   🔴 THE COMP'S GUTTER WAS NOT PORTED — BREES' CALL, ASKED NOT ASSUMED. It
   insets content by 5.81cqw (84px at 1440) against .container's 164px. Built
   literally, this section would jut visibly wider than its eight neighbours.
   He chose the container, so every comp value below is re-derived against the
   container's CONTENT box rather than against the section:

       comp content = 100 - 2(5.81) = 88.38cqw of the section width
       X cqw(comp)  ->  X * 100/88.38  =  X * 1.13148 cqw(container)

           stage height  43.55 -> 49.28      beam width  61.29 -> 69.35
           h2 top        29.19 -> 33.03      beam top   -29.42 -> -33.29
           h2 size        8.55 ->  9.67      beam left   -0.65 ->  -0.73
           lead size      1.77 ->  2.00      gap          3.23 ->  3.65
           figure size    4.19 ->  4.74      rule pad     2.74 ->  3.10
           label size     1.37 ->  1.55      label gap    0.80 ->  0.91

   ⚠️ EVERY NUMBER IN THIS SECTION IS ONE OF THOSE. If a value here is not in
   that table, it was invented — and it should not have been. */
.page-si .si-effect {
  position: relative;
  background-color: var(--sl-gold);

  /* 🔴 ZERO TOP PADDING, AND IT IS THE WHOLE DEVICE. The beam enters from
     ABOVE the section and is cut off by its top edge — that is what makes the
     light read as coming from somewhere off-frame rather than starting inside
     the box. `.section` sets padding-block, so the top half has to be undone
     here; the bottom half is left to section-corners.css, which owns it and
     loads last.
     ⚠️ Do not "restore" --section-pad at the top. It pushes the stage down,
     LESS of the cone is clipped, and the apex walks into frame. */
  padding-top: 0;

  /* 🔴 BOTH AXES, STILL. The cone is wider than the container AND it now rises
     33cqw above the stage. `clip`, never `hidden` — hidden makes a scroll
     container. */
  overflow: clip;
}

/* 🔴 THE CONTAINER IS THE QUERY CONTAINER, AND THAT IS THE WHOLE PORT.
   `container-type: inline-size` makes 1cqw resolve to 1% of THIS element's
   content box — 1112px at a 1440 viewport — so the comp's proportions scale
   with the column they live in instead of with the viewport. That is what
   lets Brees' "use .container" answer be a one-line change of basis rather
   than a redraw.
   📌 Container queries are already used on this project (renders-v3.css,
   site-renders.css). This is not a new dependency.
   ⚠️ .container is ALREADY position:relative with z-index 2, so the layout
   containment this switches on adds no new stacking context and no new
   containing block. Nothing else on the page changes. */
.page-si .si-effect__inner {
  container-type: inline-size;
}

/* The stage has NO CONTENT — it exists to give the beam and the headline one
   box to be positioned in, and its height IS the composition. That is why it
   is a cqw and not a content height: nothing inside it is in flow. */
.page-si .si-effect__stage {
  position: relative;
  height: 49.28cqw;
}

/* 🔴 THE BEAM IS A ::before, NOT AN <img> — UNCHANGED PRINCIPLE, NEW ANCHOR.

   It is pure decoration: it carries nothing the words do not say, so the best
   place for it is out of the DOM entirely. A background cannot be read,
   focused or landed on; the comp's <img> would need alt="" AND aria-hidden to
   reach the same place and would still be a node. The comp uses an <img>
   because a comp has no accessibility tree to protect.

   ⏹ IT IS ANCHORED TO THE STAGE NOW, NOT TO THE CARD LIST. The old rule
   centred it on the boxes because Brees had asked for the BOXES to look shined
   on. There are no boxes. It is centred on the composition instead, which is
   what the comp draws.

   ⏹ NO z-index, DELIBERATELY. The old build needed -1 to sit the cone behind
   the cards, and then needed the list to open a stacking context to stop that
   -1 falling through the section's own ground — two coupled rules, both
   load-bearing, both now unnecessary. The h2 is a positioned sibling LATER in
   the DOM, so it paints above this by document order alone. Do not add one
   back "for safety"; it re-opens the trap the old note describes.

   ⏹ NO filter AND NO gradient. Both are gated on this project. The comp's
   cream variant carries `filter: brightness(1.07) saturate(0.32)` — that line
   is deliberately NOT ported, and the default gold variant needs no filter.
   The asset arrives with its soft pool baked in, which is the entire reason to
   use the supplied artwork rather than draw the light. */
.page-si .si-effect__stage::before {
  content: "";
  position: absolute;
  top: -33.29cqw;
  left: -0.73cqw;
  width: 69.35cqw;
  /* The asset is 1200x1346 on disk (resized from the comp's 2564x2876 under
     the ≤1600px rule). Both reduce to 0.8915 — same drawing, same ratio. */
  aspect-ratio: 1200 / 1346;
  background-image: url("../img/spotlight/spotlight-beam.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  opacity: 0.95;
  pointer-events: none;
}

/* 🔴 THE HEADLINE SITS ON THE POOL, ABSOLUTELY, AND THAT IS THE COMP'S POINT.
   At 9.67cqw it is ~108px at a 1440 viewport — more than twice the page's
   normal h2 — and it lands across the beam's pool rather than above or below
   it. Taking it out of flow is what allows that overlap; the lead and the
   stats below are unaffected by its size.

   ⚠️ WEIGHT 500, NOT THE COMP'S 700. Brees' 9/10 type rule is "all H1s and H2s
   are All Round Gothic Medium", approved and rolled out to all five pages that
   same day. The comp is a standalone artboard that simply used Bold. The RULE
   wins; this is one token if he ever wants the comp's weight instead.
   📌 The FACE resolves through --sl-font-head (Co Headline) because this page
   carries Spotlight branding — the rule's shape, not its literal DE faces,
   which is what every other heading on this page already does.

   ⚠️ THE LETTER-SPACING *IS* THE COMP'S (-0.045em against the page's -0.02em),
   and that is not a rule conflict. It is optical tracking for type set at more
   than twice the page's normal h2; the page's -0.02em was chosen at 48px.

   🔴 `white-space: nowrap` IS ASSERTED, NOT INHERITED. The comp fits "The
   Spotlight Effect" on one line in All Round Gothic. This page renders it in
   CO HEADLINE — a different face with different metrics — so the fit had to be
   measured on this page rather than assumed from the comp. */
.page-si .si-effect__head {
  position: absolute;
  left: 0;
  top: 33.03cqw;
  margin: 0;
  font-family: var(--sl-font-head);
  font-weight: 500;
  font-size: 9.67cqw;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  /* charcoal on gold, measured 8.29:1 */
  color: var(--sl-charcoal);
}

/* --------------------------------------------------------------------------
   THE LEAD AND THE PET SHARE A ROW - BREES, 9/11

   Alie's sentence is capped at 46ch by the comp, so it occupies ~627 of the
   1112px content box and leaves ~485px open to its right. The pet goes there.

   [!] THIS SECTION ALREADY HAD A GRAPHIC ADDED AND REMOVED ON 9/10. Three
   placements were rendered then - under the copy, bleeding bottom-right, and
   entering from the top - and the two bled versions put the phone through the
   body copy and were rejected on sight. This one is beside the copy, in space
   the comp already leaves empty, and it touches neither the beam nor the
   headline nor the stats.
   -------------------------------------------------------------------------- */
.page-si .si-effect__mid {
  position: relative;
  margin-bottom: 3.85cqw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
}

.page-si .si-effect__pet {
  display: block;
  width: 100%;
  /* ⏹ 240, DOWN FROM 300 — Brees 9/11, "a little bit smaller". Sized to the
     gap the comp leaves, not to the image. */
  max-width: 240px;
  height: auto;
  /* [i] The lead carries the row's bottom margin (3.85cqw, from the comp's
     conversion table). The pet must not add a second one or the hairline
     below moves and the whole stats block drops. */
  margin: 0;
  flex: 0 0 auto;
}

/* [!] BELOW 900 THE PET GOES. Stacked, the lead already runs the full width
   and the pet would become a 300px block between the copy and the stats -
   scrolling, not composition. */
@media (max-width: 899px) {
  .page-si .si-effect__pet { display: none; }
  .page-si .si-effect__mid { display: block; }
}

.page-si .si-effect__sub {
  position: relative;
  /* The comp's own measure. Left in ch deliberately: it is the one value here
     that should track the FONT rather than the container. */
  max-width: 46ch;
  /* the margin moved to .si-effect__mid so the pet shares the row cleanly */
  margin: 0;
  font-family: var(--sl-font-body);
  font-size: clamp(16px, 2cqw, 22px);
  line-height: 1.5;
  text-wrap: pretty;
  /* ⚠️ MIXED AGAINST GOLD, NOT CREAM. A muted tier computed against the wrong
     backdrop is just a wrong colour. 78% charcoal on gold measures 5.65:1. */
  color: color-mix(in srgb, var(--sl-charcoal) 78%, var(--sl-gold));
}

/* Three columns under a hairline. The rule is the comp's own
   rgba(35,31,32,0.28) — charcoal at 28% on the gold, which reads as a hairline
   without becoming a border. */
.page-si .si-effect__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.65cqw;
  margin: 0;
  padding-top: 3.10cqw;
  border-top: 1px solid rgba(35, 31, 32, 0.28);
  list-style: none;
}

/* [!] ONE <p>, NOT TWO — THE COMP SPLITS THIS AND WE DO NOT.
   The comp writes each stat as two sibling <span>s. Here the figure stays a
   <span> INSIDE Alie's sentence, so "80% of pet owners complete Spotlight
   before the visit" is a single unbroken run of text for a screen reader.
   Making the figure display:block puts the label on its own line and produces
   the comp's exact appearance without splitting her sentence in the markup.
   ⚠️ Do not "tidy" this into two elements to match the comp. Its split is
   presentational; CSS already achieves it. */
.page-si .si-effect__line {
  margin: 0;
  font-family: var(--sl-font-body);
  font-size: clamp(14px, 1.55cqw, 17px);
  line-height: 1.45;
  text-wrap: pretty;
  /* full charcoal on gold, 8.29:1 — the comp sets label and figure to the same
     value, unlike the muted lead above */
  color: var(--sl-charcoal);
}

.page-si .si-effect__figure {
  display: block;
  margin-bottom: 0.91cqw;
  font-family: var(--sl-font-head);
  font-weight: 700;
  font-size: clamp(28px, 4.74cqw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sl-charcoal);
}

/* ⚠️ "5 to 12" MUST NOT BREAK ACROSS LINES. The comp's figure is "5-12", one
   token, so it could never wrap; Alie's wording is three tokens and Brees kept
   it (asked, 9/10). Without this the third column reads "5 to" / "12" over two
   lines and the three figures stop sharing a baseline. */
.page-si .si-effect__stats > :last-child .si-effect__figure {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   BELOW 900 THE COMP DOES NOT APPLY, AND NONE OF IT SURVIVES LITERALLY.

   The comp is a desktop artboard. Three things break at once when the
   container narrows: 9.67cqw of a ~330px column is 32px type wearing -0.045em
   tracking, the absolute headline has no room to land on the pool, and three
   1fr columns give each stat about 100px.

   So the headline comes OUT of the absolute layer and back into flow under the
   beam, and the stats stack to one column.

   🔴 THE STAGE HEIGHT GOES AUTO AND THE BEAM IS ANCHORED BY ITS BOTTOM, AND
   BOTH HALVES ARE THE SAME FIX. A fixed cqw height was tried first and shipped
   two defects that only exist below 500px, because that is the only place the
   headline takes two lines:

       430  stage 163  ·  headline bottom 201  ->  "Effect" ON the lead
       360  stage 134  ·  headline bottom 167  ->  same, 33px of overlap
       768  stage 290  ·  headline bottom 272  ->  fine, one line, hid it

   A container-relative height cannot track a headline whose LINE COUNT changes
   with width — at 768 it is one line at the 64px clamp ceiling, at 430 it is
   two at 42.6px. So the stage takes its height from the headline instead, and
   the beam hangs off the BOTTOM of that box. The pool then lands on the last
   line of the headline at every width, and how much of the cone's apex gets
   clipped is what varies — which is self-correcting and invisible.

   ⚠️ BOTH GAPS BELOW ARE THE DESKTOP RELATIONSHIP, NOT NEW NUMBERS. Measured
   off the desktop composition at 1440, where the stage is 49.28cqw:

       headline bottom  475px         pool bottom - headline bottom  +1.80cqw
       pool bottom      495px         stage bottom - pool bottom     +4.78cqw
       stage bottom     548px         stage bottom - headline        +6.58cqw

   So the light finishes just BELOW the last line of the headline, and the lead
   starts a little below that. With `height: auto` the stage bottom would be
   the headline's own bottom, which collapses both gaps to zero and hangs the
   headline underneath its own pool — so the stage carries 6.58cqw of bottom
   padding to restore the slack the fixed desktop height provided for free.

   ⏹ TWO EARLIER ATTEMPTS, BOTH CAUGHT BY MEASURING RATHER THAN LOOKING: a
   fixed cqw height put "Effect" ON the lead at 430 and 360, and anchoring the
   beam by `top` let the pool run 195px past the stage — down through the
   hairline and the 47% stat. Neither is visible at any desktop width.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .page-si .si-effect__stage {
    height: auto;
    /* the slack the desktop stage had between headline and lead */
    padding-bottom: 6.58cqw;
  }

  .page-si .si-effect__stage::before {
    top: auto;
    bottom: 4.78cqw;
    left: 50%;
    width: 100cqw;
    transform: translateX(-50%);
  }

  .page-si .si-effect__head {
    position: static;
    font-size: clamp(34px, 11cqw, 64px);
    letter-spacing: -0.035em;
    /* Back in flow, so it reserves the cone's room with padding rather than a
       `top`. This is also what gives the stage its height. */
    padding-top: 30cqw;
    /* 🔴 WRAPPING IS ALLOWED AGAIN HERE. nowrap is a desktop guarantee that the
       line fits; at 360 it cannot, and keeping it would push the headline
       straight out through the section's clip. */
    white-space: normal;
  }

  .page-si .si-effect__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 7cqw;
  }
}


/* ==========================================================================
   11. INTEGRATIONS - artboard 6C, "the pipeline"

   Brees, 9/9: "styled like 6C here". A charcoal panel inset on the page ground,
   a two-column intro, three big numbered discs joined by a dashed rail, and a
   plinth carrying the Covetrus Pulse mark.

   [!] TWO THINGS IN THE ARTBOARD CANNOT SHIP AS DRAWN, AND BOTH ARE GATES THIS
   PROJECT ALREADY ENFORCES:

     1. The rail was a `repeating-linear-gradient`. verify.js checks "zero
        gradients, anywhere, in any form" - the same rule that killed the
        Spotlight cone on 9/8. Rebuilt as an SVG `stroke-dasharray`, which
        gives the same dash rhythm with more control and no gradient.
     2. The travelling gold dot (`sl-travel`) and the pulsing ring on disc 03
        (`sl-pulse`) are INFINITE animations. verify.js permits AT MOST ONE
        loop-exempt region per sheet and caps it at 400 chars; that budget is
        already spent on the hero drift. Two more loops would either fail the
        gate or mean widening an exemption that exists precisely so motion
        cannot creep in unaudited.
        [x] SO THE MOTION IS DROPPED, NOT FAKED. The pipeline reads from the
        dashed rail and the three numerals; the dot was reinforcing an order
        the numbers already state. Surfaced to Brees - if he wants it, it is a
        deliberate exemption to spend, not something to slip in.

   [i] CHARCOAL IS SPENT HERE, AND THE PAGE HAS BEEN TOLD TWICE NOT TO. The 9/8
   rhythm pass reserved charcoal for the hero and the closing CTA. This is not a
   section GROUND - it is a panel INSET inside the cream section, with the page
   ground still visible around it, which is what the artboard draws and what
   keeps that reserve intact.
   ========================================================================== */

/* [!] FULL-BLEED, NOT AN INSET PANEL - BREES, 9/9: "I'd like this section to be
   full width like we've been doing on this page." The charcoal was a rounded
   card sitting on a cream section; it is now the section's own ground, edge to
   edge, like every other section here. Its rounded top corner comes from the
   page's own --corner system rather than a radius of its own.

   [!] SO CHARCOAL IS NOW SPENT MID-PAGE AS A GROUND, AND THE 9/8 RHYTHM PASS
   EXPLICITLY RESERVED IT ("charcoal now has two jobs it can hold - the hero,
   and the closing CTA. Do not spend it in the middle again"). The inset-panel
   version was the way around that and Brees has overruled it, which is his
   call - but it means the CLOSING CTA CAN NO LONGER BE CHARCOAL BY DEFAULT.
   ⏳ Flagged: sections 8 and 9 need their grounds re-derived, and cream ->
   charcoal here is a 0.777 luminance step, the largest on the page. */
.page-si .si-int {
  background-color: var(--sl-charcoal);
  color: var(--sl-offwhite);
  /* The rail is positioned inside; clip so a rounding error at its ends
     cannot escape the section's own rounded corner. */
  overflow: clip;
}

/* ---- the intro ---------------------------------------------------------- */

.page-si .si-int__intro { display: grid; gap: var(--s-3); }

@media (min-width: 900px) {
  /* 1fr / 0.85fr with the two columns aligned at the BOTTOM - the same
     relationship the comparison intro uses. */
  /* 🔁 TOP-ALIGNED — Brees, 9/15: the paragraph should line up "with the top of
     the 'Works where your team already works' title". Was `end`. */
  .page-si .si-int__intro {
    grid-template-columns: 1fr 0.85fr;
    gap: var(--s-4);
    align-items: start;
  }
}

.page-si .si-int__head {
  max-width: 21ch;
  font-family: var(--sl-font-head);
  /* off-white on charcoal - the page's own reversed pair, 16.30:1 */
  color: var(--sl-offwhite);
}

.page-si .si-int__lead {
  font-family: var(--sl-font-body);
  /* 76% off-white on charcoal. The page already runs 82% at 10.19:1, so this
     clears the 4.5 floor with room - and contrast-run measures it either way. */
  color: color-mix(in srgb, var(--sl-offwhite) 76%, var(--sl-charcoal));
}

/* ---- the pipeline ------------------------------------------------------- */

.page-si .si-int__pipe {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4.25rem);
}

/* The dashed connector, behind the discs. It sits on the discs' vertical
   centre and stops short of both ends, so it reads as a run BETWEEN them
   rather than as a rule across the panel. */
.page-si .si-int__track {
  position: absolute;
  top: 53px;
  left: 8%;
  width: 84%;
  height: 2px;
}

.page-si .si-int__rail {
  display: block;
  stroke: color-mix(in srgb, var(--sl-gold) 55%, var(--sl-charcoal));
}

/* The ring that pulses off disc 03, where the pipeline lands. */
.page-si .si-int__pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  border: 2px solid var(--sl-gold);
}

@keyframes si-int-pulse {
  0%        { transform: scale(1);    opacity: 0.9; }
  70%, 100% { transform: scale(1.32); opacity: 0; }
}

/* [!] THE ONLY LOOP-EXEMPT REGION IN THIS SHEET, AND THE ONLY ONE IT MAY EVER
   HAVE. verify.js permits at most ONE per file, caps it at 400 chars, and
   PRINTS whatever it strips so a widened exemption is visible in the run
   output. Everything outside these two markers is still tested, so an
   `infinite` anywhere else in spotlight.css fails exactly as before.
   Brees, 9/9: "I want it to be exactly like the example I gave you and there's
   no reason it shouldn't be." The budget was unspent; this is what it is for.
   ⚠️ Anything else in this sheet that wants a loop has to take it from here. */
/* loop-exempt:start — integrations pulse, artboard 6C, Brees 9/9 */
.page-si .si-int__pulse { animation: si-int-pulse 2.6s ease-out infinite; }
/* loop-exempt:end */

@media (prefers-reduced-motion: reduce) {
  /* !important is the documented exception verify.js allows here: this block
     must beat any author duration. */
  .page-si .si-int__pulse { animation: none !important; }
  /* Held at rest the ring would print a permanent second outline on disc 03. */
  .page-si .si-int__pulse { display: none; }
}

@media (max-width: 959px) {
  /* Stacked, the discs are in a column and a horizontal rail joins nothing. */
  .page-si .si-int__track { display: none; }
}

.page-si .si-int__steps {
  position: relative;
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  .page-si .si-int__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.page-si .si-int__step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* [i] THE THREE DISCS CARRY THE BRAND'S THREE COLOURS IN ORDER - off-white,
   blue, gold - which is the artboard's way of showing the pipeline moving
   through the product. All three take CHARCOAL numerals, so each pair is
   measured against its own ground rather than inheriting one:
       off-white #F4F2F0 on charcoal   16.30:1
       blue      #75BEDB on charcoal    7.87:1
       gold      #DAC52A on charcoal    9.32:1
   All three clear 4.5, and at this size and 700 weight they are large text
   anyway. */
/* [!] position: relative IS LOAD-BEARING AND ITS ABSENCE WAS THE BUG. The pulse
   ring is `inset: 0`, so without a positioned parent it resolved against
   .si-int__pipe and drew a gold-bordered lozenge the width of the whole
   pipeline row - Brees: "the pulsing is just a very large pill and it's not
   correct". The artboard had it on the disc; dropping it turned a 106px ring
   into a 950px one. */
.page-si .si-int__disc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(76px, 7.4vw, 106px);
  height: clamp(76px, 7.4vw, 106px);
  border-radius: var(--r-pill);
  font-family: var(--sl-font-head);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1;
  color: var(--sl-charcoal);
}

.page-si .si-int__disc--1 { background-color: var(--sl-offwhite); }
.page-si .si-int__disc--2 { background-color: var(--sl-blue); }
.page-si .si-int__disc--3 { background-color: var(--sl-gold); }

/* 9/10 type rule, in the sub-brand's own faces. See base-v3.css .t-h3 and
   the note at .page-si .si-how .gstep__label. */
.page-si .si-int__step-head {
  margin: 0;
  font-family: var(--sl-font-body);
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.7vw, 1.4375rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--sl-offwhite);
}

.page-si .si-int__step-text {
  margin: 0;
  font-family: var(--sl-font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* 72% off-white on charcoal */
  color: color-mix(in srgb, var(--sl-offwhite) 72%, var(--sl-charcoal));
}

/* ---- the plinth --------------------------------------------------------- */

/* 🔴 NO BOX, A GOLD RULE — BREES, 9/11: "I'm not sure I like the glass looking
   box where it says pulse live today."

   ⏹ IT WAS A 6% OFF-WHITE FILL INSIDE A 14% BORDER, radius 28. On charcoal
   that reads as frosted glass, which is a material this page uses nowhere
   else.
   📌 AND THE PAGE ALREADY HAD A RULE AGAINST IT. The comparison section states
   the house no-boxes rule in as many words and names its ONE exemption (the
   lit field behind the Spotlight column). This plinth was a second box that
   never claimed that exemption, so removing it restores a rule rather than
   inventing a preference.

   [i] The gold rule does the plinth's actual job — separating the Covetrus
   mark from the three steps above — with a line instead of a container, which
   is how every other division on this page is drawn.
   [i] 2px, not 1: a 1px gold hairline on charcoal is close to invisible at
   this size, and this line is doing structural work rather than trim. */
.page-si .si-int__plinth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: 32px 0 0;
  border: 0;
  border-top: 2px solid var(--sl-gold);
  border-radius: 0;
  background: none;
}

/* The mark is 234px wide natively and is drawn at 158 - a downscale, never an
   enlargement. The same rule the hero frame and section 5's screenshots
   already record. */
.page-si .si-int__logo {
  width: 100%;
  max-width: 158px;
  height: auto;
}

.page-si .si-int__live {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sl-font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* gold on charcoal, 9.32:1 */
  color: var(--sl-gold);
}

.page-si .si-int__pip {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: var(--r-pill);
  background-color: var(--sl-gold);
}

.page-si .si-int__soon {
  margin: 0 0 0 auto;
  font-family: var(--sl-font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  /* 66% off-white on charcoal */
  color: color-mix(in srgb, var(--sl-offwhite) 66%, var(--sl-charcoal));
}

@media (max-width: 719px) {
  /* Wrapped, the auto margin would shove this to the right edge of a row of
     its own; at this width it just follows the other two. */
  .page-si .si-int__soon { margin-left: 0; }
}


/* --------------------------------------------------------------------------
   THE PINNED TITLE LETS GO WHEN THE DECK DOES - 9/9

   Brees: "the title is still visible even after the cards start scrolling out
   of view." Wrapping the title and the stack together (earlier today) was
   necessary but not sufficient: it made the title release AT ALL, but not at
   the same moment as the cards.

   [i] WHY THEY DRIFT APART. A sticky element releases when its containing
   block's bottom, minus its own height and sticky offset, passes the viewport
   top. The wrapper and the stack END TOGETHER (measured: 0px apart), but the
   last CARD is 357px tall and pinned 384px down, while the TITLE is 83px tall
   and pinned 169px down. So the card starts moving 488px of scroll before the
   title does - and for that whole stretch the deck slides while the title
   sits, which is exactly what the screenshot shows.

   [!] MEASURED ON THE REFERENCE FIRST: Call Insights has the SAME lag, and a
   bigger one - 996px. So "match Call Insights" could not be the fix; its
   taller cards simply fill the screen while it happens and hide it. This is a
   genuine correction to the shared device, not a port of it.

   [i] THE TRIM IS DERIVED, NOT MEASURED BY HAND. The lag is exactly
   `card height + head gap + (n-1) tabs`, and direction-d-v3.js already
   publishes the equalised card height as --stack-card-h. 357 + 52 + 80 = 489
   against a measured 488.

   [!] AND IT SHRINKS THE WRAPPER WITHOUT MOVING ANYTHING AFTER IT. A negative
   margin on the STACK reduces the wrapper's content height, which is what the
   title is bound by; an equal positive margin on the WRAPPER puts the flow
   space back. A negative margin on the wrapper itself would NOT work - it
   moves the following content but leaves the element's own box, and therefore
   the containing block, exactly as it was.
   ⚠️ `display: flow-root` is load-bearing: without it the stack's margin
   collapses out of the wrapper and the trim silently does nothing.
   -------------------------------------------------------------------------- */
.page-si .si-shines__pin {
  display: flow-root;
  /* [!] --stack-card-h IS A MIN-HEIGHT, NOT THE RENDERED HEIGHT, AND THAT WAS
     THE LAST 90% OF THE ERROR. direction-d-v3.js publishes it as the EQUALISED
     FLOOR for the cards; the cards then render TALLER because their content
     (the mock, whose image is capped at 40vh) overflows it. Measured at
     1440x900: --stack-card-h 356px against a real card of 513px.
     So the trim needs the overflow as well, and CSS cannot know it - the only
     honest options are a measured constant or a JS reading. This is the
     measured one, and it is DECLARED SEPARATELY so it is obvious it is not
     derived like the rest of the expression.
     [!] AND IT TRACKS VIEWPORT HEIGHT, BECAUSE THE OVERFLOW DOES. The card is
     taller than its floor by roughly the mock image, and that image is capped
     at 40vh (see the .sl-shot rule). Measured: card 513px at 900 tall and
     473px at 800 - a 40px change for a 100px change in height, i.e. exactly
     the cap moving. A fixed 157px was right at 900 and left 46px of lag at
     800; 40vh minus the floor the min-height already covers holds at both. */
  /* [!] CAPPED, BECAUSE THE OVERFLOW STOPS GROWING. The mock image is 364px
     native and capped at 40vh, so above roughly 910px tall the cap exceeds the
     image and the card stops getting taller - measured 513px at 900 and 517px
     at 1000, not the 553 a raw 40vh would predict. Uncapped, this over-trimmed
     and released the title 36px BEFORE the deck. */
  --si-card-overflow: min(calc(40vh - 203px), 161px);

  /* 🔴 THE TRIM IS ZERO NOW — BREES, 9/11: "the spotlight shines title scrolls
     out of view faster than the cards."

     ⏹ THE FORMULA ABOVE IS CORRECT AND IS KEPT ON PURPOSE. It is NOT the bug,
     and it was very nearly "fixed" on the strength of a bad measurement — see
     below. It aligns the moment the title RELEASES with the moment the last
     card RELEASES, and measured with the deck in its real state it does that
     exactly: lag 0px at 800, 855, 911 and 1000 tall.

     🔴 BUT RELEASING TOGETHER IS NOT DISAPPEARING TOGETHER, AND THAT IS WHAT
     HE IS SEEING. The title sits at the top of the section and the cards below
     it, so once both let go the title exits the viewport first and the reader
     keeps scrolling through cards with no heading. Measured at 911 tall — how
     far the cards are still on screen AFTER the title has gone:

         trim as formula ...... 650px      half trim ............ 325px
         trim minus overflow .. 488px      trim 0 ................. 0px

     Only zero makes them leave together, which is what he asked for. The
     title's own band already masks cards sliding up behind it (see the
     ::before below it), so the extra pinned distance is a drawn case, not a
     new one.
     ⏹ This does NOT reopen the 9/9 complaint that the title "stayed sticky
     long after the deck had finished". That was when the containing block was
     the whole SECTION; .si-shines__pin bounds it to the deck, so with no trim
     the title releases exactly at the stack's end and not a pixel later.

     📌 To restore the release-together behaviour, put `var(--si-pin-trim-calc)`
     back on margin-bottom. Nothing else needs to change. */
  --si-pin-trim-calc: calc(
    var(--stack-card-h, 0px) + var(--dl-head-gap) +
    (var(--stack-n) - 1) * var(--stack-tab) + var(--si-card-overflow)
  );
  /* 🔴 HALF THE FORMULA — AND IT IS A DIAL WITH BOTH ENDS ALREADY REJECTED.
     Brees, 9/11 first: "the title scrolls out of view faster than the cards"
     (that was trim = 100%). Then, after it went to 0: "the title isn't
     scrolling up". Those are the two ends of ONE control, and the two costs
     sum to a constant — measured at 911 tall, they always total 649px:

         trim   0%   title holds 649px past the deck · cards left    0px
         trim  25%   holds 487 · cards left 162
         trim  50%   holds 325 · cards left 325      <- ships
         trim  70%   holds 195 · cards left 454
         trim 100%   holds   0 · cards left 649

     So there is no setting that satisfies both notes; the midpoint splits the
     difference. The title holds a little past the deck finishing, then travels
     up with the cards while they are still on screen.
     📌 To move it, change the 0.5 and nothing else. */
  --si-pin-trim: calc(var(--si-pin-trim-calc) * 0.5);
  margin-bottom: var(--si-pin-trim);
}

.page-si .si-shines__pin .stack {
  margin-bottom: calc(-1 * var(--si-pin-trim));
}

/* 🔴 THE SHORT-VIEWPORT BLOCK THAT USED TO ZERO THIS TRIM IS GONE, 9/11.

   The trim exists ONLY to make a sticky title release at the same moment the
   sticky cards do. It was zeroed below 860px tall because the title unpinned
   there. The title no longer unpins (see section 10), so the trim applies at
   every height and the two still move together — which was always the rule,
   just with a different answer now.
   ⏹ The original note here recorded getting this wrong once in the other
   direction: it was written as max-WIDTH, so at 1280x800 the deck was unpinned
   by the shared rule while this trim still applied, and the lag measured 365px
   instead of 46. The lesson survives the reversal — this trim and the title's
   pinned state must never be gated on different conditions, which is why the
   number below is 759 and not 859. */
@media (max-height: 759px) {
  .page-si .si-shines__pin,
  .page-si .si-shines__pin .stack { margin-bottom: 0; }
}

/* 🔴 AND THE SHARED SHEET'S SHORT-VIEWPORT CARD OFFSET IS REVERSED FOR THIS
   PAGE, WHICH IS THE HALF THAT ACTUALLY CAUSED THE COLLISION.

   direction-d-v3.css, `@media (max-height: 859px)`:

       .stack__card { top: calc(var(--dl-head-top) + (var(--i) * var(--stack-tab))) }

   — the same formula MINUS the two head terms, so a card pins at the header
   (169px) instead of below the title (304px). `.stack__card` is a SHARED class
   and that block is unscoped, so it lands on this page's deck as well as Call
   Insights'. With the title pinned at 169 too, the card pins exactly on top of
   the title. That is the collision the old unpin was avoiding.

   ⚠️ SO THIS RESTORES THE FULL EXPRESSION, COPIED FROM THE SHARED SHEET'S OWN
   UNGATED RULE RATHER THAN RETYPED — including its `var(--dl-head-h, 0px)`
   fallback, because --dl-head-h is published by direction-d-v3.js and is
   absent until it runs.
   ⚠️ SCOPED TO `.page-si .si-shines__pin` ON PURPOSE. Call Insights keeps the
   shared behaviour: Brees' 9/9 decision there ("the only thing that wasn't
   supposed to stay sticky was the section title") is untouched, and this page
   is the one he reversed. Do not lift this into the shared sheet.
   ⏹ `min-height: 0` from that block is deliberately NOT reversed — the shared
   note calls it out as "not part of the pinning", and letting each card take
   its own height is render we keep for free.

   ⚠️ BANDED 760..859, NOT max-height ALONE. Below 760 a card pinned under the
   title no longer fits on screen (measured: 40px unreachable at 700), so the
   shared sheet's high pin is correct down there and must be left alone. Above
   859 the shared sheet already uses this same full expression ungated, so
   there is nothing to restore. This block only covers the band in between —
   which is exactly the band Brees' own 1080p desktop lands in. */
@media (min-height: 760px) and (max-height: 859px) {
  .page-si .si-shines__pin .stack__card {
    top: calc(var(--dl-head-top) + var(--dl-head-h, 0px) + var(--dl-head-gap) + (var(--i) * var(--stack-tab)));
  }
}


/* ==========================================================================
   12. FAQ - the artboard's split: the title left, the accordion right

   [!] family.css IS NOT IN THIS PAGE'S SHEET CHAIN. The four sibling pages get
   .faq__item / .faq__q / .faq__a / .faq__marker from it; this page loads
   fonts -> base-v3 -> direction-d-v3 -> variant-d-v3 -> product-devices ->
   spotlight -> smart-intake -> section-corners, and family.css is not on that
   list. So the presentation is stated here in full rather than overridden.
   [i] The class NAMES are kept anyway. They cost nothing, they say plainly
   that this is the same component, and .collapse plus shared-v3.js - the
   actual behaviour - are genuinely shared and untouched.

   [i] THE SPLIT IS THIS PAGE'S OWN. Sections 6 and 7 already put a title in a
   narrow left column against wide content on the right; the artboard does the
   same thing here, so the FAQ joins a pattern rather than introducing one.
   The siblings' single centred 800px column stays theirs.
   ========================================================================== */

.page-si .si-faq {
  background-color: var(--white);
}

.page-si .si-faq__inner {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  /* Measured off the artboard: the title column is a little under half the
     list's width, with the page gutter unchanged. */
  .page-si .si-faq__inner {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
}

.page-si .si-faq__head {
  margin: 0;
  /* Three lines in the artboard - "Frequently / asked / questions" - which is
     what the column width produces on its own. The max-width holds that shape
     if the column ever grows rather than forcing it with a <br>. */
  max-width: 11ch;
  font-family: var(--sl-font-head);
  /* charcoal on white, 16.30:1 */
  color: var(--sl-charcoal);
}

/* ---- the rows ----------------------------------------------------------- */

/* A hairline above every row and below the last, so the list reads as a set
   of rules rather than as boxes. 14% charcoal on white measures the same
   weight as the siblings' --ink-10 without importing that token's blue. */
.page-si .si-faq .faq__item {
  border-top: 1px solid color-mix(in srgb, var(--sl-charcoal) 14%, var(--white));
}

.page-si .si-faq .faq__item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--sl-charcoal) 14%, var(--white));
}

/* ⚠️ THE SIZE AND WEIGHT HERE ARE BOTH SUPERSEDED BY THE BUTTON RULE BELOW,
   WHICH IS WHERE THE VISIBLE TEXT ACTUALLY LIVES. Every FAQ question is an
   <h3> wrapping a <button>, so this rule styles a box with no text of its own.
   They are left declared because the heading should still be sane if the
   button rule is ever scoped away — but do NOT read these two values as what
   renders, and do not "fix" a mismatch by editing them. Measured: the toggles
   render at --fs-h3 / 400, both set below. */
.page-si .si-faq .faq__q {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 400;
}

/* [i] align-items: center, NOT flex-start. The siblings top-align because
   their marker is an 18px cross that wants to sit on the first line's
   baseline; a 30px filled disc reads as a control and centres against the
   question, one line or two. */

/* 🔴 THE BODY FACE, NOT THE HEAD FACE — CORRECTED 9/11. Brees: "the titles
   don't match across the site and I think we're using Altivo."

   ⏹ IT WAS `--sl-font-head` AND THAT WAS A MISS, NOT A SUB-BRAND CHOICE.
   Measured across all five pages before touching anything:

       call-insights · google-ads · seo-content · websites   Altivo  w400
       smart-intake                                          co-headline w500

   One page out of five, and it is this one. His 9/10 type rule is "h1/h2 are
   the display face, everything below is the body face"; an <h3> on the display
   face is simply the rule not applied.

   🔴 WHY THE 9/10 ROLLOUT SKIPPED IT, WHICH IS THE REUSABLE PART. The session
   notes asserted "`.faq__q` was already the body face on ALL FIVE PAGES", and
   that claim was then used as the PRECEDENT for the weight the whole rollout
   adopted. It was never measured and it was false here. A stored assumption
   that is treated as evidence propagates instead of being caught — the four
   siblings were checked, this page was inferred.

   [i] `--sl-font-body` RATHER THAN Altivo BY NAME. This page carries Spotlight
   branding (Brees, 9/3), so it goes through the sub-brand token like every
   other run of body text here. Chennai is not loaded yet, so today it resolves
   to Altivo — identical to the four siblings, which is what "match" means
   right now — and it becomes Chennai when the Adobe kit lands. Naming Altivo
   directly would match today and break the sub-brand later. */
.page-si .si-faq .faq__q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding-block: var(--s-3);
  text-align: left;
  font-family: var(--sl-font-body);
  font-size: var(--fs-h3);
  /* ⏹ 400, NOT 500 — FULL PARITY WITH THE FOUR SIBLINGS, BREES 9/11.
     The 500 came from the SAME false premise as the wrong face above: the
     notes claimed `.faq__q` was already the body face on all five pages, and
     500 was matched to that non-existent precedent. The real precedent is the
     four siblings, measured at 400. */
  font-weight: 400;
  /* ⏹ `normal`, matching the siblings. The old -0.01em was part of the same
     display-face styling this rule no longer is. */
  letter-spacing: normal;
  line-height: 1.3;
  /* 🟢 THE COLOUR STAYS SUB-BRAND AND THAT IS DELIBERATE, ASKED 9/11. This is
     Spotlight charcoal, not DE ink, because this page carries Spotlight
     branding (Brees, 9/3). Measured 16.30:1 on white against the siblings'
     14.94:1 — about 1% of luminance apart and invisible side by side.
     Unifying it would start unpicking the sub-brand for no visible gain. */
  color: var(--sl-charcoal);
}

.page-si .si-faq .faq__a {
  margin: 0;
  padding-bottom: var(--s-3);
  max-width: 62ch;
  font-family: var(--sl-font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* 78% charcoal on white, measured 7.85:1 - the muted body tier the rest of
     the page uses, one step back from the question above it. */
  color: color-mix(in srgb, var(--sl-charcoal) 78%, var(--white));
}

/* ---- the marker --------------------------------------------------------- */

/* [i] A GOLD DISC, WHICH IS THE ARTBOARD'S AND ALSO THE PAGE'S. Gold on white
   is a 1.82:1 boundary, so the disc alone could not carry a control - the
   charcoal glyph inside it does, at 9.32:1, and the disc is the fill behind
   it rather than the thing being identified. Same relationship as the hero
   button, which is gold with a charcoal label. */
.page-si .si-faq .faq__marker {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background-color: var(--sl-gold);
}

.page-si .si-faq .faq__marker::before,
.page-si .si-faq .faq__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 1px;
  background-color: var(--sl-charcoal);
  transition: transform var(--d-marker) var(--ease-out);
}

.page-si .si-faq .faq__marker::before {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.page-si .si-faq .faq__marker::after {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%);
}

/* [!] OPEN IS A MINUS, NOT AN X. The artboard draws a minus, so the VERTICAL
   bar retracts and the horizontal one stays exactly where it is.

   [!] BOTH ARMS HAVE TO BE NAMED. direction-d-v3.css rotates `::before` AND
   `::after` 45deg on open - it says so, and says why (rotating the arms keeps
   the marker's box 18px, where rotating the box reported 4px of overflow).
   The first version here overrode only `::after`, so the vertical arm
   retracted while the horizontal one still swung to 45deg: open rendered as a
   single diagonal slash. It looked deliberate, which is the dangerous kind of
   wrong. Found by screenshotting the open state, not by reading the cascade.
   ⚠️ Do not delete the `::before` rule as redundant - it is the whole fix. */
.page-si .si-faq [aria-expanded="true"] .faq__marker::before {
  transform: translate(-50%, -50%);
}

.page-si .si-faq [aria-expanded="true"] .faq__marker::after {
  transform: translate(-50%, -50%) scaleY(0);
}


/* ==========================================================================
   13. THE CLOSING CTA - Alie's last line on a gold ground

   [!] GOLD SETTLES AN OPEN QUESTION. The 9/8 rhythm pass gave charcoal exactly
   two jobs, the hero and this section; section 6 then took charcoal full-bleed
   on Brees' instruction and spent it mid-page, which left this ground
   genuinely underived. His artboard answers it, and gold is the answer that
   costs the page nothing: it is the only accent that has not yet been a
   ground, and every earlier use - the hero button, the stat figures, the
   numbered discs, the FAQ markers - reads as a build-up to it.

   [i] GROUND SEQUENCE ENDING THE PAGE: cream (.791) -> white (1.000) ->
   gold (.550). Two large steps in opposite directions, no ground repeated
   back to back, and the last one lands dark enough that the charcoal footer
   below is a small step rather than a wall.
   ========================================================================== */

.page-si .si-cta {
  background-color: var(--sl-gold);
  /* charcoal on gold, measured 9.23:1 */
  color: var(--sl-charcoal);
}

.page-si .si-cta__inner {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}

@media (min-width: 900px) {
  .page-si .si-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: var(--s-5);
  }
}

.page-si .si-cta__head {
  margin: 0;
  /* [!] 21ch, AND THE NUMBER IS THE ARTBOARD'S LONGEST LINE, NOT A GUESS.
     "connection feel like" is 20 characters and is the widest line Brees'
     comp sets; 17ch broke the measure one word early and split "trade-offs"
     across two lines at its own hyphen, which the artboard never does.
     ⚠️ A CHARACTER MEASURE, NOT A PIXEL ONE, ON PURPOSE. Co Headline is not
     loaded yet and this is rendering in the fallback, so a px width tuned
     today would be wrong the day the Adobe kit lands. `ch` moves with the
     face. The standing rule against tuning line breaks before the kit still
     holds - this sets a measure, it does not chase a break. */
  max-width: 21ch;
  font-family: var(--sl-font-head);
  color: var(--sl-charcoal);
}

.page-si .si-cta__act {
  margin: var(--s-4) 0 0;
}

/* [i] THE INVERSE OF THE HERO BUTTON, FOR THE SAME REASON THE HERO'S WAS
   INVERTED ONCE. On charcoal the gold fill carries the button; on gold it
   would have no edge at all against its own ground, so the fill goes charcoal
   and the label off-white - 14.47:1 on the label, and the button's own
   boundary reads at 9.23:1 against the gold. */
.page-si .sl-btn--ink,
.page-si .sl-btn--ink:link,
.page-si .sl-btn--ink:visited {
  background-color: var(--sl-charcoal);
  border-color: var(--sl-charcoal);
  color: var(--sl-offwhite);
}

/* Hover lightens the charcoal rather than jumping to cream: cream on gold is
   a 1.44:1 boundary, so the hero's own hover would make this button vanish
   into its ground at the exact moment the reader is aiming at it. */
.page-si .sl-btn--ink:hover,
.page-si .sl-btn--ink:focus-visible {
  background-color: color-mix(in srgb, var(--sl-charcoal) 82%, var(--sl-offwhite));
  border-color: color-mix(in srgb, var(--sl-charcoal) 82%, var(--sl-offwhite));
  color: var(--sl-offwhite);
}

/* ---- the pets ----------------------------------------------------------- */

/* [i] THE SAME TWO DRAWINGS THAT CLOSE THE COMPARISON SECTION, WHICH IS THE
   ARTBOARD'S CALL AND IS FLAGGED RATHER THAN QUIET. The page has exactly two
   pet drawings and spends them on its two closing beats - the coda that ends
   the comparison, and the line that ends the page. They are sized a little
   larger here because nothing shares the row with them. */
.page-si .si-cta__pets {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--s-3);
}

@media (min-width: 900px) {
  .page-si .si-cta__pets { justify-content: flex-start; }
}

.page-si .si-cta__pet {
  flex: none;
  height: auto;
}

.page-si .si-cta__pet--cat { width: clamp(92px, 10vw, 150px); }
.page-si .si-cta__pet--dog { width: clamp(126px, 13.5vw, 200px); }

/* ---- the spotlight behind them (Alie, Feedbucket 987609, 9/18) -----------
   "Can we add in the spotlight here behind the dog and cat." The SAME supplied
   artwork The Spotlight Effect uses (spotlight-beam.webp, a flat cone with its
   pool baked in) on the same gold — one device, not a second drawing of light.
   🔴 987609 WAS WRONGLY CALLED MOOT ON 9/17: it was read as decorating the row
   987608 deleted. Its pin is `.si-cta__pet--dog`, this section.
   1. The group shrinks to the two drawings (justify-self), so the beam is sized
      to THEM, not to the grid column: 130% of their width, centred.
   2. The pool's ellipse is the art's bottom ~7%; `bottom: -16px` lands its
      middle under the paws, so they stand in it.
   3. The cone is taller than the room above the pets and runs off the top of
      the section — light entering from above, as on The Spotlight Effect. The
      section clips it (`overflow: clip`), which also keeps it inside the
      section's corner.
   4. Stacking: the group opens its own context (z 0) so the beam's -1 stays
      above the gold; the copy is lifted to z 1 so that below 900, where the
      cone rises behind the headline, it can never paint over the words.
      Charcoal on the cone's pale fill only gains contrast. No filter, no
      gradient — both gated here; the art is used as supplied. */
.page-si .si-cta { overflow: clip; }
.page-si .si-cta__copy { position: relative; z-index: 1; }
.page-si .si-cta__pets {
  position: relative;
  z-index: 0;
  justify-self: center;
}
@media (min-width: 900px) {
  /* 🔁 9/18, Brees: the spotlight's bottom sat level with the bottom of the TEXT on the left; "I want it aligned
     with the bottom of the button." The grid centres both columns (align-items: center), so the pets floated to
     wherever centring put them. Pinned to the END of the row instead, the group's bottom is the copy column's
     bottom — the button's bottom edge, since .si-cta__act has no bottom margin — and the extra 16px lifts the
     paws by the same amount the pool hangs below them (`bottom: -16px` below), so the BEAM's bottom edge lands
     on the button's bottom edge. */
  .page-si .si-cta__pets { justify-self: start; align-self: end; margin-bottom: 16px; }
}
.page-si .si-cta__pets::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -15%;
  right: -15%;
  bottom: -16px;
  aspect-ratio: 1200 / 1346;
  background-image: url("../img/spotlight/spotlight-beam.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  opacity: 0.95;
  pointer-events: none;
}


/* ==========================================================================
   SECTION 2 — THE DEEP LEFT CURVE AND THE CALLOUT (Brees, 9/11)

   "update the curve so that the curve is on the left side and it should be
   very deep, just like we did on the Google Ad Section 2... add big callout
   text like we have on Google Ad Section 2."

   🔴 THE CURVE IS A ::before, NOT A RADIUS ON THE SECTION. The section stays
   WHITE and a coloured band is laid over it with a deep top-left radius, so
   what the eye reads as a curve is the white ground showing THROUGH a bite
   taken out of the band's corner. Putting the radius on the section itself
   would round the section against whatever is above it — a different device,
   and the corner system already owns that one.
   📌 Ported from .gads-manifesto, which is the section Brees named.

   ⚠️ THE VERTICAL RADIUS IS CLAMPED BY THE SECTION'S OWN HEIGHT, so the
   painted corner is an ELLIPSE and not the circle the number implies. That is
   the intended look and needs no extra rule — but it is why the values below
   are not the curve you see on screen.

   ⚠️ overflow-x: clip, NOT overflow: hidden — the project's standing rule.
   `hidden` establishes a scroll container, which silently kills
   position:sticky on any descendant. `clip` contains without that.
   ========================================================================== */
.page-si .si-setup {
  position: relative;
  background-color: var(--white);
  overflow-x: clip;
}

.page-si .si-setup::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--sl-cream);
  border-top-left-radius: 40px;
  /* 🔴 THE SECTION'S OWN NOTCH HAS TO BE HONOURED, AND THE GATE CAUGHT THIS.
     .si-setup carries `border-top-right-radius: var(--corner)` from
     section-corners.css, and its top-right corner is supposed to reveal the
     charcoal hero above. This band is `inset: 0`, so with a square right
     corner it painted cream straight over that notch. corner-check, at five
     widths:
         ".si-setup top-right corner paints rgb(240,232,170), but
          rgb(35,31,32) is behind it — the section is painting into its own
          notch, so the radius is not clipping here"
     ⚠️ Any full-bleed overlay added to a section in this system has to repeat
     that section's corner. Nothing inherits it — `border-radius: inherit`
     would also overwrite the deep left curve this band exists for. */
  border-top-right-radius: var(--corner);
}

/* 🔴 THE RADIUS LADDER EXISTS BECAUSE A FIXED RADIUS EATS THE COPY ON NARROW
   SCREENS. The callout is centred, so its left gutter shrinks as the section
   narrows while a constant radius does not — google-ads.css records measuring
   exactly this and stepping the value down. Same ladder, same reasons. */
@media (min-width: 700px)  { .page-si .si-setup::before { border-top-left-radius: 160px; } }
@media (min-width: 900px)  { .page-si .si-setup::before { border-top-left-radius: 240px; } }
@media (min-width: 1024px) { .page-si .si-setup::before { border-top-left-radius: 380px; } }
@media (min-width: 1280px) { .page-si .si-setup::before { border-top-left-radius: 500px; } }

/* The content rides above the band. */
.page-si .si-setup__inner {
  position: relative;
  z-index: 1;
}

/* 🔴 THE CALLOUT, AT THE REFERENCE'S SCALE. It was 26px and left-ranged — a
   lead paragraph. The Google Ads statement it is being matched to is 60px and
   CENTRED, and both of those matter:
     - the size is the "big callout" Brees asked for
     - the centring is what keeps it clear of the curve, which is deep enough
       to cross into the container
   ⏹ The word-by-word entrance is untouched: same element, same data-blur-text
   hook, same per-word timings. Only scale and alignment move. */
.page-si .si-statement {
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Space between the callout and the split below it. */
.page-si .si-setup__split { margin-top: clamp(3rem, 6vw, 5.5rem); }

/* The heading column: title, then the cat beneath it. */
.page-si .si-setup__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

/* 🔴 THE CAT LOSES ITS PANEL IN SECTION 2 — 9/11, WITH THE CURVE.
   `.sl-panel` is an --sl-offwhite box with a 20px radius, which read fine when
   this section's ground was white. The section now carries a cream band, and a
   grey box on cream reads as a sticker rather than as part of the page.

   [i] THE ARTWORK NEEDS NO BOX HERE. These pets are white with black details,
   so they need a coloured ground to exist — and the cream band IS one. Section
   3 already puts the same cat straight onto cream with nothing behind it, so
   this matches an existing precedent rather than inventing a treatment.
   ⚠️ Scoped to .si-setup. `.sl-panel` is used elsewhere on white grounds,
   where the box is still doing real work. */
.page-si .si-setup .sl-panel {
  aspect-ratio: auto;
  padding: 0;
  background: none;
  border-radius: 0;
}

.page-si .si-setup .sl-panel__art {
  width: min(100%, 260px);
}

/* RESPONSIVE PASS (9/16). Below 900 the beam is the stage's absolutely
   positioned ::before and the headline is static, so the beam PAINTED OVER
   "The Spotlight Effect" — washed out to near-invisible on a phone. Lifting the
   headline one layer keeps the beam behind the words, as on desktop. */
@media (max-width: 899px) {
  /* top/left reset: the desktop rule's `top: 33.03cqw` is inert while the head
     is static, but becomes a real 33cqw shove the moment it is positioned. */
  .page-si .si-effect__head { position: relative; top: auto; left: auto; z-index: 1; }
}

/* Same pass: `.page-si .si-shines__pin .stack__card { top: ... }` (0,3,0, in the
   760-859px-tall band) out-specifies the shared `top: auto` for static-deck
   cards below 960, so on a 390x844 phone both visit panels slid ~74px down and
   the second ran under the dark Integrations section. */
@media (max-width: 959px) {
  .page-si .si-shines__pin .stack__card { top: auto; }
}