@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/Montserrat-800.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PlusJakartaSans-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/PlusJakartaSans-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/PlusJakartaSans-700.woff2") format("woff2"); }

/* GENERATED by setup/build-brand.py from brand-kit/tokens.json. Do not edit. */
:root {
  --primary-50: #f6f6f7;
  --primary-100: #ececee;
  --primary-200: #d9d9dc;
  --primary-300: #b9b9bd;
  --primary-400: #8c8c91;
  --primary-500: #4b4b4f;
  --primary-600: #3f3f43;
  --primary-700: #353539;
  --primary-800: #2d2d31;
  --primary-900: #262629;
  --primary-950: #1c1c1f;
  --success-50: #f0fcf5;
  --success-100: #e0f8ea;
  --success-200: #c2f2d6;
  --success-300: #8fe7b3;
  --success-400: #4cd887;
  --success-500: #d92332;
  --success-600: #00a05f;
  --success-700: #00796b;
  --success-800: #00554b;
  --success-900: #003a33;
  --success-950: #001f1c;
  --flash-50: #fff1f2;
  --flash-100: #ffe1e3;
  --flash-200: #ffc2c6;
  --flash-300: #ff9399;
  --flash-400: #f2545d;
  --flash-500: #d92332;
  --flash-600: #c11d2b;
  --flash-700: #a41825;
  --flash-800: #7f131d;
  --flash-900: #5c0f17;
  --flash-950: #33080d;
  --coral-50: #fff6f6;
  --coral-100: #ffeded;
  --coral-200: #ffdbdb;
  --coral-300: #ffbebe;
  --coral-400: #ff9797;
  --coral-500: #ff6b6b;
  --coral-600: #e05e5e;
  --coral-700: #b84d4d;
  --coral-800: #8c3b3b;
  --coral-900: #662b2b;
  --coral-950: #381818;
  --ink-50: #ffffff;
  --ink-100: #f4f4f5;
  --ink-200: #e6e6e8;
  --ink-300: #cdcdd1;
  --ink-400: #9d9da3;
  --ink-500: #6f6f76;
  --ink-600: #55555c;
  --ink-700: #3d3d43;
  --ink-800: #28282d;
  --ink-900: #1a1a1d;
  --ink-950: #0f0f11;
  /* semantic · light */
  --bg: #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #f4f4f5;
  --text: #1a1a1d;
  --text-muted: #55555c;
  --border-strong: #1a1a1d;
  --border-soft: #e6e6e8;
  --brand: #4b4b4f;
  --brand-fill: #4b4b4f;
  --on-brand-fill: #ffffff;
  --cta-fill: #d92332;
  --on-cta-fill: #ffffff;
  --flash-fill: #d92332;
  --on-flash-fill: #ffffff;
  --coral-fill: #ff6b6b;
  --on-coral-fill: #1a1a1d;
  --urgent-text: #a41825;
  --success-text: #00796b;
  --success-soft: #e0f8ea;
  --on-success-soft: #00554b;
  --focus-ring: #4b4b4f;
  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-sticker: 14px;
  --radius-card: 20px;
  --radius-pill: 9999px;
  /* shadows */
  --shadow-sticker-sm: 2px 2px 0 0 #1a1a1d;
  --shadow-sticker: 3px 3px 0 0 #1a1a1d;
  --shadow-sticker-lg: 5px 5px 0 0 #1a1a1d;
  --shadow-sticker-brand: 3px 3px 0 0 #4b4b4f;
  --shadow-glow: 0 10px 30px -8px #4b4b4f8c;
  --shadow-card: 0 1px 0 #1a1a1d0f, 0 10px 28px -14px #1a1a1d47;
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #4b4b4f;
  --font-display: Montserrat, "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { color-scheme: light; }

/* type scale */
.display { font-family: var(--font-display); font-size: clamp(40px, 7vw + 8px, 72px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.h1, h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw + 16px, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.h2, h2 { font-family: var(--font-display); font-size: clamp(26px, 2.5vw + 16px, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.h3, h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.h4, h4 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.h5, h5 { font-family: var(--font-sans); font-size: 17px; line-height: 1.35; font-weight: 700; }
.h6, h6 { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.01em; }
.badge-label { font-family: var(--font-display); font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.price-xl { font-family: var(--font-display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-lg { font-family: var(--font-display); font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.price-sm { font-family: var(--font-sans); font-size: 16px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }