/** Shopify CDN: Minification failed

Line 215:0 Unexpected "}"

**/
/* ============================================================
   AVANTI - REDESIGN LAYER (v5)
   ============================================================
   Loaded from theme.liquid AFTER avanti-theme.css and avanti-rating.css,
   so it overrides the previous skin at equal specificity.

   TO REVERT EVERYTHING: delete the avanti-redesign.css line in
   layout/theme.liquid. Nothing else depends on this file.

   WHAT THIS LAYER DOES, AND WHAT IT DELIBERATELY LEAVES ALONE
   The palette is untouched: light ground, near-black ink, lime accent.
   No scheme is changed and no colour is forced, so text can never be
   stranded on a ground it was not written for.

   Product imagery is also untouched. An earlier pass unboxed the cards
   and put photos on a tinted panel with a blend mode; cut-outs on white
   read as grey and the grid lost its structure. The boxed card from
   avanti-theme.css is the right answer and this layer no longer
   overrides it.

   What it does change is hierarchy and craft:

     1. Navigation that leads. The row read as a toolbar; now the label
        leads in tracked caps, the current page is marked, and the lime
        rule grows from the centre on intent. Icons are off.
     2. A buy box with an order. Title, then price, then quiet option
        labels so the pickers carry the weight, on one rhythm, sticky
        beside the gallery on desktop.
     3. A real type scale and an even vertical rhythm, so a page has a
        clear first, second and third voice.

   Lime is for action and for data, never decoration.

   Every value derives from :root in avanti-theme.css. No literal
   colors, no font stacks stated here.
   ============================================================ */

:root {
  /* display scale, 1.333 perfect fourth */
  --t-xs: 1.2rem;
  --t-sm: 1.4rem;
  --t-base: 1.6rem;
  --t-md: 2.1rem;
  --t-lg: 2.8rem;
  --t-xl: clamp(3.2rem, 4.5vw, 5.4rem);
  --t-2xl: clamp(4rem, 6.5vw, 8.4rem);

  --s-1: .4rem;  --s-2: .8rem;  --s-3: 1.2rem; --s-4: 1.6rem;
  --s-5: 2.4rem; --s-6: 3.2rem; --s-7: 4.8rem; --s-8: 6.4rem;
  --s-9: 9.6rem; --s-10: 12rem;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .22s;
}

/* ============================================================
   1. DISPLAY TYPE
   A full step larger, tighter, and italic on the loud voices.
   ============================================================ */
.avanti-hero__heading,
.avanti-proof__heading { font-size: var(--t-2xl); letter-spacing: -.035em; line-height: .98; }

.avanti-finder__heading,
.avanti-compare__heading,
.avanti-story__heading,
.collection-hero__title,
.main-page-title,
.title--primary,
.section-header h2,
.title-wrapper h2 {
  font-family: var(--font-heading-family);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--t-xl);
  letter-spacing: -.03em;
  line-height: 1;
}

h1, .h0, .h1 { letter-spacing: -.035em; }
h2, .h2 { letter-spacing: -.03em; line-height: 1.04; }

.rte p,
.avanti-story__text p,
.avanti-proof__body p { max-width: 68ch; }

/* one kicker treatment, always lime, everywhere */
.avanti-finder__kicker,
.avanti-compare__kicker,
.avanti-proof__kicker,
.avanti-hero__kicker,
.avanti-story__kicker {
  font-size: var(--t-xs);
  letter-spacing: .2em;
  margin-bottom: var(--s-4);
}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.button,
.shopify-challenge__button,
.customer button {
  border-radius: var(--r-sm);
  min-height: 5rem;
  padding-inline: var(--s-6);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--font-body-weight-bold);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.button:not([disabled]):hover { transform: translateY(-2px); }
.button:not([disabled]):active { transform: translateY(0); }

.product-form__submit,
.avanti-finder__cta { min-height: 5.6rem; font-size: var(--t-sm); }

/* ============================================================
   4. SECTION RHYTHM
   Generous, even bands. Space is what separates a considered page
   from a cramped one, and it costs nothing.
   ============================================================ */
.avanti-finder,
.avanti-compare,
.avanti-proof { padding-block: var(--s-10); }
.avanti-story { padding-block: var(--s-9); }

