/* Spotify brand tokens, from unfairly.ai/brand-guidelines/spotify (checked 2026-10-30).
   Sizes, spacing and components were measured on https://www.spotify.com/us/premium/ (computed styles and bounding boxes at 1440 and 390 in headless Chromium after a slow scroll (scroll-revealed sections at rest), 2026-10-29; fonts calibrated by rendering on the live page; images downloaded from wwwmarketing.scdn.co; feature-card art is a Rive canvas captured at rest.).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Spotify's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #121212;
  --color-surface: #242424;
  --color-ink: #FFFFFF;
  --color-ink-muted: #B3B3B3;
  --color-accent: #1ED760;
  --color-on-accent: #000000;
  --color-accent-secondary: #7358FF;
  --color-night: #000000;
  --color-on-night: #FFFFFF;
  --color-spotify-green: #1ED760;
  --color-white: #FFFFFF;
  --color-black-published: #121212;
  --color-spotify-color-player-fallback: #191414;
  --color-pure-black: #000000;
  --color-locale-bar-blue: #1D75DE;
  --color-plan-card-grey: #242424;
  --color-social-grey: #222326;
  --color-outline-grey: #7F7F7F;
  --color-nav-muted: #D9DADC;
  --color-legal-grey: #B3B3B3;
  --color-plan-sub-grey: #A7A7A7;
  --color-footer-grey: #919496;
  --color-student-mint: #91EEDA;
  --color-duo-peach: #FFA178;
  --color-family-lilac: #D8A3FF;
  --color-audiobooks-sage: #C9E3DB;
  --color-reserved-periwinkle: #576DD6;
  --color-dj-blue: #0D72EA;
  --color-video-orange: #D64000;
  --color-daylist-violet: #7358FF;
  --color-jam-magenta: #CC2FAF;
  --color-blend-green: #088569;
  --color-content-card-green: #035341;
  --color-content-icon-green: #10B28E;
  --color-guide-example-yellow: #FCE54F;
  --color-guide-example-lavender: #D9D5E3;
  --color-guide-example-cyan: #00FFFF;
  --color-button-primary-fill: #1ED760;
  --color-button-primary-text: #000000;
  --color-button-nav-fill: #1ED760;
  --color-button-nav-text: #000000;
  --color-button-outline-fill: #121212;
  --color-button-outline-text: #FFFFFF;
  --color-button-outline-ring: #7F7F7F;
  --color-button-plan-fill: #1ED760;
  --color-button-plan-text: #000000;
  --color-button-sage-fill: #C9E3DB;
  --color-button-sage-text: #000000;
  --color-offer-timer-text: #FFFFFF;
  --color-play-pause-text: #FFFFFF;
  --color-plan-badge-text: #000000;
  --color-plan-card-fill: #242424;
  --color-plan-card-text: #FFFFFF;
  --color-feature-card-text: #FFFFFF;
  --color-content-card-fill: #035341;
  --color-content-card-text: #FFFFFF;
  --color-social-button-fill: #222326;
  --color-social-button-text: #FFFFFF;
  --color-text-link-text: #FFFFFF;
  --font-display: Unbounded, "Arial Black", system-ui, sans-serif;
  --font-display-original: "Spotify Mix Title", Unbounded, "Arial Black", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body-original: "Spotify Mix", "Hanken Grotesk", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-margin: 160px;
  --section-padding: 256px;
  --container-max: 1120px;
  --nav-height: 72px;
  --grid-gutter: 32px;
  --grid-columns: 12;
  --text-hero-headline-h1-size: 118px;
  --text-hero-headline-h1-line: 1.297;
  --text-hero-headline-h1-weight: 900;
  --text-hero-headline-h1-tracking: -1.18px;
  --text-hero-keyword-h1-3rd-line-size: 118px;
  --text-hero-keyword-h1-3rd-line-line: 1.297;
  --text-hero-keyword-h1-3rd-line-weight: 900;
  --text-hero-keyword-h1-3rd-line-tracking: -1.18px;
  --text-section-headline-h2-size: 66px;
  --text-section-headline-h2-line: 1.167;
  --text-section-headline-h2-weight: 800;
  --text-section-headline-h2-tracking: -1.32px;
  --text-section-sub-h3-size: 24px;
  --text-section-sub-h3-line: 1.2;
  --text-section-sub-h3-weight: 350;
  --text-section-sub-h3-tracking: -0.24px;
  --text-manifesto-headline-size: 48px;
  --text-manifesto-headline-line: 1.2;
  --text-manifesto-headline-weight: 400;
  --text-manifesto-headline-tracking: -0.96px;
  --text-manifesto-body-size: 32px;
  --text-manifesto-body-line: 1.15;
  --text-manifesto-body-weight: 350;
  --text-manifesto-body-tracking: -0.32px;
  --text-feature-card-title-size: 32px;
  --text-feature-card-title-line: 1.2;
  --text-feature-card-title-weight: 800;
  --text-feature-card-title-tracking: -0.64px;
  --text-eyebrow-premium-with-icon-size: 20px;
  --text-eyebrow-premium-with-icon-line: 1.2;
  --text-eyebrow-premium-with-icon-weight: 750;
  --text-feature-grid-card-label-size: 20px;
  --text-feature-grid-card-label-line: 1.2;
  --text-feature-grid-card-label-weight: 750;
  --text-body-size: 16px;
  --text-body-line: 1.375;
  --text-body-weight: 450;
  --text-button-label-size: 16px;
  --text-button-label-line: 1.375;
  --text-button-label-weight: 750;
  --text-plan-name-size: 32px;
  --text-plan-name-line: 1.45;
  --text-plan-name-weight: 750;
  --text-legal-fine-print-size: 12px;
  --text-legal-fine-print-line: 1.42;
  --text-legal-fine-print-weight: 450;
  --text-footer-column-head-size: 12px;
  --text-footer-column-head-line: 1.4;
  --text-footer-column-head-weight: 900;
  --text-footer-column-head-tracking: 0.96px;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 450;
  --text-nav-link-size: 16px;
  --text-nav-link-line: 1.5;
  --text-nav-link-weight: 750;
  --text-moments-photo-caption-size: 16px;
  --text-moments-photo-caption-line: 1.2;
  --text-moments-photo-caption-weight: 300;
  --text-offer-timer-label-size: 14px;
  --text-offer-timer-label-line: 1.43;
  --text-offer-timer-label-weight: 450;
  --radius-button-primary: 999px;
  --radius-button-nav: 999px;
  --radius-button-outline: 999px;
  --radius-button-plan: 999px;
  --radius-button-sage: 999px;
  --radius-offer-timer: 4px;
  --radius-play-pause: 999px;
  --radius-plan-badge: 6px;
  --radius-plan-card: 10px;
  --radius-feature-card: 24px;
  --radius-content-card: 24px;
  --radius-social-button: 999px;
  --ease-button-press: cubic-bezier(0.3, 0, 0, 1);
  --duration-button-press: 150ms;
  --ease-keyword-cycle: ease-out;
  --duration-keyword-cycle: 1500ms;
  --ease-word-rise: ease-out;
  --duration-word-rise: 600ms;
  --ease-card-stack: ease-out;
  --duration-card-stack: 600ms;
  --icon-s: 16px;
  --icon-m: 24px;
  --icon-l: 48px;
  --icon-xl: 88px;
}
/* Phone values measured at 390px. Spotify's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --section-padding: 96px;
    --text-hero-headline-h1-size: 37px;
    --text-hero-keyword-h1-3rd-line-size: 37px;
    --text-section-headline-h2-size: 50px;
    --text-manifesto-headline-size: 32px;
    --text-manifesto-body-size: 24px;
    --text-moments-photo-caption-size: 13px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 32px; border-radius: 999px;
  background: #1ED760; color: #000000;
  font: 700 16px/1 var(--font-body);
}
.button-primary:hover { background: #3BE477; transform: scale(1.04); } /* our reading */
.button-nav {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 38px; padding: 0 32px; border-radius: 999px;
  background: #1ED760; color: #000000;
  font: 700 16px/1 var(--font-body);
}
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 32px; border-radius: 999px;
  background: #121212; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px #7F7F7F;
  font: 700 16px/1 var(--font-body);
}
.button-plan {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 16px; border-radius: 999px;
  background: #1ED760; color: #000000;
  font: 700 16px/1 var(--font-body);
}
.button-sage {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 48px; padding: 0 40px; border-radius: 999px;
  background: #C9E3DB; color: #000000;
  font: 700 16px/1 var(--font-body);
}