/* ============================================================
   CCX-SVCAPPS - the Shopify app part of /services/ (post 3043)

   Four pieces, in the order they appear on the page:
     the two drawings and the movement inside them
     the reference chips under each of the two blocks
     the rim glow of the two blocks
     the orange call to action at the foot

   Loaded behind assets/ccfx-v3.css, so a rule here settles a tie
   inside the effect layer.
   ============================================================ */


/* ============================================================
   1. THE TWO DRAWINGS

   Both pictures are the Figma files that have been lying in the
   uploads folder since 2024 and that the page hangs on a
   container as a background image. A background is a picture:
   whatever is drawn inside it stands still, and both drawings
   are built around things that want to move. The ring of the
   left one fades from bright at the top to almost nothing at
   the bottom, and both of them park an orange light on every
   cable.

   So the drawing is put into the page as markup instead of as a
   background, and the parts that were meant to move are moved.
   Not one line of either file is drawn differently: the ring
   still has its twelve segments with the same twelve values,
   and the lights are the same lights on the same cables. The
   fade turns, and the lights travel.

   tools/r21-svcapps/build-svg.py makes the two marked copies
   from the untouched originals and writes them into this
   folder. It adds classes and prefixes the internal ids, and
   nothing else.

   THE CLOCK
   Everything on both drawings runs on --ccsa-cycle, so the ring
   and the cables cannot drift apart. One turn of the ring is
   one cycle. A cable light is launched at the moment the bright
   part of the ring points at the place that cable leaves from,
   which is what ties the two together to the eye: the ring
   sweeps past, and the light sets off.
   ============================================================ */

.ccsa-art.ccsa-art {
  position: relative;
}

/* The layer the drawing lives in. It takes the whole container and
   clips exactly like a background does, so a drawing taller than its
   box is cut at the bottom the way it always was.

   pointer-events stay off. Nothing here is clickable, and the block
   around it carries a rim glow that follows the pointer; a layer that
   swallowed the pointer would put a dead rectangle in the middle of
   it. */
.ccsa-art > .ccsa-draw {
  --ccsa-cycle: 6.4s;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: paint;
}

/* On a wide window the page paints the background at its own size in
   the top left corner and leaves the rest of the box empty. The
   drawing is placed on exactly that rectangle, so the two are
   interchangeable and the container looks unchanged. */
.ccsa-draw--own > .ccsa-svg {
  position: absolute;
  left: 0;
  top: 0;
}
.ccsa-draw--own > .ccsa-svg--public { width: 527px; height: 303px; }
.ccsa-draw--own > .ccsa-svg--custom { width: 596px; height: 310px; }

/* Narrower than that the page fits the drawing into the box and
   centres it, which is what the viewBox does on its own. */
.ccsa-draw--fit > .ccsa-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The drawing keeps the edge a background image gave it. Both files
   carry parts that reach past the viewBox: the public one has two
   rounded boxes that start above and left of the picture, and a light
   sent down a cable leaves the frame at the end of its run. As a
   background all of that was cut at the edge of the picture, so it is
   cut here too. */
.ccsa-svg {
  display: block;
  overflow: hidden;
}


/* ---------- 1a. The ring of the public drawing ----------

   Twelve segments, thirty degrees apart, ordered clockwise from the
   brightest one at twelve o'clock. Their twelve values are the values
   the file already carries; --i on each segment says where in that
   order it stands.

   The whole pattern moves one place per twelfth of a cycle, so what
   travels is the bright part and not a blink: at any moment the ring
   shows the original fade, turned by however far the cycle has come.
   The delay is negative, so the ring is in mid-turn from the first
   frame instead of starting from a pose the drawing never had.

   The keyframes run the twelve values backwards, which turns the
   bright part clockwise. Read them from the file:
     0.96 0.96 0.60 0.48 0.144 0.09 0.048 0.048 0.09 0.24 0.48 0.60
   from twelve o'clock clockwise. Backwards is what stands below. */
.ccsa-seg {
  animation: ccsa-sweep var(--ccsa-cycle) linear infinite;
  animation-delay: calc(var(--ccsa-cycle) * (var(--i) - 12) / 12);
}

