/* Responsive refinements for /v2 only. The homepage keeps its existing layout. */
/* Keep horizontal gestures inside the demo controls, never on the page itself. */
html.v2-document, body.v2-page { overflow-x: clip; overscroll-behavior-x: none; }

@media (max-width: 999px) {
  .v2-page .header { padding-block: 10px; }
  .v2-page .nav-glass { padding-block: 0; }
  .v2-page .header .brand, .v2-page .menu-toggle { min-height: 44px; }
  .v2-page .menu-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
  .v2-page .nav-cta { min-height: 44px; }
  .v2-page .mobile-nav { max-height: calc(100svh - 90px); overflow-y: auto; }
  .v2-page .mobile-nav a { min-height: 48px; display: flex; align-items: center; }
  .v2-page .growth-chapters button { min-height: 44px; }
  .v2-page .agency-motion-control, .v2-page .import-motion-control { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .v2-page .agency-demo-bar { height: 44px; }
  .v2-page .footer-nav a { display: flex; align-items: center; min-height: 44px; line-height: 1.5; }
  .v2-page .footer-nav ul { gap: 2px; }
  .v2-page .footer-top-link, .v2-page .footer-pickaxe, .v2-page .footer-bottom-line .brand { min-height: 44px; }
  .v2-page .text-link { min-height: 44px; }
}
@media (min-width: 680px) and (max-width: 999px) {
  .v2-page .import-section { grid-template-columns: 1fr; gap: 32px; }
  .v2-page .import-section .section-copy { grid-column: 1; grid-row: 1; max-width: 560px; }
  .v2-page .import-section .import-scene { grid-column: 1; grid-row: 2; width: min(100%, 640px); justify-self: center; }
}
@media (max-width: 679px) {
  .v2-page { --section-space: 80px; }
  .v2-page .header.is-scrolled { background: #fff; border-bottom: 1px solid #0000000a; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .v2-page .header.is-scrolled .nav-glass { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .v2-page .nav-wrap { gap: 8px; }
  .v2-page .nav-glass { gap: 4px; padding-inline: 10px 0; }
  .v2-page .nav-cta { padding-inline: 12px; }
  .v2-page .hero { padding-top: 32px; padding-bottom: 36px; }
  .v2-page .hero h1 { font-size: clamp(36px, 9.5vw, 54px); line-height: 1.06; }
  .v2-page .hero-copy { font-size: 16px; line-height: 1.55; margin-top: 22px; }
  .v2-page .hero-actions { flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
  .v2-page .section h2, .v2-page .context-heading h2 { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.1; text-wrap: balance; }
  .v2-page .section-body { font-size: 16px; line-height: 1.6; margin-top: 18px; }
  .v2-page .section { padding-top: 80px; scroll-margin-top: 80px; }

  .v2-page .growth-controls { display: block; padding-top: 12px; }
  .v2-page .growth-chapters { position: relative; display: flex; flex-wrap: nowrap; gap: 7px; padding: 2px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 2px; overscroll-behavior-x: contain; }
  .v2-page .growth-chapters::-webkit-scrollbar { display: none; }
  .v2-page .growth-chapters button { flex: 0 0 auto; font-size: 12px; padding: 10px 13px; min-height: 44px; white-space: nowrap; }
  .v2-page .growth-chapters button:focus-visible { outline-offset: -3px; }

  .v2-page .v2-statement { min-height: 380px; margin-top: 12px; padding-block: 64px; gap: 24px; }
  .v2-page .v2-statement-copy { font-size: 16px; }
  .v2-page .v2-context-section { margin-top: 16px; }
  .v2-page .context-heading > p { font-size: 16px; margin-top: 18px; }
  .v2-page .context-diagram { margin-top: 28px; }
  .v2-page .context-sources { height: 245px; width: 280px; }
  .v2-page .context-agent { padding-block: 16px 24px; gap: 6px; }
  .v2-page .context-agent-mark { width: 60px; height: 60px; border-radius: 17px; }
  .v2-page .context-agent-mark > img { width: 30px; height: 30px; }
  .v2-page .context-agent::before { height: 22px; top: -12px; }
  .v2-page .context-agent::after { height: 18px; }
  .v2-page .context-results { gap: 10px; }
  .v2-page .context-result-page .context-home-preview { height: 150px; }
  .v2-page .context-result-receipt { font-size: 11px; }
  .v2-page .context-result-card { padding: 12px; gap: 9px; }
  .v2-page .context-result-card strong { font-size: 13px; }
  .v2-page .context-result-card p { font-size: 11px; }
  .v2-page .context-steps { gap: 20px; margin-top: 28px; }
  .v2-page .context-step h3 { font-size: 23px; }
  .v2-page .context-step p { margin-top: 6px; font-size: 15px; }

  .v2-page .v2-section-heading { margin-bottom: 24px; }
  .v2-page .v2-case-tabs { touch-action: pan-x pan-y; }
  .v2-page .v2-case-selector { margin-bottom: 12px; }
  .v2-page .v2-case-panel { gap: 24px; }
  .v2-page .v2-case-copy h3 { font-size: clamp(29px, 8vw, 37px); text-wrap: pretty; }
  .v2-page .v2-case-benefits { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; }
  .v2-page .v2-case-benefits li { font-size: 12px; gap: 6px; }
  .v2-page .v2-case-demo { padding: 10px; border-radius: 16px; }

  .v2-page .agency-demo .wf-native-frame { pointer-events: none; }

  .v2-page .import-section { gap: 24px; }
  .v2-page .closing-final { padding-block: 80px; }
  .v2-page .closing-final h2 { font-size: clamp(36px, 10vw, 48px); }
  .v2-page .footer-nav { gap: 28px 20px; }
  .v2-page .footer-nav > div:nth-child(n+3) { grid-column: 1 / -1; }
  .v2-page .footer-nav > div:nth-child(n+3) ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .v2-page .footer-nav h3 { margin-bottom: 8px; }
  .v2-page .footer-nav a { font-size: 14px; }
}
@media (max-width: 359px) {
  .v2-page .nav-cta { padding-inline: 9px; font-size: 11px; }
  .v2-page .nav-cta svg { display: none; }
  .v2-page .nav-glass { padding-left: 8px; }
  .v2-page .growth-chapters button { font-size: 11px; }
  .v2-page .context-result-card { gap: 7px; padding: 10px; }
  .v2-page .context-qualified { padding-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-page .growth-hero .chat-panel, .v2-page .agency-demo .agency-demo-chat { transition: none; }
}

/* The main hero always uses one desktop canvas, scaled to its available width. */
.v2-page .growth-hero { --drawer-width: 476px; min-width: 0; }
  .v2-page .growth-viewport { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: clamp(6px, 1.8vw, 24px); background: #fff; box-shadow: 0 28px 60px -32px #24456655; }
  .v2-page .growth-viewport > .browser-frame { position: absolute; inset: 0 auto auto 0; width: 1200px; max-width: none; height: 750px; padding: 9px; border: 1px solid #ffffffb3; border-radius: 24px; display: flex; flex-direction: column; transform: scale(var(--growth-hero-scale, .25)); transform-origin: top left; box-shadow: none; }
  .v2-page .growth-hero .browser-bar { height: 42px; flex: 0 0 42px; padding: 0 14px 6px; }
  .v2-page .growth-hero .window-dots { gap: 5px; }
  .v2-page .growth-hero .window-dots i { width: 7px; height: 7px; }
  .v2-page .growth-hero .browser-url { left: 50%; max-width: 70%; font-size: 11px; gap: 6px; }
  .v2-page .growth-hero .browser-url svg { width: 12px; height: 12px; }
  .v2-page .growth-hero .editor-toggle { display: inline-flex; min-width: 0; min-height: 30px; height: 30px; padding: 7px 12px; font-size: 11px; gap: 7px; border: 1px solid #dedede; border-radius: 7px; }
  .v2-page .growth-hero .editor-toggle svg { width: 14px; height: 14px; }
  .v2-page .growth-hero .toggle-dot { display: block; }
  .v2-page .growth-hero .demo-layout,
  .v2-page .growth-hero .demo-layout.is-chat-open { display: block; flex: 1; height: 688px; min-height: 688px; padding-right: 0; border-radius: 14px; }
  .v2-page .growth-hero .client-site,
  .v2-page .growth-hero .is-chat-open .client-site { height: 688px; min-height: 688px; }
  .v2-page .growth-hero .chat-panel { position: absolute; inset: 0 0 0 auto; width: 476px; max-width: none; height: auto; aspect-ratio: auto; border: 0; border-left: 1px solid #e5e5e5; border-radius: 0; box-shadow: -16px 0 50px -28px #00000030; transform: translateX(102%); }
  .v2-page .growth-hero .is-chat-open .chat-panel { transform: translateX(0); }
  .v2-page .growth-hero .architecture-nav { height: 78px; padding-inline: 5%; }
  .v2-page .growth-hero .architecture-brand { font-size: 34px; }
  .v2-page .growth-hero .architecture-nav-cta { font-size: 12px; padding: 11px 16px; }
  .v2-page .growth-hero .architecture-content { top: 23%; left: 6%; width: 86%; transform: none; }
  .v2-page .growth-hero .is-chat-open .architecture-content { transform: scale(.77); }
  .v2-page .growth-hero .architecture-headline-stage { font-size: 88px; height: 2.35em; }
  .v2-page .growth-hero .architecture-content > p { display: block; margin-top: 20px; font-size: 15px; line-height: 1.55; }
  .v2-page .growth-hero .architecture-cta { display: inline-flex; margin-top: 24px; padding: 13px 19px; font-size: 13px; gap: 35px; }
  .v2-page .growth-hero .architecture-caption { display: flex; bottom: 26px; font-size: 10px; }
  .v2-page .growth-hero .site-update { left: 31px; right: auto; bottom: 24px; font-size: 10px; padding: 11px 14px; gap: 7px; max-width: calc(100% - 32px); }
  .v2-page .growth-hero .growth-article-nav { height: 78px; padding: 0 5%; }
  .v2-page .growth-hero .growth-article-nav > span:first-child { font-size: 29px; }
  .v2-page .growth-hero .growth-article-nav > span:last-child { display: block; font-size: 12px; }
  .v2-page .growth-hero .growth-article-content { display: block; width: calc(100% - 476px - 10%); max-width: 690px; margin-left: 5%; padding: 30px 0 40px; }
  .v2-page .growth-hero .demo-layout:not(.is-chat-open) .growth-article-content { width: min(690px, 88%); margin-inline: auto; }
  .v2-page .growth-hero .growth-article-content h3 { font-size: 49px; line-height: 1.04; }
  .v2-page .growth-hero .growth-article-deck { display: block; font-size: 13px; line-height: 1.5; margin-top: 15px; }
  .v2-page .growth-hero .growth-article-byline { display: flex; flex-wrap: nowrap; font-size: 9px; gap: 12px; margin: 21px 0; }
  .v2-page .growth-hero .growth-article-content img { height: 205px; }
  .v2-page .growth-hero .growth-article-content h4 { display: block; font-size: 20px; margin-top: 22px; }
  .v2-page .growth-hero .growth-article-content > p:last-child { display: block; font-size: 12px; line-height: 1.6; margin-top: 12px; }

  .v2-page .growth-hero .architecture-links { display: flex; gap: 36px; font-size: 12px; }
  .v2-page .growth-hero .architecture-caption > span:last-child { display: inline; }
  .v2-page .growth-hero .browser-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v2-page .growth-chapters button { min-height: 44px; }

/* Keep all product demonstrations in desktop proportions on smaller screens. */
@media (max-width: 999px) {
  .v2-page .case-demo-browser { display: flex; flex-direction: column; aspect-ratio: 16 / 10; container-type: inline-size; }
  .v2-page .case-demo-bar { flex: none; height: 3.5cqw; padding: 0 1.6cqw; gap: 1.5cqw; }
  .v2-page .case-demo-bar .window-dots { gap: .45cqw; }
  .v2-page .case-demo-bar .window-dots i { width: .6cqw; height: .6cqw; }
  .v2-page .case-demo-url { font-size: 1cqw; gap: .5cqw; }
  .v2-page .case-demo-url svg { width: 1cqw; height: 1cqw; }
  .v2-page .case-demo-url > span { display: inline; margin-left: -.5cqw; }
  .v2-page .case-demo-status { width: .6cqw; height: .6cqw; }
  .v2-page .case-demo-workspace { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .v2-page .case-demo-site { min-height: 0; }
  .v2-page .case-demo-site > .case-paper { position: absolute; inset: 0; min-height: 100%; }
  .v2-page .case-paper-content { zoom: .72; }
  .v2-page .case-project-photo { height: 20cqw; }
  .v2-page .case-site-footer { font-size: 1.3cqw; bottom: 3cqw; }
  .v2-page .case-demo-site > .architecture-preview,
  .v2-page .case-personalized, .v2-page .case-translated { height: 100%; }
  .v2-page .case-demo-sidebar { min-height: 0; overflow: hidden; border-top: 0; border-left: 1px solid #e8e8e8; }
  .v2-page .case-demo-sidebar > img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: top; }
  .v2-page .agency-demo { aspect-ratio: 16 / 10; height: auto; container-type: inline-size; }
  .v2-page .agency-demo-bar { height: 3.5cqw; font-size: 1cqw; padding-inline: 1.6cqw; gap: 1.5cqw; }
  .v2-page .agency-demo-dots { width: 2.8cqw; gap: .45cqw; }
  .v2-page .agency-demo-dots i { width: .6cqw; height: .6cqw; }
  .v2-page .agency-motion-control { width: 4cqw; height: 100%; min-width: 0; min-height: 0; }
  .v2-page .agency-motion-control svg { width: 1.4cqw; height: 1.4cqw; }
}