/* PitchPen — warm studio mood. Amber to coral, matching the app's own icon and interface. */
:root{
  --accent:#f2a541;
  --accent-hover:#d98a2b;
  --accent-soft:#f2a54124;
  --accent-2:#f5654a;
}
/* Dark text on amber keeps the buttons and step numbers readable (white on amber fails contrast). */
.btn-primary,.skip-link{color:#17110a}
.loop li::before{color:#17110a;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.check-list li::before{
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f2a541' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center/100% no-repeat;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--accent:#b45309;--accent-hover:#92400e;--accent-soft:#b4530917;--accent-2:#c24028}
  :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:not([data-theme="dark"]) .check-list li::before{
    background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b45309' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center/100% no-repeat;
  }
}
:root[data-theme="light"]{--accent:#b45309;--accent-hover:#92400e;--accent-soft:#b4530917;--accent-2:#c24028}
: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}
:root[data-theme="light"] .check-list li::before{
  background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b45309' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-5'/%3E%3C/svg%3E") center/100% no-repeat;
}

/* ---- PitchPen-specific pieces ---- */
/* Two screenshots side by side (before / after). */
.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);display:flex;align-items:center;gap:.6rem;color:var(--text-muted);
}
.compare-label strong{color:var(--accent);font-weight:600}
.compare-grid .shot-caption{text-align:left}

/* A hum, drawn: the stepped path from wobbly pitch to clean notes. Inline SVG, theme-aware. */
.pitch-figure{
  margin:0;padding:var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  background:var(--bg-elevated);
}
.pitch-figure svg{width:100%;height:auto;display:block}
.pitch-figure .grid-line{stroke:var(--border-subtle);stroke-width:1}
.pitch-figure .curve{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pitch-figure .note{fill:var(--accent);opacity:.32}
.pitch-figure .note-edge{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.7}
.pitch-figure .note-ghost{fill:none;stroke:var(--accent-2);stroke-width:1.4;stroke-dasharray:4 4}
.pitch-figure text{font-family:var(--font-mono);font-size:11px;fill:var(--text-muted)}
.pitch-figure .label-strong{fill:var(--text-primary)}

/* Numbered how-to steps inside a browser-col card. */
.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)}

/* Small label next to a heading or table cell, e.g. "default", "simplest". */
.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);
}

/* Short callout used for the honest "what this is" notes. */
.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)}

@media (max-width:900px){
  .compare-grid{grid-template-columns:1fr}
}