/* Responsive layout for the current, capture-based landing page. */
.wrap { width: 100%; }
main, section, article, figure, nav, .feature-copy, .mini-copy,
.price-card, .faq-list, .setup li > div, .orbit-menu-copy { min-width: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p, li, dd, summary, .eyebrow { overflow-wrap: anywhere; }
button, a, summary { touch-action: manipulation; }
video { max-width: 100%; }
[hidden] { display: none !important; }
.feature-agents, .feature-pair, .bar-showcase-grid, .lock-scenes,
.setup, .pricing-section, .faq, .build-it-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-agents { grid-template-columns: 1.1fr 1fr; }
.faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.build-it-card { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.agent-statuses, .price-top, .price, .footer-top { flex-wrap: wrap; }
.price-top { gap: 10px; }
.price { column-gap: 16px; row-gap: 0; }
.price > span { white-space: nowrap; }
.buy-button { gap: 16px; }
.buy-button > span { flex-shrink: 0; }
.hero-copy { max-width: 680px; margin-inline: auto; }
.hero-copy strong { display: block; }
.hero-copy strong + br { display: none; }
.eyebrow { line-height: 1.7; }
.orbit-menu-capture img { width: 100%; max-width: 424px; height: auto; max-height: none; }
.orbit-menu-visual { position: sticky; top: 24px; }
.orbit-settings-summary, .mobile-nav, .bar-scroll-hint { display: none; }
.bar-preview-viewport { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 8px; }
.bar-preview-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.bar-preview-viewport button { min-width: 720px; }
.bar-style-preview figcaption { line-height: 1.7; }
.feature-jumps a, .layout-option, .scene, .capture-zoom,
.mini-tabs button, .mini-motion-toggle, .mini-source-link,
.footer-top > button, .footer-top > a:not(.brand), .bar-recording-footer a {
 min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.layout-switch, .scene-options { max-width: 100%; }
.layout-option { justify-content: center; }
.preview-controls { flex-wrap: wrap; }
.capture-provenance { font-size: 11px; }
.details-footnote a { color: var(--accent); text-decoration: underline; }
.footer-top { column-gap: 24px; row-gap: 12px; }
.footer-top > span { flex: 1 1 240px; width: auto; }
.footer-bottom { gap: 12px; }

/* Dialog controls remain reachable on short and narrow displays. */
dialog { max-height: calc(100dvh - 32px); overflow: auto; padding-top: 16px; }
.dialog-tools { display: flex; align-items: center; justify-content: flex-end; gap: 16px;
 position: sticky; top: -16px; z-index: 5; margin-bottom: 16px;
 padding-block: 4px; background: inherit; }
.dialog-tools .close-dialog { position: static; flex: 0 0 44px; width: 44px; height: 44px;
 padding: 0; border-radius: 8px; background: #1e2d29; }
#media-original { margin-right: auto; min-height: 44px; display: inline-flex;
 align-items: center; color: var(--accent); font-size: 13px; text-decoration: underline; }
.media-dialog { width: min(1100px, calc(100vw - 32px)); padding: 12px 20px 20px; }
.media-dialog .dialog-tools { top: -12px; background: #0f1717; }
.media-dialog img, .media-dialog .desktop-capture { width: auto; height: auto;
 max-width: 100%; max-height: 72dvh; object-fit: contain; }
.media-dialog p { overflow-wrap: anywhere; }
.media-dialog pre { max-width: 100%; overflow-wrap: anywhere; }

/* Narrow desktops and tablets: give dense content its own row earlier. */
@media (max-width: 1100px) {
 .nav { padding-inline: 28px; gap: 24px; }
 .nav > nav { gap: 20px; }
 .brand > span { display: none; }
 .shortcuts-section { grid-template-columns: 1fr; gap: 28px; }
 .shortcuts-copy > p { max-width: 760px; }
 .shortcut-row { grid-template-columns: minmax(0, 1fr) auto; }
 .shortcut-row dt > span { max-width: none; }
 .bar-showcase-grid > .bar-orbit-menu { gap: 28px; padding: 28px; }
 .bar-styles-footer, .lock-options { flex-wrap: wrap; gap: 18px; }
 .bar-style-options { gap: 14px; }
 .setup, .pricing-section, .faq { gap: 36px; }
 .feature-copy { padding: 30px; }
 .agent-statuses { gap: 10px 16px; }
}
@media (max-width: 900px) {
 .nav { height: 80px; gap: 12px; }
 .nav > .brand { margin-right: auto; }
 .nav > nav { display: none; }
 .nav > .button.small { min-height: 44px; gap: 12px; font-size: 12px; padding: 10px 14px; }
 .mobile-nav { display: block; position: static; margin: 0; padding: 0; border: 0; }
 .mobile-nav > summary { display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 10px; font-size: 13px; border-radius: 7px;
  border: 1px solid var(--line); color: var(--text); }
 .mobile-nav > nav { position: absolute; top: calc(100% - 4px); right: 28px; left: 28px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 12px; border: 1px solid #b5d5c54d; border-radius: 12px;
  background: #15201f; box-shadow: 0 20px 45px #0009;
  max-height: calc(100dvh - 96px); overflow-y: auto; }
 .mobile-nav:not([open]) > nav { display: none; }
 .mobile-nav nav a { display: flex; align-items: center; min-height: 48px;
  padding: 10px 12px; border-radius: 7px; font-size: 14px; }
 .mobile-nav nav a:hover { background: #b5d5c510; }
 .feature-agents, .pricing-section, .setup, .faq, .build-it-card,
 .bar-showcase-grid > .bar-orbit-menu { grid-template-columns: minmax(0, 1fr); }
 .feature-agents { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
 .bar-showcase-grid > article { padding: 26px; }
 .reality-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .reality-bars { grid-column: 1 / -1; grid-row: 2; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
 .reality-bars .real-bar-detail + div { border-top: 0; padding-top: 0; }
 .reality-details h3 { font-size: 17px; }
 .reality-details p { font-size: 13px; }
 .orbit-menu-visual { position: static; }
 .orbit-menu-copy > p { max-width: none; }
 .orbit-settings-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .orbit-settings-options button { min-height: 48px; padding: 12px; }
 .orbit-settings-options button strong { font-size: 14px; margin: 0; }
 .orbit-settings-options button > span, .orbit-settings-options strong > span { display: none; }
 .orbit-menu-copy > .orbit-settings-summary { display: block; font-size: 14px;
  color: #bfcec6; margin-bottom: 20px; }
 .mini-heading, .wallpaper-heading, .lock-heading { align-items: start; gap: 28px; }
 .mini-heading > p, .wallpaper-heading > p, .lock-heading > p { width: auto; max-width: 45%; }
 .build-it-customize { border-left: 0; border-top: 1px solid var(--line); }
 .pricing-section { max-width: 720px; }
 .pricing-intro > img { display: none; }
 .pricing-intro h2 { font-size: clamp(40px, 6vw, 56px); }
 .price-card { padding: 32px; }
 .price-summary, .price-license, .price-card ul { font-size: 14px; }
 .purchase-note { font-size: 12px; }
 .faq h2 br { display: none; }
 .faq-list summary { font-size: 15px; }
 .faq-list details p { font-size: 14px; }
 .setup p, .setup li p { max-width: none; font-size: 14px; }
 .bar-scroll-hint { display: block; font-size: 11px; margin-top: 10px; color: var(--accent); }
}

/* Phones: readable copy, full-width cards, and comfortable touch controls. */
@media (max-width: 700px) {
 .wrap { padding-inline: clamp(16px, 4vw, 28px); }
 .nav { height: 72px; padding-inline: 16px; gap: 10px; }
 .brand { font-size: 24px; }
 .brand img { width: 30px; height: 30px; }
 .mobile-nav > nav { left: 16px; right: 16px; }
 .hero { padding-top: 36px; }
 .hero h1 { font-size: clamp(32px, 8vw, 54px); letter-spacing: -.055em; line-height: 1.12; }
 .eyebrow { font-size: 10px; }
 .hero > .eyebrow { font-size: 10px; letter-spacing: .12em; }
 .hero-copy { font-size: 15px; line-height: 1.8; max-width: 440px; }
 .hero-copy strong { font-size: 20px; line-height: 1.45; margin-bottom: 12px; }
 .hero-agent-benefits { font-size: 12px; line-height: 1.6; max-width: 360px; }
 .micro { font-size: 11px; }
 .hero-actions .text-button { font-size: 13px; min-height: 44px; }
 .hero-actions .hero-buy { width: min(100%, 320px); }
 .preview-controls { padding: 12px 8px; gap: 12px; }
 .layout-switch { width: 100%; }
 .layout-option { flex: 1; padding: 10px 6px; font-size: 12px; }
 .layout-description { font-size: 12px; max-width: none; line-height: 1.6; min-height: 0; }
 .preview-controls .capture-zoom { min-height: 44px; font-size: 12px; }
 .preview-toolbar { gap: 10px; padding: 8px; }
 .preview-toolbar .scene-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
 .preview-toolbar .scene { font-size: 12px; padding: 10px 8px; }
 .preview-toolbar .scene i { width: 12px; height: 12px; }
 .preview-toolbar > span.capture-edition { font-size: 11px; text-align: center; flex-basis: 100%; }
 .compatibility { gap: 16px; }
 .compatibility > span, .compatibility > div { font-size: 11px; }
 .compatibility > div:last-child { display: block; }
 .intro > p, .feature p, .agent-capabilities p, .music-capabilities p,
 .mini-copy > p, .mini-copy li > span, .bar-showcase-heading > p,
 .bar-showcase-grid article > p, .bar-style-options span, .bar-styles-footer p,
 .orbit-menu-copy > p, .lock-scene-copy p, .lock-options p, .build-it-copy > p,
 .build-it-customize > p, .shortcuts-copy > p, .details-grid p { font-size: 14px; line-height: 1.8; }
 .feature-jumps a { font-size: 12px; padding: 10px 14px; }
 .feature-agents, .feature-pair, .bar-showcase-grid, .lock-scenes,
 .mini-panel, .agent-capabilities, .music-capabilities { grid-template-columns: minmax(0, 1fr); }
 .agent-art:has(.real-agent-image) { min-height: 0; padding: 24px; }
 .agent-art > .real-agent-image { position: static; height: auto !important;
  max-height: 480px; width: auto !important; }
 .feature-copy, .feature-pair > .feature { padding: 28px 24px; }
 .feature-pair > .feature { min-height: 0; }
 .appearance-feature .settings-image { margin-bottom: 24px; }
 .feature-foot { font-size: 12px; padding-bottom: 0; }
 .mini-heading, .wallpaper-heading, .lock-heading { display: block; }
 .mini-heading > p, .wallpaper-heading > p, .lock-heading > p {
  max-width: none; font-size: 14px; margin-top: 20px; }
 .mini-tabs button { font-size: 13px; min-height: 52px; padding: 12px 4px; }
 .mini-tabs button > span { display: none; }
 .mini-copy { padding: 28px 24px; }
 .mini-copy li b { font-size: 14px; }
 .mini-copy > .real-state-note { font-size: 12px; }
 .mini-stage { min-height: 0; padding: 28px 20px 52px; }
 .actual-player-image img { max-height: min(65svh, 480px); }
 .mini-stage-label { font-size: 9px; letter-spacing: .08em; line-height: 1.5; }
 .mini-source-link { font-size: 12px; text-align: center; }
 .mini-explorer-footer { padding: 16px; gap: 12px; }
 .mini-explorer-footer p { font-size: 11px; line-height: 1.6; }
 .mini-explorer-footer .mini-motion-toggle { font-size: 12px; flex: 1 1 130px; }
 .mini-section-note p { font-size: 13px; }
 .bar-showcase-grid > article, .bar-showcase-grid > .bar-orbit-menu,
 .bar-styles, .shortcuts-reference { padding: 24px 20px; }
 .bar-style-options { grid-template-columns: 1fr; gap: 12px; }
 .bar-style-options strong { font-size: 17px; }
 .bar-style-preview figcaption { font-size: 11px; }
 .workspace-recording-stage { min-height: 140px; padding: 32px 0; }
 .orbit-settings-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .orbit-menu-copy .orbit-menu-caption, .orbit-menu-visual > .orbit-menu-caption { font-size: 12px; }
 .shortcut-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
 .shortcut-row dt strong { font-size: 15px; }
 .shortcut-row dt > span { font-size: 13px; }
 .shortcuts-reference > p { font-size: 12px; }
 .shortcut-keys { flex-wrap: wrap; white-space: normal; }
 .shortcut-keys kbd { font-size: 12px; padding: 10px 8px; }
 .shortcuts-copy strong { white-space: normal; }
 .wallpaper-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
 .wallpaper-facts span { font-size: 11px; max-width: none; }
 .wallpaper-facts p { display: block; grid-column: 1 / -1; font-size: 13px; }
 .lock-capture-note, .lock-provenance, .details-footnote { font-size: 11px; }
 .details-grid { gap: 28px 24px; }
 .details-grid h3 { font-size: 18px; }
 .build-it-copy, .build-it-customize { padding: 28px 24px; }
 .price-top { font-size: 11px; }
 .price-badge { font-size: 11px; }
 .price { font-size: 64px; }
 .price > span { font-size: 13px; }
 .price-card { padding: 28px 24px; }
 .price-card ul { gap: 16px; }
 .buy-button { min-height: 52px; font-size: 14px; }
 .last-call h2 { font-size: clamp(30px, 7vw, 44px); }
 .last-call p { font-size: 14px; max-width: 380px; }
 .footer-top { display: flex; padding-block: 24px; gap: 12px 20px; }
 .footer-top > span { flex: 1 1 150px; font-size: 12px; }
 .footer-top .text-button, .footer-top > a:not(.brand) { font-size: 12px; }
 .footer-bottom { font-size: 11px; line-height: 1.8; }
 .footer-bottom span + span { margin-top: 8px; }
 dialog, .media-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 12px 16px 20px; }
 .dialog-tools { top: -12px; }
 .media-dialog img, .media-dialog .desktop-capture { max-height: 65dvh; }
 .media-dialog p { font-size: 12px; }
 #purchase-dialog h2 { font-size: 32px; }
}
@media (max-width: 440px) {
 .reality-details, .reality-bars, .details-grid { grid-template-columns: minmax(0, 1fr); }
 .reality-bars { grid-row: auto; }
 .real-detail-media { height: 300px; }
 .reality-details article { padding: 20px; }
 .details-grid { gap: 28px; }
 .mobile-nav > summary { padding: 10px 8px; }
 .nav > .button.small { padding-inline: 10px; }
 .nav > .button.small > span { display: none; }
 .hero-actions .hero-buy { gap: 12px; padding-inline: 16px; }
 .feature-copy, .feature-pair > .feature, .mini-copy { padding-inline: 20px; }
}
@media (min-width: 1600px) {
 .wrap { max-width: 1400px; padding-inline: 48px; }
 .nav { max-width: 1480px; }
 .hero h1 { font-size: 108px; }
 .hero-copy { font-size: 18px; }
 .bar-showcase-grid > .bar-orbit-menu { gap: 64px; }
}
@media (max-height: 600px) and (orientation: landscape) {
 .media-dialog img, .media-dialog .desktop-capture { max-height: 52dvh; }
 dialog { margin-block: 12px; }
}