@font-face {
  font-family: "Finlandica Headline";
  src: url("../fonts/finlandica-headline-latin-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Author";
  src: url("../fonts/author-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author";
  src: url("../fonts/author-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author";
  src: url("../fonts/author-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Author";
  src: url("../fonts/author-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: "Roboto Slab", "Finlandica Headline", "Author", serif;
  --font-body: "Roboto Slab", "Finlandica Headline", "Author", serif;
  --font-ui: var(--font-body);
  --font-svg: var(--font-body);
--color-bg: #f4f4fb;
  --color-bg-alt: #f8f8ff;
  --color-surface: #ffffff;
  --color-surface-soft: #f2f2fb;
  --color-surface-muted: #e6e7f5;

  --color-primary: #3730a3;
  --color-primary-hover: #312e81;
  --color-primary-mid: #4f46e5;
  --color-primary-soft: #e9e7ff;

  --color-text-strong: #16142b;
  --color-text: #2d2b43;
  --color-text-muted: #4f4b63;
  --color-text-soft: #726f8a;
  --color-text-inverse: #ffffff;

  --color-border: #dbd9ed;
  --color-border-strong: #c4c1df;
  --color-divider: #e9e8f4;
  --color-mint-border: #c7c3ff;
  --color-border-alpha-90: rgba(219, 217, 237, 0.90);
  --color-border-alpha-94: rgba(219, 217, 237, 0.94);
  --color-border-alpha-95: rgba(219, 217, 237, 0.95);
  --color-border-strong-alpha-74: rgba(196, 193, 223, 0.74);

  --color-accent-teal: #4f46e5;
  --color-accent-mint: #e9e7ff;
  --color-accent-green: #4338ca;
  --color-accent-shopify: #008060;
  --color-accent-woo: #794ea9;
  --color-accent-conversion: #7c3aed;
  --color-accent-growth: #3730a3;
  --color-accent-pricing: #6366f1;
  --color-accent-ops: #475569;

  --color-mix-white: #ffffff;
  --color-body-gradient-surface: rgba(79, 70, 229, 0.12);
  --color-body-gradient-bg-fade: rgba(244, 244, 251, 0);
  --color-focus-ring: rgba(79, 70, 229, 0.75);
  --color-selection-bg: rgba(79, 70, 229, 0.16);
  --color-section-alt-bg: rgba(248, 248, 255, 0.78);
  --color-section-alt-border: rgba(219, 217, 237, 0.78);
  --color-inset-highlight: rgba(255, 255, 255, 0.78);
  --color-inset-highlight-strong: rgba(255, 255, 255, 0.82);
  --color-inset-highlight-soft: rgba(255, 255, 255, 0.62);
  --color-inverse-border-soft: rgba(255, 255, 255, 0.14);
  --color-inverse-border: rgba(255, 255, 255, 0.16);
  --color-inverse-border-medium: rgba(255, 255, 255, 0.18);
  --color-inverse-border-strong: rgba(255, 255, 255, 0.28);
  --color-inverse-border-panel: rgba(255, 255, 255, 0.24);
  --color-inverse-border-panel-strong: rgba(255, 255, 255, 0.34);
  --color-inverse-muted: rgba(255, 255, 255, 0.78);
  --color-inverse-muted-soft: rgba(255, 255, 255, 0.76);
  --color-inverse-surface-faint: rgba(255, 255, 255, 0.04);
  --color-inverse-surface-soft: rgba(255, 255, 255, 0.08);
  --color-inverse-surface-medium: rgba(255, 255, 255, 0.22);
  --color-inverse-wash-weak: rgba(255, 255, 255, 0.26);
  --color-inverse-wash: rgba(255, 255, 255, 0.42);
  --color-transparent-surface: rgba(255, 255, 255, 0.62);
  --color-surface-alpha-72: rgba(255, 255, 255, 0.72);
  --color-surface-alpha-74: rgba(255, 255, 255, 0.74);
  --color-surface-alpha-78: rgba(242, 242, 251, 0.78);
  --color-surface-alpha-82: rgba(255, 255, 255, 0.82);
  --color-surface-alpha-84: rgba(255, 255, 255, 0.84);
  --color-surface-alpha-86: rgba(255, 255, 255, 0.86);
  --color-surface-alpha-88: rgba(255, 255, 255, 0.88);
  --color-surface-alpha-90: rgba(255, 255, 255, 0.90);
  --color-surface-alpha-92: rgba(255, 255, 255, 0.92);
  --color-surface-alpha-94: rgba(255, 255, 255, 0.94);
  --color-surface-alpha-95: rgba(255, 255, 255, 0.95);
  --color-surface-alpha-96: rgba(255, 255, 255, 0.96);
  --color-surface-alpha-98: rgba(255, 255, 255, 0.98);
  --color-surface-soft-alpha-74: rgba(242, 242, 251, 0.74);
  --color-surface-muted-alpha-92: rgba(230, 231, 245, 0.92);
  --color-white-surface-alpha-70: rgba(255, 255, 255, 0.70);
  --color-white-surface-alpha-72: rgba(255, 255, 255, 0.72);
  --color-white-surface-alpha-76: rgba(255, 255, 255, 0.76);
  --color-white-surface-alpha-78: rgba(255, 255, 255, 0.78);
  --color-white-surface-alpha-82: rgba(255, 255, 255, 0.82);
  --color-white-surface-alpha-84: rgba(255, 255, 255, 0.84);
  --color-white-surface-alpha-86: rgba(255, 255, 255, 0.86);
  --color-white-surface-alpha-88: rgba(255, 255, 255, 0.88);
  --color-white-surface-alpha-92: rgba(255, 255, 255, 0.92);
  --color-product-row-surface-start: rgba(255, 255, 255, 0.98);
  --color-product-row-surface-end: rgba(248, 248, 255, 0.94);
  --color-product-related-surface-end: rgba(242, 242, 251, 0.94);
  --color-product-related-warm-wash: rgba(124, 58, 237, 0.10);
  --color-product-related-flow-teal: rgba(79, 70, 229, 0.92);
  --color-product-related-flow-warm: rgba(124, 58, 237, 0.84);
  --color-product-related-flow-border: rgba(196, 193, 223, 0.96);
  --color-product-card-shopify-wash: rgba(233, 231, 255, 0.50);
  --color-product-card-shopify-start: rgba(248, 248, 255, 0.94);
  --color-product-card-shopify-end: rgba(255, 255, 255, 0.98);
  --color-product-card-shopify-border: rgba(199, 195, 255, 0.95);
  --color-product-card-home-surface: rgba(255, 255, 255, 0.98);
  --color-badge-woo-bg: rgba(127, 84, 179, 0.10);
  --color-badge-woo-border: rgba(127, 84, 179, 0.22);
  --color-badge-shopify-bg: rgba(79, 70, 229, 0.12);
  --color-badge-shopify-border: rgba(79, 70, 229, 0.26);
  --color-badge-shopify-bg-subtle: rgba(79, 70, 229, 0.08);
  --color-badge-shopify-border-subtle: rgba(79, 70, 229, 0.16);
  --color-badge-shopify-text: #3730a3;
  --color-badge-warm-bg: rgba(233, 231, 255, 0.98);
  --color-badge-warm-border: rgba(199, 195, 255, 0.90);
  --color-badge-warm-text: #3730a3;
  --color-rating-text: #3730a3;
  --color-media-dot-close: #4f46e5;
  --color-media-dot-minimize: #7f54b3;
  --color-media-dot-expand: #6366f1;
  --color-media-dot-expand-alt: #818cf8;
  --color-brand-card-gradient-start: rgba(79, 70, 229, 0.34);
  --color-brand-card-gradient-end: rgba(22, 20, 43, 0);
  --color-brand-card-outline: rgba(79, 70, 229, 0.14);
  --color-about-panel-orb: rgba(79, 70, 229, 0.20);
  --color-about-panel-start: #3730a3;
  --color-about-panel-end: #16142b;
  --color-about-journey-line-start: rgba(219, 217, 237, 0.92);
  --color-about-journey-line-end: rgba(196, 193, 223, 0.74);
  --color-about-journey-dot-border: rgba(199, 195, 255, 0.95);
  --color-about-journey-dot-ring: rgba(255, 255, 255, 0.82);
  --color-principle-teal-bg: rgba(233, 231, 255, 0.96);
  --color-principle-teal-text: #4f46e5;
  --color-principle-warm-bg: rgba(238, 242, 255, 0.96);
  --color-principle-warm-text: #3730a3;
  --color-principle-mint-bg: rgba(242, 242, 251, 0.96);
  --color-principle-mint-text: #4f46e5;
  --color-principle-gold-bg: rgba(238, 242, 255, 0.96);
  --color-principle-gold-text: #6366f1;
  --color-principle-slate-bg: rgba(241, 245, 249, 0.96);
  --color-principle-slate-text: #475569;
  --color-transition-proof-orb: rgba(79, 70, 229, 0.12);
  --color-transition-proof-bg: rgba(248, 248, 255, 0.72);
  --color-transition-card-start: rgba(79, 70, 229, 0.18);
  --color-transition-card-end: rgba(248, 248, 255, 0.90);
  --color-mint-orb-strong: rgba(233, 231, 255, 0.78);
  --color-mint-orb: rgba(233, 231, 255, 0.72);
  --color-mint-orb-medium: rgba(233, 231, 255, 0.62);
  --color-surface-orb: rgba(255, 255, 255, 0.84);
  --color-surface-diagonal: rgba(255, 255, 255, 0.48);
  --color-neutral-shadow: rgba(0, 0, 0, 0.16);
  --color-pricing-wash-bg: rgba(99, 102, 241, 0.11);
  --color-pricing-wash-border: rgba(99, 102, 241, 0.24);
  --color-shopify-link-mix: #4f46e5;
  --color-card-border-strong-alpha: rgba(22, 20, 43, 0.10);
  --color-card-border-subtle-alpha: rgba(22, 20, 43, 0.08);
  --color-dark-surface-muted: rgba(22, 20, 43, 0.08);
  --color-dark-panel-alpha: rgba(22, 20, 43, 0.96);
  --color-conversion-wash-start: rgba(124, 58, 237, 0.14);
  --color-conversion-wash-end: rgba(124, 58, 237, 0.08);
  --color-teal-stripe: rgba(79, 70, 229, 0.88);
  --color-mint-gradient-end: rgba(233, 231, 255, 0);
  --color-shopify-orb-start: #00a86b;
  --color-shopify-orb-end: #008060;
  --color-shopify-orb-text: #ffffff;
  --color-shopify-stage-bg: rgba(248, 248, 255, 0.96);
  --color-shopify-stage-border: rgba(199, 195, 255, 0.98);
  --color-platform-featured-border: rgba(219, 217, 237, 0.76);
  --color-neutral-chip: rgba(196, 193, 223, 0.80);
  --color-shopify-chip: rgba(79, 70, 229, 0.75);
  --color-soft-border-alpha: rgba(219, 217, 237, 0.88);
  --color-neutral-line: rgba(196, 193, 223, 0.90);
  --color-proof-pill-bg: rgba(233, 231, 255, 0.82);
  --color-proof-pill-border: rgba(199, 195, 255, 0.72);
  --color-proof-pill-text: #3730a3;
  --color-proof-pill-dot: #4f46e5;
  --color-why-rule: rgba(79, 70, 229, 0.14);
  --color-cta-backdrop: rgba(79, 70, 229, 0.16);
  --color-final-cta-border: rgba(219, 217, 237, 0.82);
  --color-outline-accent-soft: rgba(79, 70, 229, 0.22);
  --color-outline-accent-faint: rgba(79, 70, 229, 0.12);
  --color-outline-accent: rgba(79, 70, 229, 0.24);
  --color-highlight-teal: rgba(79, 70, 229, 0.72);
  --color-shop-page-gradient-start: rgba(248, 248, 255, 0.92);
  --color-shop-page-gradient-mid: rgba(255, 255, 255, 0.96);
  --color-shop-page-gradient-end: #ffffff;
  --color-shop-card-image-start: rgba(79, 70, 229, 0.10);
  --color-shop-card-image-end: rgba(127, 84, 179, 0.08);

  --container: 1360px;
  --container-medium: 1120px;
  --container-narrow: 860px;
  --container-reading: 720px;
  --page-gutter: 28px;
  --gutter-desktop: 120px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
  --space-14: 144px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(22, 20, 43, 0.04);
  --shadow-sm: 0 8px 24px rgba(22, 20, 43, 0.06);
  --shadow-md: 0 18px 50px rgba(22, 20, 43, 0.08);
  --shadow-lg: 0 30px 90px rgba(22, 20, 43, 0.11);
  --shadow-panel: 0 24px 70px rgba(22, 20, 43, 0.10);

  --header-height: 80px;
  --button-height: 48px;
  --card-padding: 28px;
  --panel-padding: 56px;

  --font-size-display-xl: 64px;
  --font-size-display-lg: 58px;
  --font-size-display-md: 48px;
  --font-size-h2: 44px;
  --font-size-h3: 28px;
  --font-size-h4: 20px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 18px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --font-size-eyebrow: 11px;
  --font-size-button: 14px;

  --line-height-display: 1.08;
  --line-height-display-lg: 1.08;
  --line-height-heading: 1.12;
  --line-height-subheading: 1.15;
  --line-height-body-lg: 1.45;
  --line-height-body: 1.55;
  --line-height-body-sm: 1.5;
  --line-height-caption: 1.4;

  --font-weight-display: 700;
  --font-weight-heading: 700;
  --font-weight-title: 700;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --letter-spacing-display: 0;
  --letter-spacing-heading: 0;
  --letter-spacing-subheading: 0;
  --letter-spacing-title: 0;
  --letter-spacing-eyebrow: 0.12em;
  --letter-spacing-label: 0.12em;
  --letter-spacing-button: 0;

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 520ms;
  --duration-slower: 760ms;
  --transition-base: var(--duration-base) var(--ease-standard);

  --z-header: 80;
  --z-popover: 120;
  --z-skip-link: 200;
}

@media (max-width: 760px) {
  :root {
    --header-height: 64px;
    --page-gutter: clamp(14px, 4.6vw, 18px);
    --panel-padding: clamp(22px, 6vw, 28px);
    --card-padding: clamp(18px, 5vw, 22px);
    --button-height: 46px;
    --font-size-display-xl: clamp(32px, 8.9vw, 38px);
    --font-size-display-lg: clamp(31px, 8.4vw, 36px);
    --font-size-display-md: clamp(30px, 8vw, 34px);
    --font-size-h2: clamp(28px, 7.2vw, 33px);
    --font-size-h3: clamp(22px, 5.6vw, 25px);
    --letter-spacing-display: 0;
    --letter-spacing-heading: 0;
  }
}