/* ==========================================================================
   Three corrections on /process-tools/ (ccx-lppolish).

   Scope. Every rule starts at the band it belongs to (.cclp-flow,
   .cclp-intro, .cclp-tools) and the stylesheet is only queued on a page
   whose data carries one of those bands, so nothing here reaches another
   page.

   Weight. Three files already speak about these elements and none of them
   is opened here: assets/ccx-lpflow.css and assets/ccx-lpintro.css belong to
   other parts of this round, and the page settings of the landing page are
   shared ground written by several hands. Each chain below therefore carries
   one class name more than the chain it supersedes, which settles the tie
   without a single !important. Where a repeated class name is doing that
   work it is said so at the rule.

   Palette: page navy #0b1227, card blue #181f32, frame rgb(44,51,76),
   rim hue 212 (the light blue of .ccx-glow-blue), silver #d7dce8.
   ========================================================================== */


/* ==========================================================================
   ONE. THE SIX SLOTS OF THE PRODUCTION PATH

   The rim of the effect layer is a span that lies a little outside its host
   and is masked towards the pointer. Two things decide whether it can be
   seen: the host must not clip, and the aura must be small enough that a
   pointer between two slots does not light the whole row.

   The reach is 12px because the three slots of a row stand 24px apart, so
   two aura boxes meet exactly and never overlap. The onset at 46 is the
   value the question list of this page settled on for the same reason: the
   default of 20 starts a slot glowing while the pointer is still a hundred
   pixels away, which on a row of three reads as the row lighting up rather
   than the slot the pointer is at.
   ========================================================================== */

.cclp-flow .cclpf-shot.cclpf-shot.cclpf-shot,
.cclp-flow .cclpf-chip.cclpf-chip.cclpf-chip {
  --gc-pad: 12px;
  --edge-sensitivity: 46;
}

/* The photograph band clips, which is how the picture is cut to the rounded
   rectangle, and the rim would be cut off at the same edge. The clip is
   handed down to the box around the picture, which already carries the same
   corner (border-radius: inherit in assets/ccx-lpflow.css) and therefore
   cuts exactly the same shape. Three times the class name because the rule
   in that file uses it twice.

   The hairline the band draws inside its corner is an ::after at inset 0 and
   is not affected by this: it is placed against the band, not clipped by it.
   ------------------------------------------------------------------------ */
.cclp-flow .cclpf-shot.cclpf-shot.cclpf-shot {
  overflow: visible;
}

.cclp-flow .cclpf-shot.cclpf-shot.cclpf-shot > .elementor-widget-container {
  overflow: hidden;
  border-radius: inherit;
}

/* The note of station six clips nothing today. The value is written out all
   the same, because the surface of that note is being drawn by another part
   of this round and a glass panel is a place where a clip is easily added:
   if it were, the rim of this slot would disappear and the other five would
   keep theirs, which is the one thing this correction is meant to prevent. */
.cclp-flow .cclpf-chip.cclpf-chip.cclpf-chip {
  overflow: visible;
}


/* ==========================================================================
   THREE. THE PHOTOGRAPH OF THE OPENING BAND

   The picture is an image widget with no shape of its own: the card is the
   box inside it, which carries the eighteen pixel corner, the frame and the
   shadow. The rim takes the corner of its host, so the host is given the
   same corner. Nothing else follows from it, because the widget has neither
   a background nor a frame nor a clip that the value could act on.

   A wider reach than the bands above, 14px, because this picture stands on
   its own in a column instead of next to two neighbours.
   ========================================================================== */

.cclp-intro .cclp-introphoto.cclp-introphoto {
  border-radius: 18px;
  --gc-pad: 14px;
  --edge-sensitivity: 44;
}


/* Below 1025px the aura boxes are pulled back onto their hosts, for the
   reason assets/ccfx-v3.css gives for the small rims: a box reaching past a
   block that is no longer clipped can widen the document. The ring itself
   still traces the host, it simply stops bleeding past it. */
@media (max-width: 1024px) {
  .cclp-flow .cclpf-shot.cclpf-shot.cclpf-shot,
  .cclp-flow .cclpf-chip.cclpf-chip.cclpf-chip,
  .cclp-intro .cclp-introphoto.cclp-introphoto {
    --gc-pad: 0px;
  }
}


