/** Shopify CDN: Minification failed

Line 198:28 Unexpected "/"

**/
/** Critical CSS for the theme. This file is included on every page. */

/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
* {
  box-sizing: border-box;
  margin: 0;
}

/* Guarantee the native hidden attribute always wins. Without this, any
   component class that sets its own `display` (e.g. `display: flex`) has
   equal specificity to the browser's own `[hidden] { display: none }`
   default — and author styles always beat user-agent defaults regardless
   of source order, so the component's display quietly overrides `hidden`
   and the element stays visually rendered. This has caused real,
   previously-undetected bugs (e.g. two result variants visible at once)
   because automated checks that only read the `hidden` DOM property never
   catch it — only actual rendered visibility does. */
[hidden] {
  display: none !important;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--r-card);
}

select {
  background-color: var(--paper);
  color: currentcolor;
}

dialog {
  background-color: var(--paper);
  color: var(--ink);
}

p {
  text-wrap: pretty;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/** Theme styles below */
body {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink);
}

/** Section layout utilities */

/**
 * Setup a grid that enables both full-width and constrained layouts
 * depending on the class of the child elements.
 *
 * By default, a minimum content margin (the Lume "gutter") is set on the
 * left and right sides of the section and the content is centered in the
 * viewport to not exceed the maximum container width.
 *
 * When a child element is given the `full-width` class, it will span
 * the entire viewport.
 */
.shopify-section {
  --content-width: min(calc(var(--container-max) - var(--gutter) * 2), calc(100% - var(--gutter) * 2));
  --content-margin: minmax(var(--gutter), 1fr);
  --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

  /* This is required to make <img> elements work as background images */
  position: relative;
  grid-template-columns: var(--content-grid);
  display: grid;
  width: 100%;
}

/* Child elements, by default, are constrained to the central column of the grid. */
.shopify-section > * {
  grid-column: 2;
}

/* Child elements that use the full-width utility class span the entire viewport. */
.shopify-section > .full-width {
  grid-column: 1 / -1;
}

/** Base layout: footer pinned to the bottom of the viewport on short pages */
main {
  flex: 1 1 auto;
}

/** Accessibility utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content-link:focus {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  width: auto;
  height: auto;
  padding: var(--s-2) var(--s-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--paper);
  color: var(--ink);
  border: var(--b-line);
  border-radius: var(--r-card);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.on-dark :focus-visible,
.on-climate :focus-visible {
  outline-color: var(--paper);
}

/** Base type */
body {
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 900;
}

/* Sensible per-tag fallback sizing; components apply an explicit
   .text-display-*/.text-sub/etc. role class wherever the role diverges
   from this ladder (Lume sizing is role-based, not heading-level-based). */
h1 {
  font-size: var(--text-display-s-size);
  letter-spacing: var(--text-display-s-tracking);
  line-height: var(--text-display-s-leading);
}
h2 {
  font-size: var(--text-display-xs-size);
  letter-spacing: var(--text-display-xs-tracking);
  line-height: var(--text-display-xs-leading);
}
h3 {
  font-size: var(--text-sub-size);
  font-weight: 500;
  letter-spacing: var(--text-sub-tracking);
  line-height: var(--text-sub-leading);
}
h4 {
  font-size: var(--text-body-l-size);
  font-weight: 500;
  line-height: var(--text-body-l-leading);
}
h5 {
  font-size: var(--text-body-size);
  font-weight: 500;
  line-height: var(--text-body-leading);
}
h6 {
  font-size: var(--text-label-size);
  font-weight: 900;
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-leading);
  text-transform: uppercase;
}

/** Type-role utilities — the canonical way to apply a role regardless of tag */
.text-display-xl { font-family: var(--font-body); font-weight: 900; font-size: var(--text-display-xl-size); letter-spacing: var(--text-display-xl-tracking); line-height: var(--text-display-xl-leading); }
.text-display-l  { font-family: var(--font-body); font-weight: 900; font-size: var(--text-display-l-size);  letter-spacing: var(--text-display-l-tracking);  line-height: var(--text-display-l-leading); }
.text-display-m  { font-family: var(--font-body); font-weight: 900; font-size: var(--text-display-m-size);  letter-spacing: var(--text-display-m-tracking);  line-height: var(--text-display-m-leading); }
.text-display-s  { font-family: var(--font-body); font-weight: 900; font-size: var(--text-display-s-size);  letter-spacing: var(--text-display-s-tracking);  line-height: var(--text-display-s-leading); }
.text-display-xs { font-family: var(--font-body); font-weight: 900; font-size: var(--text-display-xs-size); letter-spacing: var(--text-display-xs-tracking); line-height: var(--text-display-xs-leading); }
.text-sub        { font-family: var(--font-body); font-weight: 500; font-size: var(--text-sub-size);        letter-spacing: var(--text-sub-tracking);        line-height: var(--text-sub-leading); }
.text-verdict     { font-family: var(--font-body); font-weight: 500; font-size: var(--text-verdict-size);     letter-spacing: var(--text-verdict-tracking);     line-height: var(--text-verdict-leading); }
.text-body-l      { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-l-size);      letter-spacing: var(--text-body-l-tracking);      line-height: var(--text-body-l-leading); }
.text-body        { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-size);        letter-spacing: var(--text-body-tracking);        line-height: var(--text-body-leading); }
.text-body-s      { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-s-size);      letter-spacing: var(--text-body-s-tracking);      line-height: var(--text-body-s-leading); }
.text-reading     { font-family: var(--font-body); font-weight: 900; font-size: var(--text-reading-size);     letter-spacing: var(--text-reading-tracking);     line-height: var(--text-reading-leading); font-feature-settings: "tnum" 1; }
.text-label       { font-family: var(--font-body); font-weight: 900; font-size: var(--text-label-size);       letter-spacing: var(--text-label-tracking);       line-height: var(--text-label-leading); text-transform: uppercase; }
.tabular-nums { font-feature-settings: "tnum" 1; }

/** Shared vertical rhythm applied to the root element of every homepage section */
.section-spacing {
  padding-block: var(--s-7);
}
@media (min-width: 1024px) {
  .section-spacing {
    padding-block: var(--s-8);
  }
}

/** Button primitive — pill, ink-filled or 2px-outlined, no shadows, no lift */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.9375rem 1.625rem;
  border: var(--b-line);
  border-color: transparent;
  border-radius: var(--r-pill);
  /* Explicit, not just "unset": a plain <button> element (unlike <a>)
     otherwise falls back to the browser's own opaque UA default
     background on some platforms, making an unfilled variant like
     .button--quiet render as a solid pill instead of quiet text. */
  background-color: transparent;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-color) linear, color var(--duration-color) linear, border-color var(--duration-color) linear;
}
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.button--primary {
  background-color: var(--ink);
  color: var(--paper);
}
.button--primary:hover {
  background-color: var(--climate-deep, #111);
}
.button--primary:active {
  opacity: 0.88;
}
.on-dark .button--primary,
.on-climate .button--primary {
  background-color: var(--paper);
  color: var(--ink);
}

.button--secondary {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.button--secondary:hover {
  background-color: var(--climate-wash, var(--hairline));
}
.on-dark .button--secondary,
.on-climate .button--secondary {
  border-color: currentcolor;
  color: inherit;
}

.button--quiet {
  padding-inline: 0;
  border-color: transparent;
  color: var(--grey);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.button--quiet:hover {
  color: var(--ink);
}

.button--full {
  width: 100%;
}

/** Richtext content */
.rte {
  max-width: 62ch;
}

.rte p + p,
.rte ul + p,
.rte p + ul {
  margin-top: var(--s-3);
}

.rte a {
  color: currentcolor;
  text-underline-offset: 0.2em;
}

/* Lists and tables from the page editor, styled to match the editorial
   register rather than left at browser defaults. Global (not scoped to
   sections/page.liquid) so it also reaches Shopify's own native policy
   pages (/policies/*), which render their own fixed .shopify-policy__body
   markup — outside theme section control — but reuse this same .rte
   class internally. */
.rte ul,
.rte ol {
  padding-left: 1.25em;
  margin: var(--s-3) 0;
}
.rte li + li {
  margin-top: var(--s-1);
}
.rte h2 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--text-sub-size);
  letter-spacing: var(--text-sub-tracking);
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-6);
  border-top: var(--b-hair);
}
.rte h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.rte table {
  width: 100%;
  margin: var(--s-4) 0;
  border-collapse: collapse;
  font-size: var(--text-body-s-size);
}
.rte th,
.rte td {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: var(--b-hair);
  text-align: left;
}
.rte th {
  font-weight: 900;
}

/* Native Shopify policy pages (/policies/*) render a fixed HTML fragment
   outside theme section control — no Liquid, no kicker slot, no way to
   route them through sections/page.liquid. This is CSS-only alignment
   with the Generic content page spec (62ch measure, matching top/bottom
   spacing, matching title scale) — the closest fidelity the platform
   allows without moving legal content off Shopify's native policy engine.

   Scoped under #main-content: Shopify's own storefront/policy-*.css is
   injected via content_for_header, after this file, and sets conflicting
   max-width/padding/text-align at the same bare-class specificity — an ID
   ancestor is the smallest change that reliably wins the cascade without
   resorting to !important. */
#main-content .shopify-policy__container {
  max-width: 62ch;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-7);
}
@media (min-width: 1024px) {
  #main-content .shopify-policy__container {
    padding-block: var(--s-8);
  }
}
#main-content .shopify-policy__title {
  text-align: left;
}
#main-content .shopify-policy__title h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--text-display-xs-size);
  letter-spacing: var(--text-display-xs-tracking);
  line-height: var(--text-display-xs-leading);
  margin: 0 0 var(--s-5);
}
#main-content .shopify-policy__body {
  font-family: var(--font-body);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-leading);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}