/* ============================================================
   IT security landing page: the two calls to action
   ------------------------------------------------------------
   Belongs to inc/ccx-seclp-hero.php, which explains why these rules are
   here and not in the page css of post 21300.

   Both pairs sit in a row with the class ccsecp-ctarow: the pill
   (ccfx-specular cclp-ctapill) and the second button (cchero-btn2).
   ============================================================ */


/* ---------- The second call ----------
   Elementor gives a button its colours, its padding and its round ends. It
   does not lay out what is inside: the label and the arrow stand next to
   each other with nothing between them, and the arrow is drawn at whatever
   size the file happens to have. The rules below are the ones the same
   button carries on /process-tools/.

   The widget box itself is set to shrink to the button, otherwise it would
   take the full width of the row and push the pill off centre. */
.ccsecp-ctarow .cchero-btn2 {
  width: auto;
  flex: 0 0 auto;
  display: flex;
}

.ccsecp-ctarow .cchero-btn2 > .elementor-widget-container,
.ccsecp-ctarow .cchero-btn2 .elementor-button-wrapper {
  display: flex;
}

/* The height matches the pill next to it. The padding alone would come
   close, but only a floor keeps both ends of the row on one line. */
.ccsecp-ctarow .cchero-btn2 .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 64px;
  position: relative;
  z-index: 1;
  transition: background-color .25s ease, border-color .25s ease;
}

/* The space between the label and the arrow.

   This rule was written in the first round and never took effect. The icon
   spacing control of the button is set to zero in the page data, and
   Elementor writes that as

     .elementor-21300 .elementor-element.elementor-element-cs15h003
       .elementor-button .elementor-button-content-wrapper { gap: 0px }

   which is five classes against the three this rule used to have, so the
   gap stayed shut and the arrow sat flush against the last letter. Printed
   at that size the arrow stops reading as a mark of its own and starts
   reading as a character someone typed at the end of the sentence, which is
   exactly what it was taken for. It is not: the page data holds an SVG file
   for it and Elementor prints it as an inline drawing in its own span. It
   only needed the room the first round meant to give it. Six classes, so it
   settles either way round and without !important. */
.elementor-21300 .ccsecp-ctarow .cchero-btn2 .elementor-button
  .elementor-button-content-wrapper.elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ccsecp-ctarow .cchero-btn2 .elementor-button-text {
  line-height: 18px;
}

/* The arrow sits a step behind the label and steps forward on hover. Its
   own spacing is zeroed here because the gap above already holds it. */
.ccsecp-ctarow .cchero-btn2 .elementor-button-icon {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .72;
  transition: opacity .25s ease, transform .25s ease;
}

.ccsecp-ctarow .cchero-btn2 .elementor-button-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.ccsecp-ctarow .cchero-btn2 .elementor-button:hover .elementor-button-icon,
.ccsecp-ctarow .cchero-btn2 .elementor-button:focus .elementor-button-icon {
  opacity: 1;
  transform: translateX(2px);
}

/* The same glass as the pill, weaker.

   This button is the quieter of the two calls and stays that way: a thinner
   body and a shorter blur, and it keeps the hairline Elementor already
   draws around it instead of adding one of its own.

   Both states are written here, not just the resting one. Elementor writes
   this button's background at four classes for the resting state and at
   four classes and a pseudo class for the hover state, which are the same
   weight. Setting only the resting colour here would out-rank the hover
   colour as well and the button would stop reacting, so the pair is stated
   together at five and six.

   The arrow in the label is already a proper drawing: the page data holds
   an SVG file for it and Elementor prints it as an inline drawing inside
   its own span. There is no arrow character in any text on this page. */
.elementor-21300 .ccsecp-ctarow .cchero-btn2 .elementor-button.elementor-button {
  background-color: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}

.elementor-21300 .ccsecp-ctarow .cchero-btn2 .elementor-button.elementor-button:hover,
.elementor-21300 .ccsecp-ctarow .cchero-btn2 .elementor-button.elementor-button:focus {
  background-color: rgba(255, 255, 255, .10);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .elementor-21300 .ccsecp-ctarow .cchero-btn2 .elementor-button.elementor-button {
    background-color: rgba(255, 255, 255, .07);
  }
}


