/* ==========================================================================
   Efkz · páginas de soluções (solucoes/*.html)
   Blocos: hero com navegador + celular, grade de quando, splits com mockup,
   linha do tempo. Animação: solucoes.js acende [data-s] em ordem (.on).
   Mesmo sistema do site.css: só anéis de 1px, nada de sombra projetada.
   ========================================================================== */

/* -------------------------------------------------------------- hero */
.sx-hero { padding-top: clamp(128px, 15vw, 176px); }
.sx-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sx-hero__copy { display: grid; gap: 24px; align-content: start; }
.sx-hero .display { font-size: clamp(38px, 5vw, 60px); }
.sx-hero .hero__actions { margin: 0; }
.sx-badge { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 30px; padding: 0 12px 0 4px; border-radius: var(--radius-full); background: var(--color-pure-white); box-shadow: var(--ring-soft); font-family: var(--font-geist-mono); font-size: 12px; color: var(--color-obsidian); }
.sx-badge a { padding: 3px 10px; border-radius: var(--radius-full); background: var(--color-paper-white); box-shadow: var(--ring-soft); color: var(--color-stone); text-decoration: none; }
.sx-badge a:hover { color: var(--color-obsidian); }
.sx-badge > span[aria-hidden] { color: var(--color-ash); }
.sx-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-terminal-green); box-shadow: 0 0 0 3px rgba(41, 122, 58, .15); }
.sx-hero__tags { display: flex; flex-wrap: wrap; gap: 8px 16px; font-family: var(--font-geist-mono); font-size: 12px; color: var(--color-stone); }
.sx-hero__tags li { display: inline-flex; gap: 8px; }
.sx-hero__tags li::before { content: "✓"; color: var(--color-obsidian); }

/* palco: navegador grande + celular por cima, no canto */
.sx-stage { position: relative; padding-bottom: 14%; }
.sx-stage .dv-browser { width: 86%; }
.sx-stage .dv-phone { position: absolute; right: 0; bottom: 0; width: 26%; animation: sx-float 7s ease-in-out infinite; }
@keyframes sx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* -------------------------------------------------------------- molduras */
.dv-browser { position: relative; border-radius: 10px; background: var(--color-pure-white); box-shadow: var(--ring-card); overflow: hidden; }
.dv-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--color-paper-white); box-shadow: inset 0 -1px 0 var(--color-hairline); }
.dv-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-hairline); box-shadow: inset 0 0 0 1px var(--color-ash); }
.dv-url { margin: 0 auto; transform: translateX(-20px); min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 14px; border-radius: 6px; background: var(--color-pure-white); box-shadow: var(--ring-soft); font-family: var(--font-geist-mono); font-size: 11px; color: var(--color-stone); }
.dv-screen { position: relative; aspect-ratio: 16 / 11; overflow: hidden; font-size: 12px; color: var(--color-obsidian); }

.dv-phone { position: relative; padding: 7px; border-radius: 34px; background: var(--color-obsidian); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 4px var(--color-paper-white); }
.dv-phone__screen { position: relative; aspect-ratio: 9 / 19; border-radius: 27px; background: var(--color-pure-white); overflow: hidden; font-size: 11px; color: var(--color-obsidian); }
.dv-status { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 16px; font-size: 10px; font-weight: 500; }
.dv-island { width: 30%; height: 14px; border-radius: 10px; background: var(--color-obsidian); }
.dv-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 8px; }
.dv-sig i { width: 2.5px; background: var(--color-obsidian); border-radius: 1px; }
.dv-sig i:nth-child(1) { height: 40%; } .dv-sig i:nth-child(2) { height: 70%; } .dv-sig i:nth-child(3) { height: 100%; }

/* mockup sozinho dentro de um split */
.sx-media--browser, .sx-media--phone { display: flex; justify-content: center; }
.sx-media--browser .dv-browser { width: 100%; }
.dv-phone--solo { width: min(300px, 72%); }

