@charset "UTF-8";
/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
.wu-prices__grid {
  display: grid;
  gap: var(--wu-prices-gap, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .wu-prices--packages .wu-prices__grid {
    grid-template-columns: repeat(var(--wu-prices-columns-tablet, 2), minmax(0, 1fr));
  }
  .wu-prices--packages.wu-prices--n1 .wu-prices__grid {
    grid-template-columns: minmax(0, var(--wu-prices-panel-width, 560px));
  }
}
@media (min-width: 1025px) {
  .wu-prices--packages.wu-prices--n3 .wu-prices__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wu-prices--packages.wu-prices--n4 .wu-prices__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.wu-prices__item {
  min-width: 0;
}

/* A package, or the panel. Border-box, so the edge and the padding stay
   inside the cell. */
.wu-prices__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--wu-prices-card-gap, 12px);
  height: 100%;
  padding: var(--wu-prices-pad, 28px);
  border: var(--wu-prices-border, 1px solid var(--wu-line));
  border-radius: var(--wu-prices-radius, var(--wu-card-radius));
  background: var(--wu-prices-face, var(--wu-surface));
  box-shadow: var(--wu-prices-shadow, var(--wu-card-shadow, none));
  color: var(--wu-prices-text, var(--wu-text));
}

.wu-prices__card > *,
.wu-prices__what > * {
  margin: 0;
}

.wu-prices__item--featured .wu-prices__card {
  border: var(--wu-prices-featured-border, 1px solid var(--wu-accent));
  background: var(--wu-prices-featured-face, var(--wu-prices-face, var(--wu-surface)));
  color: var(--wu-prices-featured-text, var(--wu-prices-text, var(--wu-text)));
}

.wu-prices__name {
  font-family: var(--wu-prices-name-face, var(--wu-display));
  font-size: var(--wu-prices-name-size, var(--wp--preset--font-size--heading-3));
  font-weight: var(--wu-prices-name-weight, var(--wu-heading-weight, 700));
  line-height: 1.25;
  letter-spacing: var(--wu-prices-name-tracking, -0.01em);
}

.wu-prices__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.wu-prices__figure {
  color: var(--wu-prices-figure-colour, inherit);
  font: var(--wu-prices-figure-font, 700 32px/1.1 var(--wu-display));
  letter-spacing: var(--wu-prices-figure-tracking, -0.02em);
  font-variant-numeric: tabular-nums;
}

.wu-prices__lead,
.wu-prices__unit {
  color: var(--wu-prices-unit-colour, var(--wu-muted));
  font-size: var(--wu-prices-unit-size, 15px);
}

.wu-prices__note,
.wu-prices__detail {
  color: var(--wu-prices-note-colour, var(--wu-muted));
  font-size: var(--wu-prices-note-size, 15px);
  line-height: 1.5;
}

.wu-prices__lines {
  display: grid;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.wu-prices__lines li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: var(--wu-prices-line-pad, 10px 0);
  border-top: var(--wu-prices-rule, 1px solid var(--wu-line));
  font-size: var(--wu-prices-line-size, 16px);
  line-height: 1.45;
}

.wu-prices__amount {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.wu-prices__button {
  align-self: flex-start;
  margin-top: auto;
}

/* The panel: one price, its figure large, set apart on its own face. */
.wu-prices--panel .wu-prices__grid {
  max-width: var(--wu-prices-panel-width, 560px);
}

.wu-prices--panel .wu-prices__card {
  padding: var(--wu-prices-panel-pad, 32px);
  background: var(--wu-prices-panel-face, var(--wu-prices-face, var(--wu-surface)));
}

.wu-prices--panel .wu-prices__figure {
  font: var(--wu-prices-panel-figure-font, 700 48px/1 var(--wu-display));
}

/* The list: every price a row, the name and its lines on the left, the
   price on the right; a rule between rows. */
.wu-prices--list .wu-prices__grid {
  gap: 0;
  border-bottom: var(--wu-prices-rule, 1px solid var(--wu-line));
}

.wu-prices__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 24px;
  padding: var(--wu-prices-row-pad, 18px 0);
  border-top: var(--wu-prices-rule, 1px solid var(--wu-line));
}