/* ---------- The pill ----------
   Kept as a floor for the narrowest screens: the pill measures itself from
   its own text (see below), and on a phone that measurement may come out
   wider than the row it stands in. */
.ccsecp-ctarow .cclp-ctapill {
  max-width: 100%;
}

/* The label is a span inside a link container. Underlines from the theme
   have no business on it, and neither has a text cursor. */
.ccsecp-ctarow a.cclp-ctapill,
.ccsecp-ctarow a.cclp-ctapill:hover,
.ccsecp-ctarow a.cclp-ctapill:focus {
  text-decoration: none;
}


/* ============================================================
   THE PILL, BUILT FROM CSS  (class ccx-glasspill)
   ------------------------------------------------------------
   What this replaces, and why.

   Until this round the pill was a picture. One PNG, 449 by 105 pixels,
   showing a rounded bar with an orange disc at its right end, set as the
   background of the link container. Whatever box the container had, the
   picture was stretched to fill it.

   That works on /process-tools/, where the label is short: the box there
   is 293 by 64, which is nearly the proportion of the drawing itself, so
   the disc arrives almost round. Here the label is "Request a security
   audit" and the box has to be 350 wide. The same drawing stretched into
   350 by 64 arrives with its disc a quarter wider than it is tall, and
   with the drawn outline of the bar squashed hard enough at the top and
   the bottom that the line doubles up on itself. That is the squeezed look
   Lars saw, and no background setting can prevent it: a picture that is
   stretched to a box is stretched in both directions at once.

   So the picture goes and the pill is drawn instead. The label decides how
   wide the pill is, and the disc is a box of its own with the same number
   for its width and its height. Whatever the label says, in whatever
   language, the disc is round, because a square with a full corner radius
   cannot be anything else. That is also the thing the test measures.

   Removed from the page data by tools/r17-glass/build.php: the background
   picture and the fixed width, on both pills. Added there: this class.

   The surface is glass. A translucent white body, the ground behind it
   blurred and lifted a little, a hairline around the edge and a brighter
   line along the top edge that reads as the light catching the rim. The
   pointer-following glare stays what it was: the class ccfx-specular puts
   a canvas in the same box, and because that canvas is a child of the pill
   it paints on top of the glass without either one knowing about the
   other.
   ============================================================ */

/* Geometry.

   The width comes off the content now, so the fixed --width Elementor used
   to write is replaced by auto here as well; the page builder has no auto
   for container width. The padding is written as Elementor's own custom
   properties, which is what the container reads its padding from.

   Right padding 9 and a disc of 46 inside a pill of 64: the disc keeps 9
   pixels to the right edge and (64-46)/2 = 9 above and below, so it sits in
   the corner of the pill evenly on all three sides.

   --container-widget-width stops the label from claiming the full row.
   Elementor sets that variable on every container so widgets inside fill
   the width; here the label is one of two things standing next to each
   other and has to be as wide as its own text.

   Three times the class: Elementor writes the background of a container at
   four classes, so five settles it in either file order and without
   !important. */
