/* ==========================================================================
   CC SmileScore app page (/smilescore-app/)

   Namespace ccsa-. Every rule is scoped by the body class .ccsa-sapp, which
   inc/ccx-sapp.php sets on that page alone, so nothing here can reach another
   page even if a selector were to match there.

   Colours follow the site: page navy #0b1227, card frame of this page
   rgb(46,54,79), accent orange #ff8e2b, silver #d7dce8, glow hue 212.

   Specificity. The page stylesheet Elementor writes names three classes
   (.elementor-2950 .elementor-element.elementor-element-xxxxxxx), so a rule
   that has to reach past one of its declarations names the body element as
   well and lands one step above it. Rules that only add something new stay at
   two names.

   Nothing in here changes a layout box. Every addition is a colour, a shadow
   or a decorative pseudo element, so no section can shift.

   The shared "Access Key Resources" block at the foot of the page (library
   template 2932) is not touched by a single selector: it is dressed by
   inc/ccx-papp-sections.php for every page that embeds it.
   ========================================================================== */

.ccsa-sapp {
  --ccsa-rule: rgb(46, 54, 79);
  --ccsa-rule-lit: rgba(120, 160, 235, 0.55);
  --ccsa-accent: #ff8e2b;
  --ccsa-glow: 212 92% 62%;
  --ccsa-rail: rgba(36, 44, 69, 1);
}


/* ==========================================================================
   1. The badge over the opening line
   ========================================================================== */

/* The wide bar draws its shape as a background picture with transparent
   corners, and the box around it has square corners, so the rim of the glow
   would have traced a rectangle around a rounded bar. The radius costs nothing
   visually - the box has no background and no frame of its own - and it gives
   the ring the shape it should follow. 12px is the radius of the picture,
   measured on the file (228 by 64, corner inset 9px on the first row) and
   rendered at exactly that size, so no scaling has to be undone.

   The bar for phones needs nothing: it carries a real frame and a 12px radius
   in the page data, and the ring inherits both. */
.ccsa-sapp [data-id="9785260"] { border-radius: 12px; }

/* A badge is small, so the aura stays close. The factory 16px would reach
   past the left edge of the text column on a phone. */
.ccsa-sapp .ccsa-badge.mmrb-glowcard { --gc-pad: 12px; }


/* ==========================================================================
   2. Section eyebrows
   ========================================================================== */

/* The Problem Solved pill takes the rim through the module and needs no shape
   of its own: it carries a real frame and a 55px radius in the page data.
   What is added here is a slow breath of that frame, the reading the badge
   pills of the reference blocks have, in the warm accent of this page rather
   than the green those use, because green is the status colour of the site and
   this one is a section label.

   The animation names the box itself rather than a wrapper: the frame belongs
   to the container. A CSS animation outranks a normal declaration, so the
   frame colour the page data sets is picked up as the resting value of the
   keyframes and written back at both ends. */
.ccsa-sapp [data-id="19e6016"] {
  animation: ccsa-pill-breath 3.6s ease-in-out infinite;
}

@keyframes ccsa-pill-breath {
  0%, 100% {
    border-color: rgb(51, 51, 51);
    box-shadow: 0 0 0 0 rgba(255, 142, 43, 0);
  }
  50% {
    border-color: rgba(255, 142, 43, 0.42);
    box-shadow: 0 0 14px 0 rgba(255, 142, 43, 0.16);
  }
}

/* ABOUT THIS APP is a plain orange line with no pill around it, so it gets the
   mark the site puts in front of a badge label instead: a small dot that
   breathes. Drawn on the line itself, so the page data stays as it is; the
   line is centred, and the dot moves with it. */
.ccsa-sapp [data-id="be25d67"] .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8e2b;
  box-shadow: 0 0 8px rgba(255, 142, 43, 0.75);
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 8px;
  animation: ccsa-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes ccsa-dot-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}


/* ==========================================================================
   3. Accent words

   Four of the large headlines hold one colour in the page data, so the word
   that is to run orange gets a span in the browser (assets/ccx-sapp.js). The
   three headlines that already carry a span arrive orange on their own, from a
   rule of the page; these four are named here.

   The colour is also what a reader sees when the effect layer never runs: the
   shine paints from a variable of its own, and under reduced motion it hands
   the letters back to the colour underneath.
   ========================================================================== */

