/* Appearance changes only: both themes share layout, assets and content. */
:root { color-scheme: dark; }
.theme-toggle {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 1190;
    min-height: 36px;
    min-width: 62px;
    padding: 7px 12px;
    border: 1px solid #3b464a;
    border-radius: 999px;
    background: #141c20;
    color: #e2e6e8;
    font: 600 12px/1.2 var(--font-sans, sans-serif);
    cursor: pointer;
}
.theme-toggle:hover { background: #253129; }
.theme-toggle:focus-visible { outline: 2px solid #c29445; outline-offset: 3px; }
html[data-theme="light"] {
    color-scheme: light;
    --background: #f2f3ef;
    --foreground: #1c2924;
    --muted: #526159;
    --muted-foreground: #526159;
    --border: #d3dbd4;
    --card: #fffefa;
    --dark-background: #f2f3ef;
    --dark-foreground: #1c2924;
    --dark-muted-foreground: #526159;
    --dark-border: #d3dbd4;
    --dark-primary: #286446;
    --amber: #876324;
}
html[data-theme="light"] .hero { background: #f2f3ef; }
html[data-theme="light"] .hero h1 { color: #1f3d31; text-shadow: none; }
html[data-theme="light"] .hero p.subtitle { color: #526159; text-shadow: none; }
html[data-theme="light"] .hero-badge { background: #e7ece3; color: #354d3b; border-color: #cfd9cc; text-shadow: none; }
html[data-theme="light"] .hero p.hero-note,
html[data-theme="light"] .hero p.coverage-note { color: #526159; }
html[data-theme="light"] .coverage-note span { color: #795b27; }
html[data-theme="light"] .hero-cta { background: #1f3d31; color: #fff; box-shadow: 0 8px 24px #1f3d3115; }
html[data-theme="light"] .hero-cta:hover { background: #2a5241; }
html[data-theme="light"] .top-nav-pill { background: #fffefae8; border-color: #d3dbd4; }
html[data-theme="light"] .top-nav-pill .logo-container,
html[data-theme="light"] .top-nav-pill .nav-links a { color: #1c2924; text-shadow: none; }
html[data-theme="light"] .nav-divider { background: #d3dbd4; }
html[data-theme="light"] .nav-links a:hover { background: #e7ece3; }
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .lang-fab-toggle,
html[data-theme="light"] .lang-fab-menu { background: #fffefa; color: #1c2924; border-color: #d3dbd4; }
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .lang-fab-toggle:hover { background: #e7ece3; }
html[data-theme="light"] .lang-fab-toggle svg,
html[data-theme="light"] .lang-fab-option,
html[data-theme="light"] .lang-fab-option.is-active { color: #354d3b; }
html[data-theme="light"] a.lang-fab-option:hover { color: #1c2924; background: #e7ece3; }
html[data-theme="light"] .bento-visual-frame { background: #fffefa; border-color: #d3dbd4; }
html[data-theme="light"] footer {
    background: linear-gradient(#f2f3efdf, #f2f3efed), url('/section-2-background.jpg') center / cover;
    color: #526159;
}
html[data-theme="light"] .footer-feedback,
html[data-theme="light"] .footer-feedback a,
html[data-theme="light"] .footer-links a { color: #354d3b; }
html[data-theme="light"] .back-link:hover { background: #e7ece3; border-color: #b3c2b4; }

/* A fixed progression revealed by scrolling, without scroll-driven animation. */
html[data-theme="story"] .product-demo-section {
    background: linear-gradient(180deg, #0e1317ed, #60766b99), url('/section-2-background.jpg') center / cover;
}
html[data-theme="story"] .dark-sections {
    background: #f2f3ef;
    color-scheme: light;
    --dark-foreground: #1c2924;
    --dark-muted-foreground: #526159;
    --dark-border: #c6d1c7;
    --dark-primary: #286446;
    --amber: #876324;
}
html[data-theme="story"] .bento-section { background: linear-gradient(#a9bcb0, #e0e7de); }
html[data-theme="story"] .bento-visual-frame { background: #fffefa; border-color: #c6d1c7; }
html[data-theme="story"] .dark-sections .hero-cta { background: #1f3d31; color: white; box-shadow: none; }
html[data-theme="story"] .dark-sections .hero-cta:hover { background: #2a5241; }
html[data-theme="story"] .dark-sections .signup-note { color: #526159; }
html[data-theme="story"] footer {
    background: #f2f3ef;
    color: #526159;
}
html[data-theme="story"] .footer-feedback,
html[data-theme="story"] .footer-feedback a,
html[data-theme="story"] .footer-links a { color: #354d3b; }
html[data-theme="story"] .top-nav-pill { background: #141c20ed; }
html[data-theme="story"] .top-nav-pill .logo-container,
html[data-theme="story"] .top-nav-pill .nav-links a { color: #e2e6e8; text-shadow: none; }
html[data-theme="story"] .top-nav-pill .nav-divider { background: #ffffff29; }
/* The source destination is the lower portion of the real result screenshot. */
.source-detail .bento-visual-frame { aspect-ratio: 9 / 2; }
.source-detail .bento-visual-frame img { object-fit: cover; object-position: bottom; }
@media (max-width: 768px) {
    .source-detail .bento-visual-frame { aspect-ratio: 3 / 1; }
}