.elementor-21300 .ccsecp-ctarow .ccx-glasspill.ccx-glasspill.ccx-glasspill {
  /* A row, said out loud. An Elementor container stacks its children in a
     column unless it is told otherwise, and this one was never told, because
     until now it had one child and a column of one looks like a row of one.
     It has two children from this round on. Left off, the disc lands under
     the label and the pill grows to 70 high. */
  --flex-direction: row;
  flex-direction: row;

  --width: auto;
  --container-widget-width: auto;
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 28px;
  --padding-right: 9px;
  --gap: 0px 14px;
  --column-gap: 14px;
  width: auto;
  flex: 0 0 auto;

  /* The glass. The gradient is the sheen on the surface, brightest at the
     top and fading out before the middle; the flat layer under it is the
     body. Both are translucent, so the blurred ground shows through.

     One thing to know about the sheen on the lower pill. Elementor holds
     back the background pictures of everything inside a section that is
     still far down the page, with

       .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded) * {
         background-image: none !important }

     and lifts it by putting e-lazyloaded on the section as it comes up. A
     gradient counts as a background picture for that rule, so the sheen on
     the closing pill arrives with the section rather than with the page.
     Nobody sees the difference, because the class is set before the section
     reaches the screen, and the body, the edge and the disc are there from
     the start either way. Left alone on purpose: the only way past it is
     !important, and this is not worth one. Worth knowing when measuring,
     though - read that pill after scrolling to it, or the sheen is missing
     for reasons that have nothing to do with these rules. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .17) 0%,
      rgba(255, 255, 255, .06) 38%,
      rgba(255, 255, 255, .02) 62%,
      rgba(255, 255, 255, .05) 100%),
    rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px) saturate(1.15) brightness(1.05);
  backdrop-filter: blur(10px) saturate(1.15) brightness(1.05);

  /* The edge. The ring is the hairline all the way round; the line above it
     in this list paints in front of it and brightens the top edge, which is
     where a curved glass surface would catch the light. Both are inset
     shadows, so neither one changes the size of the pill. */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .14);

  transition: background-color .25s ease, box-shadow .25s ease;
}

/* Whenever the glare canvas is skipped - touch, reduced motion, no WebGL,
   context budget spent - cc-fx.js marks the element and ccfx-v3.css gives
   it a warm rim instead. That rim is a box shadow, and so is the glass
   edge, so one of the two would silently drop the other. Written out
   together here: the warm ring the fallback asks for, with the bright top
   line of the glass kept in front of it. */
.elementor-21300 .ccsecp-ctarow .ccx-glasspill.ccx-glasspill.ccx-glasspill.ccfx-specular--static {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .25),
    inset 0 0 0 1px var(--ccfx-specular-rim, rgba(255, 183, 101, .22));
}

/* Under the pointer the body lifts a little and the edge follows. */
.elementor-21300 .ccsecp-ctarow .ccx-glasspill.ccx-glasspill.ccx-glasspill:hover,
.elementor-21300 .ccsecp-ctarow .ccx-glasspill.ccx-glasspill.ccx-glasspill:focus-visible {
  background-color: rgba(255, 255, 255, .11);
}

/* Where the browser cannot blur the ground, the body carries the whole
   effect on its own and has to be less see-through, or the pill reads as a
   thin outline with nothing in it. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .elementor-21300 .ccsecp-ctarow .ccx-glasspill.ccx-glasspill.ccx-glasspill {
    background-color: rgba(255, 255, 255, .13);
  }
}

/* The label.

   Two things it brought from the picture era and no longer needs: it was
   full width with its text pushed to the right end, and it kept 40 pixels
   of padding on that end so the words would clear the drawn disc. The disc
   is a box of its own now and holds its own distance, so the label is just
   its text. */
.elementor-21300 .ccsecp-ctarow .ccx-glasspill .elementor-widget-heading {
  width: auto;
  max-width: none;
  flex: 0 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: left;
}

.elementor-21300 .ccsecp-ctarow .ccx-glasspill .elementor-widget-heading > .elementor-widget-container {
  padding: 0;
}

/* The disc.

   assets/ccx-seclp-hero.js puts this in, one per pill. It is written in
   script rather than as a pseudo element of the pill because it needs an
   inside of its own: two arrows live in it, one on its way out and one on
   its way in, and it clips them at its own round edge. A pseudo element
   has no children to clip.

   Width and height are the same number and the corner radius is half of
   it, which is the whole point of the exercise: the disc is round because
   nothing in the layout can stretch a box that states both of its sides.
   flex 0 0 auto and align-self keep the row from doing it anyway. */
.ccx-glasspill__go {
  flex: 0 0 auto;
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(180deg, #FF8E2B 0%, #CE5904 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, .30),
    0 2px 8px rgba(206, 89, 4, .30);
}

/* The two arrows sit on top of each other in the middle of the disc. The
   second one waits outside on the left. On hover the first leaves to the
   right and the second takes its place, and the round edge of the disc
   hides both of them while they travel. */
.ccx-glasspill__ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s ease;
}