@keyframes ccsa-sweep {
  0%      { opacity: .96;  }
  8.333%  { opacity: .60;  }
  16.667% { opacity: .48;  }
  25%     { opacity: .24;  }
  33.333% { opacity: .09;  }
  41.667% { opacity: .048; }
  50%     { opacity: .048; }
  58.333% { opacity: .09;  }
  66.667% { opacity: .144; }
  75%     { opacity: .48;  }
  83.333% { opacity: .60;  }
  91.667% { opacity: .96;  }
  100%    { opacity: .96;  }
}

/* The dashed circle inside the ring turns with it, four times slower
   and in the other direction, which keeps the middle of the picture
   alive without competing with the sweep. transform-box has to be
   named: without it the circle would turn around the centre of the
   whole drawing instead of its own. */
.ccsa-dash {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ccsa-spin calc(var(--ccsa-cycle) * 4) linear infinite reverse;
}

@keyframes ccsa-spin {
  to { transform: rotate(360deg); }
}


/* ---------- 1b. The lights on the cables ----------

   Each cable carries two lights that are never on together.

   .ccsa-rest is the light of the file, standing on the spot the file
   drew it on: the soft orange bar and, where the file has one, the
   bright hairline under it. It is what a visitor who asks for less
   movement sees, and it is what fidelity.py holds against the
   original. While the drawing moves it is not painted.

   .ccsa-run is the light that travels, and it is a lit piece of the
   cable itself. Every layer of it is the whole centre line of that
   cable, drawn with a dash pattern that leaves one short piece of it
   showing; moving the pattern along carries that piece from the mouth
   of the cable to its far end.

   WHY IT IS DRAWN THIS WAY AND NOT SENT ALONG THE LINE
   It used to be the bar of the file, sent down the centre line with
   offset-path. A bar is straight and fifty pixels long, a cable turns
   its corners in twenty-three, so in every corner the bar lay across
   the bend like a plank across a wheel and stuck out on both sides.
   A piece of the line has the shape of the line, and there is nothing
   left that could stick out of it.

   WHAT THE LIGHT IS MADE OF, measured off the drawing as it was:
     the soft bar   51 long, 5 wide, #FF8E2B at 0.69, blurred by 12.5,
                    which is the rectangle and the blur of the file
     the hairline   55 long, 1 wide, same colour, running from nothing
                    at either end to full in the middle. A dash cannot
                    carry a gradient along itself, so five dashes of
                    the same colour lie inside one another, each one
                    shorter and stronger than the one below it.

   Held against the old light on a straight stretch, both add the same
   22 to a channel at the middle of the wash and both carry a hairline
   44 pixels long above a quarter and 81 pixels long altogether. The
   one difference: the file cuts the blur of its rectangle off at a
   rectangle named by hand, and this one is not cut off, so the very
   last of the wash reaches seven pixels further to either side at a
   value of one in two hundred and fifty five.

   The dash patterns themselves are written on the elements by
   tools/r21-svcapps/build-svg.py, in thousandths of each cable, since
   every cable is a different length and the light is not.

   THE PHASES
   The number in the delay is where in the cycle the middle of the
   light is at the end of the cable that touches the ring:

     p1  0.227   up and to the right, 336 degrees
     p2  0.304   straight right, 4 degrees
     p3  0.541   straight down, 89 degrees

   and 254.6 + 360 * phase is the angle the bright part of the ring
   stands at just then, measured on the drawing. That is the whole of
   the synchronisation: the sweep passes the mouth of a cable, and
   the light of that cable sets off from it. The two cables that lead
   away start their run there, the one that leads in ends its run
   there. tools/r21-svcapps/sync-proof.py reads those numbers off the
   running page. */

.ccsa-draw .ccsa-rest { opacity: 0; }

.ccsa-run > path {
  fill: none;
  stroke: #ff8e2b;
  stroke-linecap: butt;
  animation: ccsa-walk var(--ccsa-cycle) linear infinite;
}

/* The soft bar. A stroke five wide is the rectangle of the file, and
   the blur is the blur of the file, so the wash comes out the same: a
   tenth of an alpha at the middle, reaching about fifty pixels along
   the cable and a little over thirty across it.

   The blur is not here. It hangs on the element as a filter of the
   drawing's own kind, written by build-svg.py, because WebKit does not
   apply a css filter to a path inside an inlined drawing: it paints
   the bar sharp, and a sharp five wide bar is a hard orange band
   instead of a wash. Measured on all three engines,
   tools/r23-svcpulse/engines.py. Eight seconds of frames with both
   drawings in the window came out at the same 8.3 milliseconds as
   before the change. */
