/* The public site (landing, how it works, pricing, contact, privacy, terms). Static, no build step.
   Stage purple is the public pages' existing accent. Spotlight is used only for the word being sung in the home
   headline, which builds word by word the way the lyric videos do. The small coral square is the app's logo. */
:root {
  color-scheme: light;
  --stage: #3346C8;
  --stage-deep: #232F8F;
  --spotlight: #FFE27A;
  --ink: #14171D;
  --muted: #565D6D;
  --paper: #F5F6FB;
  --line: #D6DAE8;
  --tint: #E9ECFA;
  --logo: #FF5A36;
  --wide: 76rem;
  --gutter: clamp(20px, 5vw, 64px);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); overflow-wrap: break-word; }
a { color: var(--stage); text-underline-offset: 3px; }
a:hover { color: var(--stage-deep); }
:focus-visible { outline: 3px solid var(--stage); outline-offset: 2px; border-radius: 2px; }
.hero :focus-visible { outline-color: var(--spotlight); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font: 800 clamp(1.9rem, 4vw, 2.75rem)/1.05 var(--display); letter-spacing: 0.005em; }
h3 { font: 700 1.1rem/1.3 var(--body); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 2; }
.skip:focus { left: 8px; }

/* Header and footer */
.top, .bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 16px var(--gutter); background: #fff; }
.top { border-bottom: 1px solid var(--line); }
.bottom { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.95rem; padding-block: 28px; }
.top nav, .bottom nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.top nav a:not(.btn), .bottom nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.top nav a:not(.btn):hover, .bottom nav a:hover { color: var(--stage); text-decoration: underline; }
nav a[aria-current="page"] { color: var(--stage) !important; text-decoration: underline !important; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo-mark { width: 9px; height: 9px; border-radius: 2px; background: var(--logo); }
.logo-word { font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }

@media (max-width: 26rem) {
  .top nav { gap: 8px 12px; font-size: 0.9rem; }
  .top .btn-small { padding: 6px 10px; }
}

/* Buttons */
.btn { display: inline-block; padding: 13px 22px; background: var(--stage); color: #fff; border-radius: 6px; font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--stage-deep); color: #fff; }
.btn-small { padding: 8px 16px; }
.btn-light { background: #fff; color: var(--stage-deep); }
.btn-light:hover { background: var(--spotlight); color: var(--ink); }
.link-light { color: #fff; font-weight: 600; }
.link-light:hover { color: var(--spotlight); }

/* Home hero: the headline is sung word by word, once, on load */
.hero { background: var(--stage); color: #fff; padding: clamp(40px, 7vw, 88px) var(--gutter) clamp(28px, 4vw, 48px); }
.hero > * { max-width: var(--wide); margin-inline: auto; }
.sung { font: 900 clamp(3.1rem, 10.5vw, 8.25rem)/0.94 var(--display); letter-spacing: 0.002em; text-wrap: pretty; }
.sung span { display: inline-block; animation: sung 0.75s ease-out both; animation-delay: calc(var(--i) * 0.2s); }
@keyframes sung {
  0% { opacity: 0.22; color: #fff; }
  30% { opacity: 1; color: var(--spotlight); }
  100% { opacity: 1; color: #fff; }
}
.lede { margin-top: clamp(24px, 3vw, 36px); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; }
/* The padding keeps the text to 46rem inside a box capped at --wide, so it is measured from the capped width: from 100%
   alone, a viewport much wider than --wide padded the text down to a sliver. */
.lede, .actions { padding-right: max(0px, calc(min(100%, var(--wide)) - 46rem)); }
.hero > .lede, .hero > .actions { display: block; }
.actions { margin-top: 28px; display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.record { margin-top: clamp(36px, 5vw, 64px); }
.record svg { display: block; width: 100%; height: auto; }
.wave rect { fill: #fff; }
.clips rect { fill: var(--spotlight); }
.record figcaption { margin-top: 12px; font-size: 0.95rem; max-width: 46rem; }

/* Sections */
.band { max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(40px, 6vw, 72px) var(--gutter); border-bottom: 1px solid var(--line); }
.band p { max-width: 42rem; }
.band h2 + p { margin-top: 14px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 40px clamp(32px, 6vw, 88px); }
.statement h2 { font-size: clamp(2.5rem, 6.5vw, 4.75rem); }
.statement p { font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; margin-top: 18px; }
.intro { margin-top: 14px; }
.accounts { margin-top: 32px; border-top: 2px solid var(--ink); }
.account { display: grid; grid-template-columns: 11rem 1fr 1fr; gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.account h3 { font: 800 1.6rem/1.1 var(--display); }
.account h3 img { display: block; height: 24px; width: auto; }
@media (max-width: 52rem) { .account { grid-template-columns: 1fr; } }
.after { margin-top: 24px; }
.closing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 0; }

/* Inner pages */
.plain-head { max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(24px, 4vw, 40px); }
.plain-head h1 { font: 900 clamp(3rem, 9vw, 6.5rem)/0.95 var(--display); color: var(--stage); }
.lede-dark { margin-top: 18px; max-width: 42rem; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; }
.steps { list-style: none; counter-reset: step; margin: 0 auto; padding: 0 var(--gutter); max-width: calc(var(--wide) + 2 * var(--gutter)); }
.steps li { counter-increment: step; display: grid; grid-template-columns: clamp(3.5rem, 9vw, 7rem) 1fr; column-gap: 16px; padding: 28px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; font: 900 clamp(2.75rem, 7vw, 5rem)/0.9 var(--display); color: var(--stage); }
.steps h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.steps p { margin-top: 8px; max-width: 42rem; grid-column: 2; }
.plainlist { margin: 14px 0 0; padding-left: 1.2em; max-width: 42rem; }
.plainlist li + li { margin-top: 8px; }
.price { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.price-figure { font: 900 clamp(4.5rem, 14vw, 9rem)/0.9 var(--display); }
.price-unit { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }
.notice { background: var(--tint); max-width: none; }
.notice > * { max-width: var(--wide); margin-inline: auto; }
.notice > p { max-width: var(--wide); padding-right: max(0px, calc(min(100%, var(--wide)) - 42rem)); }
.notice p + p { margin-top: 12px; }
.contact { margin: 0; max-width: 46rem; }
.contact dt { font-weight: 700; margin-top: 20px; }
.contact dt:first-child { margin-top: 0; }
.contact dd { margin: 4px 0 0; }

/* Privacy and Terms */
.legal { max-width: 44rem; margin-inline: auto; padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 80px); box-sizing: content-box; }
@media (max-width: 44rem) { .legal { box-sizing: border-box; } }
.legal h1 { font: 900 clamp(2.75rem, 8vw, 4.5rem)/0.95 var(--display); color: var(--stage); }
.legal .dates { margin-top: 12px; color: var(--muted); font-size: 0.95rem; }
.legal h2 { font: 700 1.3rem/1.25 var(--body); margin-top: 2.2em; padding-top: 1.1em; border-top: 1px solid var(--line); }
.legal h3 { margin-top: 1em; }
.legal p { margin-top: 0.9em; }
.legal ul { margin: 0.8em 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 0.45em; }
.legal strong { font-weight: 600; }
.legal code { font: 0.86em/1 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.platforms { margin-top: 0.9em; padding-left: 16px; border-left: 3px solid var(--line); }
.callout { background: var(--tint); border-radius: 6px; padding: 16px 20px; margin-top: 1.1em; }
.callout > p:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .sung span { animation: none; }
}
@media print {
  .top nav, .skip { display: none; }
}