.ccsa-sapp .elementor-heading-title span.ccsa-accent { color: #ff8e2b; }


/* ==========================================================================
   4. The two numbered setup steps

   The circle is drawn by the page as one picture: an orange disc inside a box
   of 80 (70 on a phone), with a hairline ring on the outer edge of that box.
   Both layers below sit exactly on that box, which puts the light on the
   hairline ring instead of tight around the disc, and leaves the drawing
   itself untouched.

   The box shadows never move, only opacity and scale do, so the two layers
   stay on the compositor and a pass costs a repaint of the line and nothing
   else.

   Where the line between the circles goes is measured, not written down: two
   circles side by side on wide screens, under each other on a phone.
   assets/ccx-sapp.js has the reasoning.
   ========================================================================== */

.ccsa-sapp .ccsa-stage {
  --ccsa-cycle: 4.5s;
}

.ccsa-sapp .ccsa-stage > .ccsa-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.ccsa-sapp .ccsa-stage > .ccsa-rail--off {
  display: none;
}

/* The resting line. Silver where it starts, warming towards the orange of the
   circles, and faint enough that it reads as a distance rather than as a rule
   across the block. */
.ccsa-sapp .ccsa-rail__base {
  stroke: rgba(215, 220, 232, 0.17);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The spark. One dash on an otherwise empty pattern: its gap holds the whole
   line plus the dark stretch between two passes, so one turn of the pattern is
   one turn of the animation and the loop closes without a jump. Both numbers
   come from the script, which knows how long the line turned out to be.

   The halo is the same dash drawn wider and weaker underneath. A blur filter
   would have done the same thing and would have had to be recomputed on every
   frame of the pass; a second stroke costs nothing. */
.ccsa-sapp .ccsa-rail__halo,
.ccsa-sapp .ccsa-rail__beam {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ccsa-dash, 0) var(--ccsa-gap, 99999);
  stroke-dashoffset: var(--ccsa-from, 0);
  animation: ccsa-run var(--ccsa-cycle) linear infinite;
  animation-play-state: paused;
}
.ccsa-sapp .ccsa-rail__halo {
  stroke: rgba(255, 142, 43, 0.20);
  stroke-width: 9;
}
.ccsa-sapp .ccsa-rail__beam {
  stroke: #ffcf9e;
  stroke-width: 2.4;
}

@keyframes ccsa-run {
  from { stroke-dashoffset: var(--ccsa-from, 0); }
  to   { stroke-dashoffset: var(--ccsa-to, 0); }
}

/* The pass runs while the block is on screen and holds its place when it is
   not, so scrolling back does not drop the viewer into the middle of a half
   finished sweep. */
.ccsa-sapp .ccsa-stage.ccsa-live .ccsa-rail__halo,
.ccsa-sapp .ccsa-stage.ccsa-live .ccsa-rail__beam,
.ccsa-sapp .ccsa-stage.ccsa-live .ccsa-num .elementor-icon::before,
.ccsa-sapp .ccsa-stage.ccsa-live .ccsa-num .elementor-icon::after {
  animation-play-state: running;
}

.ccsa-sapp .ccsa-num .elementor-icon {
  position: relative;
  isolation: isolate;
}

/* the ring, and its slow breath */
.ccsa-sapp .ccsa-num .elementor-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 142, 43, 0.30),
    0 0 16px 1px rgba(255, 142, 43, 0.26),
    0 0 36px 5px rgba(255, 142, 43, 0.12);
  opacity: 0.62;
  animation: ccsa-breathe 3.8s ease-in-out infinite;
  animation-play-state: paused;
}
@keyframes ccsa-breathe {
  0%, 100% { opacity: 0.58; }
  50%      { opacity: 1; }
}

/* The flare. It opens once per pass, at the moment the spark reaches this
   circle: the script writes that moment into --ccsa-t as a delay, and the turn
   is as long as the pass, so the two never drift apart.

   A circle already taking light as the spark arrives reads as the spark
   igniting it, so the delay is set a breath early rather than late. */
