.elementor-103 .elementor-element.elementor-element-a1f0c001{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* ABOUTME: Pricing page CSS: a centred hero that the two price cards rise over, the cards as a matched pair on shared rows, and the guarantee link's start edge. */

/* Every rule is scoped under .elementor, the document wrapper. Elementor emits each Global Class as ".elementor .<label>" at (0,2,0) in a sheet
   that loads AFTER this one, so a rule that overrides a class on the same element is lifted to (0,3,0) by a doubled class. Rules every page needs
   (button rows, steps, cards, stacks, FAQ) are the child theme's. */

/* ---------- Hero ---------- */
/* The cards sit in a container, which Elementor pads 10px (no token holds it), so the section is pulled up, and the hero padded, 10px more than the overlap. */
/* The page has one thing to say, the whole price list, and no right-hand column to frame it, so the hero is centred on one axis and the price cards
   rise over its lower edge: the hero's bottom padding is the card overlap plus the room a hero normally leaves (the variable sits on the wrapper because the section that uses it is the
   hero's sibling). Phones keep the two buttons stacked
   and spanning the column, as the theme draws them, so the row stretches instead of centring.
   The overlap is how far down the first card the hero's edge falls: past its padding, its market line and the numeral, to the middle of the gap above "per hire", so the
   edge reads as a rule between the price and its unit at every width. The numeral is the display size on a line-height of 1 and the market line is the h2 on the
   line-height set below, so the overlap follows both as they scale; the gap is the unit line's margin. */
.elementor {
  --card-pad: var(--sp-7);
  --card-h2-line: 1.2;
  --card-overlap: calc(var(--card-pad) + var(--card-h2-line) * var(--fs-h4) + var(--sp-3) + var(--fs-display) + var(--sp-1) / 2);
}
.elementor .ffdh-hero.ffdh-hero {
  padding-block-end: calc(var(--sp-11) + var(--card-overlap) + 10px);
}
.elementor .ffdh-hero .ffdh-stack {
  align-items: center;
  text-align: center;
}
.elementor .ffdh-hero .ffdh-btn-row {
  justify-content: center;
}
.elementor .ffdh-hero .ffdh-eyebrow.ffdh-eyebrow {
  align-self: center;
}
@media (max-width: 767px) {
  .elementor {
    --card-pad: var(--sp-5);
  }
  .elementor .ffdh-hero.ffdh-hero {
    padding-block-end: calc(var(--sp-9) + var(--card-overlap) + 10px);
  }
  .elementor .ffdh-hero .ffdh-btn-row {
    align-self: stretch;
  }
}
.elementor .ffdh-hero + .ffdh-section {
  position: relative;
  margin-block-start: calc((var(--card-overlap) + 10px) * -1);
  padding-block-start: 0;
}

/* ---------- Price cards ---------- */
/* Two cards of equal weight. Each is a subgrid of the pair's grid, six rows (market, numeral, unit, body, list, button), so the numerals, the lists and the
   buttons line up across the cards whatever their text lengths. The card's own row gap is zero; the spacing is on the rows' contents. */
.elementor .ffdh-grid-2 > .ffdh-price-card.ffdh-price-card {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: start;
  box-shadow: var(--sh-md);
}
.elementor .ffdh-grid-2 > .ffdh-price-card.ffdh-price-card:hover {
  box-shadow: var(--sh-brand);
}
.elementor .ffdh-price-card :is(h2, p) {
  margin: 0;
}
.elementor .ffdh-price-card h2 {
  font-size: var(--fs-h4);
  line-height: var(--card-h2-line);
}
.elementor .ffdh-price-card .ffdh-price-tag {
  margin-block-start: var(--sp-3);
}
.elementor .ffdh-price-card .ffdh-small {
  margin-block-start: var(--sp-1);
}
.elementor .ffdh-price-card .ffdh-price-tag + .ffdh-small + p {
  margin-block-start: var(--sp-4);
}
/* The list is the card's own section: a rule above it, and the same room below it before the button. */
.elementor .ffdh-price-card .ffdh-island.ffdh-island {
  align-self: stretch;
  margin-block: var(--sp-5) var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--c-border);
}
@media (max-width: 767px) {
  .elementor .ffdh-price-card.ffdh-price-card {
    padding: var(--sp-5);
  }
}
/* From 768px to the desktop breakpoint the cards stack, held to the theme's one-column measure. Left alone they hang from the start edge under the centred hero,
   so they take the page's axis; phones fill the column and the two-up layout fills the container, so neither is centred. The width is stated because an item with
   auto margins in a grid cell would otherwise shrink to its content. */
@media (min-width: 768px) and (max-width: 1080px) {
  .elementor .ffdh-grid-2 > .ffdh-price-card.ffdh-price-card {
    width: 100%;
    margin-inline: auto;
  }
}

/* ---------- Guarantee ---------- */
/* From the desktop breakpoint the mist section is two columns like the sections of heading and list: the heading and lede on the left, the statement and its link
   on the right. The columns are CSS columns, not grid rows: the statement starts the second column and the link follows it at the stack's own gap, whatever the left column's
   height (grid rows put the link under the taller column, floating below a shorter statement). The children are told to fill their column, because V4 gives flex children a
   shared width, and the stack's gap, which a block container does not apply, becomes the children's margin (the statement, which starts a column, takes none). Below the breakpoint the stack is the theme's column. */
@media (min-width: 1081px) {
  .elementor .ffdh-section--mist > .ffdh-container.ffdh-stack {
    display: block;
    column-count: 2;
    column-gap: var(--sp-8);
  }
  .elementor .ffdh-section--mist > .ffdh-stack > * {
    width: auto;
    min-width: 0;
  }
  .elementor .ffdh-section--mist > .ffdh-stack > * + * {
    margin-block-start: var(--sp-5);
  }
  .elementor .ffdh-section--mist > .ffdh-stack > p:not(.ffdh-lead) {
    break-before: column;
    margin-block-start: 0;
  }
}

/* ---------- Payment steps ---------- */
/* The theme's timeline shares three rows across the steps (marker, title, text) so the markers and titles line up, which also starts every text under the tallest
   title: beside a two-line title, the one-line titles sat far above their text. From the row layout up each step keeps its own three rows instead. The markers
   are one line and one height, so their tops, the titles' tops and the connector through the markers' centres still line up across the row, and the text follows its own
   title at the step's 12px row gap. The steps stretch to the row, so the rows stay at the top of each one. Phones stack the steps, where each already has its own rows. */
@media (min-width: 768px) {
  .elementor .ffdh-timeline > .ffdh-step.ffdh-step {
    grid-row: auto;
    grid-template-rows: auto;
    align-content: start;
  }
}/* End custom CSS */