/* -------------------------------------------------------------- animação: passos */
.js [data-seq] [data-s] { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.js [data-seq] [data-s].on { opacity: 1; transform: none; }
.js [data-seq] .fx-bar { opacity: 1; transform: scaleY(0); transform-origin: bottom; transition-duration: .7s; }
.js [data-seq] .fx-bar.on { transform: scaleY(1); }
.js [data-seq] .fx-pop { transform: scale(.85); }
.js [data-seq] .fx-pop.on { transform: none; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.js [data-seq] .fx-draw { opacity: 1; transform: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); }
.js [data-seq] .fx-draw.on { stroke-dashoffset: 0; }
.js [data-seq] .fx-grow { opacity: 1; transform: scaleX(0); transform-origin: left; transition-duration: .9s; }
.js [data-seq] .fx-grow.on { transform: scaleX(1); }
.fx-check .ui-check { transition: background-color .3s ease, box-shadow .3s ease; }
.fx-check.on .ui-check { background: var(--color-obsidian); box-shadow: none; }
.fx-check.on .ui-check::after { opacity: 1; }
.js [data-seq] .fx-press.on { animation: sx-press .5s .25s ease; }
@keyframes sx-press { 50% { transform: scale(.94); } }
.ui-flip { position: relative; display: inline-grid; justify-items: end; }
.ui-flip i { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s var(--ease-out); }
.ui-flip i + i { opacity: 0; transform: translateY(4px); }
.fx-flip.on .ui-flip i:first-child { opacity: 0; transform: translateY(-4px); transition-delay: .7s; }
.fx-flip.on .ui-flip i + i { opacity: 1; transform: none; transition-delay: .7s; }
html:not(.js) .ui-flip i:first-child { opacity: 0; }
html:not(.js) .ui-flip i + i { opacity: 1; transform: none; }

/* -------------------------------------------------------------- peças das telas */
.ui-app { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--color-paper-white); }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-top b { font-weight: 500; font-size: 13px; }
.ui-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-pure-white); box-shadow: var(--ring-soft); font-family: var(--font-geist-mono); font-size: 10px; color: var(--color-stone); white-space: nowrap; }
.ui-pill--live i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-terminal-green); animation: sx-pulse 1.6s ease-in-out infinite; }
@keyframes sx-pulse { 50% { box-shadow: 0 0 0 4px rgba(41, 122, 58, .18); } }
.ui-panel { flex: none; border-radius: 8px; background: var(--color-pure-white); box-shadow: var(--ring-soft); padding: 10px 12px; }
.ui-cap { font-family: var(--font-geist-mono); font-size: 10px; color: var(--color-stone); margin-bottom: 8px; }
.ui-tag { display: inline-block; padding: 1px 7px; border-radius: var(--radius-full); background: rgba(41, 122, 58, .1); color: var(--color-terminal-green); font-family: var(--font-geist-mono); font-size: 9.5px; font-style: normal; white-space: nowrap; }
.ui-tag--off { background: var(--color-paper-white); color: var(--color-stone); box-shadow: var(--ring-soft); }
.ui-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--color-obsidian); animation: sx-pulse-dark 1.6s ease-in-out infinite; }
@keyframes sx-pulse-dark { 50% { box-shadow: 0 0 0 4px rgba(23, 23, 23, .12); } }
.ui-logo { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--color-obsidian); }