.ccsa-sapp .ccsa-num .elementor-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 2px rgba(255, 178, 110, 0.55),
    0 0 24px 5px rgba(255, 142, 43, 0.38);
  animation: ccsa-flare var(--ccsa-cycle) linear infinite;
  animation-delay: var(--ccsa-t, 0s);
  animation-play-state: paused;
}
@keyframes ccsa-flare {
  0%   { opacity: 0;    transform: scale(1); }
  3%   { opacity: 0.95; transform: scale(1); }
  18%  { opacity: 0;    transform: scale(1.4); }
  100% { opacity: 0;    transform: scale(1.4); }
}


/* ==========================================================================
   5. The six advanced feature cards

   Rim glow, soft interior spot and a ring on the round icon, handed out by
   class name in inc/ccx-sapp.php. Only the reach of the aura is set here.

   The default reach of 36px would put the aura of the outer cards past the
   edge of the window on a phone, where the card sits 16px from it, and a
   hidden layer out there still makes the page scrollable sideways. 20px clears
   the widest row on a desktop, the phone value is further down.
   ========================================================================== */

.ccsa-sapp .ccsa-card.mmrb-glowcard { --gc-pad: 20px; }
.ccsa-sapp .ccsa-cardicon.mmrb-glowcard {
  --gc-pad: 9px;
  /* The picture is a disc of 64px and the box that holds it is exactly that
     size, so the ring needs no correction of its own. Named here all the same,
     because a later change to the icon size has to stay a circle. */
  border-radius: 50%;
}


/* ==========================================================================
   6. The seven benefit cards

   A rim glow on every one of them as well would turn the middle of the page
   into a light show, and the section above them already carries the loud
   version, so these get the quiet one: the card lifts a little under the
   pointer, its frame brightens, and the ring around the icon only appears
   while the pointer is on the card.

   The class is repeated to clear the frame colour the page builder writes for
   each card by id. That rule carries three class names; five settle it without
   an !important, which would also take the colour away from anyone editing the
   card later.
   ========================================================================== */

.ccsa-sapp .ccsa-soft {
  transition:
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.38s ease,
    background-color 0.38s ease;
}

/* The lift is held back while the card is still flying in: the entrance owns
   the transform for those few hundred milliseconds, and two writers on one
   property would make the card jump.

   A finger has no hover. On a touch screen the lift would stick to the last
   card tapped, so the whole block is left to pointers that can leave again. */
@media (hover: hover) {
  .ccsa-sapp .ccsa-soft.ccsa-soft.ccsa-soft.ccsa-soft.ccsa-soft:not(.elementor-invisible):hover {
    transform: translateY(-4px);
    border-color: rgba(133, 168, 226, 0.42);
    background-color: rgba(216, 226, 255, 0.065);
  }
  .ccsa-sapp .ccsa-soft:hover .ccsa-softicon::after { opacity: 1; }
}

.ccsa-sapp .ccsa-softicon {
  position: relative;
  isolation: isolate;
}
.ccsa-sapp .ccsa-softicon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 1px hsl(var(--ccsa-glow) / 0.42),
    0 0 14px 1px hsl(var(--ccsa-glow) / 0.30),
    0 0 28px 4px hsl(var(--ccsa-glow) / 0.14);
  transition: opacity 0.34s ease;
}


/* ==========================================================================
   7. Feature roadmap

   The timeline draws its line as two short one colour borders, both 2px and
   both in #242C45: the right edge of the icon at the head of the column
   (87fc693, 60px long) and the right edge of the icon inside the station
   itself (b815fb6, 27px). On narrow screens the line is the left edge of the
   station column (43ee211).

   All three are replaced by a gradient that fades in at the top and out at the
   bottom, so the line reads as a run and not as a box edge. The two wide
   screen pieces share one run: the upper one carries it from nothing to blue,
   the lower one from blue to orange, so the seam at the join is invisible.

   Full geometry on every side of each pseudo element: an Elementor container
   brings its own pseudo element rules along, and a half declared box would
   inherit their left, width, height and border.
   ========================================================================== */

/* -- wide screens ------------------------------------------------------- */

body.ccsa-sapp .elementor-element[data-id="87fc693"],
body.ccsa-sapp .elementor-element[data-id="b815fb6"] .elementor-icon {
  position: relative;
  border-right-color: transparent !important;
}

body.ccsa-sapp .elementor-element[data-id="87fc693"]::after,
body.ccsa-sapp .elementor-element[data-id="b815fb6"] .elementor-icon::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: -2px;
  width: 2px;
  height: auto;
  border: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