.ccsa-bar {
  stroke-width: 5;
  stroke-opacity: .69;
}

/* The five dashes of the hairline, each eleven pixels shorter than the
   one under it. Laid over each other they stand at .1, .3, .5, .7 and
   1, and the fade of the original stands at .1, .3, .5, .7 and .9 in
   the middle of those same five pieces: the staircase sits on the line
   the gradient draws, and its brightest point is the brightest point
   of the original. */
.ccsa-hair-a { stroke-width: 1; stroke-opacity: .1; }
.ccsa-hair-b { stroke-width: 1; stroke-opacity: .2222; }
.ccsa-hair-c { stroke-width: 1; stroke-opacity: .2857; }
.ccsa-hair-d { stroke-width: 1; stroke-opacity: .4; }
.ccsa-hair-e { stroke-width: 1; stroke-opacity: 1; }

/* One walk of the pattern. Two hundred is where build-svg.py puts the
   middle of the light inside the pattern, so at the first frame that
   middle stands on the mouth of the cable and at the last it stands a
   thousand thousandths further on, which is the far end. Travel takes
   the front 58 per cent of the cycle; after that the light is past the
   end and stays there.

   The numbers are written out. Chromium does not interpolate a
   keyframe value for stroke-dashoffset that would have to come out of
   a custom property: it runs the animation and leaves the property on
   its starting value without saying so. */
@keyframes ccsa-walk {
  0%   { stroke-dashoffset: 200; }
  58%  { stroke-dashoffset: -800; }
  100% { stroke-dashoffset: -800; }
}

/* The light fades in as it leaves the mouth and out as it goes off the
   far end, so it appears out of the ring rather than switching on next
   to it. On the group, so all the layers of one light fade as one. */
.ccsa-run {
  opacity: 0;
  animation: ccsa-fade var(--ccsa-cycle) linear infinite;
}

@keyframes ccsa-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

/* -- public apps ------------------------------------------------- */

/* p1 out of the ring, along the lower rail of the box at the top
   right, round its corner and up out of the picture. p2 out of the
   ring, straight along the long rail to the right. p3 in from the left
   along the foot of the lower box, round its corner and up to the
   ring. The delay stands on the group and on its layers, and it is the
   same one: the group carries it for sync-proof.py to read, the layers
   carry it because their walk is a second animation. */
.ccsa-run--p1, .ccsa-run--p1 > path { animation-delay: calc(var(--ccsa-cycle) * -0.773); }
.ccsa-run--p2, .ccsa-run--p2 > path { animation-delay: calc(var(--ccsa-cycle) * -0.696); }
.ccsa-run--p3, .ccsa-run--p3 > path { animation-delay: calc(var(--ccsa-cycle) * -0.039); }

/* -- custom apps -------------------------------------------------

   No ring on this one, so the clock tells a different story with the
   same numbers. Two cables carry something in and two carry something
   out, and the device between them answers both:

     0.30   the two arriving lights reach the device
     0.30   the beam that reads downwards and the port light up
     0.50   the two leaving lights set off
     0.50   the beam that reads upwards lights up

   The two rails are the two the file draws. The outer one at 267
   carries what leaves, the inner one at 256 carries what arrives, and
   each light turns up into the device on the curve of its own cable.
   The clips the file puts on these four groups cut the lights off at
   the edge of the device, which is why an arriving light disappears
   the moment it turns in. */
.ccsa-run--c1, .ccsa-run--c1 > path { animation-delay: calc(var(--ccsa-cycle) * -0.5); }
.ccsa-run--c2, .ccsa-run--c2 > path { animation-delay: calc(var(--ccsa-cycle) * -0.72); }
.ccsa-run--c3, .ccsa-run--c3 > path { animation-delay: calc(var(--ccsa-cycle) * -0.5); }
.ccsa-run--c4, .ccsa-run--c4 > path { animation-delay: calc(var(--ccsa-cycle) * -0.72); }

/* The drawing at rest: every light back on the spot the file drew it
   on, and the travelling one not painted at all. The class comes from
   the script, which asks the browser whether it can walk a dash along
   a line before it inlines anything. */