.wu-prices__what {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}

.wu-prices--list .wu-prices__name {
  font-size: var(--wu-prices-row-name-size, 18px);
}

.wu-prices--list .wu-prices__figure {
  font: var(--wu-prices-row-figure-font, 600 18px/1.3 var(--wu-display));
}

.wu-prices__detail span + span::before {
  content: " · ";
}

.wu-prices__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: var(--wu-prices-foot-top, 40px);
}

.wu-prices__small {
  margin: 0;
  color: var(--wu-prices-note-colour, var(--wu-muted));
  font-size: var(--wu-prices-note-size, 15px);
}

/* The inverse ground: the cards keep their own face and text; the list's
   rules and lines, the small print and the plain, rule and numbered
   eyebrows take the inverse text (--wu-prices-inverse-muted and
   --wu-prices-inverse-accent where a child wants others). */
.wu-ground--inverse .wu-prices__row,
.wu-ground--inverse.wu-prices--list .wu-prices__grid {
  border-color: var(--wu-prices-rule-inverse, color-mix(in srgb, var(--wu-inverse-text) 24%, transparent));
}

.wu-ground--inverse.wu-prices--list :is(.wu-prices__note, .wu-prices__detail, .wu-prices__lead, .wu-prices__unit),
.wu-ground--inverse .wu-prices__small {
  color: var(--wu-prices-inverse-muted, var(--wu-inverse-text));
}

.wu-prices.wu-ground--inverse :is(.wu-eyebrow, .wu-label) {
  color: var(--wu-prices-inverse-accent, var(--wu-inverse-text));
}

/* The arrow after a button's or a text link's words (3.13.0, working rule
   12): the slot --wu-button-arrow is its display, inline-block when unset;
   none hides every arrow the parent draws on buttons and text links. In
   each block's own stylesheet, so it holds where a child dequeues the
   parent's sections.css. An icon before the words is not an arrow. From
   3.16.1 every part but the svg is in :where(), so the rule weighs 0,0,1:
   a child's own rule on the arrow, written before 3.13.0 (Canine Sense's
   `.wu-ihero .wu-button svg`, 0,2,1), still wins, as it did when the
   parent set no display there (3.13.0 to 3.16.0 weighed 0,4,1). */
:where(.wu-prices) :where(.wu-button:not(.wu-button--icon, .wu-contact__link), .wu-textlink:not(.wu-textlink--icon)) > svg:where(:last-child) {
  display: var(--wu-button-arrow, inline-block);
}

/* Periods (3.15.0, `periods`): the switch is a row of buttons that are
   radio inputs in a fieldset (the admin standard's row: one name, the
   first period chosen, the arrow keys move along it); each item draws one
   price per period and the chosen period's show, by :has(), so no script
   is needed. The first period's prices stand at rest. */
.wu-prices__periods {
  margin: 0 0 var(--wu-prices-periods-gap, 32px);
  padding: 0;
  border: 0;
}

.wu-prices__switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--wu-line-strong);
  border-radius: var(--wu-button-radius, 999px);
  background: var(--wu-prices-switch-face, transparent);
}

.wu-prices__period {
  position: relative;
  display: inline-flex;
}

.wu-prices__period-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.wu-prices__period-face {
  padding: var(--wu-prices-period-pad, 8px 18px);
  border-radius: var(--wu-button-radius, 999px);
  color: var(--wu-muted);
  font: var(--wu-prices-period-font, 600 15px/1.2 var(--wu-body));
  pointer-events: none;
}

.wu-prices__period-input:checked + .wu-prices__period-face {
  background: var(--wu-prices-period-on-face, var(--wu-text));
  color: var(--wu-prices-period-on-text, var(--wu-ground));
}

.wu-prices__period-input:focus-visible + .wu-prices__period-face {
  outline: 2px solid var(--wu-accent);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .wu-prices__period-input:checked + .wu-prices__period-face {
    background: Highlight;
    color: HighlightText;
  }
}
.wu-prices__price[data-period]:not([data-period="1"]) {
  display: none;
}

.wu-prices--periods:has(.wu-prices__period-input[value="2"]:checked) .wu-prices__price[data-period] {
  display: none;
}

.wu-prices--periods:has(.wu-prices__period-input[value="2"]:checked) .wu-prices__price[data-period="2"] {
  display: flex;
}

.wu-prices--periods:has(.wu-prices__period-input[value="3"]:checked) .wu-prices__price[data-period] {
  display: none;
}

.wu-prices--periods:has(.wu-prices__period-input[value="3"]:checked) .wu-prices__price[data-period="3"] {
  display: flex;
}

.wu-prices--periods:has(.wu-prices__period-input[value="4"]:checked) .wu-prices__price[data-period] {
  display: none;
}

.wu-prices--periods:has(.wu-prices__period-input[value="4"]:checked) .wu-prices__price[data-period="4"] {
  display: flex;
}

/* The rates table (3.15.0, `variant` table): an item a row, its name, its
   price and its note; below 768px each row is a card with every cell under
   its column's heading (the data-label pattern of webupp/compare). */
.wu-prices__table-wrap {
  overflow-x: auto;
}

.wu-prices__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wu-prices-table-size, 16px);
  line-height: 1.5;
}

.wu-prices__table thead th {
  padding: 0 16px 14px 0;
  color: var(--wu-muted);
  font: var(--wu-prices-table-head-font, 600 13px/1.3 var(--wu-body));
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}

.wu-prices__table tbody th,
.wu-prices__table td {
  padding: var(--wu-prices-row-pad, 18px 16px 18px 0);
  border-top: var(--wu-prices-rule, 1px solid var(--wu-line));
  vertical-align: top;
  text-align: left;
}

.wu-prices__table tbody th {
  font-family: var(--wu-display);
  font-size: var(--wu-prices-row-name-size, 18px);
  font-weight: 700;
}

.wu-prices__table .wu-prices__detail {
  display: block;
  margin-top: 4px;
  color: var(--wu-muted);
  font-family: var(--wu-body);
  font-size: 15px;
  font-weight: 400;
}

.wu-prices__table .wu-prices__price {
  margin: 0;
  white-space: nowrap;
}

.wu-prices__table .wu-prices__figure {
  font: var(--wu-prices-row-figure-font, 600 18px/1.3 var(--wu-display));
}

.wu-prices__cell--note {
  color: var(--wu-muted);
}

@media (max-width: 767.98px) {
  .wu-prices__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .wu-prices__table tr {
    display: grid;
    gap: 6px;
    padding: 18px 0;
    border-top: var(--wu-prices-rule, 1px solid var(--wu-line));
  }
  .wu-prices__table tbody th,
  .wu-prices__table td {
    width: auto;
    padding: 0;
    border: 0;
  }
  .wu-prices__table td:empty {
    display: none;
  }
  .wu-prices__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--wu-muted);
    font: var(--wu-prices-table-head-font, 600 12px/1.3 var(--wu-body));
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}
.wu-prices.wu-ground--inverse :is(.wu-prices__table thead th, .wu-prices__cell--note, .wu-prices__period-face) {
  color: var(--wu-prices-inverse-muted, var(--wu-inverse-text));
}

/* The eyebrow's slots (3.17.0): --wu-label-gap and the rule's
   --wu-label-rule-length, -width (its thickness), -radius, --wu-label-rule
   (its colour) and -opacity. sections.css reads them with the values drawn
   before; here, of no weight and with no fallback, they reach a site that
   dequeues sections.css and draws the eyebrow itself, wherever its own
   rules leave these properties unset (unset, each is as if absent; the
   rule's span is empty, so flex none changes no box). Every block
   stylesheet that draws an eyebrow carries this rule. */
:where(.wu-label) {
  gap: var(--wu-label-gap);
}

:where(.wu-label__rule) {
  flex: none;
  width: var(--wu-label-rule-length);
  height: var(--wu-label-rule-width);
  border-radius: var(--wu-label-rule-radius);
  background: var(--wu-label-rule);
  opacity: var(--wu-label-rule-opacity);
}