/* ====================================================================
 * The Shopify app development page (post 1977), 2026 rebuild
 *
 * The page used to be a shop window for three apps of our own. It now
 * sells the work behind them, and the three apps are what proves we can
 * do it. Five parts of that need a stylesheet:
 *
 *   the filled call to action, which is written as a class of its own so
 *   the next page that wants the same button says one word
 *
 *   the three app blocks, which lost their card frames and took the open
 *   layout of the reference blocks on the home page, ghost numeral and
 *   hair line included
 *
 *   the band of four cards that says what building an app actually
 *   involves, which is a new block and brings its own look
 *
 *   the shape the pointer rim traces: it has to be the shape a reader
 *   sees, and on a page builder widget those two are not the same box
 *
 *   the line of text that had been given the look of a button
 *
 * Everything works off class names but one: the bare "Learn more" link is
 * reached through its element id, because the page data gives it no class
 * of its own and the rules have to hold before any script runs. The id is
 * scoped by .ccapp-card, which exists on this page only.
 *
 * Loaded behind assets/ccfx-v3.css, so a rule here settles a tie inside
 * the effect layer. Against the page stylesheet the weight decides, not
 * the order: a setting made on an element carries the page class and the
 * element class, which no rule here reaches.
 * ==================================================================== */

/* ==================================================================
 * 0. THE FILLED CALL TO ACTION (.ccapp-cta)
 *
 * The pill in the banner used to be a flat orange lozenge with the page
 * navy as its lettering and no edge at all. Next to the call to action of
 * the home page, which is white on a dark pill with a lit rim, it read as
 * a different site. This class brings it back in line and is written so
 * it can be put on any filled call to action later:
 *
 *   white lettering, a warm rim, and the brand gradient underneath, light
 *   at the top and saturated at the bottom, exactly the way the orange
 *   circle of the home page pill is painted
 *
 *   a surface that is NOT one smooth wash: three faint layers in the same
 *   orange break it into small facets, so the pill catches the eye the way
 *   a brushed metal button does instead of looking printed
 *
 * The glint that follows the pointer and the light that travels the edge
 * are handed out in inc/ccx-apps26.php and are what the rim is for.
 *
 * WEIGHT. The page builder writes the button as
 *   .elementor-1977 .elementor-element.elementor-element-a16h101 .elementor-button
 * which is four class names, and its hover twin is five. Order does not
 * settle that, only weight does, so every rule here carries six names, and
 * the hover rule seven. Both selectors are named: the structural one holds
 * from the first frame on the page as it stands today, the bare class is
 * the handle for the next page that wants the same button.
 * ================================================================== */