.ccsa-still .ccsa-run { display: none; }
.ccsa-still .ccsa-rest { opacity: 1; }


/* ---------- 1c. The parts that answer the lights ----------

   Four chevrons pointing up at 0.08 stroke opacity, on the public
   drawing. They lift and brighten a fifth of a cycle apart, so the
   picture reads as something rising through it. The lift is two
   pixels; anything more and they stop being part of the drawing. */
.ccsa-chev {
  animation: ccsa-rise var(--ccsa-cycle) ease-in-out infinite;
  animation-delay: calc(var(--ccsa-cycle) * var(--i) / -5);
}

@keyframes ccsa-rise {
  0%, 62%, 100% { stroke-opacity: .08; transform: translateY(0); }
  22%           { stroke-opacity: .26; transform: translateY(-2px); }
}

/* The two beams at the notch of the device on the custom drawing. One
   reads down into it, one reads up out of it, and each brightens on
   the beat of the cables it belongs to.

   The drawing has both at full strength, so the beat can only be a
   breath below it. Anything deeper and the picture would spend most of
   its time dimmer than the file draws it, which is the one thing this
   round is not allowed to do. */
.ccsa-beam {
  animation: ccsa-beam var(--ccsa-cycle) ease-in-out infinite;
}
.ccsa-beam--in  { animation-delay: calc(var(--ccsa-cycle) * -0.18); }
.ccsa-beam--out { animation-delay: calc(var(--ccsa-cycle) * -0.38); }

@keyframes ccsa-beam {
  0%, 40%, 100% { opacity: .82; }
  12%           { opacity: 1; }
}

/* The round port under the screen, the one place in that drawing that
   says in and out. It lights when the arriving light lands, and the
   same restraint applies: the file draws it solid. */
.ccsa-port {
  animation: ccsa-port var(--ccsa-cycle) ease-in-out infinite;
  animation-delay: calc(var(--ccsa-cycle) * -0.18);
}
@keyframes ccsa-port {
  0%, 45%, 100% { stroke-opacity: .85; }
  12%           { stroke-opacity: 1; }
}

.ccsa-portbg {
  animation: ccsa-portbg var(--ccsa-cycle) ease-in-out infinite;
  animation-delay: calc(var(--ccsa-cycle) * -0.18);
}
@keyframes ccsa-portbg {
  0%, 45%, 100% { fill-opacity: .05; }
  12%           { fill-opacity: .13; }
}

/* The two soft washes under the screen breathe on the same clock, half
   a cycle apart, at a depth that is felt rather than seen. --o is the
   opacity the file gives each of them, one of them 0.15; the breath is
   a fifth below that value and never above it, so neither wash is ever
   brighter than it is drawn. */
.ccsa-wash {
  animation: ccsa-wash calc(var(--ccsa-cycle) * 2) ease-in-out infinite;
  animation-delay: calc(var(--ccsa-cycle) * var(--i) * -1);
}
@keyframes ccsa-wash {
  0%, 100% { opacity: calc(var(--o) * .8); }
  50%      { opacity: var(--o); }
}


/* ---------- 1d. Restraint ----------

   The drawing is only worth frames while somebody can see it. The
   script watches it and takes the class away when it leaves the
   screen; everything inside then stands still where it is. */
.ccsa-draw:not(.is-live) .ccsa-seg,
.ccsa-draw:not(.is-live) .ccsa-dash,
.ccsa-draw:not(.is-live) .ccsa-run,
.ccsa-draw:not(.is-live) .ccsa-run > path,
.ccsa-draw:not(.is-live) .ccsa-chev,
.ccsa-draw:not(.is-live) .ccsa-beam,
.ccsa-draw:not(.is-live) .ccsa-port,
.ccsa-draw:not(.is-live) .ccsa-portbg,
.ccsa-draw:not(.is-live) .ccsa-wash {
  animation-play-state: paused;
}

/* Somebody who has asked for less movement gets the drawing as it was.
   The script does not put it into the page at all in that case and the
   background stays. This rule is for the other direction, a preference
   changed with the page already open: the layer is there and the
   background has been taken away, so hiding it would leave a hole.
   Everything stops instead, and the travelling light is taken off the
   cables, which leaves the light of the file standing where the file
   drew it. That state was held against the original pixel for pixel. */