/* ==========================================================================
   TWO. THE GHOST NUMERALS OF THE THREE TOOL CARDS

   Where the numeral comes from: it is the ::after of .cctool-content, and it
   is written twice, once in the page settings of the landing page and once
   in the custom stylesheet of the container the section sits in. The second
   copy is the one that counts, because Elementor writes a section rule with
   its container as an ancestor and that chain is four class names long. The
   digit and its colour are set per card, one class name longer again. The
   chains below carry six, which is why they hold.

   Where it should stand: the text column leaves room on its right, but only
   on a wide screen. Measured on the rendered page, the longest line of text
   in any of the three cards ends 557px from the left edge of the column, and
   the column itself is 726px wide at a window of 1440, 652 at 1280, 555 at
   1100 and 515 at 1025. The air beside the text is therefore 169px, 95px,
   nothing and nothing. The ink of a two or a three at 360px is 175px wide.

   So the numeral is moved into that air from 1280 up, where at least the
   right half of it stands clear; between 1025 and 1279 the card is still in
   two columns but the text column has no air at all, and there the numeral
   is taken out rather than moved from behind one part of the text to behind
   another. Below 1025 the card stands as one column, the text column is the
   full width of it and the air is 176px at 768 and 432px at 1024, so the
   numeral comes back and stands completely clear.

   It is anchored to the top and not centred: the paragraph ends about three
   fifths of the way down the column and the bullet list below it runs the
   full width, so a centred numeral would sit behind the bullets, which is
   the fault it is being moved away from. Measured against the rendered page,
   the ink then begins five pixels above the headline and ends three pixels
   below the last line of the paragraph.

   The left flank of a two or a three may still pass behind the last words of
   a line. That is the same overlap the numerals of the tool slider on the
   home page carry and it is wanted: the numeral belongs to the card, it is
   not a picture beside it. What matters is that its body stands free.
   ========================================================================== */

.cclp-tools .cctool-card {
  --ccpol-numright: 6px;
  --ccpol-numtop: -22px;
}

/* Six class names: .cclp-tools, .cctool-card twice, .cctool-content three
   times. The chain this supersedes has five.

   left, bottom, width, height and the frame are written back to their
   initial values on purpose. Elementor gives the ::before of a container a
   full box of its own and the numerals of this site have twice been caught
   by it; ::after carries no such inheritance today, and the reset costs five
   declarations that can never be wrong. */
.cclp-tools .cctool-card.cctool-card
  .cctool-content.cctool-content.cctool-content::after {
  left: auto;
  right: var(--ccpol-numright);
  top: var(--ccpol-numtop);
  bottom: auto;
  width: auto;
  height: auto;
  border: 0;
  color: rgba(255, 255, 255, 0.075);
}

/* The one is the narrowest glyph of the three and reads lighter at the same
   value, the same correction the reference blocks and the tool slider make.
   Same weight as the rule above, so it has to stand after it. */
.cclp-tools .cctool-card.cctool-n1
  .cctool-content.cctool-content.cctool-content::after {
  color: rgba(255, 255, 255, 0.095);
}

/* The one also has to be pushed further out than the other two, or the three
   numerals do not line up. Measured in the browser at the size and weight
   this page uses: at 360px a two and a three end 14.4px before the end of
   their advance, a one ends 64px before it. Left at the same value the one
   would float half a hundred pixels short of the edge the other two touch,
   which is the sort of difference the eye reads as a mistake.

   The forty four pixels are the difference between those two bearings less
   the six the others keep. The box then reaches a little past the text
   column and into the gap in front of the picture; it carries no frame, no
   background and no size of its own, so the only thing that travels with it
   is the ink, which still ends inside the column.

   Only where the numeral is shown in two column form: below 1025 the column
   runs to the edge of the card and a box pushed out would reach past the
   window, and there the air is wide enough for the difference not to show. */
@media (min-width: 1280px) {
  .cclp-tools .cctool-card.cctool-n1 { --ccpol-numright: -44px; }
}

/* Between 1025 and 1279 the card is in two columns and the text column is
   between 515 and 652 pixels wide, which the text fills to within a few
   pixels. There is no place in it for a numeral of 360px that is not behind
   a paragraph, so it is taken out here rather than moved from behind the
   first half of every line to behind the second half.

   This is the one band in which something disappears that stood there
   before, and it is a single line to bring back. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .cclp-tools .cctool-card.cctool-card
    .cctool-content.cctool-content.cctool-content::after {
    content: none;
  }
}

/* Below 1025 the card stands as one column and the text column is the full
   width of it, so there is a great deal more air on the right and the
   numeral, which the page settings take down to 240px here, stands clear of
   the headline altogether. It is dropped to the height of the headline
   instead of hanging above the badge line. */
@media (max-width: 1024px) {
  .cclp-tools .cctool-card {
    --ccpol-numright: 8px;
    --ccpol-numtop: 26px;
  }
}

/* On a phone the text column is 350px wide and the paragraph fills it, so
   there is no air for a numeral of any size and one placed anywhere would be
   read through the text.

   The page settings already ask for exactly this, in the same media query
   that hides the numerals of the idea cards below, and the request never
   arrived: the rule that hides them names four class names and the rule that
   gives each card its digit names five, so the digit won. The idea cards are
   hidden because there both rules name four and the later one wins. This
   carries out the intention that was written down and restores the agreement
   between the two sets of cards on the same page. */
@media (max-width: 767px) {
  .cclp-tools .cctool-card.cctool-card
    .cctool-content.cctool-content.cctool-content::after {
    content: none;
  }
}