/* Seção de funcionalidades reproduzida a partir do print do Figma. */
.features { width: var(--container-width); max-width: calc(100% - 80px); margin: 0 auto; padding: 120px 0 144px; }
.features__index { margin: 0 0 22px; color: #475569; font: 12px/1.4 ui-monospace, monospace; letter-spacing: .8px; }
.features__index span { color: #818cf8; margin-right: 7px; }
.features h2 { margin: 0; font-size: 56px; line-height: 1.13; letter-spacing: -2px; font-weight: 400; }
.features h2 > span { color: #c0cbd8; }
.features__intro { margin: 22px 0 0; color: #94a3b8; font-size: 15px; line-height: 1.65; letter-spacing: -.2px; }
.features__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 274px 274px 262px 262px; gap: 1px; margin-top: 100px; border-block: 1px solid #141b25; }
.feature { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.feature--sales { grid-column: 1; grid-row: 1 / 3; }
.feature--refund { grid-column: 2; grid-row: 1; }
.feature--setup { grid-column: 2; grid-row: 2; }
.feature--retry { grid-column: 1; grid-row: 3; }
.feature--shopify { grid-column: 1; grid-row: 4; }
.feature--integrations { grid-column: 2; grid-row: 3 / 5; }
.feature--refund,
.feature--setup { background: radial-gradient(ellipse at 0 70%, #11182266, transparent 65%), #000; }
.feature--retry { background: radial-gradient(ellipse at 90% 0, #161d2855, transparent 65%), #000; }
.feature--shopify { background: radial-gradient(ellipse at 100% 80%, #141b2655, transparent 70%), #000; }
.feature__copy { padding: 46px 40px; }
.feature__copy > .feature-icon { margin: 12px 0 26px; }
.feature h3 { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 18px; font-weight: 400; line-height: 1.45; letter-spacing: -.45px; }
.feature p { margin: 9px 0 0; font-size: 16px; line-height: 1.55; letter-spacing: -.2px; }
.feature-icon { display: block; flex: 0 0 auto; width: 28px; height: 28px; color: #fff; }
.feature--sales .feature__copy,
.feature--integrations .feature__copy { margin-top: auto; padding-top: 30px; padding-bottom: 40px; }
.feature--sales h3,
.feature--integrations h3 { font-size: 24px; letter-spacing: -.75px; }
.feature--sales p { max-width: 370px; }
.feature__visual { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sale-notices { width: 328px; margin: 46px auto 0; display: grid; gap: 8px; mask-image: linear-gradient(#000 5%, #000c 35%, transparent 100%); }
.sale-notice { display: flex; align-items: center; gap: 12px; position: relative; padding: 12px; min-height: 62px; border: 1px solid #a5b4fc14; border-radius: 8px; background: linear-gradient(125deg, #161b25, #0e1119); }
.sale-notice img { flex-shrink: 0; }
.sale-notice strong,
.sale-notice small { display: block; font-size: 12px; font-weight: 400; line-height: 1.6; }
.sale-notice small { color: #8290a6; }
.sale-notice time { position: absolute; top: 9px; right: 10px; font-size: 12px; color: #566277; }
.feature__badge { position: absolute; top: 23px; right: 23px; padding: 6px 9px; border-radius: 4px; font-size: 12px; line-height: 1; }
.feature--shopify .feature__copy { padding-top: 50px; }
.integration-picker { width: 328px; height: 322px; margin: 50px auto 0; padding: 5px; border: 1px solid #a5b4fc14; border-radius: 18px; background: linear-gradient(#151922, #050608); box-shadow: 0 0 0 3px #ffffff02; mask-image: linear-gradient(#000 30%, transparent 100%); }
.integration-picker__search { height: 45px; border-radius: 12px; display: flex; gap: 12px; align-items: center; padding: 12px; }
.integration-picker__search svg { width: 20px; height: 20px; }
.integration-picker__search > span { width: 1px; height: 14px; background: #dbe1ed; }
.integration-picker__results { padding: 22px 17px; }
.integration-picker__results > small { display: block; font-size: 12px; margin-bottom: 8px; }
.integration-result { display: flex; gap: 8px; align-items: center; height: 34px; font-size: 12px; }
.integration-result small { font-size: 12px; }
.integration-placeholder { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.integration-placeholder--cakto { background: #267357; }
.integration-placeholder--stripe { background: #635bff; }
.integration-placeholder--eduzz { background: #b68b22; }

/* Demonstrações de notificações e busca; não alteram a hero. */
.sale-notices { height: 342px; display: flex; flex-direction: column; }
.sale-notice { flex: 0 0 62px; }
.sale-notice > span { min-width: 0; }
.sale-notice strong { font-size: 12px; }
.integration-picker__search > .search-typed { width: auto; height: auto; font-size: 13px; }
.integration-picker__search { gap: 10px; }
.search-caret { width: 1px; height: 15px; margin-left: -7px; animation: search-blink 1s steps(1) infinite; }
.integration-result[hidden] { display: none; }
.features__header { position: relative; }
.features-motion-paused .search-caret { animation-play-state: paused; }
@keyframes search-blink { 50% { opacity: 0; } }

/* Résultats filtrés: sortie, réagencement et retour en cascade. */
.integration-results-stage { position: relative; height: 216px; }
.integration-results-stage .integration-result { position: absolute; inset: 0 0 auto; height: 34px; padding-inline: 6px; border: 1px solid transparent; border-radius: 6px; transform-origin: left center; transition: background-color .6s ease, border-color .6s ease; }
.integration-picker__search { transition: box-shadow .6s ease, background-color .6s ease; }
.search-typed > span { display: inline-block; }