/* mapa (consultoria) */
.ui-flow { display: flex; align-items: center; gap: 4px; }
.ui-node { flex: 1; min-width: 0; padding: 6px 3px; border-radius: 6px; background: var(--color-pure-white); box-shadow: var(--ring-soft); text-align: center; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-node--hot { box-shadow: inset 0 0 0 1px var(--color-obsidian); font-weight: 500; }
.ui-arr { flex: none; width: 8px; height: 1px; background: var(--color-ash); }
.ui-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; height: 78px; }
.ui-col { display: flex; flex-direction: column; justify-content: flex-end; height: 78px; gap: 4px; }
.ui-col em { font-style: normal; font-family: var(--font-geist-mono); font-size: 9px; color: var(--color-stone); text-align: center; }
.ui-bar { flex: none; height: calc(var(--h) * .74); border-radius: 4px 4px 2px 2px; background: var(--color-hairline); display: flex; justify-content: center; }
.ui-bar b { font-family: var(--font-geist-mono); font-size: 9px; font-weight: 500; margin-top: -14px; }
.ui-bar--hot { background: var(--color-obsidian); }
.ui-callout { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 10px; border-radius: 6px; background: var(--color-pure-white); box-shadow: inset 0 0 0 1px var(--color-obsidian); font-size: 11px; }

/* matriz (consultoria) */
.ui-matrix { position: relative; flex: 1; border-radius: 8px; background:
  linear-gradient(var(--color-hairline), var(--color-hairline)) 50% 0 / 1px 100% no-repeat,
  linear-gradient(var(--color-hairline), var(--color-hairline)) 0 50% / 100% 1px no-repeat,
  linear-gradient(rgba(41, 122, 58, .06), rgba(41, 122, 58, .06)) 0 0 / 50% 50% no-repeat,
  var(--color-pure-white); box-shadow: var(--ring-soft); }
.ui-q { position: absolute; left: 10px; top: 8px; font-family: var(--font-geist-mono); font-size: 9.5px; color: var(--color-terminal-green); }
.ui-pt { position: absolute; display: inline-flex; align-items: center; gap: 6px; transform-origin: left center; font-size: 10px; white-space: nowrap; }
.ui-pt i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-pure-white); box-shadow: inset 0 0 0 2px var(--color-ash); }
.ui-pt--hot i { box-shadow: none; background: var(--color-obsidian); }
.ui-pt--hot { font-weight: 500; }
.ui-ax { position: absolute; font-style: normal; font-family: var(--font-geist-mono); font-size: 9px; color: var(--color-smoke); }
.ui-ax--x { right: 10px; bottom: 6px; }
.ui-ax--y { left: 10px; bottom: 6px; }

/* celular: tela genérica */
.ui-m { display: flex; flex-direction: column; gap: 10px; padding: 8px 14px 14px; height: calc(100% - 30px); }
.ui-m__eyebrow { font-family: var(--font-geist-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-stone); }
.ui-m__title { margin-top: -6px; font-size: 18px; font-weight: 500; letter-spacing: -.5px; }
.ui-m__q { font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: -.3px; }
.ui-m__foot { margin-top: auto; padding: 8px 10px; border-radius: 8px; background: var(--color-paper-white); box-shadow: var(--ring-soft); font-size: 10.5px; text-align: center; }
.ui-list { display: grid; gap: 6px; }
.ui-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; background: var(--color-paper-white); box-shadow: var(--ring-soft); font-size: 11px; }
.ui-row span { flex: 1; min-width: 0; }
.ui-row b { font-weight: 500; font-family: var(--font-geist-mono); font-size: 10px; }
.ui-check { position: relative; flex: none; width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--color-ash); }
.ui-check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; transition: opacity .2s .1s; }
html:not(.js) .ui-check, .reduce .ui-check { background: var(--color-obsidian); box-shadow: none; }
html:not(.js) .ui-check::after, .reduce .ui-check::after { opacity: 1; }

