/* Consistent side gutters and type scale for iPad-sized viewports. */
#root section.from-slate-900 .grid.max-w-4xl > .group > .relative > .w-10.h-10 { margin-inline: auto; }

@media (min-width: 769px) and (max-width: 1279px) {
    #root section > .container,
    #root section > .relative.max-w-\[1400px\] { padding-inline: clamp(2rem, 4vw, 3rem); }
    #root section h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.2; }
    #root section:first-child h1 { font-size: clamp(2.75rem, 4.5vw, 3.5rem); line-height: 1.12; }
    #root section:first-child > .container { gap: 2rem; }
    #root [data-story-panels] { padding-inline: 2.5rem; }
}

/* Give the live document preview the full tablet width in portrait. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    #root section:has(h1) > .container { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
    #root section:has(h1) { padding-top: 3rem; }
}

/* OCR page refinement: tablet portrait only. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    body:has(#root) { --ocr-portrait-gutter: clamp(3rem, 6vw, 4rem); }
    #root section { scroll-margin-top: 96px; }
    #root section:not([data-document-story]):not(:has(.card-scanner-wrapper)) { padding-block: 4rem; }
    #root section > .container,
    #root section > .relative.max-w-\[1400px\] { padding-inline: var(--ocr-portrait-gutter); }
    #root section:has(.card-scanner-wrapper),
    body:has(#root) .site-footer .footer-inner { padding-inline: var(--ocr-portrait-gutter); }
    body:has(#root) header .header-content { padding-inline: var(--ocr-portrait-gutter) !important; }
    #root section h2 { font-size: clamp(2rem, 3.6vw, 2.5rem); line-height: 1.2; text-wrap: balance; }
    #root section > .container.mb-12 { margin-bottom: 0; }

    #root section:has(h1) { min-height: auto; }
    #root section:has(h1) h1 { font-size: 3rem; line-height: 1.12; text-shadow: none; }
    #root section:has(h1) h2 { text-align: left; font-size: 2rem; margin-bottom: 1rem; }
    #root section:has(h1) > .container { gap: 2.5rem; }
    #root section:has(h1) > .container > .relative.w-full { order: -1; }
    #root section:has(h1) button { min-height: 44px; }

    /* Two columns give all six steps space for readable captions and previews. */
    #root .workflow-steps-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; align-items: stretch; }
    #root .workflow-step-wrapper { width: 100%; min-width: 0; }
    #root .workflow-connector { display: none; }
    #root .workflow-step-card { width: 100%; aspect-ratio: auto; }
    #root .workflow-step-visual { flex: none; height: 320px; }
    #root .workflow-step-visual .iphone-mockup { max-width: 148px; }
    #root .step1-visual img { object-fit: contain; }
    #root .workflow-step-info { padding: 1.25rem; }
    #root .workflow-step-title { font-size: 1.125rem; line-height: 1.4; }
    #root .workflow-step-desc { font-size: 1rem; line-height: 1.5; }

    /* Keep video titles readable at the large tablet boundary too. */
    #root .grid.lg\:grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    #root .grid.lg\:grid-cols-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - .75rem); justify-self: center; }

    /* Reduce the inset within the two comparison columns. */
    #root section > .container > .md\:flex-row > .flex-1 { padding: 2rem; min-width: 0; }
    #root [data-story-panels] { padding-inline: var(--ocr-portrait-gutter); gap: 3rem; }
    #root [data-story-panels] h3 { font-size: 1.5rem; line-height: 1.35; }
    #root [data-story-panels] .text-5xl { font-size: 2.25rem; line-height: 1.2; }
    #root [data-document-story] > .sticky > .absolute.pointer-events-none { display: none; }

    /* Give the dark interactive demo the same generous portrait margin as the surrounding content. */
    #root section.from-slate-900 > .relative.max-w-\[1400px\] { padding-inline: clamp(4rem, 8vw, 5rem); }

    /* The demo's 85vh canvas becomes excessively tall in portrait. */
    #root section:has([class~="h-[85vh]"]) { min-height: auto; }
    #root [class~="h-[85vh]"] { height: 720px; }
    #root [class~="h-[85vh]"] .w-48 { width: 160px; }
    #root [class~="h-[85vh]"] .w-48 + .flex-1 { min-width: 0; padding: 1rem; overflow: auto; }
    #root [class~="h-[85vh]"] .w-48 + .flex-1 > .relative.flex-1 > .relative { transform: scale(.8); }
    #root [class~="h-[85vh]"] .w-48 .cursor-pointer { min-height: 44px; }
    #root [class~="h-[85vh]"] button { min-height: 44px; }

    /* Process tabs remain easy to tap without crowding their labels. */
    #root section.bg-gradient-to-b button { min-height: 44px; }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 > div { padding: 1.5rem; }
    #root section.py-24 > .container > .space-y-12 { margin-bottom: 0; }
    #root section.py-24 .space-y-12 > .flex { gap: 1.5rem; }
    #root section.py-24 .space-y-12 p.italic { color: #64748b; line-height: 1.6; }
}

