/* =========================================
   ALIGNMENT PASS

   Two unrelated things read as "not aligned"
   on this site. Both are export artifacts,
   not design decisions.
   ========================================= */

/* -----------------------------------------
   1. CARD GRIDS

   The three capability grids (index 3852bf6,
   platforms 5dff244, use-cases 1694e5f) are
   3-column Elementor grids whose cells
   stretch to the tallest card in the row,
   but whose contents are top-aligned and
   free-flowing. A one-line title therefore
   puts its description a whole line higher
   than a two-line title beside it - measured
   at 47.5px on platforms, where "Real-Time
   View" sat at y=1066 and "Subscriber
   Awareness" at y=1114 - and the card ended
   47.5px short of its own cell, so read
   mode's bottom rule under it sat high too.

   The title block reserves two lines, which
   is the range every label falls in at
   desktop widths, and the card fills the
   cell it was already given.

   The row gap is the export's own 200px. On
   ~410px rows that is 100px of dead space
   between them and it reads as two unrelated
   grids rather than one six-card set. The
   column gap is left alone so no label
   rewraps.
   ----------------------------------------- */

@media (min-width: 768px) {
    /* Cells already stretch to the tallest card in the row; the widget
       inside them did not, which is what let read mode's bottom rule
       float 47.5px high under a short card. */
    .elementor .elementor-element-3852bf6 > .e-con,
    .elementor .elementor-element-5dff244 > .e-con,
    .elementor .elementor-element-1694e5f > .e-con,
    .elementor .elementor-element-3852bf6 .elementor-widget-icon-box,
    .elementor .elementor-element-5dff244 .elementor-widget-icon-box,
    .elementor .elementor-element-1694e5f .elementor-widget-icon-box,
    .elementor .elementor-element-3852bf6 .elementor-icon-box-wrapper,
    .elementor .elementor-element-5dff244 .elementor-icon-box-wrapper,
    .elementor .elementor-element-1694e5f .elementor-icon-box-wrapper {
        height: 100%;
    }
}

@media (min-width: 1025px) {
    /* The export ships 200px on both axes. On ~410px rows that is 100px
       of dead air between them, and on a 1345px container it leaves
       315px columns - 39% of the grid is gutter, and it is why the
       longest label needed four lines. 96px gives 384px columns and one
       gutter value for both axes. */
    .elementor .elementor-element-3852bf6,
    .elementor .elementor-element-5dff244,
    .elementor .elementor-element-1694e5f {
        gap: 96px !important;
    }

    /* At 384px no title on index or platforms exceeds two lines, and
       none on use-cases exceeds three. Reserving exactly that many puts
       every description in a row on one baseline with no more air than
       the shortest label forces. Measured, not guessed - at the shipped
       315px columns the maxima were three and four. */
    .elementor .elementor-element-3852bf6 .elementor-icon-box-title,
    .elementor .elementor-element-5dff244 .elementor-icon-box-title {
        min-height: 2.4em;  /* line-height is 1.2; fallback for no lh unit */
        min-height: 2lh;
    }

    .elementor .elementor-element-1694e5f .elementor-icon-box-title {
        min-height: 3.6em;
        min-height: 3lh;
    }
}

/* -----------------------------------------
   2. BUTTONS

   Across the four pages that have them the
   buttons ship as: border-radius 0 on all
   but one, which is 3px; padding
   16/16/16/20, so the label sits 4px right
   of where the box implies; heights of 50px
   and 39px; and display:inline-block, so the
   label is centred by padding arithmetic
   rather than by layout.

   One geometry for all of them. Type is left
   per context - the 18px caps CTA, the 15px
   footer button and the 24px mail link are
   deliberately different sizes - and so is
   colour, which is already checked: white on
   #7E29FE is 5.78:1 and #7E29FE on #ECE7FF
   is 4.80:1.
   ----------------------------------------- */

.elementor .elementor-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;              /* also the 44px tap-target floor */
    padding: 14px 26px !important;
    border-radius: 8px !important;
}

.elementor .elementor-button .elementor-button-content-wrapper {
    align-items: center;
}