/* ============================================================
   5. FORMS AND FOCUS
   ============================================================ */
.field__input,
.select__select,
.search__input,
textarea {
  min-height: 5rem;
  font-size: var(--t-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:focus,
.select__select:focus,
.search__input:focus,
textarea:focus {
  border-color: rgb(var(--avanti-lime)) !important;
  box-shadow: 0 0 0 3px rgba(var(--avanti-lime), .2);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgb(var(--avanti-lime));
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ============================================================
   6. MOBILE
   Not desktop scaled down. Thumb targets, fast access to price and
   button, and nothing that can scroll sideways.
   ============================================================ */
@media screen and (max-width: 749px) {
  .avanti-hero__heading { font-size: clamp(3.2rem, 11vw, 4.8rem); line-height: .98; }
  .avanti-finder__heading,
  .avanti-compare__heading,
  .avanti-proof__heading,
  .avanti-story__heading { font-size: clamp(2.6rem, 8.5vw, 3.6rem); }

  body { overflow-x: hidden; }
  h1, h2, h3,
  .card__heading a,
  .avanti-finder__option-title,
  .avanti-compare__card-title { overflow-wrap: anywhere; hyphens: auto; }

  .avanti-finder__option { min-height: 7.2rem; padding: var(--s-4); }
  .button, .quantity__button { min-height: 4.8rem; }
  .header__icon { min-height: 4.8rem; min-width: 4.8rem; }

  .avanti-finder__result-actions { flex-direction: column; }
  .avanti-finder__result-actions .button { width: 100%; }
  .avanti-finder__result { padding: var(--s-5); }

  .avanti-finder,
  .avanti-compare,
  .avanti-proof { padding-block: var(--s-8); }
  .avanti-usp { padding-block: var(--s-5); }

  .product-grid { column-gap: var(--s-3); row-gap: var(--s-6); }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .avanti-finder__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avanti-proof__inner { gap: var(--s-6); }
}

/* ============================================================
   7. MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .button:not([disabled]):hover,
}

/* ============================================================
   8. NAVIGATION
   Colour is inherited from whichever scheme the header group is on,
   so this works on the light ground it has today and would still work
   if that scheme were ever changed. Nothing is forced.
   ============================================================ */
@media screen and (min-width: 990px) {
  .header { padding-block: var(--s-3) 0 !important; }

  .header__inline-menu {
    margin-top: var(--s-2);
  }

  .header__inline-menu .list-menu--inline {
    gap: 0;
    padding: 0;
    margin-left: -1.6rem;
  }

  .header__inline-menu .list-menu--inline > li > a,
  .header__inline-menu .list-menu--inline > li > header-menu > details > summary {
    position: relative;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-radius: 0;
    transition: color var(--dur) var(--ease);
  }


  .header__inline-menu .header__menu-item {
    font-size: 1.25rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: var(--font-body-weight-bold);
  }

  /* the rule grows from the centre rather than appearing whole */
  .header__inline-menu .list-menu--inline > li > a::after,
  .header__inline-menu .list-menu--inline > li > header-menu > details > summary::after {
    content: '';
    position: absolute;
    left: var(--s-4);
    right: var(--s-4);
    bottom: 0;
    height: 2px;
    background: rgb(var(--avanti-lime));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur) var(--ease);
  }
  .header__inline-menu .list-menu--inline > li > a:hover::after,
  .header__inline-menu .list-menu--inline > li > header-menu > details > summary:hover::after,
  .header__inline-menu .list-menu--inline > li > a[aria-current]::after { transform: scaleX(1); }


  /* dropdown as a considered panel, inheriting the header's own ground */
  .header__submenu {
    border: 1px solid var(--avanti-rule);
    border-radius: var(--r-lg);
    padding: var(--s-2);
    box-shadow: 0 20px 48px rgba(var(--avanti-ground), .14);
  }
  .header__submenu a { border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
  .header__submenu a:hover { background: var(--avanti-fill); }
}

@media screen and (max-width: 989px) {
  .menu-drawer__menu-item {
    padding: var(--s-4) var(--s-5);
    font-size: var(--t-base);
    letter-spacing: .04em;
    gap: var(--s-4);
  }
}

/* ============================================================
   9. PRODUCT PAGE
   The buy box was a flat stack: title, price, picker, button, all at
   similar weight, so nothing led and the eye had to read every line
   to find the decision. This gives it an order.

   Colour is inherited throughout. Nothing here forces a text colour,
   so a scheme change can never strand text on a ground it was not
   written for.
   ============================================================ */
/* The buy box used to be sticky here. With the sticky buy bar enabled on
   desktop the two fight: a pinned buy box means the real button never
   leaves the viewport, so the bar would never appear. One sticky
   behaviour per page. */

.product__title,
.product__title h1 {
  font-family: var(--font-heading-family);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-size: var(--t-lg);
  margin-bottom: var(--s-3);
}

/* price is the second thing read, so it is the second loudest */
.product__info-container .price,
.product__info-container .price-item {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -.01em;
}
.product__info-container .price--on-sale .price-item--regular {
  font-size: var(--t-sm);
  opacity: .55;
}

/* option labels as quiet small caps, so the swatches carry the weight */
.product-form__input .form__label,
.product__info-container .form__label {
  font-family: var(--font-body-family);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: var(--s-2);
}

/* one clear rhythm down the column instead of arbitrary gaps */
.product__info-container > * { margin-block: 0 var(--s-5); }
.product__info-container > .product-form { margin-bottom: var(--s-4); }

/* thumbnails read as a strip, not as more cards */
.thumbnail-list__item .thumbnail {
  border-radius: var(--r-md);
  border: 1px solid var(--avanti-rule);
  transition: border-color var(--dur) var(--ease);
}
.thumbnail-list__item .thumbnail[aria-current],
.thumbnail-list__item .thumbnail:hover { border-color: rgb(var(--avanti-lime)); }

/* accordions: full-width rules rather than boxes stacked on boxes */
.product__accordion {
  border: 0;
  border-top: 1px solid var(--avanti-rule);
  border-radius: 0;
  padding-inline: 0;
}
.product__accordion:last-of-type { border-bottom: 1px solid var(--avanti-rule); }
.product__accordion .summary__title {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight-bold);
  font-size: var(--t-sm);
  letter-spacing: .06em;
}
.product__accordion summary { padding-block: var(--s-4); }

@media screen and (max-width: 749px) {
  .product__title, .product__title h1 { font-size: clamp(2.2rem, 7vw, 2.8rem); }
  .product__info-container > * { margin-bottom: var(--s-4); }
}

/* ============================================================
   10. MENU ICONS, OFF
   The per-item line icons read as playful next to a grip brand that
   is selling precision equipment. Hidden rather than deleted from
   the markup: snippets/avanti-menu-icon.liquid and its render lines
   stay intact, so bringing them back is deleting this block.
   ============================================================ */
.avanti-menu-icon,
.header__inline-menu .avanti-menu-icon,
.menu-drawer__menu-item .avanti-menu-icon { display: none !important; }

/* the label no longer needs to leave room for an icon */
.header__inline-menu .list-menu--inline > li > a,
.header__inline-menu .list-menu--inline > li > header-menu > details > summary,
.menu-drawer__menu-item { gap: 0; }

/* ============================================================
   11. HEADER, NO RULES
   avanti-theme.css already turns every header border off; this layer
   had put one back above the nav row. It is stated again here so the
   header stays clean at every width whatever loads later, including
   the separator Dawn draws under the logo on mobile.
   ============================================================ */
.shopify-section-group-header-group,
.section-header,
.header-wrapper,
.header-wrapper--border-bottom,
.header,
.header__inline-menu,
.header__inline-menu .list-menu--inline,
.shopify-section-header-sticky,
.announcement-bar,
.utility-bar {
  border: 0 !important;
  box-shadow: none !important;
}
.header::after,
.header-wrapper::after,
.section-header::after { content: none !important; }

/* ============================================================
   12. COMPACT HEADER ON SCROLL
   At the top the header is the full brand statement: large logo,
   the full nav row, the localisation controls. Once the visitor has
   scrolled past it, none of that is what they need - they need the
   logo to know where they are and the cart to act.

   Dawn's sticky-header element adds .scrolled-past-header to
   .section-header once the header has left the viewport, so the
   whole transition hangs off that one class. No extra JavaScript.

   The nav collapses by max-height rather than display:none, so the
   change animates instead of snapping, and the links stay in the
   accessibility tree only while they are reachable.
   ============================================================ */
@media screen and (min-width: 990px) {

  .section-header .header {
    transition: padding .42s var(--ease);
  }

  .header__inline-menu {
    transition: max-height .42s var(--ease),
                opacity .28s var(--ease),
                margin .42s var(--ease);
  }

  /* scaled from the left edge so the logo shrinks in place instead of
     drifting toward the middle */
  .header__heading-logo {
    transform-origin: left center;
    will-change: transform;
    transition: transform .42s var(--ease), opacity .42s var(--ease);
  }
  .header__heading, .header__heading-link { transform-origin: left center; }

  /* --- scrolled state --- */
  .section-header.scrolled-past-header .header {
    padding-block: var(--s-2) !important;
  }

  /* the nav row folds away */
  .section-header.scrolled-past-header .header__inline-menu {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
  }

  /* logo steps back. transform rather than width: animating width
     relayouts the whole header on every frame, which is the stutter.
     transform is composited, so it stays smooth. */
  .section-header.scrolled-past-header .header__heading-logo {
    transform: scale(.66);
    opacity: .92;
  }

  /* the localisation selectors are a first-visit decision, not a
     recurring one, so they go with the nav and leave search,
     account and cart */
  .section-header.scrolled-past-header .header__icons localization-form,
  .section-header.scrolled-past-header .header__icons .localization-form {
    display: none;
  }
}

/* Mobile already shows only logo and icons, so it just tightens. */
@media screen and (max-width: 989px) {
  .section-header .header { transition: padding .42s var(--ease); }
  .section-header.scrolled-past-header .header { padding-block: var(--s-2) !important; }
  .section-header.scrolled-past-header .header__heading-logo {
    transform: scale(.78);
  }
  .header__heading-logo {
    transform-origin: left center;
    transition: transform .42s var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-header .header,
  .header__inline-menu,
  .header__heading-logo { transition: none !important; }
}

/* ============================================================
   13. THE LINE UNDER THE MENU
   It sits inside page-width, so it is drawn by the header's own
   container rather than by the section edge. Every element in the
   header chrome is listed, plus their pseudo-elements, because the
   earlier block named only the outer wrappers and missed whichever
   inner one was painting it.

   The drawer is deliberately not listed: its item separators are
   doing real work on mobile.
   ============================================================ */
.section-header .header,
.section-header .header-wrapper,
.section-header .header__inline-menu,
.section-header .header__inline-menu > *,
.section-header .list-menu,
.section-header .list-menu--inline,
.section-header .header__heading,
.section-header .header__icons,
sticky-header,
.utility-bar,
.utility-bar--bottom-border,
.announcement-bar {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.section-header .header::after,
.section-header .header::before,
.section-header .header-wrapper::after,
.section-header .header__inline-menu::after,
.section-header .list-menu--inline::after,
.utility-bar::after,
.announcement-bar::after { content: none !important; }

/* ============================================================
   14. SECTION TITLE RULE, OFF
   Found by inspecting the live page rather than by guessing: the
   line was never in the header. avanti-theme.css line 150 gives
   .title-wrapper-with-link and .collection__title a border-bottom,
   and both carry .page-width, which is why the line sat inset from
   the edges and read as belonging to the menu above it.

   A rule under every section heading was decoration doing the job
   that spacing should do, so it goes and the space closes up with it.
   ============================================================ */
.title-wrapper-with-link,
.collection__title,
.collection__title.title-wrapper,
.section-header {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   15. STICKY HEADER RULE AND SHADOW
   avanti-theme.css line 203 gives .shopify-section-header-sticky a
   border-bottom and a heavy drop shadow. Both were there to separate
   a header that used to be transparent; it is opaque now, so they
   only add weight.
   ============================================================ */
.shopify-section-header-sticky,
.shopify-section-header-hidden,
sticky-header,
sticky-header .header-wrapper,
.header-wrapper {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   16. USP BAR, CENTRED
   Repeated here as well as in avanti-usp-bar.css. That file is
   loaded by the section, inside <body>; this one is in <head> and
   carries a different filename, so if one is being served stale the
   other still lands.
   ============================================================ */
.avanti-usp__list {
  display: grid !important;
  justify-items: center !important;
}
.avanti-usp__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 1rem;
}
.avanti-usp__text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* ============================================================
   17. HEADER GROUP, NO BOTTOM EDGE, EXHAUSTIVELY
   Blocks 11, 13 and 15 each named the elements I believed were
   drawing the rule, and each time it survived. Rather than guess a
   fourth element, this clears a bottom edge from everything inside
   the header group.

   Bounded deliberately: only inside the header group, only the
   bottom edge, and the drawer is excluded because its item
   separators do real work on mobile. The nav underline is a
   background on a pseudo-element rather than a border, so it is
   untouched.
   ============================================================ */
.shopify-section-group-header-group,
.shopify-section-group-header-group *:not(.menu-drawer):not(.menu-drawer *) {
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}

.shopify-section-group-header-group::after,
.shopify-section-group-header-group > *::after,
.shopify-section-group-header-group > * > *::after { content: none !important; }

/* and the first section must not contribute a top edge that reads as one */
.shopify-section-group-header-group + .shopify-section,
.shopify-section-group-header-group + .shopify-section > * { border-top-width: 0 !important; }

/* ============================================================
   18. FOOTER
   The oversized logo block is gone from the content; what is left
   needs to read as a considered end to the page rather than as
   leftovers. Three moves: column headings become quiet small caps
   so the links lead, the whole block gets real breathing room, and
   the bottom row separates from the columns with space rather than
   with another rule.
   ============================================================ */
.footer { padding-block: var(--s-8) var(--s-5); }

.footer__content-top {
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--avanti-rule);
}

.footer-block__heading {
  font-family: var(--font-body-family) !important;
  font-size: var(--t-xs) !important;
  font-weight: var(--font-body-weight-bold) !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: var(--s-4) !important;
}

.footer-block__details-content .list-menu__item--link,
.footer-block__details-content a {
  font-size: var(--t-sm);
  padding-block: .5rem;
  transition: color var(--dur) var(--ease);
}
.footer-block__details-content a:hover { color: rgb(var(--avanti-lime)); }

/* the company details block reads as an address, not as a paragraph */
.footer-block__details-content p,
.footer-block--menu + .footer-block p {
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--avanti-ink-dim);
}

.footer__content-bottom {
  border-top: 0;
  padding-top: var(--s-5);
}
.footer__content-bottom-wrapper { align-items: center; }

.footer__copyright,
.footer__copyright small,
.copyright__content {
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--avanti-ink-dim);
}

/* payment icons sat at full strength and pulled the eye to the least
   important row on the page */
.footer__payment .list-payment__item svg { opacity: .55; transition: opacity var(--dur) var(--ease); }
.footer__payment:hover .list-payment__item svg { opacity: 1; }

.footer__list-social .list-social__link { transition: color var(--dur) var(--ease); }
.footer__list-social .list-social__link:hover { color: rgb(var(--avanti-lime)); }

@media screen and (max-width: 749px) {
  .footer { padding-block: var(--s-7) var(--s-4); }
  .footer__content-top { padding-bottom: var(--s-5); }
}

/* ============================================================
   19. FOOTER ON A DARK SCHEME, AND ALIGNMENT
   Two faults from block 18, both mine.

   The heading was set to opacity .55, which is a reasonable knock
   back on a light ground and close to unreadable on the dark one
   the footer actually uses. Contrast now comes from size and
   tracking instead, and the colour is taken from the scheme so it
   follows whichever ground the footer is on.

   Dawn centres footer blocks on mobile. An address centred under a
   centred heading reads as a poster rather than as information, so
   both go flush left at every width.
   ============================================================ */
.footer-block__heading {
  opacity: 1 !important;
  color: rgb(var(--color-foreground)) !important;
  font-size: 1.2rem !important;
  letter-spacing: .18em;
}

.footer-block,
.footer-block__details-content,
.footer-block--menu,
.footer__content-top .footer-block__heading,
.footer-block__newsletter {
  text-align: left !important;
  align-items: flex-start !important;
}
.footer-block__details-content { justify-content: flex-start !important; }

/* body copy reads from the scheme, so it is light on the dark footer
   and dark if the footer is ever moved to a light one */
.footer-block__details-content p,
.footer-block__details-content,
.footer .rte,
.footer .rte p,
.footer__content-top p {
  color: rgba(var(--color-foreground), .82) !important;
}
.footer-block__details-content a,
.footer .list-menu__item--link {
  color: rgba(var(--color-foreground), .82) !important;
}
.footer-block__details-content a:hover,
.footer .list-menu__item--link:hover { color: rgb(var(--avanti-lime)) !important; }

.footer__copyright,
.footer__copyright small,
.copyright__content { color: rgba(var(--color-foreground), .6) !important; }

/* ============================================================
   20. TOUR SECTION, MOBILE HEIGHT
   The section reserved room for a body and a stat row that are not
   filled in, so the dark block ran on for most of a screen with
   nothing in it. Empty children now collapse instead of holding
   space, and the padding comes down to the mobile scale.
   ============================================================ */
@media screen and (max-width: 749px) {
  .avanti-proof { padding-block: var(--s-6) !important; }
  .avanti-proof__inner { gap: var(--s-4); align-items: start; }
  .avanti-proof__media { margin-bottom: var(--s-2); }
}

/* an empty rich text field still renders <p></p>; give it no height */
.avanti-proof__body:empty,
.avanti-proof__body p:empty,
.avanti-story__text p:empty { display: none !important; }

.avanti-proof__body { margin-bottom: 0; }
.avanti-proof__body p:last-child { margin-bottom: 0; }
.avanti-proof__name { margin-bottom: var(--s-3); }

/* the stat row draws a rule and adds padding even with no stats in it */
.avanti-proof__stats:empty { display: none !important; }

/* the tour block sits on the dark scheme, so its body must read from
   the scheme foreground rather than from the light-ground dim token */
.avanti-proof__body,
.avanti-proof__body p { color: rgba(var(--color-foreground), .82); }
.avanti-proof__role { color: rgba(var(--color-foreground), .6); }

/* ---- Footer newsletter ------------------------------------------------
   The signup sits in the same row as the link lists, so it needs to read
   as a column rather than as a form dropped into a dark band. The field
   is transparent with a light rule, which is the only treatment that
   works on both the dark footer and a light one. */
.footer-block__newsletter { text-align: left !important; }
.footer-block__newsletter .newsletter-form__field-wrapper { max-width: 36rem; margin-inline: 0; }

.footer .newsletter-form__field-wrapper .field__input {
  background: transparent !important;
  border: 1px solid rgba(var(--color-foreground), .28) !important;
  color: rgb(var(--color-foreground)) !important;
}
.footer .newsletter-form__field-wrapper .field__input::placeholder {
  color: rgba(var(--color-foreground), .5);
}
.footer .newsletter-form__field-wrapper .field__label { color: rgba(var(--color-foreground), .6); }
.footer .newsletter-form__field-wrapper .field__input:focus {
  border-color: rgb(var(--avanti-lime)) !important;
  box-shadow: 0 0 0 3px rgba(var(--avanti-lime), .2) !important;
}
.footer .newsletter-form__button { color: rgb(var(--color-foreground)); }
.footer .newsletter-form__button:hover { color: rgb(var(--avanti-lime)); }

/* ---- Newsletter, heading above its own field --------------------------
   section-footer.css sets .footer-block--newsletter to flex with
   justify-content: center on desktop. The heading sits at the start of
   the block and the form gets centred in the remaining space, which is
   why the two ended up on opposite sides of the row. Everything goes
   flush left so the field sits directly under its label. */
.footer-block--newsletter {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  flex-wrap: wrap;
}
.footer-block__newsletter {
  text-align: left !important;
  margin-right: auto !important;
  width: 100%;
}
.footer__newsletter,
.footer-block__newsletter .footer__newsletter {
  justify-content: flex-start !important;
  margin: 0 !important;
}
.footer .newsletter-form__field-wrapper {
  margin-inline: 0 !important;
  max-width: 38rem;
}
.footer-block__newsletter .footer-block__heading { margin-bottom: 1.2rem !important; }