/* /ai-song-generator/ — content layer only; header/footer stay from base.html */
.sg-page {
  --sg-bg: #070b10;
  --sg-surface: #0e1720;
  --sg-line: #223040;
  --sg-text: #f1f5f7;
  --sg-muted: #a9b6c1;
  --sg-anchor: #6f93b5;   /* faded blue of the front door in the song cover */
  --sg-accent: #c1f36d;   /* UlazAI action colour */
  --sg-accent-ink: #172009;
  --sg-page: min(1180px, calc(100vw - 40px));
  color: var(--sg-text);
  background: var(--sg-bg);
  font-family: "Avenir Next", Inter, system-ui, sans-serif;
  line-height: 1.6;
}
.sg-wrap { width: var(--sg-page); margin: 0 auto; }
.sg-narrow { max-width: 68ch; }
.sg-wrap.sg-narrow { max-width: none; }
.sg-wrap.sg-narrow > * { max-width: 68ch; }
.sg-page h1, .sg-page h2, .sg-page h3 { font-family: inherit; letter-spacing: -0.02em; line-height: 1.1; color: var(--sg-text); }
.sg-page h1 { font-size: clamp(2.1rem, 5.2vw, 4.1rem); font-weight: 800; margin: 0 0 1.25rem; }
.sg-page h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 750; margin: 0 0 1rem; }
.sg-page h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .4rem; }
.sg-page p { margin: 0 0 1rem; color: var(--sg-muted); }
.sg-page a:not(.sg-btn) { color: var(--sg-text); text-decoration: underline; text-decoration-color: var(--sg-anchor); text-underline-offset: 3px; }

/* hero */
.sg-hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--sg-line); }
.sg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.sg-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sg-anchor) !important; margin-bottom: 1rem !important; }
.sg-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d5dde3 !important; max-width: 56ch; }
.sg-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; }
.sg-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.4rem; border-radius: 10px; font-weight: 700; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.sg-btn-primary { background: var(--sg-accent); color: var(--sg-accent-ink); }
.sg-btn-primary:hover { background: #d4fa8e; }
.sg-btn-ghost { color: var(--sg-text); box-shadow: inset 0 0 0 1px var(--sg-line); }
.sg-btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--sg-anchor); }
.sg-btn:focus-visible, .sg-play:focus-visible, .sg-faq summary:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 3px; }
.sg-facts { font-size: .9rem; }

/* the one product surface: the real song */
.sg-player { margin: 0; background: var(--sg-surface); border-radius: 16px; overflow: hidden; }
.sg-cover { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 800; object-fit: cover; }
.sg-player-body { padding: 1.25rem 1.25rem 1rem; }
.sg-player-label { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-anchor) !important; margin: 0 0 .4rem !important; }
.sg-prompt { margin: 0 0 1.1rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--sg-anchor); color: var(--sg-text); font-size: .98rem; line-height: 1.5; }
.sg-takes { list-style: none; margin: 0; padding: 0; }
.sg-take { display: grid; grid-template-columns: 44px auto 1fr auto; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--sg-line); }
.sg-play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sg-accent); cursor: pointer; display: grid; place-items: center; }
.sg-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--sg-accent-ink); margin-left: 3px; }
.is-playing .sg-icon { width: 12px; height: 14px; border: 0; margin: 0; border-left: 4px solid var(--sg-accent-ink); border-right: 4px solid var(--sg-accent-ink); }
.sg-take-name { font-weight: 700; color: var(--sg-text); }
.sg-bar { height: 3px; background: var(--sg-line); border-radius: 2px; overflow: hidden; }
.sg-bar-fill { display: block; height: 100%; background: var(--sg-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s linear; }
.sg-time { font-variant-numeric: tabular-nums; color: var(--sg-muted); font-size: .9rem; }
.sg-caption { font-size: .82rem; color: var(--sg-muted); margin-top: .7rem; }

/* sections: grouped by whitespace and one hairline, no cards */
.sg-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sg-line); }
.sg-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.sg-lyrics { padding-left: 1.25rem; border-left: 1px solid var(--sg-line); }
.sg-lyrics p { color: var(--sg-text); font-size: 1.02rem; line-height: 1.7; }
.sg-lyrics .sg-lyrics-tag { color: var(--sg-anchor); font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin-bottom: .25rem; }

.sg-steps { counter-reset: sg; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.75rem; max-width: 820px; }
.sg-steps > li { counter-increment: sg; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; }
.sg-steps > li::before { content: counter(sg); grid-row: span 3; font-size: 2rem; font-weight: 800; color: var(--sg-anchor); line-height: 1; }

.sg-table-scroll { overflow-x: auto; margin-top: 1.25rem; }
.sg-table { width: 100%; border-collapse: collapse; font-size: .95rem; word-break: normal; overflow-wrap: normal; hyphens: none; }
.sg-table-prices th, .sg-table-prices td { white-space: nowrap; }
.sg-table th, .sg-table td { text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--sg-line); vertical-align: top; color: var(--sg-muted); }
.sg-table thead th { color: var(--sg-text); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.sg-table tbody th { color: var(--sg-text); font-weight: 650; white-space: nowrap; }
.sg-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sg-table-compact { margin-top: .6rem; }
.sg-table-compact th, .sg-table-compact td { padding: .45rem .9rem .45rem 0; }

.sg-faq { border-bottom: 1px solid var(--sg-line); }
.sg-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 700; color: var(--sg-text); list-style: none; }
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; float: right; color: var(--sg-anchor); font-weight: 400; }
.sg-faq[open] summary::after { content: "–"; }
.sg-faq p { padding-bottom: 1rem; }

.sg-end { border-bottom: 0; }
.sg-end-line { font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--sg-text) !important; font-weight: 700; max-width: 30ch; }

@media (max-width: 860px) {
  .sg-page { --sg-page: calc(100vw - 40px); }
  .sg-hero-grid, .sg-split { grid-template-columns: 1fr; }
  .sg-lyrics { padding-left: 1rem; }
  .sg-table tbody th { white-space: normal; }
  .sg-table-prices { font-size: .88rem; }
  .sg-table-prices th, .sg-table-prices td { padding-right: .6rem; }
  /* edits table: one stacked block per edit instead of three squeezed columns */
  .sg-table-ops thead { display: none; }
  .sg-table-ops tr { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--sg-line); }
  .sg-table-ops th, .sg-table-ops td { border-bottom: 0; padding: 0; }
  .sg-table-ops td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; margin-top: .2rem; }
  .sg-table-ops td:last-child { grid-column: 2; grid-row: 1; color: var(--sg-text); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-btn, .sg-bar-fill { transition: none; }
}