/* ChorusPop site. Every colour, space, radius and type size is a token
   variable from tokens.css (product/design-tokens.json). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--type-body-size);
  line-height: 1.5;
  letter-spacing: var(--type-body-tracking);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-primary-pressed); }
:focus-visible { outline: var(--space-xxs) solid var(--color-primary); outline-offset: var(--space-xxs); border-radius: var(--radius-xs); }
h1, h2 { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--space-lg); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-md); top: var(--space-md); z-index: 2; background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1; background: var(--color-surface-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: var(--border-hairline) solid var(--color-separator); }
.bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--size-touch-target); padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.brand { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-text-primary); text-decoration: none; font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); letter-spacing: var(--type-headline-tracking); }
.brand:hover { color: var(--color-text-primary); }
.brand img { border-radius: var(--radius-sm); }
.brand-mark { background: #000; }
.site-header nav { display: flex; gap: var(--space-lg); }
.site-header nav a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--type-subheadline-size); padding: var(--space-sm) 0; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--color-text-primary); }

/* Hero */
.hero { padding: var(--space-lg) 0 var(--space-lg); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--space-xl); }
.hero h1 { text-wrap: balance; font-size: clamp(var(--type-large-title-size), 7vw, 64px); line-height: 1.05; letter-spacing: -0.02em; font-weight: var(--type-large-title-weight); }
.lede { margin: var(--space-md) 0 var(--space-xl); font-size: var(--type-title2-size); line-height: var(--type-title2-line); color: var(--color-text-secondary); }
.fine { margin: var(--space-md) 0 0; font-size: var(--type-subheadline-size); color: var(--color-text-secondary); }
.hero-art img { width: 100%; max-width: 380px; height: auto; margin: 0 auto; }

/* Placeholder App Store button: primary fill, black text (onPrimary). */
.store-button { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--size-button-height); padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); text-decoration: none; font-size: var(--type-title2-size); font-weight: var(--type-title2-weight); line-height: 1; cursor: default; user-select: none; }
.store-button:hover { color: var(--color-on-primary); }
.store-button span { display: flex; flex-direction: column; }
.store-button small { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); margin-bottom: var(--space-xxs); }

/* Screenshots */
.shots { padding: var(--space-lg) 0 var(--space-xxl); }
.shots-track { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--space-lg), calc((100vw - 1080px) / 2 + var(--space-lg))); scrollbar-width: none; }
.shots-track::-webkit-scrollbar { display: none; }
.shots picture { flex: 0 0 auto; width: 260px; scroll-snap-align: center; }
.shots img { width: 100%; border-radius: var(--radius-xl); border: var(--border-hairline) solid var(--color-separator); background: var(--color-surface); }

/* Points */
.points { padding: 0 0 var(--space-xl); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.grid > div { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-lg); }
.grid h2 { font-size: var(--type-headline-size); font-weight: var(--type-headline-weight); letter-spacing: var(--type-headline-tracking); }
.grid p { margin: var(--space-xs) 0 0; font-size: var(--type-subheadline-size); line-height: var(--type-subheadline-line); color: var(--color-text-secondary); }

/* Documents: privacy, terms, support */
.doc { max-width: 720px; padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
.doc h1 { font-size: var(--type-large-title-size); line-height: var(--type-large-title-line); letter-spacing: var(--type-large-title-tracking); font-weight: var(--type-large-title-weight); }
.doc h2 { margin-top: var(--space-xl); font-size: var(--type-title2-size); line-height: var(--type-title2-line); letter-spacing: var(--type-title2-tracking); font-weight: var(--type-title2-weight); }
.doc p { margin: var(--space-sm) 0 0; color: var(--color-text-secondary); }
.doc .meta { color: var(--color-text-tertiary); font-size: var(--type-subheadline-size); }
.doc .summary { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); background: var(--color-primary-muted); border-radius: var(--radius-md); color: var(--color-text-primary); }
.doc .summary a { color: var(--color-text-primary); }

.faq { margin-top: var(--space-xl); display: grid; gap: var(--space-sm); }
.faq details { background: var(--color-surface); border-radius: var(--radius-md); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: var(--size-touch-target); padding: var(--space-md) var(--space-lg); font-weight: var(--type-headline-weight); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-primary); font-size: var(--type-title2-size); line-height: 1; transition: transform var(--motion-fast) var(--motion-easing); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 var(--space-lg) var(--space-md); }

/* 404 */
.notfound { text-align: center; padding-top: var(--space-xxl); padding-bottom: calc(var(--space-xxl) * 2); }
.notfound .code { margin: 0 0 var(--space-sm); color: var(--color-primary); font-size: var(--type-title-size); font-weight: var(--type-title-weight); }
.notfound h1 { font-size: var(--type-large-title-size); line-height: var(--type-large-title-line); }
.button { display: inline-flex; align-items: center; min-height: var(--size-button-height); margin-top: var(--space-lg); padding: 0 var(--space-xl); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--type-body-strong-weight); text-decoration: none; }
.button:hover { background: var(--color-primary-pressed); color: var(--color-on-primary); }

/* Footer */
.site-footer { border-top: var(--border-hairline) solid var(--color-separator); padding: var(--space-xl) 0 var(--space-xxl); font-size: var(--type-footnote-size); line-height: var(--type-footnote-line); color: var(--color-text-tertiary); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.site-footer nav a { color: var(--color-text-secondary); text-decoration: none; }
.site-footer nav a:hover { color: var(--color-text-primary); }
.site-footer p { margin: var(--space-xs) 0 0; }
.site-footer p a { color: var(--color-text-secondary); }

@media (max-width: 860px) {
  .hero { padding: var(--space-md) 0 var(--space-lg); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-md); text-align: center; }
  .hero-art { order: -1; margin: 0 auto; width: 150px; }
  .hero h1 { font-size: clamp(32px, 9vw, 48px); }
  .lede { margin: var(--space-sm) 0 var(--space-lg); font-size: var(--type-body-size); }
  .badges { justify-content: center; margin: var(--space-md) 0; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .grid > div { padding: var(--space-md); }
}
@media (max-width: 520px) {
  .wrap { padding: 0 var(--space-md); }
  .grid h2 { font-size: var(--type-subheadline-size); }
  .grid p { font-size: var(--type-footnote-size); line-height: var(--type-footnote-line); }
  .site-header nav a { font-size: var(--type-footnote-size); }
}
@media (max-width: 360px) {
  .badges { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Store badges: official art, never restyled. Apple's SVG is the badge edge to edge;
   Google's PNG carries 41/250 transparent padding, so it is drawn larger and pulled in
   to match Apple's 48 px badge height. */
.badges { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: var(--space-lg) 0; }
.badge { display: block; flex: none; height: 48px; overflow: hidden; line-height: 0; }
.badge img { display: block; height: 48px; width: auto; }
/* Google's PNG is 646x250 with the badge at 564x168+41+41: show the badge 48 px tall with 1 px of its own clear space so no edge is clipped. */
.badge-play { width: 163px; height: 50px; position: relative; }
.badge-play img { position: absolute; height: 71.43px; width: auto; left: -10.71px; top: -10.71px; }