/** Shopify CDN: Minification failed

Line 181:2 Unexpected "}"

**/
/* ==========================================================================
   Shopfly Base CSS
   Loads after shopfly-tokens.css. Provides reset, type baseline, utilities.
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sf-bg-body);
  color: var(--sf-text-primary);
  font-family: var(--sf-type-body-family);
  font-size: var(--sf-type-body-size);
  line-height: var(--sf-type-body-lh);
  font-weight: var(--sf-type-body-weight);
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

/* Visually hidden but accessible */
.sf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container */
.sf-container {
  width: 100%;
  max-width: var(--sf-container-max);
  margin: 0 auto;
  padding-left: var(--sf-container-gutter);
  padding-right: var(--sf-container-gutter);
}

@media (min-width: 768px) {
  .sf-container {
    padding-left: var(--sf-space-10);
    padding-right: var(--sf-space-10);
  }
}

@media (min-width: 1280px) {
  .sf-container {
    padding-left: var(--sf-space-20);
    padding-right: var(--sf-space-20);
  }
}

/* Type utilities matching Figma style names */
.sf-t-display {
  font-family: var(--sf-type-display-family);
  font-weight: var(--sf-type-display-weight);
  font-size: var(--sf-type-display-size);
  line-height: var(--sf-type-display-lh);
  letter-spacing: var(--sf-type-display-track);
}

.sf-t-headline {
  font-family: var(--sf-type-headline-family);
  font-weight: var(--sf-type-headline-weight);
  font-size: var(--sf-type-headline-size);
  line-height: calc(var(--sf-type-headline-lh) / var(--sf-type-headline-size));
}

.sf-t-title {
  font-family: var(--sf-type-title-family);
  font-weight: var(--sf-type-title-weight);
  font-size: var(--sf-type-title-size);
  line-height: calc(var(--sf-type-title-lh) / var(--sf-type-title-size));
}

.sf-t-body {
  font-family: var(--sf-type-body-family);
  font-weight: var(--sf-type-body-weight);
  font-size: var(--sf-type-body-size);
  line-height: calc(var(--sf-type-body-lh) / var(--sf-type-body-size));
}

.sf-t-sm {
  font-family: var(--sf-type-sm-family);
  font-weight: var(--sf-type-sm-weight);
  font-size: var(--sf-type-sm-size);
  line-height: calc(var(--sf-type-sm-lh) / var(--sf-type-sm-size));
}

.sf-t-caption {
  font-family: var(--sf-type-caption-family);
  font-weight: var(--sf-type-caption-weight);
  font-size: var(--sf-type-caption-size);
  line-height: calc(var(--sf-type-caption-lh) / var(--sf-type-caption-size));
}

.sf-t-eyebrow {
  font-family: var(--sf-type-eyebrow-family);
  font-weight: var(--sf-type-eyebrow-weight);
  font-size: var(--sf-type-eyebrow-size);
  line-height: calc(var(--sf-type-eyebrow-lh) / var(--sf-type-eyebrow-size));
  letter-spacing: var(--sf-type-eyebrow-track);
  text-transform: uppercase;
}

/* Responsive display type — scales down on small screens */
@media (max-width: 1024px) {
  :root {
    --sf-type-display-size: 56px;
    --sf-type-display-track: -3px;
    --sf-type-h2-size: 40px;
    --sf-type-h2-track: -2px;
  }
}

@media (max-width: 640px) {
  :root {
    --sf-type-display-size: 40px;
    --sf-type-display-track: -2px;
    --sf-type-headline-size: 28px;
    --sf-type-headline-track: -0.5px;
    --sf-type-h2-size: 34px;
    --sf-type-h2-track: -1px;
  }
}
  }
}

/* ==========================================================================
   BUTTONS — base button patterns
   ========================================================================== */

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  font-family: var(--sf-type-body-family);
  font-size: 16px;
  line-height: 1.7;
  border-radius: var(--sf-radius-pill);
  transition:
    background var(--sf-dur-base) var(--sf-ease-default),
    color var(--sf-dur-base) var(--sf-ease-default),
    transform var(--sf-dur-base) var(--sf-ease-default),
    box-shadow var(--sf-dur-base) var(--sf-ease-default);
  white-space: nowrap;
  cursor: pointer;
}

.sf-btn:active {
  transform: scale(0.98);
}

/* Primary — dark pill on light bg, or white-on-dark if inverted */
.sf-btn--primary {
  background: var(--sf-neutral-04);
  color: var(--sf-neutral-01);
}

.sf-btn--primary:hover {
  background: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Brand (blue) */
.sf-btn--brand {
  background: var(--sf-brand);
  color: var(--sf-neutral-01);
}

.sf-btn--brand:hover {
  background: #0446d6;
  box-shadow: 0 8px 24px rgba(4, 84, 255, 0.30);
}

/* Ghost — transparent with subtle border */
.sf-btn--ghost {
  background: transparent;
  color: var(--sf-text-primary);
  border: 1px solid var(--sf-stroke-button);
}

.sf-btn--ghost:hover {
  background: var(--sf-bg-control-hov);
  border-color: var(--sf-stroke-selected);
}

/* White (inverse for dark hero) */
.sf-btn--white {
  background: var(--sf-neutral-01);
  color: var(--sf-neutral-04);
}

.sf-btn--white:hover {
  background: #f0f0f0;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}


/* MOTION system — see shopfly-anim.css */

/* Focus styles — visible for a11y but clean */
:focus-visible {
  outline: 2px solid var(--sf-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sparkle icon smooth rotation on eyebrows */
.sf-sec-heading__eyebrow svg,
.nb-hdr__eye svg,
.sf-faq__eyebrow svg,
.sf-contact__heading-area .sf-sec-heading__eyebrow svg,
[class*="__eyebrow"] svg {
  animation: sf-sparkle-spin 4s linear infinite;
}

@keyframes sf-sparkle-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Global mobile responsive improvements
   ========================================================================== */
@media (max-width: 749px) {
  /* Section headings */
  .sf-sec-heading__title {
    font-size: 36px;
    letter-spacing: -2px;
  }
  .sf-sec-heading__subtitle {
    font-size: 14px;
  }

  /* Process cards */
  .sf-process__heading {
    font-size: 36px;
    letter-spacing: -2px;
  }

  /* Contact heading */
  .sf-contact__heading {
    font-size: 36px;
    letter-spacing: -2px;
  }

  /* Hero */
  .sf-hero__headline {
    font-size: 36px;
    letter-spacing: -2px;
  }

  /* Pricing titles */
  .sf-pricing2__title {
    font-size: 32px;
    line-height: 40px;
  }

  /* CTA */
  .sf-cta__headline {
    font-size: 32px;
    letter-spacing: -2px;
  }
  .sf-cta__inner {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .sf-cta__visual {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
  .sf-cta__ring {
    width: 140px;
    height: 140px;
  }
  .sf-cta__ring-value {
    font-size: 36px;
  }

  /* FAQ two-column to stacked */
  .sf-faq__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sf-faq__heading {
    font-size: 36px;
    letter-spacing: -2px;
  }

  /* Contact info cards */
  .sf-contact__info-row {
    grid-template-columns: 1fr;
  }

  /* Footer logo */
  .sf-footer__logo img,
  .sf-footer__logo svg {
    height: 60px;
  }
}