/* ==========================================================================
   CC app pages - the lower half of /price-app/ plus the shared resources
   block (library template 2932, embedded on all three app pages).

   Namespace ccps-. Two scopes, on purpose:
     .elementor-2278   what only exists on the price app page
     .elementor-2932   the resources block, so it looks the same wherever it
                       is embedded (price, nutrition, smilescore)

   Colours follow the site: page navy #0b1227, card blue #181f32, card rule
   rgb(44,51,76), accent orange #ff8e2b, silver #d7dce8, glow hue 212.

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

.elementor-2278,
.elementor-2932 {
  --ccps-rule: rgb(44, 51, 76);
  --ccps-rule-lit: rgba(120, 160, 235, 0.55);
  --ccps-accent: #ff8e2b;
  --ccps-glow: 212 92% 62%;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-2278 *,
  .elementor-2932 * {
    /* the pulses below are decoration only, they may stop without loss */
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   1. Pricing plans (section adcccce, cards 4bfe12e 2a427bd db5bfab b1e923c)

   The section clips its content. That is what keeps the row from pushing the
   page sideways, so it has to stay - but the rim glow of a card reaches
   beyond the card and would be cut off exactly at the frame. overflow:clip
   with a clip margin keeps the containment and still lets the light out;
   where a browser does not know the margin it falls back to plain clipping,
   which is the state of today.
   ========================================================================== */

.elementor-2278 .elementor-element.elementor-element-adcccce {
  overflow: clip;
  overflow-clip-margin: 26px;
}

/* Aura held to 20px: the cards stand about 24px apart, the factory 36px would
   light up two neighbours at once. */
.elementor-2278 .mmrb-glowcard.ccps-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). */
.elementor-2278 .mmrb-glowcard.ccps-plan:hover,
.elementor-2278 .mmrb-glowcard.ccps-plan:focus-within {
  transform: translateY(-3px);
  border-color: var(--ccps-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. */
.elementor-2278 .elementor-element.elementor-element-db5bfab {
  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(--ccps-glow) / 55%);
}

/* Pills: the shape is already right, only the corners of the head band need
   to keep their rounding while the card lifts. Nothing else to do here, the
   glint and the travelling light come from the engine. */
.elementor-2278 .ccps-pill {
  --ccx-star-speed: 6s;
  --ccx-star-opacity: 0.9;
}

/* ==========================================================================
   2. Feature roadmap (section b5dbe65)

   The timeline draws its line as a plain one colour border: on wide screens
   as the right edge of the left half (64040dc), on narrow screens as the left
   edge of the station column (1523f30). Both 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 stations are the icons of the icon boxes. Two of those widgets carry an
   Elementor scroll effect that writes opacity straight onto the element, so
   nothing here touches opacity on a host - the pulse lives in box-shadow and
   in a pseudo element of the icon.
   ========================================================================== */

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

.elementor-2278 .elementor-element.elementor-element-64040dc {
  position: relative;
  border-right-color: transparent;
}

/* Explicit geometry on every side: an Elementor container brings its own
   pseudo element rules along, and a half declared box would inherit their
   left, width, height and border. */
.elementor-2278 .elementor-element.elementor-element-64040dc::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;
  background: linear-gradient(
    180deg,
    rgba(36, 44, 69, 0) 0%,
    rgba(36, 44, 69, 1) 8%,
    rgba(86, 116, 176, 0.85) 38%,
    rgba(255, 142, 43, 0.55) 72%,
    rgba(36, 44, 69, 0) 100%
  );
}

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

.elementor-2278 .elementor-element.elementor-element-1523f30 {
  position: relative;
  border-left-color: transparent;
}

.elementor-2278 .elementor-element.elementor-element-1523f30::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 icon sits on the line and already carries the page navy as its own
   background, which is what makes it look like a bead on a string. It gets a
   ring that breathes, and the ring is a shadow, so the icon keeps its size
   and the line underneath stays put. */