.ccapp-ctapill.ccapp-ctapill.ccapp-ctapill .elementor-button.elementor-button.elementor-button,
.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta {
  /* the six background layers, top one first:
   *   1  the light that sits on the upper half of a physical button
   *   2  a soft shade coming up from the lower left
   *   3  a soft light coming down from the upper right
   *      2 and 3 are what stops the facets below from reading as wallpaper:
   *      the same pattern is a shade darker on one side of the pill than on
   *      the other, which is how a faceted surface behaves
   *   4  facets, one family of fine bands at 58 degrees, period 9
   *   5  facets, a second family at -38 degrees, period 13. The two periods
   *      share no factor, so the crossings never settle into a motif; a
   *      repeated star or a clean grid would read as decoration
   *   6  the brand gradient, light at the top and saturated at the bottom
   * No overlay reaches six percent. The point is a surface that is not one
   * flat wash, not a pattern anybody is meant to look at. */
  background-image:
    radial-gradient(120% 104% at 50% -38%,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.07) 42%,
      rgba(255, 255, 255, 0) 68%),
    radial-gradient(70% 180% at 18% 120%,
      rgba(90, 32, 0, 0.10) 0%, rgba(90, 32, 0, 0) 60%),
    radial-gradient(60% 160% at 84% -20%,
      rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(58deg,
      rgba(255, 255, 255, 0.045) 0 4px,
      rgba(90, 32, 0, 0.034) 4px 9px),
    repeating-linear-gradient(-38deg,
      rgba(255, 255, 255, 0.038) 0 6px,
      rgba(90, 32, 0, 0.028) 6px 13px),
    linear-gradient(180deg, #FF8E2B 0%, #F07A16 46%, #CE5904 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, auto, auto, 100% 100%;
  background-color: #E96F0E;

  /* The rim. One pixel is taken back out of the lettering padding, so the
   * pill keeps the height it has today and nothing beside it moves. */
  border: 1px solid rgba(255, 206, 160, 0.58);
  padding: 16px 29px;

  /* white lettering, the value the home page pill uses */
  color: rgba(255, 255, 255, 0.97);
  fill: rgba(255, 255, 255, 0.97);
  text-shadow: 0 1px 1px rgba(120, 44, 0, 0.28);

  /* a light along the inside of the top edge and a shadow along the
   * inside of the bottom one: that pair is what makes a surface read as
   * raised rather than as a coloured rectangle */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(120, 44, 0, 0.30),
    0 10px 26px rgba(206, 89, 4, 0.30);
  transition: box-shadow 0.22s ease-out, border-color 0.22s ease-out,
              background-color 0.22s ease-out;
}

.ccapp-ctapill.ccapp-ctapill.ccapp-ctapill .elementor-button.elementor-button.elementor-button:hover,
.ccapp-ctapill.ccapp-ctapill.ccapp-ctapill .elementor-button.elementor-button.elementor-button:focus-visible,
.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta:hover,
.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta:focus-visible {
  background-image:
    radial-gradient(120% 104% at 50% -38%,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.10) 42%,
      rgba(255, 255, 255, 0) 68%),
    radial-gradient(70% 180% at 18% 120%,
      rgba(90, 32, 0, 0.09) 0%, rgba(90, 32, 0, 0) 60%),
    radial-gradient(60% 160% at 84% -20%,
      rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(58deg,
      rgba(255, 255, 255, 0.055) 0 4px,
      rgba(90, 32, 0, 0.038) 4px 9px),
    repeating-linear-gradient(-38deg,
      rgba(255, 255, 255, 0.045) 0 6px,
      rgba(90, 32, 0, 0.032) 6px 13px),
    linear-gradient(180deg, #FFA24D 0%, #F5871F 46%, #E2680D 100%);
  border-color: rgba(255, 220, 186, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(120, 44, 0, 0.26),
    0 12px 30px rgba(206, 89, 4, 0.38);
}

/* The facet layers are decoration. A reader who has asked the system for
 * calm gets the plain gradient. */
@media (prefers-reduced-motion: reduce) {
  .ccapp-ctapill.ccapp-ctapill.ccapp-ctapill .elementor-button.elementor-button.elementor-button,
  .ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta.ccapp-cta {
    transition: none;
  }
}

/* ==================================================================
 * 1. THE THREE APP BLOCKS
 * ================================================================== */

.ccapp-card {
  position: relative;
}

/* The open layout, which is what this class means.
 *
 * The blocks were built as framed cards: a pale gradient fill, a one pixel
 * frame and a rounded top. Three of them stacked read as three big boxes
 * on the page and hid the hair line that is supposed to separate them.
 * The reference blocks of the home page carry nothing of the sort, and
 * these follow them now. The heights and the padding are set in the page
 * data, so the editor shows what the visitor sees; only the decoration is
 * taken off here, because the decoration is what the class is about.
 *
 * Four class names against the three the page builder writes for a
 * container setting. */
.ccapp-card.ccapp-card.ccapp-card.ccapp-card {
  background-image: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
}

/* The hair line between two blocks. It replaces the card frames the page
 * used to draw, exactly as on the reference section of the home page: a
 * line that fades out towards both edges reads as a separation without
 * closing a box around anything. */
.ccapp-card + .ccapp-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  bottom: auto;
  width: auto;
  height: 1px;
  z-index: 3;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* On a phone the same gradient has barely any run, and fourteen percent
 * white at one pixel is gone in daylight. The line is pulled in to the
 * side padding the card keeps there and the bright middle is raised, the
 * same two changes the reference blocks made for the same reason. */
@media (max-width: 1024px) {
  .ccapp-card + .ccapp-card::before { left: 16px; right: 16px; }
}
@media (max-width: 767px) {
  .ccapp-card + .ccapp-card.ccapp-card.ccapp-card.ccapp-card::before {
    left: 12px;
    right: 12px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.24) 50%,
      rgba(255, 255, 255, 0) 100%);
  }
}

/* The ghost numeral behind the text column.
 *
 * Everything the page builder writes for a container pseudo element is
 * reset first. Elementor gives .e-con::before and ::after a full set of
 * container values, the frame of the container among them, and a numeral
 * that only sets a corner and a size inherits the rest and draws a second
 * frame across the block. That has bitten this site twice before, on the
 * idea cards and on the pillars of the home page, so it is written out
 * here rather than assumed. */
.ccapp-content {
  position: relative;
}
.ccapp-content > .elementor-element {
  position: relative;
  z-index: 1;
}
.ccapp-content::after {
  position: absolute;
  top: -18px;
  left: -22px;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  z-index: 0;
  border: 0;
  background: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 320px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ccapp-n1 .ccapp-content::after { content: "1"; color: rgba(255, 255, 255, 0.065); }
.ccapp-n2 .ccapp-content::after { content: "2"; }
.ccapp-n3 .ccapp-content::after { content: "3"; }

/* From 1025px up the picture stands beside the text and the right hand
 * side of the text column is free, which is the only place a numeral this
 * size can sit without printing across a sentence. The headline of a block
 * is capped at 465px inside a column that runs about 630px wide, so the
 * last third carries no text at all. Same move the reference blocks made,
 * and for the same reason. */
@media (min-width: 1025px) {
  .ccapp-card .ccapp-content.ccapp-content::after {
    top: 0;
    left: auto;
    right: 0;
  }
}
@media (max-width: 1024px) {
  .ccapp-content::after { font-size: 220px; top: -14px; left: -8px; }
}
@media (max-width: 767px) {
  .ccapp-content::after { font-size: 140px; top: -6px; left: -6px; }
}

/* ------------------------------------------------------------ badge row
 *
 * A row above the headline of a block: the name of the app on the left,
 * its state on the right. The state pill carries .ccref-badge as well, so
 * it takes the pulsing rim the base configuration already hands to that
 * class, and the dot inside it comes from the page markup. */
.ccapp-badgerow {
  position: relative;
  z-index: 1;
}
.ccapp-badgerow .ccref-badge .elementor-heading-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
/* The visible pill is drawn on the box inside the widget, so the widget
 * itself has square corners and the pointer rim would trace a rectangle
 * around a pill. The radius costs nothing, the widget has no background
 * of its own, and it gives the rim the shape to follow. */
.ccapp-badgerow .ccref-badge { border-radius: 999px; }

/* The name of the app. A quiet pill, so the eye goes to the state beside
 * it rather than to the label. */
.ccapp-name .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

/* The state pill of an app that is not in the store yet. Same shape as
 * the green one, in the silver of the body text, and without the pulse:
 * a pulse is a signal that something is live. */
.ccapp-badgerow .ccapp-soon > .elementor-widget-container {
  animation: none;
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

@media (max-width: 767px) {
  .ccapp-badgerow { --flex-direction: row; --flex-wrap: wrap; --gap: 8px 8px; }
}

/* -------------------------------------------------------- the store link
 *
 * The link to the listing in the Shopify App Store is a container with a
 * background picture, not a button widget, so it needs the radius written
 * out for the travelling light to run along its edge. */
.ccapp-storebtn { border-radius: 999px; }

/* ==================================================================
 * 2. WHAT BUILDING AN APP INVOLVES
 *
 * Four cards. They are framed, unlike the app blocks above, because they
 * carry no picture and nothing else would hold them apart on a wide
 * screen. The frame is the one the rest of the site uses for a card, so
 * the band sits next to the pillars of the home page without a second
 * colour world.
 * ================================================================== */

.ccexp-card {
  position: relative;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1.2px solid #2C334C;
  background: linear-gradient(140deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.022) 100%);
}

/* A short orange stroke along the top edge of a card. It picks up the
 * gradient of the calls to action, which is what ties the band to the
 * rest of the page without giving four cards four coloured surfaces. */
.ccexp-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 26px;
  right: auto;
  bottom: auto;
  width: 54px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF8E2B 0%, #CE5904 100%);
  opacity: 0.85;
  pointer-events: none;
}

.ccexp-num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 767px) {
  .ccexp-card::after { left: 20px; width: 44px; }
}

