/* Landing page: let Angel's real results carry the explanation. */
.hero { min-height: 100svh; }
.hero h1 { letter-spacing: -0.025em; text-shadow: none; }
.hero p.subtitle { max-width: 570px; text-shadow: none; }
.hero p.coverage-note { font-size: 14px; line-height: 1.5; }
.hero-cta { box-shadow: none; }

.demo-card { width: min(1160px, 100%); padding: clamp(24px, 4vw, 52px); box-shadow: none; }
.demo-header { max-width: 780px; margin: 0 0 32px; text-align: left; }
.demo-layout { grid-template-columns: 1fr; gap: 26px; }
.demo-media { width: 100%; max-width: 1000px; margin-inline: auto; }
.demo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.demo-steps li { align-items: start; }
.demo-steps h3 { line-height: 1.4; }

.bento-section { padding-block: 96px 80px; }
.bento-header { width: min(1120px, 100%); max-width: none; margin: 0 auto 64px; text-align: left; }
.bento-header p { margin-left: 0; }
.bento-grid { width: min(1120px, 100%); grid-template-columns: 1fr; gap: 72px; }
.bento-tile, .bento-tile-wide {
    grid-column: auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center; gap: clamp(24px, 5vw, 72px); padding: 0;
}
.bento-tile:nth-child(2) .bento-copy { order: 2; }
.bento-copy { position: static; padding: 0; transform: none; }
.bento-copy h3 { font-size: clamp(26px, 2.5vw, 36px); }
.bento-copy p { opacity: 1; transform: none; margin-top: 14px; font-size: 17px; }
.bento-visual-frame, .bento-tile-wide .bento-visual-frame,
.source-detail .bento-visual-frame { aspect-ratio: auto; border: 0; box-shadow: none; }
.bento-visual-frame img, .source-detail .bento-visual-frame img { width: 100%; height: auto; object-fit: contain; }
@media (hover: hover) and (pointer: fine) {
    .bento-tile:hover .bento-copy, .bento-tile:focus-within .bento-copy,
    .bento-tile:hover .bento-copy p, .bento-tile:focus-within .bento-copy p { transform: none; }
}
@media (max-width: 768px) {
    .hero { min-height: 100svh; }
    .hero h1 { font-size: clamp(36px, 10vw, 42px); }
    .hero p.coverage-note { margin-top: 22px; }
    .demo-header { margin-bottom: 24px; }
    .demo-header h2 { font-size: clamp(32px, 8vw, 40px); }
    .demo-steps { grid-template-columns: 1fr; gap: 14px; }
    .bento-section { padding: 64px 20px; }
    .bento-header { margin-bottom: 40px; }
    .bento-grid { gap: 48px; }
    .bento-tile, .bento-tile-wide { grid-template-columns: 1fr; gap: 18px; }
    .bento-tile:nth-child(2) .bento-copy { order: 0; }
    .bento-copy p { font-size: 16px; }
}

/* Keep the introduction focused while leaving a clear route to the demo. */
.hero > .hero-demo-link { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.demo-steps li { justify-self: center; }
@media (max-width: 768px) {
    .hero > .hero-demo-link { bottom: 24px; }
    .demo-steps li { justify-self: start; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.image-enlarge { display: none; }
@media (max-width: 768px) {
    .site-header { transition: transform 180ms ease; }
    .site-header.nav-hidden:not(:focus-within) { transform: translateY(-120%); }
    .hero > .hero-demo-link { position: static; transform: none; margin-top: 28px; }
    .image-enlarge { display: block; padding: 12px 16px; color: #1f3d31; background: #f8f9f7; font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}
@media (max-width: 768px) {
    .theme-toggle { transition: transform 180ms ease, opacity 180ms ease; }
    .theme-toggle.nav-hidden:not(:focus) { transform: translateY(-120px); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-toggle { transition: none; }
}

/* Flat surfaces and restrained motion, retaining Angel's existing typefaces. */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
.painted-wrapper { background: #f2f3ef; }
.product-demo-section, html[data-theme="story"] .product-demo-section { background: #526b5d url('/section-2-background.jpg') center / cover; }
html[data-theme="story"] .bento-section {
    background: linear-gradient(to bottom, #e5e3da 65%, #f2f3ef 100%);
}
html[data-theme="light"] footer { background: #f2f3ef; }
@media (prefers-reduced-motion: no-preference) {
    @keyframes landing-enter { from { opacity: .75; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    .hero-content { animation: landing-enter 700ms ease-out both; }
    .demo-media, .bento-visual-frame { transition: transform 300ms ease; }
    .demo-media:hover, .bento-tile:hover .bento-visual-frame { transform: translateY(-4px); }
    .hero-cta:active, .btn-card:active { transform: scale(.97); }
    @supports (animation-timeline: view()) {
        @keyframes landing-reveal { from { opacity: .8; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        .bento-tile { animation: landing-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    }
}

/* Keep the whole demo card in view on desktop without cropping the recording. */
@media (min-width: 769px) {
    .product-demo-section { padding-block: 96px 48px; }
    .demo-card { width: min(100%, 1016px, max(580px, (100svh - 430px) * 1.6 + 72px)); padding: clamp(24px, 3vh, 36px); }
    .demo-header { max-width: none; margin-bottom: 16px; }
    .demo-header h2 { font-size: clamp(34px, 4.4vh, 40px); }
    .demo-header p { margin-top: 8px; }
    .demo-layout { gap: 16px; }
    .demo-media { max-width: 900px; }
    .demo-notes { margin-top: 16px; padding-top: 12px; }
}