/* Fluid sizing, content-based breakpoints, and short landscape viewports. */
.section-cta { margin-top: 32px; }
.cta-centered { text-align: center; }
.section-cta .button { max-width: 100%; text-align: left; }
@media (max-width: 600px) {
  .section-cta .button { width: 100%; }
}
:root {
  --page-gutter: clamp(16px, 3vw, 40px);
  --header-height: 88px;
}
html { scroll-padding-top: calc(var(--header-height) + 20px); -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.container { width: min(1200px, calc(100% - 2 * var(--page-gutter))); }
.section { padding-block: clamp(56px, 7vw, 116px); }
h1, h2, h3 { overflow-wrap: break-word; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.3vw, 3.75rem); }
.hero h1 { font-size: clamp(2.15rem, 6.4vw, 5.45rem); margin-inline: 0; }
.hero-content { padding-top: clamp(42px, 6vw, 104px); }
.hero-description { font-size: clamp(1rem, 1.5vw, 1.125rem); }
.hero-review { flex-wrap: wrap; font-size: 12px; }
.eyebrow { font-size: 11px; }
.button { min-height: 48px; font-size: 14px; gap: clamp(12px, 2vw, 28px); }
.button > span, .text-link > span { flex-shrink: 0; }
.text-link { min-height: 44px; font-size: 14px; }
.nav-wrap { height: var(--header-height); gap: 24px; }
.site-header nav { gap: clamp(16px, 2vw, 35px); }
.site-header nav > a:not(.button) { display: flex; align-items: center; min-height: 44px; font-size: 14px; }
.site-header .button-small { min-height: 44px; font-size: 13px; }
.site-header nav > a > span { flex-shrink: 0; }
.heading-row > *, .operation-body > *, .service-panel > *, .method-layout > *,
.about-section > *, .faq-section > *, .footer-main > *, .journey-flow > div,
.step > div, .chat-header > div, .lead-card > div { min-width: 0; }
.service-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.method-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(35px, 7vw, 110px); }
.about-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 95px); }
.faq-section { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); }
.footer-main { grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); }
.heading-row > p, .service-copy > p:not(.eyebrow), .method-intro > p:not(.eyebrow),
.about-copy > p:not(.eyebrow), .step p, .faq-list details > p { font-size: 16px; }
.feature-list, .about-values { font-size: 14px; }
.service-note, .contact-note, .review-source { font-size: 12px; }
.service-copy h3 { font-size: clamp(1.85rem, 3vw, 2.35rem); }
.about-copy h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.service-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-tabs button { min-height: 68px; min-width: 0; font-size: 15px; line-height: 1.4; text-align: left; }
.service-tabs button > span:first-child { font-size: 12px; }
.service-copy { padding: clamp(24px, 3vw, 42px); }
.service-art { padding-inline: clamp(24px, 3vw, 38px); }
.art-caption { font-size: 10px; max-width: calc(100% - 48px); }
.mini-board { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-board > div { min-width: 0; }
.mini-board > div > strong { font-size: 11px; white-space: normal; line-height: 1.6; min-height: 36px; }
.mini-board i { flex-shrink: 0; }
.mini-card { font-size: 13px; overflow-wrap: anywhere; }
.mini-card small, .mini-card > span { font-size: 11px; }
.board-note, .search-result small, .search-result > span { font-size: 12px; }
.opportunity-toast { font-size: 12px; }
.orbit-label { font-size: 12px; }
.operation-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; }
.operation-header { flex-wrap: wrap; }
.operation-header > div { min-width: 0; }
.operation-header img, .chat-avatar, .chat-demo-badge { flex-shrink: 0; }
.demo-label { font-size: 10px; }
.journey-flow { gap: 8px; }
.journey-flow > div { flex: 1; }
.flow-arrow { flex-shrink: 0; }
.journey-flow strong { font-size: 14px; }
.journey-flow small { font-size: 12px; line-height: 1.5; }
.journey-bottom { font-size: 12px; }
.panel-label { font-size: 11px; }
.live-conversation .chat-header strong { font-size: 14px; }
.live-conversation .chat-header small { font-size: 12px; }
.live-conversation .chat-bubble { font-size: 14px; overflow-wrap: anywhere; }
.live-conversation .chat-bubble small, .chat-day { font-size: 11px; }
.chat-transcript { height: clamp(260px, 42svh, 380px); }
.chat-playback { flex-wrap: wrap; align-items: center; }
.chat-playback > span { font-size: 12px; white-space: normal; }
.chat-playback > div { margin-left: auto; flex-wrap: wrap; }
.chat-playback button { min-height: 44px; min-width: 44px; font-size: 13px; }
.live-conversation .lead-card strong { font-size: 12px; }
.live-conversation .lead-card small { font-size: 11px; }
.hero-footnote, .symbol-caption, .step-label, .method-signature > span { font-size: 10px; }
.hero-footnote { flex-wrap: wrap; }
.google-score { flex-shrink: 0; }
.google-score small, .google-score > span { font-size: 12px; }
.review-carousel .review-person strong { font-size: 14px; }
.review-carousel .review-person small { font-size: 12px; }
.review-card blockquote { font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
.review-carousel .review-grid { scroll-padding-block: 0; }
.review-grid:focus-visible { outline-offset: 2px; }
.faq-list summary { min-height: 60px; font-size: 16px; }
.faq-list summary > span { flex-shrink: 0; }
.footer-main > div, .footer-main p { font-size: 14px; }
.footer-main a:not(.brand) { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.footer-label, .footer-bottom { font-size: 12px; }
.footer-bottom > a { font-size: 11px; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }

/* Compact navigation before the full menu starts competing with the logo. */
@media (max-width: 960px) {
  :root { --header-height: 72px; }
  .brand img { width: 150px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--line); border-radius: 5px; flex-shrink: 0; }
  .menu-toggle span { height: 1px; width: 18px; background: var(--text); transition: transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-header nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-height); padding: 16px var(--page-gutter) max(16px, env(safe-area-inset-bottom, 0px)); background: #0b1117; border-bottom: 1px solid var(--line); max-height: calc(100svh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; overscroll-behavior: contain; align-items: stretch; gap: 4px; }
  .site-header nav.is-open { display: flex; flex-direction: column; }
  .site-header nav > a:not(.button) { font-size: 16px; padding: 10px 5px; }
  .site-header nav .button { margin-top: 8px; }
  .service-panel { grid-template-columns: minmax(0, 1fr); }
  .service-art { border-left: 0; border-top: 1px solid var(--line); min-height: 410px; padding: 58px 32px; align-items: stretch; }
  .service-art > div:not(.art-connector, .ai-orbit) { width: min(460px, 100%); margin-inline: auto; }
  .service-tabs button { padding: 16px 12px; gap: 10px; }
  .service-tabs button > span:last-child { display: none; }
  .mini-board { margin-inline: 0; }
  .heading-row { align-items: flex-start; }
  .heading-row > p { max-width: 260px; }
  .method-layout, .faq-section { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .method-intro > p:not(.eyebrow) { max-width: 580px; }
  .method-signature { display: none; }
  .step p { max-width: 100%; }
  .review-carousel .review-grid { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
}

/* Keep the chat readable instead of squeezing two dashboard columns. */
@media (max-width: 760px) {
  .operation-body { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .journey { border-right: 0; padding-right: 0; }
  .journey-heading { font-size: 28px; }
  .journey-flow { justify-content: space-between; }
  .journey-flow > div { flex: 1; }
  .journey-bottom { margin-top: 18px; }
  .live-conversation { border-top: 1px solid var(--line); padding-top: 20px; }
  .chat-transcript { height: clamp(280px, 45svh, 370px); }
  .heading-row { flex-direction: column; gap: 22px; }
  .heading-row > p { max-width: 100%; }
  .heading-row > p br { display: none; }
  .about-section { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-symbol { order: 2; max-width: 500px; width: 100%; margin-inline: auto; }
  .symbol-caption { font-size: 10px; }
  .about-values { gap: 12px 20px; }
  .hero-footnote > span:nth-child(2) { display: none; }
  .hero-actions { flex-wrap: wrap; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .footer-main > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .review-carousel .review-grid { grid-auto-columns: 100%; gap: 14px; }
  .review-carousel .review-card { min-height: 285px; padding: 24px; }
  .review-navigation { justify-content: flex-end; }
  .review-hint { display: none; }
  .review-card blockquote { font-size: 21px; max-width: none; }
  .hero-review > span:last-child { width: 100%; }
  .hero-review .review-divider { display: none; }
  .hero-actions { flex-direction: column; max-width: 360px; margin-inline: auto; }
  .service-tabs button { flex-direction: column; align-items: flex-start; justify-content: flex-start; font-size: 14px; padding-inline: 8px; gap: 6px; }
  .hero .eyebrow { max-width: 330px; margin-inline: auto; }
  .contact-box { padding: 44px 24px; }
  .contact-box h2 { font-size: clamp(2rem, 7.5vw, 2.75rem); }
  .contact-box > p:not(.eyebrow) { font-size: 16px; }
  .contact-box .button { width: 100%; }
  .contact-box > .eyebrow { font-size: 10px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
  .operation-header { padding: 14px 16px; gap: 8px; }
  .operation-header > div { font-size: 12px; }
  .operation-body { padding: 18px; }
  .operation-header .demo-label { margin-left: 27px; }
  .panel-label { font-size: 10px; }
  .journey-flow { gap: 6px; }
  .journey-flow small { font-size: 11px; }
  .live-conversation .chat-header strong { font-size: 13px; }
  .chat-playback > div { gap: 6px; }
  .chat-playback button { font-size: 12px; }
  .service-copy { padding: 25px 20px; }
  .service-art { padding: 54px 20px; }
  .art-caption { left: 20px; font-size: 10px; }
  .service-art .mini-board { width: 100% !important; margin-inline: 0 !important; grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .mini-board > div > strong { margin-bottom: 6px; min-height: 0; font-size: 12px; }
  .mini-card { padding: 12px; font-size: 14px; }
  .mini-card > span { margin-top: 10px; }
  .mini-card small { margin-top: 3px; }
  .crm-art { min-height: 560px; }
  .ai-orbit { width: min(200px, 75%); height: auto; aspect-ratio: 1; outline-offset: 18px; }
  .orbit-label { font-size: 11px; padding: 8px; }
  .label-one { left: -15px; top: 3px; }
  .label-two { right: -16px; top: 100px; }
  .label-three { left: 0; bottom: -14px; }
  .search-result { transform: none; }
  .search-illustration { font-size: 13px; gap: 8px; }
  .symbol-caption { font-size: 9px; }
  .symbol-caption > span { padding-inline: 4px; }
  .about-symbol { padding-inline: 16px; }
  .google-score { flex-wrap: wrap; gap: 12px 20px; min-width: 0; }
  .footer-main { gap: 25px 16px; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 2.1rem; }
  .hero h1 br { display: none; }
  .hero h1 > span { display: block; }
  .service-tabs button { font-size: 13px; padding-inline: 6px; }
  .chat-header { gap: 7px; }
  .chat-demo-badge { font-size: 8px; padding: 3px; }
  .chat-avatar { width: 28px; height: 28px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .symbol-caption { font-size: 8px; }
  .hero-footnote { font-size: 9px; }
}

/* Landscape phones and short notebook windows: use vertical space carefully. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-height: 56px; }
  .nav-wrap { height: var(--header-height); }
  .brand img { width: 135px; }
  .hero-content { padding-top: 28px; }
  .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-block: 16px; }
  .hero-description { font-size: 16px; }
  .hero-actions { margin-top: 20px; flex-direction: row; max-width: none; }
  .hero-review { margin-block: 18px 28px; }
  .section { padding-block: 48px; }
  .chat-transcript { height: 220px; }
  .site-header nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header nav .button { margin-top: 0; grid-column: 1 / -1; }
  .contact-box { padding-block: 36px; }
}
@media (hover: none) {
  .button:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}