@media (prefers-reduced-motion: reduce) {
  .ccsa-draw .ccsa-seg,
  .ccsa-draw .ccsa-dash,
  .ccsa-draw .ccsa-chev,
  .ccsa-draw .ccsa-beam,
  .ccsa-draw .ccsa-port,
  .ccsa-draw .ccsa-portbg,
  .ccsa-draw .ccsa-wash {
    animation: none;
  }
  .ccsa-draw .ccsa-run { display: none; }
  .ccsa-draw .ccsa-rest { opacity: 1; }
}


/* ---------- 1e. The drawing between 768 and 1024 ----------

   Older than this round and kept. The page builder holds two sizes
   for these two backgrounds: nothing for wide windows, which means
   the drawing is painted at its own size, and contain for phones.
   Between the two there is no setting, so a drawing 527 and 596
   pixels wide is painted at that size into a box 351 pixels wide, and
   a tablet sees the left half of it with the right half cut off.

   Fitting the drawing into the box is what the phone rule does one
   breakpoint further down, so it is what this range gets as well.
   Centred, because the box stays as tall as it was and the fitted
   drawing is shorter than that; sitting at the top edge it would
   leave a gap underneath and read as a mistake of its own.

   Two classes plus the media query beat the four the page builder
   writes for a container background only inside this range, and the
   settings of the page are left untouched. The inlined drawing is
   laid out the same way, by the script, so both agree. */
@media (min-width: 768px) and (max-width: 1024px) {
  .ccsa-art.ccsa-art {
    background-size: contain;
    background-position: center center;
  }
}


/* ============================================================
   2. Reference chips

   Two small pills under each of the two blocks. The markup sits in the
   page (tools/r19-apps/build.php), so the two links in the public block
   are ordinary links that exist without a single line of script.

   The row is allowed to wrap: at 768 the block is 351 wide and the
   longer of the two labels alone fills it.
   ============================================================ */
.ccsa-chips .ccsa-chiprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  line-height: 1.2;
}

/* The pill itself. Same family as the badge pills of the reference
   blocks: dark fill, hair line, fully rounded, small type. */
.ccsa-chips .ccsa-chiprow .ccsa-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(215, 220, 232, .18);
  background: rgba(24, 31, 50, .85);
  color: #d7dce8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease,
              color .25s ease, transform .25s ease;
}

/* Elementor gives a link inside a widget the colour of the page, and the
   rule that does it carries the widget class, so this one carries four
   classes and the element. No !important needed at that weight. */
.elementor-widget-html .ccsa-chiprow a.ccsa-chip.ccsa-chip,
.elementor-widget-html .ccsa-chiprow a.ccsa-chip.ccsa-chip:visited {
  color: #d7dce8;
  text-decoration: none;
}

.ccsa-chips .ccsa-chiprow a.ccsa-chip:hover,
.ccsa-chips .ccsa-chiprow a.ccsa-chip:focus-visible,
.elementor-widget-html .ccsa-chiprow a.ccsa-chip.ccsa-chip:hover,
.elementor-widget-html .ccsa-chiprow a.ccsa-chip.ccsa-chip:focus-visible {
  border-color: rgba(255, 142, 43, .55);
  background: rgba(30, 38, 60, .95);
  color: #ffffff;
  transform: translateY(-1px);
}

.ccsa-chips .ccsa-chiprow a.ccsa-chip:focus-visible {
  outline: 2px solid rgba(255, 142, 43, .8);
  outline-offset: 2px;
}

/* The one chip that leaves the site. Orange edge and orange label, plus
   a small mark at the end that says the same thing without a picture
   file. */
.ccsa-chips .ccsa-chiprow .ccsa-chip--go,
.elementor-widget-html .ccsa-chiprow a.ccsa-chip--go.ccsa-chip--go {
  border-color: rgba(255, 142, 43, .42);
  color: #ffb765;
}
.ccsa-chips .ccsa-chiprow .ccsa-chip--go::after {
  content: "\2197";           /* north east arrow, leaves the site */
  font-size: 12px;
  line-height: 1;
  margin-left: 7px;
  opacity: .8;
}
.elementor-widget-html .ccsa-chiprow a.ccsa-chip--go.ccsa-chip--go:hover,
.elementor-widget-html .ccsa-chiprow a.ccsa-chip--go.ccsa-chip--go:focus-visible {
  border-color: rgba(255, 142, 43, .85);
  color: #ffffff;
}