.elementor-2278 .elementor-element.elementor-element-b5dbe65 .elementor-icon-box-icon .elementor-icon,
.elementor-2278 .elementor-element.elementor-element-16cb00b .elementor-icon {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  animation: ccps-node 4.6s ease-in-out infinite;
}

/* The five stations breathe out of step, otherwise the column pulses as one
   block. The offsets are deliberately not multiples of each other. */
.elementor-2278 .elementor-element.elementor-element-16cb00b .elementor-icon { animation-delay: 0s; }
.elementor-2278 .elementor-element.elementor-element-aa79427 .elementor-icon { animation-delay: -1.7s; }
.elementor-2278 .elementor-element.elementor-element-b1606f0 .elementor-icon { animation-delay: -3.1s; }
.elementor-2278 .elementor-element.elementor-element-c20f0b9 .elementor-icon { animation-delay: -0.9s; }
.elementor-2278 .elementor-element.elementor-element-2f8e51f .elementor-icon { animation-delay: -2.4s; }
.elementor-2278 .elementor-element.elementor-element-bb563b6 .elementor-icon { animation-delay: -3.8s; }

@keyframes ccps-node {
  0%, 100% {
    box-shadow:
      0 0 0 0 hsl(var(--ccps-glow) / 0%),
      0 0 8px 0 hsl(var(--ccps-glow) / 16%);
  }
  50% {
    box-shadow:
      0 0 0 3px hsl(var(--ccps-glow) / 9%),
      0 0 16px 2px hsl(var(--ccps-glow) / 34%);
  }
}

/* The heading of a station lightens when the pointer is on its box, so the
   column answers without any of it moving. */
.elementor-2278 .elementor-element.elementor-element-b5dbe65 .elementor-widget-icon-box {
  transition: none;
}
.elementor-2278 .elementor-element.elementor-element-b5dbe65 .elementor-icon-box-title {
  transition: color 0.3s ease-out;
}
.elementor-2278 .elementor-element.elementor-element-b5dbe65 .elementor-widget-icon-box:hover .elementor-icon-box-title,
.elementor-2278 .elementor-element.elementor-element-b5dbe65 .elementor-widget-icon-box:hover .elementor-icon-box-title span {
  color: #fff;
}

/* ==========================================================================
   3. Questions (section d705b98, accordions 0ea00ce and 5afd490)

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

/* Spacing is deliberately not touched. The widget already keeps 16px between
   the items and 20px inside each title row (15px on phones), which measures
   and reads correctly, and the first attempt here proved the point: a
   margin-bottom of 10px did not add air, it overwrote the 16px the widget
   sets from --n-accordion-item-title-space-between and pulled the whole lower
   half of the page up by 20px. Nothing below is worth that. */
.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item,
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item {
  transition:
    border-color 0.28s ease-out,
    background-color 0.28s ease-out,
    box-shadow 0.28s ease-out;
}

