/* Shopify brand tokens, from unfairly.ai/brand-guidelines/shopify (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.shopify.com/ (computed styles, bounding boxes and hover states at 1440 and 390 in headless Chromium, 2026-10-29; images downloaded from their cdn.shopify.com files; video slots as stills from the video files).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Shopify's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #02090A;
  --color-surface: #061A1C;
  --color-ink: #FFFFFF;
  --color-ink-muted: #9797A2;
  --color-accent: #FFFFFF;
  --color-on-accent: #000000;
  --color-accent-secondary: #36F4A4;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-shopify-green: #95BF47;
  --color-shopify-dark-green: #5E8E3E;
  --color-page-black: #02090A;
  --color-footer-black: #000000;
  --color-teal-card: #061A1C;
  --color-teal-card-glow: #0D3A2D;
  --color-card-hairline: #1E2C31;
  --color-glow-teal: #157076;
  --color-statement-dim: #71717A;
  --color-muted: #9797A2;
  --color-muted-teal: #9DABAD;
  --color-muted-lavender: #BDBDCA;
  --color-muted-green: #99B3AD;
  --color-footer-link: #A1A1AA;
  --color-locale-text: #E0E0E0;
  --color-hover-grey: #D4D4D8;
  --color-mint: #36F4A4;
  --color-sidekick-purple: #2C007F;
  --color-navy: #000A1D;
  --color-apps-navy: #000A1E;
  --color-sidekick-card: #020A08;
  --color-dev-card: #010624;
  --color-dev-blue-glow: #1260FF;
  --color-terminal: #060607;
  --color-deep-green: #041E18;
  --color-green-hairline: #11352D;
  --color-quote-card: #072720;
  --color-quote-border: #133B32;
  --color-chip-black: #101010;
  --color-build-grey: #3F3F4B;
  --color-footer-rule: #121C1E;
  --color-gradient-teal: #5FD5B6;
  --color-gradient-violet: #865CFF;
  --color-graphite-base: #09090A;
  --color-button-primary-fill: #FFFFFF;
  --color-button-primary-text: #000000;
  --color-button-outline-text: #FFFFFF;
  --color-button-outline-ring: #FFFFFF;
  --color-button-nav-fill: #FFFFFF;
  --color-button-nav-text: #000000;
  --color-nav-edition-pill-text: #FFFFFF;
  --color-nav-edition-pill-ring: #FFFFFF;
  --color-feature-card-fill: #061A1C;
  --color-stat-chip-fill: #101010;
  --color-quote-card-fill: #072720;
  --font-display: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display-original: Shopify-Inter, Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body-original: Shopify-Inter, Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono-original: ui-monospace, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --page-margin: 90px;
  --section-padding: 128px;
  --container-max: 1260px;
  --card-gap: 16px;
  --nav-height: 72px;
  --grid-gutter: 16px;
  --grid-columns: 12;
  --text-hero-display-h1-size: 96px;
  --text-hero-display-h1-line: 1.08;
  --text-hero-display-h1-weight: 300;
  --text-hero-display-h1-tracking: -1.92px;
  --text-statement-headline-size: 56px;
  --text-statement-headline-line: 1;
  --text-statement-headline-weight: 330;
  --text-statement-headline-tracking: -1.68px;
  --text-section-headline-h2-h3-size: 56px;
  --text-section-headline-h2-h3-line: 1.08;
  --text-section-headline-h2-h3-weight: 330;
  --text-section-headline-h2-h3-tracking: -1.68px;
  --text-closing-headline-centered-h2-size: 64px;
  --text-closing-headline-centered-h2-line: 1.08;
  --text-closing-headline-centered-h2-weight: 330;
  --text-closing-headline-centered-h2-tracking: -1.28px;
  --text-feature-headline-h3-size: 44px;
  --text-feature-headline-h3-line: 1.1;
  --text-feature-headline-h3-weight: 330;
  --text-feature-headline-h3-tracking: -0.44px;
  --text-stat-number-size: 96px;
  --text-stat-number-line: 0.96;
  --text-stat-number-weight: 300;
  --text-pull-quote-size: 34px;
  --text-pull-quote-line: 1.14;
  --text-pull-quote-weight: 330;
  --text-hero-lead-size: 24px;
  --text-hero-lead-line: 1.3;
  --text-hero-lead-weight: 400;
  --text-hero-lead-tracking: -0.48px;
  --text-card-title-h4-size: 20px;
  --text-card-title-h4-line: 1.3;
  --text-card-title-h4-weight: 450;
  --text-body-large-size: 20px;
  --text-body-large-line: 1.4;
  --text-body-large-weight: 400;
  --text-body-size: 18px;
  --text-body-line: 1.4;
  --text-body-weight: 400;
  --text-body-small-size: 14px;
  --text-body-small-line: 1.37;
  --text-body-small-weight: 420;
  --text-button-size: 18px;
  --text-button-line: 1.56;
  --text-button-weight: 550;
  --text-nav-link-size: 16px;
  --text-nav-link-line: 1.5;
  --text-nav-link-weight: 420;
  --text-footer-heading-size: 20px;
  --text-footer-heading-line: 1;
  --text-footer-heading-weight: 450;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 400;
  --text-mono-label-size: 12px;
  --text-mono-label-line: 1.33;
  --text-mono-label-weight: 400;
  --text-step-number-size: 24px;
  --text-step-number-line: 1.3;
  --text-step-number-weight: 400;
  --radius-button-primary: 999px;
  --radius-button-outline: 999px;
  --radius-button-nav: 999px;
  --radius-nav-edition-pill: 999px;
  --radius-feature-card: 16px;
  --radius-media-card: 12px;
  --radius-stat-chip: 8px;
  --radius-quote-card: 8px;
  --radius-dev-chip: 4px;
  --ease-control: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-control: 150ms;
  --ease-link: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-link: 200ms;
  --icon-s: 16px;
  --icon-m: 20px;
  --icon-l: 28px;
}
/* Phone values measured at 390px. Shopify's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 64px;
    --text-hero-display-h1-size: 56px;
    --text-statement-headline-size: 36px;
    --text-section-headline-h2-h3-size: 36px;
    --text-closing-headline-centered-h2-size: 44px;
    --text-feature-headline-h3-size: 30px;
    --text-stat-number-size: 56px;
    --text-pull-quote-size: 26px;
    --text-hero-lead-size: 18px;
    --text-card-title-h4-size: 16px;
    --text-body-large-size: 18px;
    --text-body-size: 16px;
    --text-button-size: 16px;
    --text-nav-link-size: 24px;
    --text-step-number-size: 18px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 999px;
  background: #FFFFFF; color: #000000;
  font: 550 18px/1 var(--font-body);
}
.button-primary:hover { background-color: #D4D4D8; } /* observed */
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 56px; padding: 0 24px; border-radius: 999px;
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 550 18px/1 var(--font-body);
}
.button-outline:hover { box-shadow: inset 0 0 0 2px #D4D4D8; } /* observed */
.button-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: #FFFFFF; color: #000000;
  font: 550 16px/1 var(--font-body);
}