/* Shared reading scale. Keep customer-facing text legible at normal zoom. */
:root { --muted: #b4bed1; --purple: #b497ff; --line: #ffffff24; }
body { font-size: 18px; line-height: 1.75; }
.nav nav { font-size: 16px; color: #c6cede; gap: 28px; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.button, .button.small { min-height: 48px; font-size: 16px; padding: 13px 22px; line-height: 1.5; }
.eyebrow, .hero .eyebrow { font-size: 13px; line-height: 1.7; letter-spacing: 1.2px; }
.intro { font-size: 18px; line-height: 1.8; max-width: 48ch; }
.fine, .demo-label { font-size: 14px; line-height: 1.65; color: var(--muted); }
.text-link, .contact { font-size: 16px; }
.actions { flex-wrap: wrap; gap: 20px; }
.text-link { padding: 10px 0; }
.hero { gap: 32px; padding-top: 35px; padding-bottom: 35px; }
.hero-art { padding-top: 80px; padding-bottom: 95px; }
.floating { font-size: 12px; letter-spacing: .6px; right: 10px; }
.result { bottom: 48px; padding: 14px 18px; }
.result strong { font-size: 15px; }
.result small { font-size: 13px; color: #bdcfda; }
.demo-label { bottom: 0; left: 0; right: 0; text-align: center; margin-bottom: 0; }
/* The editor remains an illustration, with fewer and larger labels on phones. */
.studio-bar { font-size: 11px; }
.studio-bar>span { color: #b6bed2; }
.studio aside { width: 100px; flex-shrink: 0; font-size: 11px; }
.media small { font-size: 10px; overflow-wrap: anywhere; }
.scene-title { font-size: 11px; letter-spacing: 1px; }
.scene-title small, .watermark { font-size: 10px; letter-spacing: .5px; }
.transport { font-size: 11px; gap: 10px; }
.track { height: 28px; }
.track>span { width: 100px; flex-shrink: 0; font-size: 10px; color: #b4bed1; }
.words { height: 25px; }
.words i { font-size: 11px; }
.lyrics { font-size: 22px; }
.lyrics small { font-size: 18px; }
.promise { flex-wrap: wrap; gap: 18px 24px; }
.promise>span { font-size: 12px; color: var(--muted); }
.promise p { font-size: 15px; }
.heading>p { font-size: 18px; max-width: 34ch; }
.step { padding: 22px 20px; gap: 16px; }
.step>span { font-size: 14px; color: #abb6cc; }
.step h3 { font-size: 20px; }
.step p { font-size: 16px; color: var(--muted); line-height: 1.65; margin-top: 8px; }
.demo-top { align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: #c2bcd4; letter-spacing: .6px; }
.demo-top button { min-height: 44px; padding: 8px 12px; border: 1px solid #b497ff55; border-radius: 6px; font-size: 14px; color: #d3bfff; }
.source-file { flex-shrink: 0; }
.source-file span { font-size: 13px; letter-spacing: .5px; }
.output-files span { font-size: 12px; letter-spacing: .3px; margin-left: 5px; }
.output-files div { padding: 12px; white-space: nowrap; }
.export-result span, .caption p { font-size: 16px; color: var(--muted); }
.caption span { font-size: 14px; }
.caption { align-items: start; }
.tag, .price-top .tag { font-size: 13px; letter-spacing: .8px; color: #c1a7ed; }
.feature h3 { font-size: 25px; }
.feature p { font-size: 17px; line-height: 1.75; }
.mini-wave { grid-template-columns: 115px 1fr; }
.mini-wave span, .formats small { font-size: 13px; color: #b9c3d7; }
.price-top { flex-wrap: wrap; gap: 12px; font-size: 20px; }
.price small { font-size: 18px; color: var(--muted); }
.price-card ul { font-size: 17px; line-height: 1.7; }
.price-card li { padding: 7px 0; }
.pricing, .join { gap: 60px; }
.join { padding: 48px; }
.join label { font-size: 16px; font-weight: 600; margin-bottom: 9px; }
.join input:not([type=checkbox]), .join select { font-size: 16px; min-height: 50px; line-height: 1.5; padding: 13px 14px; margin-bottom: 22px; border-color: #64718b; }
.join input::placeholder { color: #a5b0c5; opacity: 1; }
.form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.join .consent { font-size: 15px; font-weight: 400; color: #c0cada; gap: 12px; margin-bottom: 24px; }
.consent input { width: 20px; height: 20px; flex-shrink: 0; }
.consent a, .legal a { text-decoration: underline; text-underline-offset: 4px; }
#form-status { font-size: 16px; }
.faq summary { font-size: 19px; padding: 6px 0; min-height: 44px; font-weight: 600; }
.faq details p { font-size: 17px; max-width: 65ch; margin-top: 14px; }
footer p, footer div, footer small { font-size: 14px; color: var(--muted); }
footer div { flex-wrap: wrap; gap: 16px 24px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; }
.legal { max-width: 780px; padding-top: 50px; padding-bottom: 100px; }
.legal h1 { font-size: clamp(36px,4.5vw,52px); line-height: 1.15; margin-bottom: 28px; }
.legal h2 { font-size: 26px; line-height: 1.35; margin: 42px 0 14px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal p { font-size: 18px; line-height: 1.85; color: #c5cede; max-width: 68ch; }
.legal .eyebrow { font-size: 13px; color: #bda8ee; }
.legal a { overflow-wrap: anywhere; }
@media(max-width:1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 45px; }
  .hero>div:first-child { max-width: 760px; }
  .hero-art { width: 100%; max-width: 720px; margin: 15px auto 0; }
  .hero h1 { font-size: clamp(48px,7vw,76px); }
  .studio { transform: none; }
  .preview { height: 290px; }
  .workflow { grid-template-columns: 1fr; gap: 32px; }
  .workflow-display { width: 100%; max-width: 760px; margin: auto; }
  .pricing { gap: 36px; }
  .join { grid-template-columns: 1fr; gap: 30px; }
}
@media(max-width:760px) {
  .wrap { width: calc(100% - 40px); }
  .nav { height: auto; min-height: 96px; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
  .nav img { width: 155px; }
  .nav .button { font-size: 14px; min-height: 46px; padding: 10px 14px; }
  .nav>a:last-child:not(.button) { font-size: 15px; }
  .hero { padding-top: 32px; padding-bottom: 10px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .7px; }
  .hero h1 { font-size: clamp(44px,9vw,64px); letter-spacing: -2px; }
  h2 { font-size: clamp(32px,7.5vw,44px); letter-spacing: -1px; }
  .floating { font-size: 11px; letter-spacing: .2px; right: 0; }
  .studio aside { display: none; }
  .studio-bar>span { font-size: 10px; }
  .preview { height: 250px; }
  .lyrics { font-size: 22px; }
  .lyrics small { font-size: 18px; }
  .track>span { width: 88px; font-size: 10px; letter-spacing: 0; }
  .timeline { padding-inline: 10px; }
  .track { gap: 8px; }
  .result { right: 0; bottom: 47px; }
  .demo-label { font-size: 13px; }
  .promise>span { font-size: 12px; }
  .promise p { font-size: 15px; }
  .promise i { display: none; }
  .section { padding-top: 72px; }
  .heading { margin-bottom: 24px; }
  .step { padding: 18px 14px; }
  .step h3 { font-size: 19px; }
  .process-art { gap: 10px; }
  .source-file { width: 92px; }
  .connection { width: 14px; }
  .output-files span { display: block; font-size: 11px; margin: 0; }
  .output-files div { text-align: center; min-width: 124px; padding: 7px; line-height: 1.5; }
  .timed-words { font-size: 21px; }
  .caption { gap: 12px; padding: 20px; }
  .caption p { font-size: 15px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature { padding: 25px; }
  .formats { flex-wrap: wrap; gap: 12px; }
  .pricing { grid-template-columns: 1fr; }
  .join { padding: 28px 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact { line-height: 1.7; }
  .legal { padding-top: 28px; }
  .legal h2 { margin-top: 32px; }
  footer div { gap: 12px 20px; }
}
.join .account-button{width:auto;margin-top:24px}.join .account-explainer{color:#b8c3d6;font-size:15px;line-height:1.65;max-width:44ch;margin:12px 0 0}