.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item:hover,
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item:hover {
  border-color: var(--ccps-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. */
.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item[open],
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item[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(--ccps-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. */
.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item-title,
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item-title {
  cursor: pointer;
  transition: color 0.24s ease-out;
}

/* Plus and minus. Elementor swaps the two icons, so both are styled and the
   turn happens on the one that is on screen. */
.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item-title-icon,
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item-title-icon {
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.24s ease-out;
}
.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item:hover .e-n-accordion-item-title-icon,
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item:hover .e-n-accordion-item-title-icon {
  transform: rotate(90deg);
  color: var(--ccps-accent);
}
.elementor-2278 .elementor-element-0ea00ce .e-n-accordion-item[open] .e-n-accordion-item-title-icon,
.elementor-2278 .elementor-element-5afd490 .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  transform: rotate(180deg);
  color: var(--ccps-accent);
}

/* Round 28: the two rules above asked for the accent through `color`, but
   the widget stylesheet paints the sign through
   `... .e-n-accordion-item-title-icon span > svg { fill: var(--n-accordion-icon-active-color) }`
   which is one element more specific than anything reasonable written
   against the icon, so the sign stayed white while every other list on the
   site turned orange. The cure is to feed the VARIABLE the widget rule
   reads instead of fighting its selector. */
.elementor-2278 .elementor-widget-n-accordion.elementor-element-0ea00ce,
.elementor-2278 .elementor-widget-n-accordion.elementor-element-5afd490 {
  --n-accordion-icon-hover-color: var(--ccps-accent);
  --n-accordion-icon-active-color: var(--ccps-accent);
}

/* The Documentation buttons inside the answers keep the glint they get from
   the site wide button rule: they are real buttons and are meant to be
   pressed. Their spacing is left alone for the same reason as above. */

/* ==========================================================================
   4. Step by step guide (section 9681026, frame 140a1a2)

   The HTML widget inside (320fe0e) holds the consent placeholder for the
   Scribe guide and is NOT touched here - not one selector reaches into it.
   Only the container around it is dressed, so the box reads as a deliberate
   window in both states: before the click with the placeholder in it, and
   after the click with the 640px frame of the guide.
   ========================================================================== */

.elementor-2278 .elementor-element.elementor-element-140a1a2 {
  border-color: rgba(58, 68, 99, 1);
  background-color: rgba(216, 226, 255, 0.045);
  box-shadow:
    0 0 0 1px hsl(var(--ccps-glow) / 6%),
    0 0 34px -14px hsl(var(--ccps-glow) / 26%),
    0 24px 48px -34px rgba(3, 7, 18, 0.95);
  transition: border-color 0.35s ease-out, box-shadow 0.35s ease-out;
  position: relative;
}

.elementor-2278 .elementor-element.elementor-element-140a1a2:hover {
  border-color: var(--ccps-rule-lit);
  box-shadow:
    0 0 0 1px hsl(var(--ccps-glow) / 10%),
    0 0 44px -12px hsl(var(--ccps-glow) / 36%),
    0 24px 48px -34px rgba(3, 7, 18, 0.95);
}

/* A short orange line across the top edge, the same signal the open answer
   uses. Full geometry again, for the reason given at the timeline. */
.elementor-2278 .elementor-element.elementor-element-140a1a2::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: auto;
  left: 50%;
  right: auto;
  width: 96px;
  height: 2px;
  border: 0;
  border-radius: 0 0 2px 2px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 142, 43, 0) 0%,
    rgba(255, 142, 43, 0.85) 50%,
    rgba(255, 142, 43, 0) 100%
  );
}

/* On phones the section has no side padding of its own, so the frame ran from
   edge to edge while every other section on the page keeps 16px.

   width:auto belongs with the margins. Elementor gives the container a width
   of 100%, which on a phone resolves to the full 375px; margins alone would
   then push the box 16px past the right edge and give the whole page a
   sideways scroll. With the width released the flex row measures the box
   itself and it lands at 343px, the same width the cards above it use. */
@media (max-width: 767px) {
  .elementor-2278 .elementor-element.elementor-element-140a1a2 {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
}

/* ==========================================================================
   5. Access Key Resources (library template 2932)

   Scoped to the template, so the block behaves the same on /price-app/,
   /nutrition-app/ and /smilescore-app/.
   ========================================================================== */

.elementor-2932 .mmrb-glowcard.ccps-reso {
  --gc-pad: 24px;
  transition: border-color 0.32s ease-out, box-shadow 0.32s ease-out;
}

/* On a phone both card sections keep a 16px gutter and the resources section
   does not clip, so an aura wider than that gutter reaches past the right
   edge of the screen and gives the page a sideways scroll of a few pixels.
   Measured: 24px of aura on a 343px card produced 7px of overflow. Twelve
   fits inside the gutter with room to spare and still reads as a glow. */
@media (max-width: 767px) {
  .elementor-2278 .mmrb-glowcard.ccps-plan,
  .elementor-2932 .mmrb-glowcard.ccps-reso {
    --gc-pad: 12px;
  }
}

/* The same arithmetic once more, for a band nobody measured in round 17.
   From 768 up to about 1240 pixels the resources block keeps a gutter that
   is narrower than the aura: twenty pixels at 768, nine at 1025, thirteen at
   1180. The 24 pixel aura of the right hand card therefore reached past the
   edge of the screen and gave all three app pages a sideways scroll of four
   to fifteen pixels. Measured, not estimated: on a 1025 wide screen the aura
   ended at 1040.

   Eight pixels fit inside the narrowest gutter of the band and still read as
   a glow. Above 1240 the gutter is wider than the full aura and the value of
   the section above applies again; below 768 the phone rule does. */
@media (min-width: 768px) and (max-width: 1239px) {
  .elementor-2932 .mmrb-glowcard.ccps-reso {
    --gc-pad: 8px;
  }
}
.elementor-2932 .mmrb-glowcard.ccps-reso:hover,
.elementor-2932 .mmrb-glowcard.ccps-reso:focus-within {
  border-color: var(--ccps-rule-lit);
}

/* -- the two picture pills ---------------------------------------------- */

/* Their shape is a picture, not a radius: the box is square and 64px tall,
   the drawn pill sits about 3px inside it top and bottom (measured off the
   rendered button, not estimated). Without the radius the light would travel
   along a rectangle around a rounded button. */
.elementor-2932 .ccps-pill-art {
  position: relative;
  border-radius: 999px;
  --ccx-star-speed: 6s;
  --ccx-star-thickness: 12px;
  --ccx-star-opacity: 0.85;
}

/* Move both tracks onto the edge of the drawn pill. Half the band stays
   visible and half is cut by the host, which is how the light clings to a
   rim in this system. */
.elementor-2932 .ccps-pill-art > .ccx-starborder__b {
  bottom: calc(3px - var(--ccx-star-thickness) / 2);
}
.elementor-2932 .ccps-pill-art > .ccx-starborder__t {
  top: calc(3px - var(--ccx-star-thickness) / 2);
}

/* -- the Documentation text link ---------------------------------------- */

/* This one is a button widget in Elementor but a bare text link on screen:
   label, arrow, no fill and no frame. The site wide rule hands the glint to
   every .elementor-button, so it arrives here as well and paints a rim around
   nothing. The script takes the class off; these rules cover the moment
   before it runs and the case where the class is put back.
   The travelling light is deliberately absent for the same reason it is
   absent on every bare text link of the site.

   The second address in every rule below is the link round 18 put under the
   key features (1802c02). It is a copy of this one and inherits the same glint
   from the same site wide rule, so it is treated the same way. */
.elementor-2932 [data-id="a33dea6"] .elementor-button.mmrb-specbtn::before,
.elementor-2932 [data-id="a33dea6"] .elementor-button.mmrb-specbtn::after,
.elementor-2278 [data-id="1802c02"] .elementor-button.mmrb-specbtn::before,
.elementor-2278 [data-id="1802c02"] .elementor-button.mmrb-specbtn::after {
  display: none !important;
}
.elementor-2932 [data-id="a33dea6"] .elementor-button,
.elementor-2278 [data-id="1802c02"] .elementor-button {
  overflow: visible;
  isolation: auto;
  transition: color 0.24s ease-out, gap 0.24s ease-out;
}
.elementor-2932 [data-id="a33dea6"] .elementor-button:hover,
.elementor-2278 [data-id="1802c02"] .elementor-button:hover {
  color: #fff;
}
/* The arrow steps forward a little, which is what a text link may do. */
.elementor-2932 [data-id="a33dea6"] .elementor-button .elementor-button-icon,
.elementor-2278 [data-id="1802c02"] .elementor-button .elementor-button-icon {
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.elementor-2932 [data-id="a33dea6"] .elementor-button:hover .elementor-button-icon,
.elementor-2278 [data-id="1802c02"] .elementor-button:hover .elementor-button-icon {
  transform: translateX(3px);
}

/* ==========================================================================
   6. Round 18 - the Get started pills take the shape of the opening button

   The four buttons of the pricing table were plain dark ghost pills: the same
   ground, the same rim and the same centred label as any quiet link on the
   page, although they are the one place where a reader decides to install the
   app. The opening block of the page has the button that says so - a warm
   pill with an orange disc and an arrow at the end - and these four now say it
   the same way, so the page carries one call to action and not two.

   Up there the shape is a picture (Group-1216259363-1.png, a painted pill with
   the disc at its right end, laid behind a container of exactly its size).
   Here it is drawn, for two reasons: the picture is cut for a 209 by 64 box
   and these pills are 214 by 56, so the disc would float short of the right
   edge; and a drawing follows the pill when a translation makes the label
   longer, which a picture does not.

   The disc is a background layer and not a pseudo element. Both pseudo
   elements of these buttons belong to the glint of the engine - which is the
   same reason the travelling light injects real child spans (see the note at
   the top of assets/ccx-star.js).

   Nothing here changes the outer box: only the inner padding moves, so the
   label steps aside for the disc while the pill keeps its width and height.
   ========================================================================== */

/* The selector carries the :not() of Elementor's own background rule, and for
   the same reason it exists there: without it this rule would weigh one class
   less than the one it has to replace and would lose in silence, which is
   exactly how the first attempt behaved - padding and rim arrived, ground and
   disc did not.

   Three layers and no background-color. The colour Elementor writes stays
   where it is and is simply covered by the lowest of the three, which is what
   keeps the hover state from repainting the pill: that rule sets a colour, and
   a colour is always under every layer. */
.elementor-2278 .elementor-element.elementor-element-27e8ffb:not(.elementor-motion-effects-element-type-background),
.elementor-2278 .elementor-element.elementor-element-7a0af18:not(.elementor-motion-effects-element-type-background),
.elementor-2278 .elementor-element.elementor-element-3873f1f:not(.elementor-motion-effects-element-type-background),
.elementor-2278 .elementor-element.elementor-element-30b2ebc:not(.elementor-motion-effects-element-type-background) {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cdefs%3E%3ClinearGradient id='d' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FF8E2B'/%3E%3Cstop offset='1' stop-color='%23CE5904'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='19' cy='19' r='19' fill='url(%23d)'/%3E%3Cpath d='M12 19h11M18.6 14.4L23.2 19l-4.6 4.6' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(88px 44px at calc(100% - 30px) 50%, rgba(255, 142, 43, 0.30), rgba(255, 142, 43, 0) 72%),
    linear-gradient(180deg, #1d2438 0%, #161d2f 100%);
  background-position: right 9px center, center center, center center;
  background-size: 38px 38px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.elementor-2278 .elementor-element.elementor-element-27e8ffb,
.elementor-2278 .elementor-element.elementor-element-7a0af18,
.elementor-2278 .elementor-element.elementor-element-3873f1f,
.elementor-2278 .elementor-element.elementor-element-30b2ebc {
  border-color: rgba(255, 255, 255, 0.20);
  /* Room for the disc. Only left and right move, so the height of the pill and
     with it the height of the plan card stay exactly as they were. */
  padding-left: 24px;
  padding-right: 58px;

  transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

.elementor-2278 .elementor-element.elementor-element-27e8ffb:hover,
.elementor-2278 .elementor-element.elementor-element-7a0af18:hover,
.elementor-2278 .elementor-element.elementor-element-3873f1f:hover,
.elementor-2278 .elementor-element.elementor-element-30b2ebc:hover {
  border-color: rgba(255, 183, 101, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 26px -8px rgba(255, 142, 43, 0.45);
}

/* The label. It was near white already; on the warmer ground it takes the
   full white the opening button uses, and it keeps its weight. */
.elementor-2278 .elementor-element-27e8ffb .elementor-heading-title,
.elementor-2278 .elementor-element-7a0af18 .elementor-heading-title,
.elementor-2278 .elementor-element-3873f1f .elementor-heading-title,
.elementor-2278 .elementor-element-30b2ebc .elementor-heading-title {
  color: #fff;
}

/* On a phone the pill is 44px tall and the whole row is narrower, so the disc
   comes down with it and keeps the same air around itself. */
@media (max-width: 767px) {
  .elementor-2278 .elementor-element.elementor-element-27e8ffb:not(.elementor-motion-effects-element-type-background),
  .elementor-2278 .elementor-element.elementor-element-7a0af18:not(.elementor-motion-effects-element-type-background),
  .elementor-2278 .elementor-element.elementor-element-3873f1f:not(.elementor-motion-effects-element-type-background),
  .elementor-2278 .elementor-element.elementor-element-30b2ebc:not(.elementor-motion-effects-element-type-background) {
    background-position: right 6px center, center center, center center;
    background-size: 32px 32px, auto, auto;
  }
  .elementor-2278 .elementor-element.elementor-element-27e8ffb,
  .elementor-2278 .elementor-element.elementor-element-7a0af18,
  .elementor-2278 .elementor-element.elementor-element-3873f1f,
  .elementor-2278 .elementor-element.elementor-element-30b2ebc {
    padding-left: 18px;
    padding-right: 46px;
  }
}

/* ==========================================================================
   7. Round 18 - a light travels the roadmap

   Section 2 above gave the timeline a gradient rail and let the stations
   breathe on their own clock. What was missing is the reading direction: the
   roadmap is a run from what is being built now to what comes after it, and
   nothing on screen said so.

   A light now walks the rail from top to bottom and every station takes fire
   as it passes - the pattern of the numbered setup steps further up the page,
   turned upright.

   How the timing is kept honest. The rail is as tall as the section, and the
   section is a different height at every width and grows with every entry
   that is added to the roadmap. A fixed set of delays would fit exactly one
   of those states. assets/ccx-papp-sections.js therefore measures the rail
   and every station in it and writes two values:

     --ccps-cycle   one pass plus the dark pause after it, in seconds
     --ccps-t       per station: when the light reaches it

   The travel itself needs no measurement. The light is placed by top, and
   top of an absolutely placed box counts in per cent of the box it sits in,
   so "from above the rail to below it" is written once and is right at every
   height. Both values the script does write are read once when the animation
   starts - a duration and a delay - and never interpolated: a custom property
   between two keyframes is the one thing this engine does not carry through
   (see the note on the running light of /process-tools/).

   The run occupies the first 70 per cent of every cycle, which is why that
   number appears in the keyframes below and in the script. Without the
   script nothing moves: the light stays at zero opacity and the stations keep
   the quiet breathing of section 2, which is the state of round 17.
   ========================================================================== */

/* The light itself. Full geometry on every side, for the reason given at the
   rail in section 2: an Elementor container brings its own pseudo element
   rules along, and a half declared box inherits their left, width, height and
   border. */
.elementor-2278 .elementor-element.elementor-element-64040dc::before,
.elementor-2278 .elementor-element.elementor-element-1523f30::before {
  content: "";
  position: absolute;
  top: -66px;                /* half its own height above the rail */
  bottom: auto;
  width: 2px;
  height: 132px;
  border: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 183, 101, 0) 0%,
    rgba(255, 183, 101, 0.14) 30%,
    rgba(255, 205, 155, 0.95) 50%,
    rgba(255, 142, 43, 0.30) 66%,
    rgba(255, 142, 43, 0) 100%
  );
}

/* Each of the two rails is drawn on the edge its own layout uses: on wide
   screens the right edge of the left half, on narrow screens the left edge of
   the station column. The static rail of section 2 sits on the same pixels. */
.elementor-2278 .elementor-element.elementor-element-64040dc::before {
  left: auto;
  right: -2px;
}
.elementor-2278 .elementor-element.elementor-element-1523f30::before {
  right: auto;
  left: -2px;
}

/* Only a rail the script has measured runs, and only while it is on screen. */
.elementor-2278 .ccps-rail.ccps-rail-on::before {
  animation: ccps-run var(--ccps-cycle, 4.6s) linear infinite;
}

/* Half its own height above the rail at the start, half its own height below
   the end of it when the pass is over. Between 70 and 100 per cent it waits
   out of sight, which is the dark pause; the jump back to the top happens
   while nothing is visible. */
@keyframes ccps-run {
  0%   { top: -66px; opacity: 0; }
  5%   { opacity: 1; }
  62%  { opacity: 1; }
  70%  { top: calc(100% - 66px); opacity: 0; }
  100% { top: calc(100% - 66px); opacity: 0; }
}

/* The stations. The flare sits on the drawing itself and not on the widget
   around it: the icon box hands its icon a 5 by 27 pixel column and lets the
   12 pixel drawing hang out of it, so a ring on the column would stand beside
   the dot rather than around it. The drawing already carries the page navy and
   a 12px radius from the page settings, which is what makes a shadow on it
   read as a ring.

   The quiet breathing of section 2 stays where it is, on the column. Two
   shadows on two nested elements can run at once; two animations on the same
   property of one element cannot. */
.elementor-2278 .ccps-rail.ccps-rail-on .elementor-icon svg {
  animation: ccps-flare var(--ccps-cycle, 4.6s) linear var(--ccps-t, 0s) infinite both;
}

@keyframes ccps-flare {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255, 142, 43, 0),
      0 0 8px 0 rgba(255, 142, 43, 0.12);
  }
  3% {
    box-shadow:
      0 0 0 3px rgba(255, 142, 43, 0.30),
      0 0 20px 4px rgba(255, 183, 101, 0.70);
  }
  16% {
    box-shadow:
      0 0 0 8px rgba(255, 142, 43, 0),
      0 0 12px 1px rgba(255, 142, 43, 0.20);
  }
}

/* ==========================================================================
   8. Round 18 - the guide window, one notch finer

   Section 4 turned the block around the Scribe placeholder into a deliberate
   window. Two things were still missing at close range: the rim was a single
   flat line, and the button in the middle of it answered the pointer only
   with the brightness step it brings along from assets/ccx-scribe.css.

   The widget and its markup remain untouched. Every rule here names the
   container of the page and reaches the button only through it, so the
   placeholder keeps working the same way on the two blog posts that carry the
   other two guides.
   ========================================================================== */

/* A hair line of light along the upper inside edge, the way the cards of the
   site are lit. It is an inset shadow, so the box does not change. */
.elementor-2278 .elementor-element.elementor-element-140a1a2 {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px hsl(var(--ccps-glow) / 6%),
    0 0 34px -14px hsl(var(--ccps-glow) / 26%),
    0 24px 48px -34px rgba(3, 7, 18, 0.95);
}

.elementor-2278 .elementor-element.elementor-element-140a1a2:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px hsl(var(--ccps-glow) / 10%),
    0 0 44px -12px hsl(var(--ccps-glow) / 36%),
    0 24px 48px -34px rgba(3, 7, 18, 0.95);
}

/* The button. assets/ccx-scribe.css loads after this file - inc files are read
   in alphabetical order and scribe follows papp - so a rule of equal weight
   would lose. The three classes plus the container id put this one well
   above it, and the shadow is a property that file never sets, so the
   brightness step and the one pixel lift it brings along keep working. */
.elementor-2278 .elementor-element-140a1a2 .ccx-scribe a.ccx-scribe-load {
  box-shadow: 0 6px 18px -8px rgba(206, 89, 4, 0.5);
  transition: filter .2s ease, transform .2s ease, box-shadow .28s ease-out;
}

.elementor-2278 .elementor-element-140a1a2 .ccx-scribe a.ccx-scribe-load:hover,
.elementor-2278 .elementor-element-140a1a2 .ccx-scribe a.ccx-scribe-load:focus-visible {
  box-shadow:
    0 8px 20px -8px rgba(206, 89, 4, 0.55),
    0 0 34px -6px rgba(255, 142, 43, 0.45);
}