/* upper piece: out of the dark into the blue of the run */
body.ccsa-sapp .elementor-element[data-id="87fc693"]::after {
  background: linear-gradient(
    180deg,
    rgba(36, 44, 69, 0) 0%,
    rgba(36, 44, 69, 1) 14%,
    rgba(86, 116, 176, 0.85) 100%
  );
}

/* lower piece: on from that blue into the orange of the station */
body.ccsa-sapp .elementor-element[data-id="b815fb6"] .elementor-icon::after {
  background: linear-gradient(
    180deg,
    rgba(86, 116, 176, 0.85) 0%,
    rgba(255, 142, 43, 0.55) 100%
  );
}

/* -- narrow screens ----------------------------------------------------- */

body.ccsa-sapp .elementor-element[data-id="43ee211"] {
  position: relative;
  border-left-color: transparent !important;
}
body.ccsa-sapp .elementor-element[data-id="43ee211"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  left: -2px;
  width: 2px;
  height: auto;
  border: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 44, 69, 0) 0%,
    rgba(36, 44, 69, 1) 6%,
    rgba(86, 116, 176, 0.85) 40%,
    rgba(255, 142, 43, 0.55) 76%,
    rgba(36, 44, 69, 0) 100%
  );
}

/* -- the stations ------------------------------------------------------- */

/* The head of the column is a round mark of 32px that already carries the page
   navy behind it, which is what makes it look like a bead on the string. It
   gets a ring that breathes, and the ring is a shadow, so the mark keeps its
   size and the line underneath stays put. */
.ccsa-sapp [data-id="87fc693"] .elementor-icon {
  border-radius: 50%;
  animation: ccsa-node 4.6s ease-in-out infinite;
}

/* The station dots themselves are small drawings inside their icon, not boxes,
   so their halo is a drop shadow on the drawing rather than a ring around a
   box: a shadow on the box would sit around the 7px wide holder and miss the
   dot. Three stations, two of them for phones, breathing out of step so the
   column does not pulse as one block. */
.ccsa-sapp [data-id="b815fb6"] .elementor-icon svg,
.ccsa-sapp [data-id="0f27220"] .elementor-icon svg,
.ccsa-sapp [data-id="fc998c8"] .elementor-icon svg {
  animation: ccsa-dotglow 4.6s ease-in-out infinite;
}
.ccsa-sapp [data-id="0f27220"] .elementor-icon svg { animation-delay: -1.7s; }
.ccsa-sapp [data-id="fc998c8"] .elementor-icon svg { animation-delay: -3.1s; }

@keyframes ccsa-node {
  0%, 100% {
    box-shadow:
      0 0 0 0 hsl(var(--ccsa-glow) / 0),
      0 0 8px 0 hsl(var(--ccsa-glow) / 0.16);
  }
  50% {
    box-shadow:
      0 0 0 3px hsl(var(--ccsa-glow) / 0.09),
      0 0 16px 2px hsl(var(--ccsa-glow) / 0.34);
  }
}
@keyframes ccsa-dotglow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 142, 43, 0.25)); }
  50%      { filter: drop-shadow(0 0 7px rgba(255, 142, 43, 0.75)); }
}

/* The heading of a station lightens when the pointer is on its box, so the
   column answers without any of it moving. */
.ccsa-sapp [data-id="bbfcfe9"] .elementor-icon-box-title,
.ccsa-sapp [data-id="bbfcfe9"] .elementor-icon-box-title span {
  transition: color 0.3s ease-out;
}
.ccsa-sapp [data-id="bbfcfe9"] .elementor-widget-icon-box:hover .elementor-icon-box-title,
.ccsa-sapp [data-id="bbfcfe9"] .elementor-widget-icon-box:hover .elementor-icon-box-title span {
  color: #fff;
}


/* ==========================================================================
   8. Questions (toggles 5403beb and c9bfa7a)

   The items already look like cards: a faint white gradient, a 1.2px frame in
   #292f42 and a 16px radius, all of it from the page settings. What is missing
   is any sign that they can be operated and which one is open.

   This page uses the older toggle widget, not the nested accordion of
   /price-app/, so the open state is a class on the title and on the panel and
   not an open attribute on a details element.

   Spacing is deliberately not touched: the widget already keeps 16px between
   the items and 20px inside each title row, which measures and reads
   correctly.
   ========================================================================== */

