/* Desktop follows the same compact, continuous reading order as mobile. */
.gallery-controls { display: none; }
@media (min-width: 801px) {
 .section-shell, .site-header { width: calc(100% - 96px); max-width: 1240px; }
 .site-header { height: 92px; gap: 24px; }
 .desktop-nav { gap: 24px; }
 .desktop-nav a { white-space: nowrap; }
 .opening { min-height: 0; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; padding-block: 56px 64px; }
 .opening-copy, .opening-projects { min-width: 0; }
 .opening-projects { min-height: 420px; }
 .opening-actions { margin-top: 24px; }
 .chronology { padding-bottom: 64px; }
 .chronology-intro { padding: 28px 0 24px; }
 .chronology-layout { display: block; }
 .phase-nav-wrap { position: sticky; top: 0; padding: 8px 0 16px; margin-bottom: 24px; background: #f5f4eff7; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
 .phase-nav { display: grid; grid-template-columns: repeat(var(--phase-count,4),minmax(0,1fr)); gap: 0; }
 .phase-tab { flex-direction: column; align-items: center; text-align: center; padding: 12px 8px 8px; gap: 10px; min-height: 0; }
 .phase-tab::before { left: calc(-50% + var(--dot-size) / 2 + 5px); right: calc(50% + var(--dot-size) / 2 + 5px); top: calc(12px + var(--dot-size) / 2); bottom: auto; width: auto; height: 1px; }
 .phase-tab:first-child::before { display: none; }
 .phase-tab:last-child::before { bottom: auto; }
 .phase-label strong { min-height: 2.9em; }
 .chapters { padding: 0; margin: 0; }
 .chapter { padding: 0; }
 .chapters .chapter .chapter-content { padding: 32px; border-radius: 18px; }
 .chapters .chapter .chapter-lead, .chapters .chapter .agency-context { max-width: 72ch; }
 .phase-pagination { margin-top: 24px; padding-top: 16px; }
 .technical-roles { margin-top: 24px; gap: 12px; }
 .technical-roles > div { grid-template-columns: 104px minmax(0,1fr); padding: 20px 24px; }
 .agency-examples { gap: 20px; margin-top: 24px; }
 .agency-account { padding: 22px; gap: 16px; }
 .chapter-content > .case-link { margin-top: 24px; }
 .chapters .ecosystem-launcher { margin-top: 24px; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr); align-items: stretch; }
 .chapters .ecosystem-launcher .ecosystem-node { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto minmax(0,1fr) 208px auto; gap: 12px; padding: 22px; min-width: 0; }
 .chapters .ecosystem-node .node-role, .chapters .ecosystem-node .node-name, .chapters .ecosystem-node .node-purpose { margin: 0; min-height: 0; }
 .chapters .ecosystem-node .node-preview { height: 208px; margin: 0; align-self: center; }
 .chapters .ecosystem-node .node-action { margin: 0; padding-top: 12px; }
 .ecosystem-launcher .device-laptop { width: 100%; max-width: 230px; }
 .ecosystem-launcher .preview-wpay .device-terminal { width: 82px; transform: rotate(5deg) scale(.84); }
 .ecosystem-launcher .preview-app img { width: 80px; height: auto; top: 0; }
 .contact-section { padding-block: 64px 24px; }
 .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; margin-top: 24px; }
 .contact-copy > p { max-width: 50ch; margin-bottom: 24px; }
 .contact-channels { max-width: none; }
 .contact-section footer { margin-top: 48px; padding-top: 24px; padding-bottom: 0; }
 /* Cases share a bounded reading width and the same section rhythm. */
 #case-dialog { width: min(1180px,calc(100vw - 64px)); max-height: calc(100dvh - 48px); }
 .dialog-bar { padding-inline: 40px; }
 .story { padding: 40px; }
 .story > h2 { margin: 0 0 20px; max-width: 900px; }
 .story-intro { max-width: 78ch; }
 .story-columns { gap: 20px; margin-top: 32px; padding-top: 0; border: 0; }
 .story-columns > div { padding: 22px; border: 1px solid #d5dccb; border-radius: 14px; background: #edf1e7; min-width: 0; }
 .story-columns h3 { margin-bottom: 12px; }
 .story-product { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px 24px; align-items: center; margin-top: 40px; }
 .story-product > .story-section-title { grid-column: 1; margin: 0; }
 .gallery-controls { display: inline-flex; align-items: center; gap: 8px; grid-column: 2; }
 .gallery-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #bdcbb0; border-radius: 50%; color: var(--ink); background: transparent; }
 .gallery-controls button:hover:enabled { background: var(--lime); }
 .gallery-controls button:disabled { opacity: .3; cursor: default; }
 .gallery-controls svg { display: block; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
 .story-media { grid-column: 1/-1; min-width: 0; width: 100%; margin: 0; padding: 4px 0 16px; gap: 20px; }
 .story-image > figure > button:hover img { transform: none; }
 .story-comparison { margin: 40px 0; padding: 32px; gap: 40px; }
 .story-client-example { margin-top: 40px; }
 .story-client-example .account-links { margin-top: 24px; gap: 20px; }
 .story-client-example .account-link { display: flex; align-items: center; gap: 16px; padding: 22px; }
 .story-client-example .account-link > div { flex: 1; }
 .story-client-example .account-link > i { margin-left: auto; }
 .story-closing { margin-top: 24px; }
 .ana-story { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); grid-template-rows: auto 1fr; gap: 24px 32px; margin-top: 40px; padding: 32px; border: 1px solid #d5dfca; border-radius: 18px; background: #e6ecdf; }
 .ana-story > header { grid-column: 1; grid-row: 1; max-width: none; margin: 0; }
 .ana-story > header p { line-height: 1.7; }
 .ana-story-layout { display: contents; }
 .ana-story-copy { grid-column: 1; grid-row: 2; align-self: start; }
 .ana-demo-media { grid-column: 2; grid-row: 1/3; align-self: center; padding: 0; background: transparent; gap: 16px; }
 .ana-demo-media figure { display: flex; flex-direction: column; align-items: center; }
 .ana-demo-media video, .ana-result { width: 100%; max-width: 197px; height: 420px; object-fit: contain; }
 .ana-demo-media video { aspect-ratio: auto; }
 .ana-result img { width: 100%; height: 100%; object-fit: contain; }
 .ana-demo-media figcaption { width: 100%; max-width: 197px; }
 .bo-transformation { margin-top: 40px; }
 .payment-demo { margin-top: 40px; padding: 32px; }
 .capture-walkthrough { max-width: 800px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; }
 .capture-guidance { max-width: 340px; }
 .story-custom.acquisition-story { padding: 32px; gap: 40px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
 .section-shell, .site-header { width: calc(100% - 64px); }
 .site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; height: auto; min-height: 124px; padding-block: 20px; gap: 20px 24px; }
 .site-header > .wordmark { grid-column: 1; grid-row: 1; }
 .site-header > .header-actions { grid-column: 2; grid-row: 1; }
 .desktop-nav { grid-column: 1/-1; grid-row: 2; justify-content: center; gap: 32px; }
 .opening { gap: 32px; padding-block: 48px; }
 .opening-projects { min-height: 390px; }
 .chapters .ecosystem-launcher .ecosystem-node { padding: 18px; }
 .chapters .ecosystem-launcher .node-role { min-height: 3em; }
 .dialog-bar { padding-inline: 28px; }
 .story { padding: 32px 28px; }
 .story-columns { gap: 16px; }
 .story-columns > div { padding: 18px; }
 .ana-story { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 24px; gap: 24px; }
 .ana-demo-media video, .ana-result { height: 340px; }
 .payment-demo { padding: 24px; }
}

/* Social links use a centred dialog on desktop; mobile retains its sheet. */
@media(min-width:801px) {
 #ms-socials { inset: 0; margin: auto; width: min(520px,calc(100% - 64px)); height: fit-content; max-height: calc(100dvh - 64px); padding: 32px; border: 1px solid #d0d8c7; border-radius: 20px; box-shadow: 0 24px 80px #10271e30; }
 #ms-socials .sheet-handle { display: none; }
 #ms-socials header { gap: 24px; }
 #ms-socials .sheet-close { background: transparent; border: 1px solid #cbd4c0; transition: background .2s; }
 #ms-socials .sheet-close:hover { background: #e6eadf; }
 #ms-socials .sheet-social-links { margin-top: 28px; gap: 16px; }
 #ms-socials .sheet-social-links a { padding: 18px; border-radius: 10px; }
 #ms-socials[open] { animation: social-dialog-in 240ms var(--ease) both; }
 #ms-socials.is-closing { animation: social-dialog-out 220ms var(--ease) both; }
 @keyframes social-dialog-in { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
 @keyframes social-dialog-out { to { transform: translateY(8px) scale(.98); opacity: 0; } }
}
@media(min-width:801px) and (prefers-reduced-motion:reduce) {
 #ms-socials[open], #ms-socials.is-closing { animation: none; }
}

@media(min-width:801px) {
 .story-product .story-image figure > button { width: fit-content; max-width: 100%; height: auto; max-height: 360px; margin-inline: auto; overflow: hidden; background: transparent; }
 .story-product .story-image figure > button > img { display: block; width: auto; max-width: 100%; height: auto; max-height: 358px; object-fit: contain; transform: none; }
}

@media(min-width:801px) {
 #ecossistema .chapter-content > h2 { max-width: none; white-space: nowrap; }
 #ecossistema .chapter-content > h2 br { display: none; }
 .desktop-nav { gap: 20px; width: max-content; max-width: 100%; justify-self: center; padding: 0; border: 0; border-radius: 0; background: transparent; }
 .desktop-nav a { position: relative; padding-block: 8px; color: #596550; border-radius: 0; background: transparent; box-shadow: none; transition: color .2s; }
 .desktop-nav a::after { display: block; bottom: 3px; background: #8b9f77; }
 .desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a[aria-current=step] { color: var(--ink); }
 .desktop-nav a[aria-current=step]::after { transform: scaleX(1); }

}

/* A continuous closing section, with the invitation and contact details balanced. */
@media(min-width:801px) {
 .contact-section { padding-block: 64px 28px; }
 .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: center; gap: 80px; margin-top: 28px; }
 .contact-intro { max-width: 480px; }
 .contact-intro p { margin-top: 20px; }
 .contact-grid .contact-channels { max-width: none; }
 .contact-email-address { font-size: var(--type-section); line-height: 1.4; }
 .contact-section footer { margin-top: 56px; padding-top: 24px; }
}
@media(min-width:801px) and (max-width:1100px) {
 .contact-grid { gap: 40px; }
 .contact-email-address { font-size: var(--type-subtitle); }
}

@media(min-width:801px) and (max-width:1280px) {
 .site-header { display: grid; grid-template-columns: minmax(0,1fr) auto; height: auto; min-height: 124px; padding-block: 20px; gap: 16px 24px; }
 .site-header > .wordmark { grid-column: 1; grid-row: 1; }
 .site-header > .header-actions { grid-column: 2; grid-row: 1; }
 .desktop-nav { grid-column: 1/-1; grid-row: 2; justify-content: center; gap: 20px; }
}

/* The laptop anchors the composition; smaller devices share a foreground baseline. */
.ms-hero { min-height: 420px; background: radial-gradient(ellipse at 50% 35%,#f4f7ed,#e7ecdd); }
.ms-hero .project-orbit { width: 76%; height: 32px; aspect-ratio: auto; left: 50%; top: auto; bottom: 48px; transform: translateX(-50%); border: 0; border-radius: 50%; background: #70805a18; filter: blur(14px); }
.ms-hero .project-orbit::before { display: none; }
.ms-hero .hero-bo { position: absolute; z-index: 1; left: 50%; bottom: 86px; width: 68%; max-width: 396px; margin: 0; transform: translateX(-50%); }
.ms-hero .hero-bo .device-laptop { width: 100%; max-width: none; filter: drop-shadow(0 12px 10px #1d2d2324); }
.ms-hero .laptop-display { aspect-ratio: 16/9; }
.ms-hero .laptop-display img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ms-hero .opening-phone { scale: 1; top: auto; width: 18%; max-width: 108px; bottom: 64px; filter: drop-shadow(3px 10px 8px #1d2d2324); }
.ms-hero .hero-terminal { left: 5%; width: 16%; max-width: 94px; transform: rotate(-4deg); z-index: 2; }
.ms-hero .phone-app { left: auto; right: 5%; transform: rotate(4deg); z-index: 2; }
.ms-hero .phone-app img { width: 100%; height: auto; border-width: 3px; border-radius: 13px; object-fit: contain; }
.ms-hero .opening-phone:hover { translate: none; }
@media(min-width:801px) and (max-width:1100px) {
 .ms-hero { min-height: 390px; }
 .ms-hero .hero-bo { bottom: 92px; }
 .ms-hero .opening-phone { bottom: 72px; }
}
@media(max-width:800px) {
 .chronology-intro > p { display: none; }
 .ms-hero { min-height: clamp(260px,62vw,360px); }
 .ms-hero .hero-bo { width: 70%; bottom: 66px; }
 .ms-hero .opening-phone { bottom: 46px; }
 .ms-hero .hero-terminal { width: 17%; }
 .ms-hero .phone-app img { border-width: 2px; border-radius: 8px; }
 .ms-hero .hero-terminal .device-terminal { padding: 5px 3px 6px; border-radius: 8px 8px 10px 10px; box-shadow: 3px 4px 0 #0b151c35,0 7px 12px #0002; }
 .ms-hero .hero-terminal .terminal-printer { height: 8px; margin: 0 0 4px; border-bottom-width: 1px; border-radius: 5px 5px 2px 2px; }
 .ms-hero .hero-terminal .terminal-printer::after { height: 2px; top: 5px; }
 .ms-hero .hero-terminal .terminal-display { border-width: 1px; }
 .ms-hero .hero-terminal .terminal-controls { gap: 2px; margin: 4px 1px 3px; }
 .ms-hero .hero-terminal .terminal-controls i { height: 3px; }
 .ms-hero .hero-terminal .terminal-slot { height: 2px; margin: 4px 5px 0; }
 .ms-hero .laptop-display { border-width: 5px; border-bottom-width: 7px; border-radius: 6px 6px 2px 2px; }
 .ms-hero .project-orbit { bottom: 36px; }
}
@media(min-width:801px) {
 .chronology-layout:has(.chapters[hidden]) .phase-nav-wrap { margin-bottom: 0; }
}