:root { --page-width: 1360px; --page-gutter: 40px; --page-inset: max(var(--page-gutter), calc((100% - var(--page-width)) / 2)); }
body { color: var(--outer-text); }
html { scroll-padding-top: 100px; }
a { color: inherit; text-underline-offset: .2em; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; left: 20px; top: 12px; padding: 12px 18px; background: var(--outer-text); color: var(--outer-bg); border-radius: 10px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: fixed; top: 0; inset-inline: 0; z-index: 30; background: color-mix(in srgb, var(--outer-bg) 92%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--outer-fill) 60%, transparent); }
.nav-inner { height: 86px; padding: 0 var(--page-inset); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.site-brand { display: block; flex-shrink: 0; text-decoration: none; }
/* Crop the transparent PNG padding so its visible left edge follows the grid. */
.site-brand .brand-logo { --brand-image-width: 128px; width: calc(var(--brand-image-width) * 1612 / 1923); aspect-ratio: 1612 / 462; overflow: hidden; }
.site-brand .brand-logo img { inset: auto; left: calc(var(--brand-image-width) * -137 / 1923); top: calc(var(--brand-image-width) * -192 / 1923); width: var(--brand-image-width); height: auto; }
.story-copies { left: var(--page-inset); }
.site-menu { display: flex; align-items: center; gap: 30px; }
.site-menu a { text-decoration: none; font-size: 14px; font-weight: 500; }
.site-menu a:not(.button):hover { color: var(--accent); }
.site-menu a[aria-current='page'] { color: var(--accent); }
.button { display: inline-flex; min-height: 48px; justify-content: center; align-items: center; padding: 0 24px; border: 1px solid var(--outer-text); border-radius: 999px; color: var(--outer-bg); background: var(--outer-text); text-decoration: none; font: 500 15px/1.3 Inter,sans-serif; transition: transform .2s, opacity .2s; }
.button:hover { transform: translateY(-2px); opacity: .85; }
.button.secondary { color: var(--outer-text); background: transparent; border-color: var(--outer-fill); }
.site-menu .button { min-height: 42px; padding-inline: 20px; }
/* One native control keeps all three appearance choices keyboard accessible. */
.theme-picker { display: flex; align-items: center; gap: 16px; }
.theme-label { display: none; font-size: 14px; color: var(--outer-sub); }
.theme-control { position: relative; display: block; }
.theme-control::after { content: ''; position: absolute; right: 15px; top: 17px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.theme-control select { appearance: none; min-height: 42px; width: 108px; padding: 0 32px 0 14px; border: 1px solid var(--outer-fill); border-radius: 999px; background: var(--outer-bg); color: var(--outer-text); font: 500 14px Inter,sans-serif; cursor: pointer; }
.menu-toggle { display: none; }
.demo-stage { position: absolute; inset: 0; opacity: calc(1 - var(--ending,0)); transform: translateY(calc(var(--ending,0) * -45px)) scale(calc(1 - var(--ending,0) * .04)); transform-origin: 50% 55%; }
.ending { position: absolute; inset: 90px 0 0; display: flex; flex-direction: column; padding: 0 var(--page-inset); overflow-y: auto; text-align: center; opacity: var(--ending,0); transform: translateY(calc((1 - var(--ending,0)) * 48px)); pointer-events: none; }
.ending.is-visible { pointer-events: auto; }
.ending-content { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 740px; margin: 0 auto; padding: 32px 0; }
.ending .eyebrow, .page-intro .eyebrow { font: 500 13px/1.5 Inter,sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ending h2 { font: 600 clamp(42px,6vw,80px)/1.02 'Google Sans',sans-serif; letter-spacing: -.055em; margin: 22px 0; }
.ending-description { max-width: 440px; margin: 0 auto; font-size: 18px; line-height: 1.65; color: var(--outer-sub); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.ending-note { margin: 22px 0 0; color: var(--outer-sub); font-size: 13px; }
.site-footer { position: relative; padding: 46px var(--page-inset); border-top: 1px solid var(--outer-fill); background: var(--outer-bg); }
.footer-top { display: flex; align-items: start; justify-content: space-between; gap: 30px; }
.footer-message { color: var(--outer-sub); font-size: 14px; line-height: 1.7; margin: 16px 0 0; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; padding-top: 16px; }
.footer-links a { font-size: 14px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 50px; color: var(--outer-sub); font-size: 12px; line-height: 1.6; }
/* The homepage footer belongs to the final scene, so the sticky stage never
   releases into a separate footer or pushes the closing message out of view. */
.ending-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 24px 0 max(24px, env(safe-area-inset-bottom)); background: transparent; }
.ending-footer .footer-links { padding: 0; gap: 24px; }
.ending-footer-note { display: flex; flex-direction: column; gap: 5px; margin: 0; text-align: right; color: var(--outer-sub); font-size: 11px; line-height: 1.6; }

.page-main { padding: 155px var(--page-inset) 100px; min-height: 75vh; }
.page-intro { max-width: 720px; margin-bottom: 56px; }
.page-intro h1 { font: 600 clamp(36px,5vw,60px)/1.12 'Google Sans',sans-serif; letter-spacing: -.04em; margin: 16px 0 20px; }
.page-intro p:not(.eyebrow) { font-size: 18px; line-height: 1.7; color: var(--outer-sub); }
.page-intro .updated { font-size: 13px !important; }
.document-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 65px; align-items: start; }
.page-toc { position: sticky; top: 115px; display: flex; flex-direction: column; gap: 15px; }
.page-toc a { font-size: 14px; line-height: 1.5; text-decoration: none; color: var(--outer-sub); }
.page-toc a:hover { color: var(--outer-text); }
.prose { max-width: 700px; }
.prose section { margin-bottom: 44px; scroll-margin-top: 120px; }
.prose h2 { font: 600 24px/1.3 'Google Sans',sans-serif; letter-spacing: -.025em; margin: 0 0 16px; }
.prose p, .prose li { font-size: 16px; line-height: 1.8; color: var(--outer-sub); }
.prose strong { color: var(--outer-text); font-weight: 500; }
.prose ul { padding-left: 21px; }
.prose li { padding-left: 4px; margin-bottom: 9px; }
.prose a { color: var(--outer-text); overflow-wrap: anywhere; }
.release-notice { padding: 20px 24px; border: 1px solid var(--outer-fill); border-radius: 14px; margin: 0 0 40px; font-size: 15px; line-height: 1.6; color: var(--outer-sub); }
.support-contact { border: 1px solid var(--outer-fill); border-radius: 20px; padding: 30px; margin-bottom: 44px; }
.support-contact p { margin-bottom: 24px; }
.support-contact .button { color: var(--outer-bg); }
.faq details { border-top: 1px solid var(--outer-fill); padding: 20px 0; }
.faq summary { cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.5; padding-right: 24px; }
.faq details p { margin-bottom: 0; }
@media(min-width:801px) { .viewer { top: 100px; } }
@media(max-width:760px) {
 .nav-inner { height: 72px; }
 .site-brand .brand-logo { --brand-image-width: 108px; }
 .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: none; border: 1px solid var(--outer-fill); border-radius: 50%; width: 44px; height: 44px; color: var(--outer-text); cursor: pointer; }
 .menu-toggle span { height: 1.5px; width: 17px; background: currentColor; transition: transform .2s; }
 .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.75px) rotate(45deg); }
 .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
 .site-menu { position: absolute; top: 71px; left: 0; right: 0; display: none; align-items: stretch; gap: 0; padding: 12px var(--page-inset) 22px; background: var(--outer-bg); border-bottom: 1px solid var(--outer-fill); box-shadow: 0 20px 24px #00000006; }
 .site-menu.is-open { display: flex; flex-direction: column; }
 .site-menu a { padding: 16px 4px; font-size: 16px; }
 .site-menu .button { margin-top: 12px; }
 .theme-picker { justify-content: space-between; padding: 14px 4px; border-top: 1px solid var(--outer-fill); }
 .theme-label { display: block; }
 .ending { inset: 72px 0 0; }
 .ending-content { padding: 24px 0; }
 .ending-footer { flex-direction: column; gap: 14px; padding: 18px 0 max(20px, env(safe-area-inset-bottom)); }
 .ending-footer-note { text-align: center; gap: 3px; }
 .ending-footer .footer-links a { font-size: 13px; }
 .ending h2 { font-size: clamp(40px,9vw,62px); }
 .ending-description { font-size: 16px; max-width: 330px; }
 .cta-actions { flex-direction: column; align-items: center; }
 .cta-actions .button { min-width: 205px; }
 .ending .cta-actions { flex-direction: row; gap: 10px; }
 .ending .cta-actions .button { min-width: 0; padding-inline: 18px; font-size: 14px; }

 .site-footer { padding-block: 36px; }
 .footer-top { flex-direction: column; }
 .footer-links { padding-top: 0; gap: 22px; }
 .footer-bottom { margin-top: 36px; flex-direction: column; gap: 8px; }
 .page-main { padding-block: 120px 65px; }
 .page-intro { margin-bottom: 36px; }
 .page-intro p:not(.eyebrow) { font-size: 16px; }
 .document-layout { display: block; }
 .page-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; border-block: 1px solid var(--outer-fill); padding: 20px 0; margin-bottom: 36px; }
 .prose h2 { font-size: 22px; }
 .support-contact { padding: 24px; }
}
@media(max-width:800px) {
 :root { --page-gutter: 24px; }
 .story-copies { top: 100px; width: calc(100% - 2 * var(--page-inset)); }
}
@media(max-height:700px) and (max-width:800px) { .story-copies { top: 90px; } .viewer { top: 295px; } }
@media(max-height:700px) {
 .ending-content { padding-block: 16px; }
 .ending .eyebrow { margin: 0; font-size: 11px; }
 .ending h2 { font-size: clamp(32px, 5vw, 48px); margin: 14px 0; }
 .ending-description { font-size: 14px; line-height: 1.5; }
 .ending .cta-actions { margin-top: 20px; }
 .ending-note { display: none; }
 .ending-footer { padding-block: 16px; }
}
@media(max-width:360px) {
 .ending .cta-actions { gap: 8px; }
 .ending .cta-actions .button { padding-inline: 14px; font-size: 13px; }
}
@media(prefers-reduced-motion:reduce) { .demo-stage,.ending { transform: none; } .button,.menu-toggle span { transition: none; } }
@media(scripting:none) {
 .scroll-story { height: auto !important; }
 .stage { height: auto; overflow: visible; }
 .demo-stage { position: static; opacity: 1; transform: none; padding: 115px var(--page-inset) 30px; }
 .story-copies { position: static; transform: none; width: min(700px,100%); height: auto; margin: 0; }
 .story-copy { position: static; opacity: 1; margin-bottom: 64px; }
 .story-copy h2 { max-width: none; }
 .prompt-wrap,.services { opacity: 1; transform: none; }
 .story-beat,.followup,.viewer { display: none; }
 .ending { position: static; opacity: 1; transform: none; padding: 70px 24px; pointer-events: auto; }
 .site-menu { display: flex; position: static; padding: 0; box-shadow: none; border: 0; flex-direction: row; gap: 14px; }
 .site-menu a { font-size: 13px; padding: 0; }
 .site-menu .button,/* One native control keeps all three appearance choices keyboard accessible. */
.theme-picker { display: flex; align-items: center; gap: 16px; }
.theme-label { display: none; font-size: 14px; color: var(--outer-sub); }
.theme-control { position: relative; display: block; }
.theme-control::after { content: ''; position: absolute; right: 15px; top: 17px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.theme-control select { appearance: none; min-height: 42px; width: 108px; padding: 0 32px 0 14px; border: 1px solid var(--outer-fill); border-radius: 999px; background: var(--outer-bg); color: var(--outer-text); font: 500 14px Inter,sans-serif; cursor: pointer; }
.menu-toggle { display: none; }
}
.scroll-story { position: relative; }
.section-anchor { position: absolute; top: calc(var(--intro-scroll, 1.6) * 100svh + 100px); }
.ending-anchor { position: absolute; top: calc(100% - 100svh); }

/* The introduction and the stories share one phone and one scroll timeline. */
.hero { position: absolute; z-index: 3; left: var(--page-inset); top: 50%; width: min(48vw, 660px); opacity: var(--hero-opacity, 1); transform: translateY(calc(-50% + var(--hero-y, 0px))); will-change: transform, opacity; }
.hero-eyebrow { margin: 0 0 25px; color: var(--accent); font: 400 10px/1.5 'JetBrains Mono',monospace; letter-spacing: 1.2px; text-transform: uppercase; }
.hero h1 { font: 600 clamp(48px, 6.2vw, 88px)/1.02 'Google Sans',sans-serif; letter-spacing: -.055em; }
.hero-description { max-width: 405px; margin: 26px 0 28px; color: var(--outer-sub); font: 400 17px/1.65 Inter,sans-serif; letter-spacing: -.15px; }
.hero-cta { gap: 28px; }
.hero-cta span { font-size: 20px; font-weight: 400; }
.hero-note { margin: 17px 0 0; color: var(--outer-sub); font-size: 11px; line-height: 1.5; }
.story-copies { opacity: var(--intro-story-opacity, 0); translate: 0 var(--intro-story-y, 28px); }
.story-copies:focus { outline: none; }
.viewer { transform: translateY(calc(var(--viewer-offset, 0px) + var(--intro-phone-y, 24px))) scale(calc(var(--viewer-scale, 1) * var(--intro-phone-scale, .94))); }
@media (max-width:800px) {
 .hero { top: 110px; width: calc(100% - 2 * var(--page-inset)); transform: translateY(var(--hero-y, 0px)); }
 .hero-eyebrow { font-size: 9px; margin-bottom: 16px; letter-spacing: .7px; }
 .hero h1 { font-size: clamp(40px, 7vw, 56px); }
 .hero-description { max-width: 440px; font-size: 14px; line-height: 1.55; margin: 17px 0 20px; }
 .hero-cta { min-height: 44px; font-size: 13px; padding-inline: 20px; gap: 24px; }
 .hero-note { display: none; }
 .viewer { transform: translateY(calc(var(--viewer-offset, 0px) + var(--intro-phone-y, 24px) * 2.5)) scale(calc(var(--viewer-scale, 1) * var(--intro-phone-scale, .94))); }
}
@media (max-height:740px) and (max-width:800px) {
 .hero { top: 95px; }
 .hero-eyebrow { margin-bottom: 11px; font-size: 8px; }
 .hero h1 { font-size: 36px; }
 .hero-description { font-size: 13px; line-height: 1.45; margin: 13px 0 14px; max-width: 380px; }
 .hero-cta { min-height: 40px; }
}
@media (max-height:600px) and (min-width:801px) {
 .hero { top: 56%; }
 .hero h1 { font-size: 52px; }
 .hero-eyebrow { margin-bottom: 15px; }
 .hero-description { margin-block: 18px; font-size: 15px; }
}
@media (prefers-reduced-motion:reduce) {
 .hero { will-change: auto; }
 .story-copies { translate: none; }
}
@media (scripting:none) {
 .hero { position: static; transform: none; width: min(660px,100%); opacity: 1; margin: 30px 0 90px; }
 .story-copies { opacity: 1; translate: none; }
 .section-anchor { top: 0; }
}