.ccsa-sapp .custom-FAQ .elementor-toggle-item {
  transition:
    border-color 0.28s ease-out,
    background-color 0.28s ease-out,
    box-shadow 0.28s ease-out;
}

.ccsa-sapp .custom-FAQ .elementor-toggle-item:hover {
  border-color: var(--ccsa-rule-lit);
  background-color: rgba(216, 226, 255, 0.03);
}

/* Open state. The orange hair line on the left says which answer is showing,
   and it is drawn as an inset shadow so no box changes size. The item carries
   no state of its own - the widget marks the title and the panel - so the item
   is reached in two ways: through the title for engines that can look inside
   an element, and through a class the script mirrors onto the item for the
   ones that cannot. The two rules are written separately on purpose: a
   selector list is dropped in full by an engine that does not understand one
   of its parts. */
.ccsa-sapp .custom-FAQ .elementor-toggle-item.ccsa-open {
  border-color: rgba(120, 160, 235, 0.42);
  background-color: rgba(216, 226, 255, 0.04);
  box-shadow:
    inset 2px 0 0 0 var(--ccsa-accent),
    0 14px 30px -26px rgba(4, 9, 22, 0.95);
}
.ccsa-sapp .custom-FAQ .elementor-toggle-item:has(.elementor-tab-title.elementor-active) {
  border-color: rgba(120, 160, 235, 0.42);
  background-color: rgba(216, 226, 255, 0.04);
  box-shadow:
    inset 2px 0 0 0 var(--ccsa-accent),
    0 14px 30px -26px rgba(4, 9, 22, 0.95);
}

/* The summary row is the hit area. A pointer on it should say so. The whole
   row already answers to a click through the widget, but only the title text
   is a link, so the row is given the hand as well. */
.ccsa-sapp .custom-FAQ .elementor-tab-title {
  cursor: pointer;
  transition: color 0.24s ease-out;
}

/* Plus and minus. The widget swaps the two marks, so both are styled and the
   turn happens on the one that is on screen. */
.ccsa-sapp .custom-FAQ .elementor-toggle-icon-closed,
.ccsa-sapp .custom-FAQ .elementor-toggle-icon-opened {
  display: inline-block;
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.24s ease-out;
}
.ccsa-sapp .custom-FAQ .elementor-toggle-item:hover .elementor-toggle-icon-closed {
  transform: rotate(90deg);
}
.ccsa-sapp .custom-FAQ .elementor-tab-title.elementor-active .elementor-toggle-icon-opened {
  transform: rotate(180deg);
}
.ccsa-sapp .custom-FAQ .elementor-toggle-item:hover .elementor-toggle-icon svg,
.ccsa-sapp .custom-FAQ .elementor-tab-title.elementor-active .elementor-toggle-icon svg {
  fill: var(--ccsa-accent);
}


/* ==========================================================================
   9. Pricing plans

   Four plan cards, each the outer box a visitor reads as a card: the 16px
   frame and the rule between head and body belong to it, so the rim takes that
   shape by itself. The aura is held back to 20px because the cards stand in a
   row with 24px between them and the factory 36px would let two neighbours
   light up at once.
   ========================================================================== */

.ccsa-sapp .mmrb-glowcard.ccsa-plan {
  --gc-pad: 20px;
  transition:
    transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.32s ease-out,
    box-shadow 0.32s ease-out;
  will-change: transform;
}

/* The lift. Three pixels is enough to read as an answer and small enough that
   the row does not look ragged while the pointer travels along it. The rim
   spans are children of the card, so they travel with it and the pointer maths
   in the engine keeps up: it measures the box on every move. */
.ccsa-sapp .mmrb-glowcard.ccsa-plan:hover,
.ccsa-sapp .mmrb-glowcard.ccsa-plan:focus-within {
  transform: translateY(-3px);
  border-color: var(--ccsa-rule-lit);
  box-shadow: 0 18px 34px -22px rgba(4, 9, 22, 0.9);
}

