/* Headspace brand tokens, from unfairly.ai/brand-guidelines/headspace (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.headspace.com/ (computed styles and bounding boxes at 1440 and 390 in headless Chromium (measure/home-desk.json, measure/home-phone.json, scratch/dom-1440.json, scratch/dom-390.json), pixel samples of the reference screenshots, plus the published press kit; 2026-10-29).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Headspace's own faces, which you may only use if you have a licence. */
:root {
  --color-primary: #FF7300;
  --color-secondary: #FFCE00;
  --color-accent: #0061EF;
  --color-on-accent: #FFFFFF;
  --color-ink: #2D2C2B;
  --color-ink-muted: #44423F;
  --color-surface: #F9F4F2;
  --color-paper: #FFFFFF;
  --color-accent-secondary: #00A4FF;
  --color-night: #3B197F;
  --color-on-night: #FFFFFF;
  --color-headspace-orange: #FF7300;
  --color-ink: #2D2C2B;
  --color-cta-blue: #0061EF;
  --color-sunshine-yellow: #FFCE00;
  --color-sky-blue: #00A4FF;
  --color-pink: #FFA1CC;
  --color-night-purple: #3B197F;
  --color-green: #02873E;
  --color-warm-card: #F9F4F2;
  --color-ink-soft: #44423F;
  --color-footer-heading: #4B4C4D;
  --color-press-blue: #0C6FF9;
  --color-press-card: #FAF6F4;
  --color-ink-muted-grey: #63605D;
  --color-tile-border: #E2DED9;
  --color-faq-rule: #C6C1B9;
  --color-input-border: #D2D5DE;
  --color-dot-inactive: #DAD9D9;
  --color-button-primary-blue-fill: #0061EF;
  --color-button-primary-blue-text: #FFFFFF;
  --color-button-primary-ink-fill: #2D2C2B;
  --color-button-primary-ink-text: #FFFFFF;
  --color-button-light-fill: #F9F4F2;
  --color-button-light-text: #44423F;
  --color-button-outline-white-fill: #0061EF;
  --color-button-outline-white-text: #FFFFFF;
  --color-button-outline-white-ring: #FFFFFF;
  --color-button-cta-giant-fill: #0061EF;
  --color-button-cta-giant-text: #FFFFFF;
  --color-tab-pill-fill: #F9F4F2;
  --color-tab-pill-text: #2D2C2B;
  --color-need-state-tile-fill: #FFFFFF;
  --color-need-state-tile-text: #2D2C2B;
  --color-need-state-tile-ring: #E2DED9;
  --color-warm-card-fill: #F9F4F2;
  --color-warm-card-text: #2D2C2B;
  --color-library-card-fill: #2D2C2B;
  --color-library-card-text: #FFFFFF;
  --color-carousel-arrow-fill: #F9F4F2;
  --color-carousel-arrow-text: #2D2C2B;
  --color-stat-pill-text: #FFFFFF;
  --color-stat-pill-ring: #FFFFFF;
  --color-faq-row-fill: #FFFFFF;
  --color-faq-row-text: #2D2C2B;
  --color-email-input-fill: #FFFFFF;
  --color-email-input-text: #63605D;
  --color-email-input-ring: #D2D5DE;
  --font-display: "Hanken Grotesk", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-original: "Headspace Apercu", "Hanken Grotesk", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: "Headspace Apercu", "Hanken Grotesk", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 48px;
  --section-padding: 64px;
  --container-max: 1344px;
  --hero-text-max: 420px;
  --card-gap: 24px;
  --nav-height: 80px;
  --grid-gutter: 24px;
  --grid-columns: 3;
  --text-display-xl-size: 72px;
  --text-display-xl-line: 1;
  --text-display-xl-weight: 700;
  --text-display-xl-tracking: -2.16px;
  --text-display-l-size: 64px;
  --text-display-l-line: 1;
  --text-display-l-weight: 700;
  --text-display-l-tracking: -1.92px;
  --text-display-hero-size: 52px;
  --text-display-hero-line: 1.1;
  --text-display-hero-weight: 700;
  --text-display-hero-tracking: -1.56px;
  --text-display-m-size: 48px;
  --text-display-m-line: 1;
  --text-display-m-weight: 700;
  --text-display-m-tracking: -1.44px;
  --text-heading-l-size: 40px;
  --text-heading-l-line: 1.15;
  --text-heading-l-weight: 700;
  --text-heading-l-tracking: -1.2px;
  --text-heading-m-size: 32px;
  --text-heading-m-line: 1.2;
  --text-heading-m-weight: 700;
  --text-heading-m-tracking: -0.96px;
  --text-stat-size: 56px;
  --text-stat-line: 1.1;
  --text-stat-weight: 700;
  --text-stat-tracking: -1.68px;
  --text-quote-size: 24px;
  --text-quote-line: 1.3;
  --text-quote-weight: 400;
  --text-lead-size: 20px;
  --text-lead-line: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: -0.2px;
  --text-body-l-size: 18px;
  --text-body-l-line: 1.2;
  --text-body-l-weight: 400;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-button-size: 16px;
  --text-button-line: 1.1;
  --text-button-weight: 700;
  --text-caption-size: 12px;
  --text-caption-line: 1.15;
  --text-caption-weight: 400;
  --text-caption-tracking: -0.12px;
  --text-footer-heading-size: 24px;
  --text-footer-heading-line: 1.33;
  --text-footer-heading-weight: 700;
  --text-footer-heading-tracking: -0.6px;
  --radius-button-primary-blue: 999px;
  --radius-button-primary-ink: 999px;
  --radius-button-light: 999px;
  --radius-button-outline-white: 999px;
  --radius-button-cta-giant: 112px;
  --radius-tab-pill: 24px;
  --radius-need-state-tile: 8px;
  --radius-warm-card: 24px;
  --radius-library-card: 16px;
  --radius-carousel-arrow: 999px;
  --radius-stat-pill: 30px;
  --radius-faq-row: 0px;
  --radius-email-input: 8px;
  --ease-button-press: cubic-bezier(0.32, 0.94, 0.6, 1);
  --duration-button-press: 150ms;
  --ease-tile-border: ease;
  --duration-tile-border: 300ms;
}
/* Phone values measured at 390px; Headspace's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 24px;
    --section-padding: 32px;
    --text-display-xl-size: 28px;
    --text-display-l-size: 40px;
    --text-display-hero-size: 36px;
    --text-display-m-size: 32px;
    --text-heading-l-size: 32px;
    --text-heading-m-size: 24px;
    --text-stat-size: 32px;
    --text-quote-size: 20px;
    --text-lead-size: 16px;
    --text-body-l-size: 16px;
  }
}
.button-primary-blue {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: #0061EF; color: #FFFFFF;
  font: 700 14px/1 var(--font-body);
}
.button-primary-ink {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 20px; border-radius: 999px;
  background: #2D2C2B; color: #FFFFFF;
  font: 700 16px/1 var(--font-body);
}
.button-light {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: #F9F4F2; color: #44423F;
  font: 700 16px/1 var(--font-body);
}
.button-outline-white {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 24px; border-radius: 999px;
  background: #0061EF; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 700 16px/1 var(--font-body);
}
.button-cta-giant {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 188px; padding: 0 64px; border-radius: 112px;
  background: #0061EF; color: #FFFFFF;
  font: 700 72px/1 var(--font-body);
}