/* ==========================================================================
   The landing page /process-tools/, lower half: the second call to action and
   the what you get band.

   Scope. The stylesheet is only queued on a page whose data carries
   .cclp-getgrid, which is this page and no other, so the button rules can name
   .cchero-btn2 without a page class in front of them. The same class does
   exist on both home pages, and their hero is untouched because this file
   never reaches them.

   Weight. Three sources already write to the pieces this file touches, and
   the chains below are cut to clear the heaviest of them:

     body.elementor-page-21304 .ccidea-ico                          (0,2,1)
     .elementor-21304 .elementor-element-7c000009 .ccidea-ico       (0,3,0)
     .elementor-21304 .elementor-element-7c0000af                   (0,3,0)
       width, max-width and --container-widget-width of the icon widget

   A rule that names .cclp-getcard once and .ccidea-ico three times carries
   four class names and settles all three without an !important, which would
   also take the values away from anyone editing the card later.

   Palette: navy #0b1227, frame rgb(44,51,76), accent #FF8E2B, silver #d7dce8,
   cool light #cfe0ff.
   ========================================================================== */

/* --------------------------------------------------------------------
   THE OUTLINED PILL

   A fill in the shape the eyebrow pills of this site use, bright at the
   top left and gone at the bottom right, so the button has a surface
   instead of being a line around nothing. It is written as a background
   image and not as a colour: the widget already carries a background
   colour for its hover state, and a translucent gradient over it lets
   that colour come through instead of replacing it, so both lift
   together when the pointer arrives.

   The inset hair line along the upper edge is what makes the pill read
   as raised rather than cut out.

   Nothing in this block changed in round 16. A second module hands the
   button a set of glass classes at runtime; no rule here names anything
   but .cchero-btn2 and the link inside it, so the two do not meet.
   -------------------------------------------------------------------- */
.cchero-btn2 .elementor-button {
  background-image: linear-gradient(93deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background-image 0.25s ease, box-shadow 0.25s ease,
              background-color 0.25s ease, border-color 0.25s ease;
}

/* The frame at rest. The widget sets 18 percent white, which on the navy of
   this page is close to nothing; a quarter is a line one can see without it
   competing with the filled pill beside it. Five class names, because the
   value comes from the widget settings and Elementor spends four on those. */
.cchero-btn2.cchero-btn2 .elementor-button.elementor-button.elementor-button {
  border-color: rgba(255, 255, 255, 0.26);
}
.cchero-btn2.cchero-btn2 .elementor-button.elementor-button.elementor-button:hover,
.cchero-btn2.cchero-btn2 .elementor-button.elementor-button.elementor-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.46);
}