/* ==================================================================
 * 3. THE QUESTIONS
 *
 * The two columns of questions already draw a frame around every single
 * question. The rim is put on those frames and not on the two widgets
 * around them, because a widget holds four or five questions with gaps
 * between them and the rim would trace a rectangle that is not on the
 * screen. The class is handed to the frames in inc/ccx-apps26.php.
 * ================================================================== */

.ccapp-faqcard .elementor-toggle-item {
  position: relative;
}

/* The aura of the rim is drawn outside the box it belongs to. On the two
 * question columns that box stands 24px from its neighbour, so the aura
 * is pulled in until it fits between them and never reaches across. */
.ccapp-faqcard .elementor-toggle-item.mmrb-glowcard {
  --gc-pad: 10px;
}

/* ==================================================================
 * 4. THE POINTER RIM RIDES THE ROUND SHAPE
 *
 * The rim layer the engine injects takes its corners from the element it
 * is put on: border-radius: inherit, nothing else. A page builder widget
 * is a rectangle, and the pill a reader sees is usually painted one level
 * further in, on the heading inside the widget. Put the rim on the widget
 * and it draws a square around a round pill, which is exactly what stood
 * on three places of this page.
 *
 * The rule from here on: the rim goes on the element that carries the
 * radius, never on the rectangular wrapper around it. Two of the three
 * are handed over in inc/ccx-apps26.php, which is where this page decides
 * who gets a rim. The third, the eyebrow above "What building an app
 * proves", takes its rim from the site wide .ccx-pill entry in
 * inc/ccx-home26.php, which no page may rewrite; there the wrapper is
 * given the same corners as the pill inside it instead, so host and pill
 * are one box and the rim has nothing square left to trace.
 * ================================================================== */