/* site sendo montado (desenvolvimento) */
.ui-site { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; background: var(--color-pure-white); }
.ui-site__nav { display: flex; align-items: center; gap: 10px; }
.ui-site__nav span { width: 34px; height: 6px; border-radius: 3px; background: var(--color-hairline); }
.ui-site__nav span:first-of-type { margin-left: auto; }
.ui-site__nav b { padding: 4px 9px; border-radius: var(--radius-full); background: var(--color-obsidian); color: #fff; font-size: 9.5px; font-weight: 500; }
.ui-site__hero { display: grid; gap: 8px; padding: 10px 0 4px; }
.ui-ln { display: block; height: 14px; border-radius: 4px; background: var(--color-obsidian); }
.ui-ln--h { width: 72%; } .ui-ln--h2 { width: 48%; } .ui-ln--t { width: 60%; height: 7px; margin-top: 4px; background: var(--color-hairline); }
.ui-site__btns { display: flex; gap: 6px; margin-top: 6px; }
.ui-site__btns b, .ui-site__btns span { padding: 5px 10px; border-radius: 6px; font-size: 9.5px; font-weight: 500; }
.ui-site__btns b { background: var(--color-obsidian); color: #fff; }
.ui-site__btns span { box-shadow: var(--ring-soft); }
.ui-site__cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-cardsk { border-radius: 8px; background: var(--color-paper-white); box-shadow: var(--ring-soft); }
.ui-toast { position: absolute; right: 14px; bottom: 14px; padding: 7px 12px; border-radius: 8px; background: var(--color-obsidian); color: #fff; font-family: var(--font-geist-mono); font-size: 10.5px; }
.ui-m .ui-toast { left: 14px; right: 14px; text-align: center; }

/* planos (desenvolvimento) */
.ui-plan { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border-radius: 10px; box-shadow: var(--ring-soft); }
.ui-plan span { display: grid; gap: 4px; font-size: 11px; }
.ui-plan b { font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
.ui-plan small { font-size: 9px; color: var(--color-stone); font-weight: 400; }
.ui-plan--on { box-shadow: inset 0 0 0 1.5px var(--color-obsidian); }
.ui-cta { display: block; padding: 10px; border-radius: 10px; background: var(--color-obsidian); color: #fff; text-align: center; font-size: 11.5px; font-weight: 500; }
.ui-m .ui-cta { margin-top: auto; }

/* painel (desenvolvimento / automação) */
.ui-dash { position: absolute; inset: 0; display: grid; grid-template-columns: 44px 1fr; background: var(--color-paper-white); }
.ui-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; background: var(--color-pure-white); box-shadow: inset -1px 0 0 var(--color-hairline); }
.ui-side i { width: 16px; height: 16px; border-radius: 4px; background: var(--color-hairline); }
.ui-side i.on { background: var(--color-ash); }
.ui-side .ui-logo { background: var(--color-obsidian); margin-bottom: 6px; }
.ui-main { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; min-width: 0; }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ui-kpi { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; background: var(--color-pure-white); box-shadow: var(--ring-soft); }
.ui-kpi span { font-size: 10px; color: var(--color-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi b { font-size: 20px; font-weight: 500; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.ui-panel--chart { flex: 1; padding: 10px 12px; }
.ui-panel--chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ui-grid { stroke: var(--color-hairline); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ui-line { stroke: var(--color-obsidian); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }

/* fluxo (automação) */
.ui-fflow { display: flex; align-items: center; }
.ui-fnode { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 9px 8px; border-radius: 8px; background: var(--color-pure-white); box-shadow: var(--ring-soft); }
.ui-fnode b { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-fnode span { font-size: 9px; color: var(--color-stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-fnode--ai { background: var(--color-obsidian); box-shadow: none; }
.ui-fnode--ai b { color: #fff; } .ui-fnode--ai span { color: var(--color-smoke); }
.ui-wire { flex: none; width: 18px; height: 10px; overflow: visible; }
.ui-wire path { stroke: var(--color-obsidian); stroke-width: 1.5; fill: none; }
.ui-logs { flex: 1; display: grid; align-content: start; gap: 7px; font-family: var(--font-geist-mono); font-size: 10.5px; }
.ui-log { display: flex; gap: 8px; }
.ui-log em { font-style: normal; color: var(--color-smoke); }
.ui-ok { color: var(--color-terminal-green); }

/* tabela (automação) */
.ui-table { flex: 1; display: grid; align-content: start; gap: 0; padding: 4px 12px; }
.ui-table li { display: grid; grid-template-columns: 1fr 1fr .9fr auto; align-items: center; gap: 8px; padding: 8px 0; font-size: 10.5px; box-shadow: inset 0 -1px 0 var(--color-hairline); }
.ui-table li:last-child { box-shadow: none; }
.ui-table b { font-weight: 500; }
.ui-table span { color: var(--color-stone); }
.ui-th { font-family: var(--font-geist-mono); font-size: 9px !important; color: var(--color-smoke); }
.ui-th b, .ui-th span, .ui-th em { font-weight: 400; font-style: normal; color: var(--color-smoke); }

/* whatsapp (automação) */
.ui-wa { display: flex; flex-direction: column; height: calc(100% - 30px); }
.ui-wa__head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px; box-shadow: inset 0 -1px 0 var(--color-hairline); }
.ui-wa__head > i { width: 26px; height: 26px; border-radius: 50%; background: var(--color-obsidian); }
.ui-wa__head div { display: grid; }
.ui-wa__head b { font-size: 11.5px; font-weight: 500; }
.ui-wa__head span { font-size: 9px; color: var(--color-terminal-green); }
.ui-wa__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 12px; background: var(--color-paper-white); }
.ui-msg { max-width: 82%; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: var(--color-pure-white); box-shadow: var(--ring-soft); font-size: 10.5px; line-height: 1.35; }
.ui-msg--me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--color-obsidian); color: #fff; box-shadow: none; }
.ui-watag { font-family: var(--font-geist-mono); font-size: 9px; color: var(--color-terminal-green); }

/* quiz (desenvolvimento) */
.ui-prog { height: 4px; border-radius: 2px; background: var(--color-hairline); overflow: hidden; }
.ui-prog i { display: block; width: 60%; height: 100%; border-radius: 2px; background: var(--color-obsidian); }
.ui-opts { display: grid; gap: 6px; }
.ui-opt { padding: 10px 12px; border-radius: 9px; box-shadow: var(--ring-soft); font-size: 11px; }
.ui-opt--pick.on { box-shadow: inset 0 0 0 1.5px var(--color-obsidian); font-weight: 500; transition-delay: .6s; }

/* tela de bloqueio (automação) */
.ui-lock { display: flex; flex-direction: column; gap: 8px; height: calc(100% - 30px); padding: 18px 10px; background: linear-gradient(180deg, var(--color-paper-white), #f0f0f0); }
.ui-lock__time { font-size: 44px; font-weight: 500; letter-spacing: -2px; line-height: 1; text-align: center; }
.ui-lock__date { margin-bottom: 14px; text-align: center; font-size: 10.5px; color: var(--color-stone); }
.ui-notif { display: grid; gap: 3px; padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: var(--ring-soft); }
.ui-notif p { display: flex; justify-content: space-between; font-size: 10px; }
.ui-notif b { font-weight: 500; }
.ui-notif em { font-style: normal; color: var(--color-smoke); font-size: 9px; }
.ui-notif span { font-size: 10.5px; line-height: 1.35; }
.js [data-seq] .ui-notif { transform: translateY(-14px) scale(.97); }

/* -------------------------------------------------------------- grade "faz sentido quando" */
.sx-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sx-feat { display: flex; gap: 16px; align-items: flex-start; padding: 24px; transition: box-shadow .2s ease, transform .2s var(--ease-out); }
.sx-feat:hover { box-shadow: var(--ring-strong); transform: translateY(-2px); }
.sx-feat p { font-size: 17px; line-height: 1.45; color: var(--color-obsidian); }
.sx-feat__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--color-paper-white); box-shadow: var(--ring-soft); font-size: 12px; color: var(--color-obsidian); }
.js .sx-feat.reveal.is-visible { transition-delay: var(--d, 0ms); }

/* -------------------------------------------------------------- split: texto + mockup */
.sx-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.sx-split--inv .sx-split__txt { order: 2; }
.sx-split__txt { display: grid; gap: 20px; align-content: start; }
.sx-split__txt .eyebrow { margin: 0; }
.sx-checks { display: grid; gap: 0; margin-top: 8px; }
.sx-check { display: flex; gap: 12px; padding: 12px 0; box-shadow: inset 0 -1px 0 var(--color-hairline); font-size: 16px; color: var(--color-obsidian); }
.sx-check:first-child { box-shadow: inset 0 1px 0 var(--color-hairline), inset 0 -1px 0 var(--color-hairline); }
.sx-check .mark { font-family: var(--font-geist-mono); color: var(--color-terminal-green); }
.js .reveal .sx-check { opacity: 0; transform: translateX(-8px); }
.js .reveal.is-visible .sx-check { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .reveal.is-visible .sx-check:nth-child(2) { transition-delay: .08s; }
.js .reveal.is-visible .sx-check:nth-child(3) { transition-delay: .16s; }
.js .reveal.is-visible .sx-check:nth-child(4) { transition-delay: .24s; }
.js .reveal.is-visible .sx-check:nth-child(5) { transition-delay: .32s; }

/* -------------------------------------------------------------- linha do tempo */
.sx-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.sx-steps::before, .sx-steps::after { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: var(--color-hairline); }
.sx-steps::after { background: var(--color-obsidian); transform: scaleX(0); transform-origin: left; }
.js .sx-steps.is-visible::after { transform: scaleX(1); transition: transform 1.6s var(--ease-out) .2s; }
html:not(.js) .sx-steps::after, .reduce .sx-steps::after { transform: scaleX(1); }
.sx-step { position: relative; display: grid; gap: 8px; align-content: start; }
.sx-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 50%; background: var(--color-pure-white); box-shadow: var(--ring-strong); font-size: 12px; color: var(--color-obsidian); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.js .sx-steps.is-visible .sx-step__n { background: var(--color-obsidian); color: #fff; box-shadow: none; transition-delay: calc(.3s + var(--i) * .4s); }
html:not(.js) .sx-step__n, .reduce .sx-step__n { background: var(--color-obsidian); color: #fff; box-shadow: none; }
.sx-step strong { font-size: 17px; }
.sx-step > span:last-child { font-size: 15px; color: var(--color-stone); }

/* -------------------------------------------------------------- outras soluções */
.sx-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sx-other { display: grid; gap: 10px; padding: 24px; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s var(--ease-out); }
.sx-other:hover { box-shadow: var(--ring-strong); transform: translateY(-2px); }
.sx-other .eyebrow { margin: 0; }
.sx-other .case__link { margin-top: 6px; }

/* -------------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
  .ui-node { font-size: 9px; }
}
@media (max-width: 960px) {
  .sx-hero__grid, .sx-split { grid-template-columns: minmax(0, 1fr); }
  .sx-split--inv .sx-split__txt { order: 0; }
  .sx-stage { max-width: 640px; }
  .sx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .sx-steps::before, .sx-steps::after { display: none; }
}
@media (max-width: 640px) {
  .sx-feats, .sx-others { grid-template-columns: minmax(0, 1fr); }
  .sx-feat { padding: 20px; }
  .sx-feat p { font-size: 16px; }
  .sx-steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .sx-stage { padding-bottom: 22%; }
  .sx-stage .dv-browser { width: 88%; }
  .sx-stage .dv-phone { width: 32%; padding: 5px; border-radius: 24px; }
  .sx-stage .dv-phone__screen { border-radius: 20px; }
  .dv-screen { font-size: 10px; }
  /* no celular a tela do navegador fica pequena: escala o conteúdo inteiro */
  .dv-browser .dv-screen > * { zoom: .72; }
  .sx-stage .dv-phone__screen { zoom: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-stage .dv-phone { animation: none; }
  .ui-pill--live i, .ui-dot { animation: none; }
}