/* The recommended plan. Advanced is the tier the page steers towards, and a
   pricing table says so with its frame rather than with a word - there is no
   place for a badge in this markup and none is invented here. The card keeps a
   faint lit rim at rest; on hover it joins the others.
   To move the recommendation, change the one data-id below. To drop it, delete
   this block. */
.ccsa-sapp .elementor-element[data-id="b797435"] {
  border-color: rgba(120, 160, 235, 0.38);
  box-shadow:
    0 0 0 1px rgba(120, 160, 235, 0.10),
    0 12px 40px -30px hsl(var(--ccsa-glow) / 0.55);
}

/* The Get started pills. The shape is already right - a real 100px radius and
   a real frame - so the glint and the travelling light come from the engine
   and only their pace is set here. */
.ccsa-sapp .ccsa-pill {
  --ccx-star-speed: 6s;
  --ccx-star-opacity: 0.9;
  /* softer than the white of a filled orange pill: this one is dark navy, and
     the factory value washes the surface out */
  --sb-light: rgba(255, 255, 255, 0.22);
  --sb-edge: rgba(255, 190, 120, 0.85);
}


/* ==========================================================================
   10. Narrow screens

   The circles stand under each other below 768px and the line between them
   shrinks to the clear gap over the lower one, which the script measures. The
   ring loses a little of its reach so it does not run into the paragraph
   above, and every aura is pulled inside the 16px gutter the sections keep, so
   the page cannot be dragged sideways.
   ========================================================================== */

@media (max-width: 767px) {
  .ccsa-sapp .ccsa-card.mmrb-glowcard,
  .ccsa-sapp .mmrb-glowcard.ccsa-plan { --gc-pad: 12px; }
  .ccsa-sapp .ccsa-badge.mmrb-glowcard { --gc-pad: 10px; }

  .ccsa-sapp .ccsa-num .elementor-icon::after {
    box-shadow:
      0 0 0 1px rgba(255, 142, 43, 0.30),
      0 0 12px 1px rgba(255, 142, 43, 0.24),
      0 0 26px 3px rgba(255, 142, 43, 0.10);
  }
  .ccsa-sapp .ccsa-rail__halo { stroke-width: 7; }
}


/* ==========================================================================
   11. Less movement

   Without scripting there is no line, no ring and no accent word: all of them
   arrive as marker classes from the effect layer, so the page falls back to
   exactly what it looked like before this round.

   For a visitor who asked the system for less movement the line is drawn in
   full and the circles keep their ring, standing still. The spark is weakened
   where it stands, because a pass that cannot travel would otherwise leave a
   solid orange rule across the block.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ccsa-sapp .ccsa-rail__halo,
  .ccsa-sapp .ccsa-rail__beam {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .ccsa-sapp .ccsa-rail__halo { opacity: 0.5; }
  .ccsa-sapp .ccsa-rail__beam { opacity: 0.55; }
  .ccsa-sapp .ccsa-stage.ccsa-live .ccsa-rail__halo,
  .ccsa-sapp .ccsa-stage.ccsa-live .ccsa-rail__beam,
  .ccsa-sapp .ccsa-stage.ccsa-live .ccsa-num .elementor-icon::before,
  .ccsa-sapp .ccsa-stage.ccsa-live .ccsa-num .elementor-icon::after,
  .ccsa-sapp .ccsa-num .elementor-icon::before,
  .ccsa-sapp .ccsa-num .elementor-icon::after,
  .ccsa-sapp [data-id="19e6016"],
  .ccsa-sapp [data-id="be25d67"] .elementor-heading-title::before,
  .ccsa-sapp [data-id="87fc693"] .elementor-icon,
  .ccsa-sapp [data-id="bbfcfe9"] .elementor-icon svg {
    animation: none;
  }
  .ccsa-sapp .ccsa-num .elementor-icon::after { opacity: 0.8; }
  .ccsa-sapp .ccsa-num .elementor-icon::before { opacity: 0; }
  .ccsa-sapp .ccsa-soft,
  .ccsa-sapp .ccsa-softicon::after,
  .ccsa-sapp .mmrb-glowcard.ccsa-plan,
  .ccsa-sapp .custom-FAQ .elementor-toggle-item,
  .ccsa-sapp .custom-FAQ .elementor-toggle-icon-closed,
  .ccsa-sapp .custom-FAQ .elementor-toggle-icon-opened { transition: none; }
}