/* The eyebrow of the expertise band. On the home page the same class sits
 * on containers that draw their own pill, here it sits on a heading whose
 * pill is painted on the box inside it. .ccexp exists on this page only. */
.ccexp .ccx-pill.elementor-widget-heading { border-radius: 999px; }

/* Safety net for the two the module hands over one level in: should a
 * future list name the widget again, it now has the shape of its pill. */
.ccapp-name.elementor-widget-heading,
.ccexp-num.elementor-widget-heading { border-radius: 999px; }

/* The pill of a block name and the pill of a number are small. Their aura
 * is pulled in so it stays on the pill instead of washing over the words
 * beside it. Named on the heading, which is where the rim now sits. */
.ccapp-name .elementor-heading-title.mmrb-glowcard,
.ccexp-num .elementor-heading-title.mmrb-glowcard {
  --gc-pad: 10px;
}

/* ==================================================================
 * 5. LINES OF TEXT ARE NOT BUTTONS
 *
 * "Learn more" with an arrow beside the store link is a button widget in
 * the page data, so the site wide rule for .elementor-button in cc-fx.php
 * handed it the glint a filled button gets. There is no shape for it to
 * sit in: the light pools in the empty space next to the words and reads
 * as a smudge. Only a button with a visible frame or a filled pill may
 * carry the glint or the travelling light.
 *
 * The class is written by assets/ccx-apps26.js. Naming the element as
 * well means the rules hold from the first frame, before any script runs.
 * ================================================================== */

.ccapp-card [data-id="939302c"] .elementor-button::before,
.ccapp-card [data-id="939302c"] .elementor-button::after,
.ccapp-plainlink::before,
.ccapp-plainlink::after { display: none !important; }

/* Both effects clip their host and open a stacking context of their own.
 * Neither belongs on a line of text, and the arrow leans out of the box
 * when the pointer arrives. */
.ccapp-card [data-id="939302c"] .elementor-button,
.ccapp-plainlink { overflow: visible !important; isolation: auto !important; }

/* Anything either effect may already have injected before the script had
 * its turn. Hidden rather than removed, so a repaint cannot show it for a
 * frame. */
.ccapp-card [data-id="939302c"] .elementor-button > .ccx-starborder__b,
.ccapp-card [data-id="939302c"] .elementor-button > .ccx-starborder__t,
.ccapp-card [data-id="939302c"] .elementor-button > .mmrb-glowcard__edge,
.ccapp-card [data-id="939302c"] .elementor-button > .mmrb-glowcard__fill,
.ccapp-plainlink > .ccx-starborder__b,
.ccapp-plainlink > .ccx-starborder__t,
.ccapp-plainlink > .mmrb-glowcard__edge,
.ccapp-plainlink > .mmrb-glowcard__fill { display: none !important; }

/* What is left is a plain link: the resting look the page data gives it,
 * and the brand orange plus an arrow that leans two pixels the way it
 * points once the pointer is on it. */
.ccapp-plainlink { transition: color 0.2s ease-out; }
.ccapp-plainlink .elementor-button-icon svg { transition: transform 0.2s ease-out; }
.ccapp-plainlink:hover,
.ccapp-plainlink:focus-visible { color: #ff8e2b; }
.ccapp-plainlink:hover .elementor-button-icon svg,
.ccapp-plainlink:focus-visible .elementor-button-icon svg { transform: translateX(2px); }
.ccapp-plainlink:hover .elementor-button-icon svg path,
.ccapp-plainlink:focus-visible .elementor-button-icon svg path {
  stroke: currentColor;
  stroke-opacity: 1;
}