.ccx-glasspill__ico svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ccx-glasspill__ico--next {
  transform: translateX(-160%);
  opacity: 0;
}

.ccx-glasspill:hover .ccx-glasspill__ico,
.ccx-glasspill:focus-visible .ccx-glasspill__ico {
  transform: translateX(160%);
  opacity: 0;
}

/* Listed after the rule above, which also matches this element. */
.ccx-glasspill:hover .ccx-glasspill__ico--next,
.ccx-glasspill:focus-visible .ccx-glasspill__ico--next {
  transform: translateX(0);
  opacity: 1;
}

/* Asked to keep still, the arrow stays where it is and simply is there. */
@media (prefers-reduced-motion: reduce) {
  .ccx-glasspill__ico {
    transition: none;
  }
  .ccx-glasspill:hover .ccx-glasspill__ico,
  .ccx-glasspill:focus-visible .ccx-glasspill__ico {
    transform: none;
    opacity: 1;
  }
  .ccx-glasspill:hover .ccx-glasspill__ico--next,
  .ccx-glasspill:focus-visible .ccx-glasspill__ico--next {
    opacity: 0;
  }
}


/* ---------- The row ----------
   Written with the page class and the row class twice so it settles above
   the older rule for the same row that still stands in the page css of
   this post, whichever way round the two stylesheets are printed.

   Wrapping is what the older rule asks for and it stays: between roughly
   620 and 700 pixels the two calls no longer fit side by side and go
   underneath each other. What is added is the space they keep once they
   do, and the centre they keep while they are still on one line. */
.elementor-21300 .ccsecp-ctarow.ccsecp-ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 12px;
}