/* Phone adaptation of the tablet portrait composition. */
@media (max-width: 767px) {
    #root section { scroll-margin-top: 88px; }
    #root section:not([data-document-story]):not(:has(.card-scanner-wrapper)) { padding-block: 3rem; }
    #root section > .container,
    #root section > .relative.max-w-\[1400px\] { padding-inline: 1.25rem; }
    #root section h2 { font-size: 1.75rem; line-height: 1.25; text-wrap: balance; }
    #root section h3 { font-size: 1.25rem; line-height: 1.4; }
    #root section button { min-height: 44px; max-width: 100%; }
    #root section > .container.mb-12 { margin-bottom: 0; }

    #root section:has(h1) { min-height: auto; }
    #root section:has(h1) > .container { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    #root section:has(h1) > .container > .relative.w-full { order: -1; min-width: 0; }
    #root section:has(h1) h1 { font-size: 2rem; line-height: 1.15; text-shadow: none; }
    #root section:has(h1) h2 { text-align: left; font-size: 1.4rem; }
    #root section:has(h1) button { font-size: 1rem; }
    #root section:has(h1) .relative.h-\[600px\] { height: 360px; }
    #root section:has(h1) .relative.h-\[600px\] > .flex.flex-col { flex-direction: row; min-height: 0; }
    #root section:has(h1) .relative.h-\[600px\] > .flex.flex-col > .flex-1 { flex: 1 1 0; min-width: 0; height: 100%; }
    #root section:has(h1) .relative.h-\[600px\] > .flex.flex-col > .flex-1:first-child { border-bottom: 0; border-right: 1px solid #f3f4f6; }
    #root section:has(h1) .relative.h-\[600px\] img[alt="Source"],
    #root section:has(h1) .relative.h-\[600px\] .overflow-y-auto { padding: 2rem .5rem .5rem; }
    #root section:has(h1) .relative.h-\[600px\] .overflow-y-auto p { text-align: center; padding-inline: .5rem; overflow-wrap: anywhere; }
    #root section:has(h1) .overflow-x-auto > button { flex: 0 0 auto; min-width: 88px; font-size: 12px; }

    #root .workflow-steps-scroll { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-inline: 0; }
    #root .workflow-step-wrapper { width: 100%; min-width: 0; }
    #root .workflow-connector { display: none; }
    #root .workflow-step-card { width: 100%; aspect-ratio: auto; }
    #root .workflow-step-visual { flex: none; height: 300px; }
    #root .workflow-step-visual .iphone-mockup { max-width: 148px; }
    #root .step1-visual img { object-fit: contain; }
    #root .workflow-step-info { padding: 1.25rem; }
    #root .workflow-step-title { font-size: 1.125rem; line-height: 1.4; }
    #root .workflow-step-desc { font-size: 1rem; line-height: 1.5; }
    #root .grid.lg\:grid-cols-3 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    #root section > .container > .md\:flex-row > .flex-1 { padding: 1.5rem; min-width: 0; }

    #root [data-story-panels] { padding-inline: 1.5rem; gap: 2.5rem; }
    #root [data-story-panels] > .absolute[class~="w-full"] {
        left: 1.5rem;
        right: 1.5rem;
        width: auto;
    }
    #root [data-story-panels] .flex.items-center.gap-3 > div:last-child { min-width: 0; overflow: hidden; }
    #root [data-story-panels] .flex.items-center.gap-3 .font-bold {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #root [data-story-panels] h3 { font-size: 1.25rem; }
    #root [data-story-panels] .text-5xl { font-size: 1.75rem; line-height: 1.25; }
    #root [data-document-story] > .sticky > .absolute.pointer-events-none { display: none; }

    /* Put the module picker above the demo so documents have a usable canvas. */
    #root section:has([class~="h-[85vh]"]) { min-height: auto; }
    #root [class~="h-[85vh]"] { height: 620px; }
    #root [class~="h-[85vh]"] > .flex.items-center { padding: .75rem; flex-wrap: wrap; }
    #root [class~="h-[85vh]"] > .flex.items-center > .flex.gap-2 { display: none; }
    #root [class~="h-[85vh]"] > .flex.min-h-0 { flex-direction: column; }
    #root [class~="h-[85vh]"] .w-48 { width: 100%; padding-block: .5rem; border-right: 0; border-bottom: 1px solid #e2e8f0; }
    #root [class~="h-[85vh]"] .w-48 > .flex-1 { display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; }
    #root [class~="h-[85vh]"] .w-48 .cursor-pointer { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
    #root [class~="h-[85vh]"] .w-48 + .flex-1 { min-width: 0; padding: .75rem; }
    #root [class~="h-[85vh]"] .w-48 + .flex-1 > .relative.flex-1 > .relative { transform: scale(.42); }

    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 > div { padding: .75rem; min-width: 0; }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 > div:first-child { padding: 0; min-height: 200px; overflow: hidden; }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 > div:first-child > .relative { width: 280px; flex: none; transform: scale(var(--ocr-process-scale, .4)); }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 h3 { font-size: 1rem; }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 p { font-size: .875rem; line-height: 1.5; }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 .inline-flex > .w-8 { flex-shrink: 0; }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 > div:last-child .grid { grid-template-columns: minmax(0, 1fr); }
    #root section.bg-gradient-to-b .grid.md\:grid-cols-2 > div:last-child .grid .flex > div { min-width: 0; overflow-wrap: anywhere; }
    #root section.py-24 > .container > [style*="opacity"],
    #root section.py-24 .space-y-12 > .flex { opacity: 1 !important; transform: none !important; }
    #root section.py-24 > .container > .space-y-12 { margin-bottom: 0; }
    #root section.py-24 .space-y-12 > .flex { gap: 1.5rem; }
    #root section.py-24 .space-y-12 p.italic { color: #64748b; line-height: 1.6; }
    #root section.py-24 button { font-size: 1rem; padding: .875rem 1rem; }

    body:has(#root) header .mobile-menu-toggle { flex-basis: 44px; width: 44px; height: 44px; }
    body:has(#root) header nav.active ul li a:not(.btn-small) { text-align: left; font-weight: 600; padding: .5rem 0; min-height: 44px; }
    body:has(#root) .footer-cta { min-width: 0; }
    body:has(#root) .footer-actions { flex-wrap: nowrap; gap: 8px; }
    body:has(#root) .footer-pill { flex: 1; min-width: 0; justify-content: center; font-size: 12px; padding: 9px 8px; gap: 5px; }
    body:has(#root) .footer-pill img { width: 16px; height: 16px; }
}

@media (min-width: 375px) and (max-width: 479px) {
    #root section.bg-gradient-to-b { --ocr-process-scale: .48; }
    #root [class~="h-[85vh]"] .w-48 + .flex-1 > .relative.flex-1 > .relative { transform: scale(.52); }
}
@media (min-width: 480px) and (max-width: 767px) {
    #root section.bg-gradient-to-b { --ocr-process-scale: .6; }
    #root [class~="h-[85vh]"] .w-48 + .flex-1 > .relative.flex-1 > .relative { transform: scale(.65); }
}

@media (max-width: 639px) {
    #root section.bg-gradient-to-b > .container > .flex > button { display: inline-flex; justify-content: center; align-items: center; }
    #root section.bg-gradient-to-b > .container > .flex > button > .mr-2 { margin-right: 0; }
}

/* Match the automation page: purple branding, transparent at top, glass on scroll. */
body.ocr-page #root > div > nav { display: none; }
body.ocr-page .logo { color: var(--primary-color); text-shadow: none; }
body.ocr-page .logo img { content: url('../images/SYNCFINITY LOGO (B).png'); filter: none; }
body.ocr-page header nav ul li a { color: var(--primary-dark); text-shadow: none; }
body.ocr-page header nav ul li a:after { background: var(--primary-gradient); }
body.ocr-page:has(#root) header .mobile-menu-toggle i { color: var(--primary-color) !important; }