/* Synlo theme and editorial AI imagery. */
:root {
  color-scheme: light;
  --color-text-faint: #626e7c;
  --header-background: rgba(255,255,255,.94);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #10151d;
  --color-surface: #171e29;
  --color-surface-2: #232e3f;
  --color-text: #f1f5fc;
  --color-text-muted: #b5c0d1;
  --color-text-faint: #a0adbf;
  --color-primary: #75a6ff;
  --color-primary-hover: #95baff;
  --color-primary-soft: rgba(117,166,255,.1);
  --color-border: rgba(208,224,255,.19);
  --color-divider: rgba(208,224,255,.12);
  --color-error: #ff938c;
  --header-background: rgba(16,21,29,.94);
  --shadow-primary: 0 8px 24px rgba(0,0,0,.16);
}
.header {background: var(--header-background)}
.header-inner {max-width:var(--content-wide)}
.header-actions {display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle {
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);min-height:44px;
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:700;color:var(--color-text);
}
.theme-toggle:hover {background:var(--color-surface-2)}
.theme-toggle:active,.btn:active {transform:translateY(1px)}
.theme-glyph {width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);flex-shrink:0}
a:not(.btn):not(.brand) {text-underline-offset:3px}
.legal-body a,.fineprint a {color:var(--color-primary)}
.hero {padding-top:var(--space-20);padding-bottom:var(--space-10)}
.hero::before {display:none}
.hero-inner {padding-inline:var(--space-6)}
.hero-art {
  max-width:var(--content-default);margin:var(--space-10) auto 0;
  padding-inline:var(--space-6);
}
.hero-art img {width:100%;aspect-ratio:16/8;object-fit:contain;object-position:center}
.hero-art figcaption {
  text-align:center;max-width:none;margin-top:var(--space-3);
  color:var(--color-text-faint);font-size:var(--text-xs);
  letter-spacing:.08em;text-transform:uppercase;
}
.ai-artwork {border-radius:var(--radius-xl)}
[data-theme="dark"] .ai-artwork {
  /* The white studio background becomes navy, with blue highlights preserved. */
  filter:invert(1) hue-rotate(180deg) brightness(.9);
  mix-blend-mode:screen;
}
.learning-layout {display:grid;gap:var(--space-10);align-items:center}
.learning-art {margin:0}
.learning-art img {width:100%;aspect-ratio:1/1;object-fit:cover}
.learning-layout p {font-size:var(--text-base)}
.price-badge {top:0;transform:translateY(-50%)}
.pricing-grid {row-gap:var(--space-10)}
.price-card .price-tagline {min-height:5em}
.narrative .fineprint {font-size:var(--text-xs)}
.math-card .math-row span:last-child {flex-shrink:0}
.math-card .math-row.total span {color:var(--color-text)}
.timeline-waste {background:#bd3630}
.timeline-stop {border-color:var(--color-bg)}
[data-theme="dark"] .btn-primary {
  background:#1b66f6;color:#fff;
}
[data-theme="dark"] .btn-primary:hover {background:#185adc}
[data-theme="dark"] .price-badge {background:#1b66f6}
[data-theme="dark"] .callout-warn {border-color:var(--color-border)}
.final-cta {background:var(--color-dark-bg)}
.footer a {color:#b8c3d1}
/* Response-time comparison: one shared event, two unambiguous outcomes. */
.response-comparison {
  margin:var(--space-10) 0 0;border:1px solid var(--color-border);
  border-radius:var(--radius-xl);overflow:hidden;background:var(--color-bg);
}
.comparison-intro {padding:var(--space-8)}
.comparison-kicker {
  display:block;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);
  margin-bottom:var(--space-3);
}
.comparison-intro h3 {font-size:var(--text-xl);margin-bottom:var(--space-5)}
.narrative .comparison-start {
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);
  font-size:var(--text-sm);margin:0;color:var(--color-text-muted);
}
.comparison-start strong {color:var(--color-text)}
.event-dot {width:8px;height:8px;border-radius:50%;background:var(--color-primary);margin-right:var(--space-1)}
.comparison-panels {display:grid;grid-template-columns:1fr 1fr;padding:0 var(--space-8);gap:var(--space-4)}
.response-panel {padding:var(--space-6);border-radius:var(--radius-lg);min-width:0}
.response-manual {background:var(--color-surface);border:1px solid var(--color-border)}
.response-synlo {background:#1b66f6;color:#fff;border:1px solid #1b66f6}
.response-heading {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-sm);font-weight:700}
.response-state {font-size:var(--text-xs);font-weight:500;border:1px solid var(--color-border);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full)}
.response-synlo .response-state {border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.narrative .response-duration {
  font-family:var(--font-display);font-size:clamp(2.5rem,4vw,3.5rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.1;
  margin:var(--space-8) 0 var(--space-2);
}
.response-duration span {font-size:.65em;letter-spacing:-.02em}
.narrative .response-caption {font-size:var(--text-sm);margin:0 0 var(--space-6);color:var(--color-text-muted)}
.response-synlo .response-caption {color:#fff}
.response-bar {height:8px;border-radius:var(--radius-full);background:var(--color-divider);overflow:visible}
.response-bar span {display:block;height:100%;border-radius:inherit}
.response-manual .response-bar span {width:100%;background:#b5514b}
.response-synlo .response-bar {background:rgba(255,255,255,.24)}
.response-synlo .response-bar span {position:relative;width:2.685%;background:#fff}
.response-synlo .response-bar span::after {content:'';position:absolute;right:-4px;top:-2px;width:12px;height:12px;border-radius:50%;background:#fff}
.response-endpoints {display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--text-xs);margin-top:var(--space-3);color:var(--color-text-muted)}
.response-synlo .response-endpoints {color:#fff}
.narrative .response-description {font-size:var(--text-sm);line-height:1.6;margin:var(--space-6) 0 0;color:var(--color-text-muted)}
.response-synlo .response-description {color:#fff}
.comparison-footer {padding:var(--space-6) var(--space-8) var(--space-8)}
.narrative .comparison-footer p {font-size:var(--text-sm);margin:0;color:var(--color-text)}
.comparison-footer strong {color:var(--color-primary)}
.narrative .comparison-footer .comparison-disclaimer {font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-3);max-width:80ch}
@media(max-width:650px){
  .comparison-panels {grid-template-columns:1fr;padding-inline:var(--space-4)}
  .comparison-intro {padding:var(--space-6)}
  .comparison-footer {padding:var(--space-6)}
  .response-panel {padding:var(--space-5)}
}
@media(min-width:900px){
  .learning-layout {grid-template-columns:1.1fr 1fr}
}
@media(max-width:1000px){
  .nav {gap:var(--space-3)}
  .nav a {font-size:var(--text-xs)}
}
@media(max-width:767px){
  .header-inner {padding-inline:var(--space-4)}
  .header-actions {gap:var(--space-2)}
  .header-cta {padding-inline:var(--space-4)}
  .theme-toggle {padding-inline:var(--space-3)}
  .theme-label {display:none}
  .hero {padding-top:var(--space-12)}
  .hero h1 {font-size:clamp(2.5rem,10vw,3.5rem)}
  .hero-art {margin-top:var(--space-6);padding-inline:var(--space-4)}
  .hero-art img {aspect-ratio:4/3}
  .price-card .price-tagline {min-height:0}
}