/* v9.9.1224/1226 — the public site (home, pricing, login, signup, account) shares
   the app's font and its two weights, regular and medium (never the browser's
   bold). The font SIZES of the site are its own (marketing scale, page CSS);
   v9.9.1226 restored them. The app's size tokens stay defined here for pages
   that want them; a test checks they equal styles.css.
   v9.9.1241: one shared self-hosted face; since v9.9.1501 Overused Grotesk (SIL OFL, variable). "Söhne" was never loaded. */
@font-face{font-family:"Overused Grotesk";font-style:normal;font-weight:300 900;font-display:swap;src:url("/static/fonts/overused-grotesk/OverusedGrotesk-VF.woff2") format("woff2")}
@font-face{font-family:"Overused Grotesk";font-style:oblique 0deg 10deg;font-weight:300 900;font-display:swap;src:url("/static/fonts/overused-grotesk/OverusedGrotesk-VF.woff2") format("woff2")}
:root{
  --font-ui:"Overused Grotesk","Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --type-nav:14px;
  --type-control:14px;
  --type-body:14px;
  --type-body-small:12px;
  --type-meta:12px;
  --type-label:10px;
  --type-section:16px;
  --type-title:28px;
  --type-display:38px;
  --leading-ui:1.35;
  --table-secondary-font-size:12px;
  --table-header-letter-spacing:.035em;
  /* Weights: the app uses two, regular and medium; never the browser's bold (700). */
  --weight-regular:400;
  --weight-medium:500;
  --site-heading-weight:var(--weight-medium);
}
@media(max-width:760px){:root{--type-title:28px;--type-section:16px}}
/* Everything the browser would make bold is medium, as in the app (DataGrid primary text: 500). */
b,strong,h4,h5,h6,th,legend,dt,optgroup{font-weight:var(--weight-medium)}
body{font-family:var(--font-ui)}
h1,h2,h3{font-weight:var(--site-heading-weight)}

/* v9.9.1227 — the app's look for buttons, blocks and the page background.
   Values measured from the app in light mode (styles.css: .card/.panel, .primaryButton, body).
   This file loads LAST on the public pages, so these win over home/pricing/login CSS. */
:root{
  --site-bg:#f8f6f2;                                  /* app body */
  --site-surface:rgba(250,248,245,.76);               /* app .card / .panel */
  --site-surface-blur:blur(12px) saturate(1.06);
  --site-surface-border:rgba(82,74,67,.09);
  --site-header:rgba(251,250,247,.96);                /* app top bar */
  --site-button-radius:999px;                         /* app action buttons (v9.9.796) */
  --button-lg-radius:var(--site-button-radius);      /* login / signup / account buttons (login.css v9.9.592) */
}
body{background-color:var(--site-bg)}
html:has(.loginShell){background:var(--site-bg)}
html:has(.loginShell) body{background:radial-gradient(circle at 15% 10%,#e8e3ff 0,transparent 38%),radial-gradient(circle at 85% 15%,#ffe8d9 0,transparent 38%),var(--site-bg)}
.siteHeader{background:var(--site-header)}

/* Round buttons, as in the app. */
.headerCta,.primaryCta,.secondaryCta,.darkCta,.planCta,.loginCard button,.loginShell button{border-radius:var(--site-button-radius)}

/* Light content blocks: the app's semi-transparent surface. Dark sections, the
   featured (black) plan and the coloured hero gradients keep their own colours. */
.trustStrip,.intro,.featureCard,.productShowcase,.artistShowcase,
.waveCard,.releaseCard,.artistPanel,.audienceSplit article:not(.artistAudience),
.pricingGrid article:not(.featured),.pricingGrid article.customPlan,
.loginCard{
  background:var(--site-surface)!important;
  -webkit-backdrop-filter:var(--site-surface-blur);
  backdrop-filter:var(--site-surface-blur);
  border-color:var(--site-surface-border);
}