.cchero-btn2 .elementor-button:hover,
.cchero-btn2 .elementor-button:focus-visible {
  background-image: linear-gradient(93deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

/* --------------------------------------------------------------------
   THE TRAVELLING LIGHT

   The filled pill beside this one runs the same light in the warm gold of
   the palette at five seconds. This one is cool, thinner, half as bright
   and half again as slow, which is the whole difference between a first
   call to action and a second one. The halo follows the colour by itself,
   assets/ccx-star.css derives it.
   -------------------------------------------------------------------- */
.cchero-btn2 .ccx-starborder {
  --ccx-star-color: #cfe0ff;
  --ccx-star-core: #ffffff;
  --ccx-star-speed: 7.5s;
  --ccx-star-thickness: 11px;
  --ccx-star-spread: 26%;
  --ccx-star-opacity: 0.5;
}


/* ==========================================================================
   WHAT COMES WITH IT, AND WHERE IT RUNS  (.cclp-get, six .cclp-getcard)

   The six cards borrow the shell of the idea cards further up the page:
   .ccidea-card gives them the frame, the corner radius, the rim that
   answers the pointer and the pool of light that follows it, and all of
   that arrives through inc/ccx-ideas.php. None of it is repeated here and
   none of it is replaced. What the band was missing is what the cards on
   /price-app/ have and these did not: a badge that reads as a badge, and
   the warm line that leaves it sideways.

   Three pieces are added, in this order of importance:

     1  The badge grows from 52 to 64 pixels and turns into a dark well
        with a ring of light around it, instead of a pale disc that is
        barely a shade off the card behind it.
     2  A line of accent runs out of the badge to the right, turns a
        corner down to the left edge of the card and ends there on a
        short bright tick. It is drawn as four gradients in the card
        background, which is where the reference card keeps it too, so it
        passes under the badge and under everything else on the card.
     3  The six badges no longer pulse in unison.

   Why the background and not a pseudo element: both of the card's own are
   taken. ::after carries the drawn texture of the idea cards and ::before
   is the box Elementor reserves for the ghost numeral. The card's
   background-image is free, it is painted below every child, and that is
   exactly the layer the reference drawing sits in on /price-app/, where
   it is one SVG file at background-position 0 84px. Written as gradients
   instead of a file it needs no request and it can follow the badge
   through the breakpoints, which a fixed drawing could not.
   ========================================================================== */

/* Every measurement of the accent is derived from these five, so a change
   to the badge size moves the whole drawing with it. The two paddings are
   read from the section stylesheet and never set here; they are only
   repeated so the calculations have them in a form arithmetic can use, the
   same arrangement inc/ccx-ideas.php uses for the photograph band. */
.cclp-get .cclp-getcard {
  --ccg-badge: 64px;   /* the round badge */
  --ccg-icon: 30px;    /* the picture inside it */
  --ccg-pt: 30px;      /* card padding, top   (from the section stylesheet) */
  --ccg-ps: 28px;      /* card padding, sides (from the section stylesheet) */
  --ccg-arc: 24px;     /* radius of the corner the line turns */
  --ccg-len: 278px;    /* how far the line reaches from the left edge */

  /* Where the line sits, measured from the top of the padding box, which
     is where a background position starts counting. Two thirds down the
     badge rather than across its middle: a line through the centre of a
     circle cuts it in half, a line below the centre passes behind it. */
  --ccg-y: calc(var(--ccg-pt) + var(--ccg-badge) * 0.633);
}

/* --------------------------------------------------------------------
   THE ACCENT

   Four layers, listed from the top of the stack down.

   The bloom. A soft warm patch just clear of the badge, standing in for
   the blurred rectangle the reference draws there (51 by 5 pixels at 69
   per cent, run through a Gaussian of 12.5, which arrives as a wide, low
   smear). It is what makes the line look lit rather than drawn.

   The line. One pixel, brightest at just under three quarters of its
   length, which is where the reference puts the bright point of its
   gradient too, and gone at the far end. It does NOT start at nothing:
   the reference draws corner and line as one stroke under one gradient,
   so the line has to leave the corner at the strength the corner has, or
   the two read as a hook and a separate rule rather than as one turn.

   The corner. The same one pixel turning down to the left edge of the
   card. It is a ring of one pixel in a box the size of the radius, with
   the centre of the ring pinned to the lower right corner of that box, so
   only the quarter that joins the line to the edge falls inside it.

   The tick. Twenty pixels standing on the frame itself, centred exactly
   where the corner arrives, at nearly full strength. It is the one part
   of the drawing that is meant to be seen at a glance.

   ⚠ Measuring one of these cards while it is off screen returns
   background-image: none. Elementor holds the background of every
   container from the fourth sibling on until it has been seen
   (.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded), an !important
   rule it prints inline). Its observer runs well ahead of the viewport:
   scrolling the whole page at 390, 768 and 1440 never once caught a card
   on screen without its drawing. Measure after scrolling, not before.
   -------------------------------------------------------------------- */
.cclp-get .cclp-getcard.cclp-getcard.cclp-getcard {
  background-image:
    /* bloom */
    radial-gradient(ellipse 66px 26px at 50% 50%,
      rgba(255, 142, 43, 0.28) 0%,
      rgba(255, 142, 43, 0.13) 38%,
      rgba(255, 142, 43, 0) 74%),
    /* tick */
    linear-gradient(180deg,
      rgba(255, 142, 43, 0) 0%,
      rgba(255, 142, 43, 0.92) 50%,
      rgba(255, 142, 43, 0) 100%),
    /* line */
    linear-gradient(90deg,
      rgba(255, 142, 43, 0.20) 0%,
      rgba(255, 142, 43, 0.70) 62%,
      rgba(255, 142, 43, 0) 100%),
    /* corner */
    radial-gradient(circle calc(var(--ccg-arc) + 2px) at 100% 100%,
      rgba(255, 142, 43, 0) 0,
      rgba(255, 142, 43, 0) calc(var(--ccg-arc) - 1.4px),
      rgba(255, 142, 43, 0.20) calc(var(--ccg-arc) - 0.9px),
      rgba(255, 142, 43, 0.20) calc(var(--ccg-arc) - 0.1px),
      rgba(255, 142, 43, 0) calc(var(--ccg-arc) + 0.4px));

  background-repeat: no-repeat;

  background-size:
    132px 52px,                                 /* bloom */
    1px 20px,                                   /* tick  */
    calc(var(--ccg-len) - var(--ccg-arc)) 1px,  /* line  */
    var(--ccg-arc) var(--ccg-arc);              /* corner */

  background-position:
    /* the bloom is centred twenty pixels clear of the badge */
    left calc(var(--ccg-ps) + var(--ccg-badge) - 46px) top calc(var(--ccg-y) - 26px),
    /* the tick stands on the frame, centred on the end of the corner */
    left 0 top calc(var(--ccg-y) + var(--ccg-arc) - 10px),
    /* the line begins where the corner lets go of it */
    left var(--ccg-arc) top var(--ccg-y),
    /* the corner starts at the frame */
    left 0 top var(--ccg-y);
}

/* --------------------------------------------------------------------
   THE BADGE

   The reference draws it as one picture: a disc of navy at 79 per cent
   over the card, and a hair line of 1.2 pixels around it carrying a
   gradient rather than a colour. Both are reproduced here, the disc as
   the padding box of the widget and the ring as its border, the two told
   apart by background-clip. That keeps it to one element: the widget
   already lends ::after to the beat of the idea cards, and ::before is
   wanted for the ring of light under the pointer to have something to
   sit on.

   Dark, not pale. The pale disc it replaces was four per cent white on a
   card of two, which on this navy is a difference of about six values out
   of 255 and reads as a smudge. A well that is darker than the card is
   what makes the orange glyph inside it carry, and it keeps its footing
   when the pool of light lifts the card under the pointer.

   The picture inside grows with it, 26 to 30. The section stylesheet
   writes those numbers per breakpoint and Elementor writes them once more
   per widget, so the chain has to clear four class names for the widget
   box and four plus the element for the picture.
   -------------------------------------------------------------------- */
.cclp-get .cclp-getcard .ccidea-ico.ccidea-ico.ccidea-ico {
  width: var(--ccg-badge);
  max-width: var(--ccg-badge);
  height: var(--ccg-badge);
  --container-widget-width: var(--ccg-badge);

  /* The disc on the padding box, the ring on the border box. The border is
     transparent, so the second layer shows through exactly where the border
     is and nowhere else.

     The disc is not one flat value. A shade of light across it from the
     upper left is what keeps it a well rather than a hole punched in the
     card, and it is the same direction the light falls from everywhere
     else on this site. The ring runs the other way round: silver where
     the light lands, almost nothing through the middle, and warm at the
     end on the right, which is the side the line leaves from. */
  background-color: transparent;
  background-image:
    linear-gradient(147deg,
      rgba(17, 25, 50, 0.84) 0%,
      rgba(9, 14, 31, 0.90) 62%),
    linear-gradient(128deg,
      rgba(215, 220, 232, 0.36) 0%,
      rgba(215, 220, 232, 0.07) 48%,
      rgba(255, 142, 43, 0.34) 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1.2px solid transparent;

  /* The card puts sixteen pixels between its children. The badge asks for
     ten more, so the line that leaves it is not read as an underline of the
     heading below. */
  margin-bottom: 10px;

  transition: box-shadow 0.32s ease-out;
}

.cclp-get .cclp-getcard .ccidea-ico.ccidea-ico.ccidea-ico img {
  width: var(--ccg-icon);
  height: var(--ccg-icon);
}

/* Under the pointer the badge warms up. The rim of light around it in blue
   is the effect layer answering as it does on every card of the site, and
   this is the one thing added to it: the same warm tone the line beside it
   carries, so the two read as one piece. It is a shadow and not a colour,
   which leaves the two background layers alone and transitions cleanly. */
.cclp-get .cclp-getcard:hover .ccidea-ico.ccidea-ico.ccidea-ico,
.cclp-get .cclp-getcard:focus-within .ccidea-ico.ccidea-ico.ccidea-ico {
  box-shadow:
    0 0 0 1px rgba(255, 142, 43, 0.13),
    0 0 22px -6px rgba(255, 142, 43, 0.42);
}

/* --------------------------------------------------------------------
   THE BEAT

   inc/ccx-ideas.php gives every card that has come into view a short
   pulse on the badge once per cycle, delayed by --ccidea-card-i times
   0.55s. The three idea cards are numbered and so they follow each
   other; these six carry the shell without a number, all six read the
   default of zero, and the whole band blinked at once.

   Six delays are handed out here instead. They run down the left column
   and then the right rather than in reading order, because the eye takes
   a two column grid in columns once the rows are equal height.
   -------------------------------------------------------------------- */
.cclp-getgrid > .cclp-getcard:nth-child(1) { --ccidea-card-i: 0; }
.cclp-getgrid > .cclp-getcard:nth-child(3) { --ccidea-card-i: 0.7; }
.cclp-getgrid > .cclp-getcard:nth-child(5) { --ccidea-card-i: 1.4; }
.cclp-getgrid > .cclp-getcard:nth-child(2) { --ccidea-card-i: 2.1; }
.cclp-getgrid > .cclp-getcard:nth-child(4) { --ccidea-card-i: 2.8; }
.cclp-getgrid > .cclp-getcard:nth-child(6) { --ccidea-card-i: 3.5; }

/* --------------------------------------------------------------------
   THE GRID

   Six cards since round 15. The page stylesheet runs two columns from
   1025px and one below that, which on a tablet leaves a column of six
   cards at full width. Between 768 and 1024 they stand two abreast, the
   same arrangement the idea cards use in that window. Phones keep the
   single column: two cards side by side at 375px would leave a heading
   of four words on four lines.

   The badge and the drawing come in one step at each of those two
   points. Nothing else about the card changes with the width; the frame,
   the radius and the padding stay what the section stylesheet says, so
   the band keeps the rhythm of the idea cards above it and the questions
   below it.
   -------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .cclp-get .cclp-getgrid.cclp-getgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .cclp-get .cclp-getcard {
    --ccg-badge: 56px;
    --ccg-icon: 28px;
    --ccg-arc: 20px;
    --ccg-len: 236px;
  }
  /* The bloom comes in with the line. Left at its full size it would cover a
     third of a line this short and read as a smudge rather than as the point
     the line is lit from. */
  .cclp-get .cclp-getcard.cclp-getcard.cclp-getcard {
    background-size:
      116px 46px,
      1px 20px,
      calc(var(--ccg-len) - var(--ccg-arc)) 1px,
      var(--ccg-arc) var(--ccg-arc);
    background-position:
      left calc(var(--ccg-ps) + var(--ccg-badge) - 40px) top calc(var(--ccg-y) - 23px),
      left 0 top calc(var(--ccg-y) + var(--ccg-arc) - 10px),
      left var(--ccg-arc) top var(--ccg-y),
      left 0 top var(--ccg-y);
  }
}

/* Below 768 the section stylesheet drops the card padding to 24 and 20 and
   the badge to 46. The badge is kept at 52 here, six above what it was,
   because it is now the only mark the card carries and a card the full
   width of a phone can hold it. */
@media (max-width: 767px) {
  .cclp-get .cclp-getcard {
    --ccg-badge: 52px;
    --ccg-icon: 26px;
    --ccg-pt: 24px;
    --ccg-ps: 20px;
    --ccg-arc: 18px;
    --ccg-len: 200px;
  }
  .cclp-get .cclp-getcard.cclp-getcard.cclp-getcard {
    background-size:
      104px 44px,
      1px 18px,
      calc(var(--ccg-len) - var(--ccg-arc)) 1px,
      var(--ccg-arc) var(--ccg-arc);
    background-position:
      left calc(var(--ccg-ps) + var(--ccg-badge) - 38px) top calc(var(--ccg-y) - 22px),
      left 0 top calc(var(--ccg-y) + var(--ccg-arc) - 9px),
      left var(--ccg-arc) top var(--ccg-y),
      left 0 top var(--ccg-y);
  }
  .cclp-get .cclp-getcard .ccidea-ico.ccidea-ico.ccidea-ico {
    margin-bottom: 6px;
  }
}

/* --------------------------------------------------------------------
   Nothing in this band moves on its own. The accent is drawn, not
   animated, and stays exactly as it is for a visitor who has asked the
   system for less movement; only the two answers to the pointer are
   taken away, here and on the button above.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cchero-btn2 .elementor-button,
  .cclp-get .cclp-getcard .ccidea-ico.ccidea-ico.ccidea-ico {
    transition: none;
  }
}