@media (max-width: 767px) {
  /* On a phone the two calls stand one above the other, set upright in the
     page builder. Each one keeps its own width and centres itself, so the
     row does not stretch either of them across the screen. */
  .ccsecp-ctarow .cchero-btn2 {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .ccsecp-ctarow .cchero-btn2 .elementor-button {
    min-height: 44px;
  }

  .ccsecp-ctarow .cchero-btn2 .elementor-button-text {
    line-height: 16px;
  }

  .ccsecp-ctarow .cclp-ctapill {
    margin-left: auto;
    margin-right: auto;
  }

  /* The pill on a phone. Elementor puts the box at 44 high here and used to
     pad it by 13 all round for the picture; the padding is restated for the
     smaller disc. 34 inside 44 leaves (44-34)/2 = 5, so 5 on the right keeps
     the disc as evenly in its corner as it sits on a desktop. */
  .elementor-21300 .ccsecp-ctarow .ccx-glasspill.ccx-glasspill.ccx-glasspill {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 18px;
    --padding-right: 5px;
    --gap: 0px 10px;
    --column-gap: 10px;
  }

  .ccx-glasspill__go {
    width: 34px;
    height: 34px;
  }

  .ccx-glasspill__ico svg {
    width: 13px;
    height: 13px;
  }
}

/* --------------------------------------------------------------------
 * Below the desktop breakpoint the page wrapper clips sideways.
 *
 * Measured on staging: at 390px the document was 391px wide, and no
 * single child owned the pixel - several subpixel roundings added up
 * across sections, so hiding any one of them changed nothing. The same
 * situation on the header (a 2-14px overhang between 1280 and 1440) is
 * solved site wide with overflow-x: clip on .custom_header, so the page
 * wrapper of this landing page follows that pattern. clip, not hidden:
 * clip cannot become a scroll container, so nothing about sticky or
 * programmatic scrolling changes. Desktop stays unclipped - it measures
 * clean, and the card auras there are allowed to breathe past the
 * section edge.
 * -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-21300.elementor-21300 { overflow-x: clip; }
}


/* ============================================================
   THE TWO CALLS AS GLASS ONE CAN SEE THROUGH
   ------------------------------------------------------------
   Everything above draws the calls as frosted glass: a white body at seven
   percent over a ten pixel blur. Ten pixels of blur on a field of faint
   points does not soften the field, it deletes it, and the pill read as a
   milky lozenge with nothing behind it.

   Glass is not opaque. It bends. So this block takes the body down to about
   four percent and the blur down to two, which puts the points back on the
   screen, and lays a lens over the backdrop that pulls them out of line
   around the rim, where a real surface would curve.

   The lens itself is built in assets/ccx-seclp-hero.js, one picture per
   element and to that element's measurements, and handed over here as the
   custom property --ccx-lens. The head of that file explains the picture and
   where its numbers came from.

   THE TWO LOCKS

   Every rule below is behind ccsecp-lens-on, a class the script only writes
   on the root element after its own test found a browser that really draws a
   backdrop through an SVG filter. Firefox and Safari accept the property and
   then draw nothing, so a pane there would be a hole. Where the class is
   absent not one rule below applies, the calls keep the frosted surface
   written above, unchanged and down to the value, and the script has not
   handed out the classes these selectors need either.

   SPECIFICITY

   Six classes and the root element, against five for the rules above, so
   this settles on top whichever order the stylesheets are printed in and
   without !important.

   BELOW 1025 PIXELS

   The script hands out no lens there, because the field of points behind the
   calls is not drawn at those widths and there would be nothing to bend. The
   custom property is simply absent and the var() falls back to a blur of
   nothing, so the same declaration leaves a plain, quiet pane. That is
   intended: the thinner body and the shorter blur are an improvement at any
   width, the bending is the part that needs something behind it.
   ============================================================ */

/* ---------- The pill ----------
   The body drops from .07 to .038 and the sheen drops with it, so the
   gradient still reads as light lying on a surface rather than as a coat of
   paint. Two and a bit pixels of blur: enough to say there is a thickness
   between the eye and the ground, not enough to take the points off it.

   The unprefixed property carries the lens and the prefixed one does not, on
   purpose. The only engine that needs the prefix is the one that says yes to
   an SVG filter here and then draws nothing, and it never reaches this block
   anyway. */
html.ccsecp-lens-on .elementor-21300 .ccsecp-ctarow
  .ccx-glasspill.ccx-glasspill.ccx-glasspill.ccsecp-lens--pill {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, .035) 38%,
      rgba(255, 255, 255, .012) 62%,
      rgba(255, 255, 255, .03) 100%),
    rgba(255, 255, 255, .038);
  -webkit-backdrop-filter: blur(2.2px) saturate(1.18) brightness(1.03);
  backdrop-filter: var(--ccx-lens, blur(0px)) blur(2.2px) saturate(1.18) brightness(1.03);
}

/* The hover follows the body down. It used to lift to .11, which on a pane
   this clear would read as the glass fogging over rather than as an answer
   to the pointer. */
html.ccsecp-lens-on .elementor-21300 .ccsecp-ctarow
  .ccx-glasspill.ccx-glasspill.ccx-glasspill.ccsecp-lens--pill:hover,
html.ccsecp-lens-on .elementor-21300 .ccsecp-ctarow
  .ccx-glasspill.ccx-glasspill.ccx-glasspill.ccsecp-lens--pill:focus-visible {
  background-color: rgba(255, 255, 255, .07);
}

/* ---------- The ghost button ----------
   The quieter of the two calls and it stays that way: a thinner body and a
   shorter blur than the pill beside it, exactly as it was before. */
html.ccsecp-lens-on .elementor-21300 .ccsecp-ctarow .cchero-btn2
  .elementor-button.elementor-button.ccsecp-lens--btn {
  background-color: rgba(255, 255, 255, .032);
  -webkit-backdrop-filter: blur(2px) saturate(1.14) brightness(1.03);
  backdrop-filter: var(--ccx-lens, blur(0px)) blur(2px) saturate(1.14) brightness(1.03);
}

html.ccsecp-lens-on .elementor-21300 .ccsecp-ctarow .cchero-btn2
  .elementor-button.elementor-button.ccsecp-lens--btn:hover,
html.ccsecp-lens-on .elementor-21300 .ccsecp-ctarow .cchero-btn2
  .elementor-button.elementor-button.ccsecp-lens--btn:focus {
  background-color: rgba(255, 255, 255, .075);
}