/* Subtitle Studio — creator-tool mood. Indigo from the app icon, teal from the app's own headings. */
:root{
  --accent:#7c80ff;
  --accent-hover:#6366f1;
  --accent-soft:#7c80ff24;
  --accent-2:#4fc8ae;
}
/* Dark text on the lighter dark-mode indigo keeps buttons and step numbers readable. */
.btn-primary,.skip-link,.loop li::before{color:#0e0f26}
.loop li::before{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#4f46e517;--accent-2:#0f766e}
  :root:not([data-theme="dark"]) .btn-primary,
  :root:not([data-theme="dark"]) .skip-link,
  :root:not([data-theme="dark"]) .loop li::before{color:#fff}
  /* The site's teal (--sea) is about 2:1 on a light page; use a darker teal here. */
  :root:not([data-theme="dark"]) .eyebrow,
  :root:not([data-theme="dark"]) .tg-table .yes{color:#0a7566}
}
:root[data-theme="light"]{--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#4f46e517;--accent-2:#0f766e}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .skip-link,
:root[data-theme="light"] .loop li::before{color:#fff}
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .tg-table .yes{color:#0a7566}

/* ---- Subtitle Studio pieces ---- */
.compare-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);align-items:start}
.compare-grid > *{min-width:0}
.compare-label{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--space-3);color:var(--text-muted);
}
.compare-label strong{color:var(--accent);font-weight:600}
.compare-grid .shot-caption{text-align:left}

.hero-shot-wide{margin:0}
.email-box{
  font-family:var(--font-mono);font-size:.85rem;word-break:break-all;
  padding:.7rem 1rem;border-radius:var(--radius-md);border:1px solid var(--border-subtle);
  background:var(--bg-surface);color:var(--text-primary);display:inline-block;
}
.callout{
  padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border-subtle));background:var(--accent-soft);
}
.callout p{color:var(--text-primary);margin:0}
.callout p + p{margin-top:var(--space-3);color:var(--text-secondary)}
.legal-copy-steps{list-style:decimal;margin:0 0 0 1.2rem;color:var(--text-secondary)}
.legal-copy-steps li{margin-bottom:var(--space-3);font-size:.92rem;line-height:1.6;padding-left:.2rem}
.legal-copy-steps strong{color:var(--text-primary)}
.status-note{
  display:inline-block;margin-left:.5rem;vertical-align:middle;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:.18rem .55rem;border-radius:var(--radius-full);color:var(--accent);background:var(--accent-soft);
}
.anim-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.anim-groups > *{min-width:0}
.anim-group{padding:var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-elevated)}
.anim-group h3{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-3)}
.anim-group li{font-size:.9rem;color:var(--text-secondary);padding:.2rem 0}
@media (max-width:1100px){.anim-groups{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.compare-grid{grid-template-columns:1fr}}
@media (max-width:560px){.anim-groups{grid-template-columns:1fr}}