/* The pulsing dot of the effect layer sits a shade smaller in a chip
   than it does in a badge, and it needs no space of its own beyond the
   gap the row already gives it. */
.ccsa-chips .ccsa-chiprow .ccfx-dot {
  --ccfx-dot-size: 6px;
  --ccfx-dot-gap: 8px;
}

@media (max-width: 767px) {
  .ccsa-chips .ccsa-chiprow .ccsa-chip {
    font-size: 12px;
    padding: 6px 13px;
  }
}


/* ============================================================
   3. The two blocks

   Both blocks carry a painted frame in their background and a rounded
   corner of 16 pixels. The rim of the engine draws on the outside of
   the box, so it needs room to breathe: the default padding of the
   engine is meant for a card in a grid, these two stand alone and can
   take a wider aura without touching their neighbour.

   No transform of any kind. The drawing inside is placed in absolute
   pixels; a block that moved under the pointer would drag it along and
   the two layers would part company.
   ============================================================ */
.ccsa-block {
  --gc-pad: 18px;
}

/* The block already has overflow visible on the live page. Stating it
   here keeps the aura outside the frame should that ever change: a
   clipped block would cut its own glow at the corner. */
.ccsa-block.ccsa-block { overflow: visible; }


/* ============================================================
   4. The call to action

   The pill is a container with the drawing of a pill in its background
   and the label inside it. Both effects therefore go on the container,
   which is the shape they have to follow. Two things need saying in
   css:

   The specular canvas reads the border radius of its host to know the
   shape it draws. The container has none, because the round ends come
   from the picture, so the radius is set here. Half the height of the
   pill is the cap the effect applies anyway; naming it makes the rim
   land on the painted edge instead of on a rectangle around it.

   The travelling light clips its host, and the label must stay above
   both layers.
   ============================================================ */
.ccsa-ctapill {
  border-radius: 999px;
  /* ROUND 26. The comment above says the travelling light clips its host,
   * and it did not: this declaration was missing, and the container is one
   * of the few pills on the site that Elementor leaves at overflow visible.
   * Measured on the live page: the pill is 197 by 64 and the specular layer
   * 237 by 104, so the glint stood 20 pixels clear of the pill on every
   * side and drifted around it instead of across it - which is what was
   * reported. Every other pill of this page already carries hidden.
   *
   * It clips the travelling light onto the rim as well, which is where this
   * site wants it (see the note on ccx-star-round in the skill: the round
   * variant pulls both bands into the FACE and is only for real round
   * hosts).
   *
   * Two names and the variable, and both parts are needed. Elementor writes
   * `.e-con { overflow: var(--overflow) }` in its own stylesheet, which is
   * one class like this rule and loads AFTER it, so a single name loses the
   * tie - measured: the declaration was there and the computed value stayed
   * visible. The variable is the hook Elementor itself provides, so setting
   * it is the quiet half of the fix; the doubled name settles the rest
   * without an !important. */
  --overflow: hidden;
  overflow: hidden;
}

/* And the part that actually decides it.
 *
 * The container carries an INLINE style attribute reading overflow: visible,
 * written by the page builder out of its own container settings. An inline
 * declaration beats every rule in every stylesheet regardless of how many
 * class names it is given, which is why the two blocks above are correct and
 * were still not enough - measured: --overflow computed to hidden while
 * overflow stayed visible.
 *
 * !important is the one thing that outranks an inline declaration, and it is
 * what this site already uses wherever the specular glint and the travelling
 * light share a host (see the note in the skill on that pair). The
 * alternative would be to change the container setting in the page data,
 * which is a write into the page for something a single line of CSS settles. */
.ccsa-ctapill.ccsa-ctapill {
  --overflow: hidden;
  overflow: hidden !important;
}

.ccsa-ctapill > .elementor-element {
  position: relative;
  z-index: 2;
}

/* The light is the gold of the site and takes a little longer for a
   turn than a small button does, because this pill is wide. */
.ccsa-ctapill {
  --ccx-star-speed: 7s;
  --ccx-star-color: #ffb765;
}

/* rv:20260831a cache refresh */