/* Importaí — home (5 versões sobre uma base: charcoal #1B1E22 + laranja #F26A1B + off-white). Usa shell.css e shop.css. */
.hm{background:var(--imp-bg,#F6F6F4)}
/* 3.0.1: a home encosta no header (hero escuro contínuo) e no rodapé — sem o respiro das páginas internas */
body.imp-shell.hm > main#conteudo{padding-top:0!important;padding-bottom:0!important}
body.hm .imp-ft{margin-top:0!important}
.hm-wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.hm-section{padding:60px 0}
.hm-section--tight{padding:36px 0}
.hm-section--alt{background:#fff;border-top:1px solid #EAECF0;border-bottom:1px solid #EAECF0}
.hm-section--dark{background:var(--imp-ink);color:#fff}
.hm-section--dark .hm-section__head h2{color:#fff}
.hm-section--dark .hm-section__head span{color:#C9CDD3}
.hm-section--cta{background:linear-gradient(135deg,#FFF1E8,#fff 60%)}
.hm-section--feat{--feat-bg:#F6F6F4;padding-bottom:20px}
.hm-section--feat .shop-feat{margin-bottom:0}
.hm-section--feat .shop-feat__head h2{font-size:clamp(22px,3vw,28px);font-weight:900;letter-spacing:-.03em}
.hm-section__head{display:flex;align-items:flex-start;justify-content:flex-start;gap:6px 14px;margin:0 0 22px;flex-wrap:wrap} /* 2.6.6: título e subtítulo alinhados no topo, sem o vão do space-between */
.hm-section__head span{padding-top:.55em}
.hm-section__head h2{font-size:clamp(24px,3.2vw,32px);font-weight:900;letter-spacing:-.03em;margin:0;color:var(--imp-ink)}

.hm-section__head a{font-weight:700;text-decoration:none;color:var(--imp-orange);margin-left:auto}
.hm-section__head span{color:#667085;font-size:15px}
.hm-lead{font-size:17px;color:#475467;max-width:620px;margin:0 0 22px;line-height:1.55}
.hm-fine{margin:10px 0 0;font-size:12px;line-height:1.45;color:#98A2B3}
.hm .btn--lg{min-height:52px;padding:0 24px;font-size:16px}
.hm .btn--ghost-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hm .btn--ghost-dark:hover{background:rgba(255,255,255,.08)}
.hm-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 0}

/* hero (escuro, padrão v3/v5) */
.hm-hero{background:var(--imp-ink);color:#fff;position:relative;overflow:hidden}
.hm-hero::before{content:"";position:absolute;right:-12%;top:-30%;width:60vw;height:60vw;max-width:760px;max-height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,106,27,.28),transparent 70%);pointer-events:none}
.hm-hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:64px;padding-bottom:64px}
.hm-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#FFB48A}
.hm-kicker--dark{color:var(--imp-orange-dk)}
.hm-mark{position:relative;width:28px;height:27px;display:inline-block;background:url(img/icon.png) center/contain no-repeat;border-radius:7px;flex:none}
.hm-mark::after{content:"";position:absolute;inset:0;-webkit-mask:url(img/mark-arrow.png) center/contain no-repeat;mask:url(img/mark-arrow.png) center/contain no-repeat;background:linear-gradient(90deg,rgba(242,106,27,0) 0%,var(--imp-orange) 35%,#FFD8BF 50%,var(--imp-orange) 65%,rgba(242,106,27,0) 100%) no-repeat;background-size:220% 100%;animation:hm-mark 2.4s linear infinite}
@keyframes hm-mark{from{background-position:180% 0}to{background-position:-180% 0}}
@media (prefers-reduced-motion:reduce){.hm-mark::after{animation:none}}
.hm-hero h1{font-size:clamp(32px,5vw,56px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px;font-weight:900}
.hm-hero h1 em{font-style:normal}
.hm-hero .hm-lead{color:#C9CDD3;margin-bottom:26px}
.hm-hero__small{font-size:13px;color:#8A9099;margin:14px 0 0}
.hm-search{display:flex;max-width:720px;border:2px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .15s}
.hm-search:focus-within{border-color:var(--imp-orange);box-shadow:0 0 0 4px rgba(242,106,27,.25)}
.hm-search input{flex:1;min-width:0;border:0;padding:0 18px;font:inherit;font-size:17px;min-height:58px;outline:0;color:var(--imp-ink)}
.hm-search button{border:0;background:var(--imp-orange);color:#fff;font:inherit;font-weight:800;font-size:16px;padding:0 24px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .15s}
.hm-search button:hover{background:var(--imp-orange-dk)}
.hm-search button svg{width:18px;height:18px}
.hm-search--light{border-color:#D0D5DD;box-shadow:0 12px 30px rgba(16,24,40,.08)}
.hm-search--xl{max-width:940px;width:100%;margin:0 auto;border-color:#E4E7EC;box-shadow:0 24px 60px rgba(16,24,40,.12)}
.hm-search--xl input{min-height:66px;font-size:18px;padding:0 22px}
.hm-search--xl button{padding:0 28px;font-size:17px}
.hm-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0;font-size:13.5px;color:#8A9099}
.hm-chips a{color:#fff;text-decoration:none;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:background .15s,border-color .15s,transform .15s;display:inline-flex;align-items:center;gap:6px}
.hm-chips a:hover{background:rgba(242,106,27,.18);border-color:rgba(242,106,27,.6);transform:translateY(-1px)}
.hm-chips a svg{width:14px;height:14px}
.hm-chips--light a{color:#344054;background:#fff;border-color:#D0D5DD}
.hm-chips--light a:hover{color:var(--imp-orange-dk);border-color:var(--imp-orange);background:#FFF1E8}
.hm-chips--center{justify-content:center}
.hm-chips--lg a{padding:10px 16px;font-size:15px}
.hm-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-stats li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px 18px;display:grid;gap:6px;backdrop-filter:blur(6px);transition:transform .2s,border-color .2s}
.hm-stats li:hover{transform:translateY(-3px);border-color:rgba(242,106,27,.7)}
.hm-stats b{font-size:34px;font-weight:900;letter-spacing:-.03em;color:var(--imp-orange);line-height:1}
.hm-stats span{font-size:13.5px;color:#C9CDD3;line-height:1.4}
.hm-bullets{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px;font-size:15px;color:#344054}
.hm-bullets li{display:flex;align-items:flex-start;gap:10px;line-height:1.4}
.hm-bullets svg{width:18px;height:18px;color:var(--imp-orange);flex:none;margin-top:2px}
.hm-bullets b{color:var(--imp-ink)}
.hm-bullets--dark{color:#C9CDD3}
.hm-bullets--dark b{color:#fff}
.hm-hero__cloud{position:relative;max-width:1180px;margin:34px auto 0;padding:0 16px}

/* v1: hero claro com o exemplo de preço (2.9.0: sem calculadora) */
.hm-hero--light{background:#fff;color:var(--imp-ink);border-bottom:1px solid #EAECF0}
.hm-hero--light::before{background:radial-gradient(closest-side,rgba(242,106,27,.14),transparent 70%)}
.hm-hero--light .hm-lead{color:#475467}
.hm-hero--light .hm-kicker{color:var(--imp-orange-dk)}
.hm-hero__in--calc{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start;padding-top:56px;padding-bottom:56px}

/* v2: minimal centrado */
/* 2.5.2: fundo em degradê (charcoal → preto) com um brilho laranja suave no alto e um segundo, discreto, à direita */
.hm-hero--min{background:linear-gradient(168deg,#2A2A2A 0%,#202020 42%,#161616 100%);color:#fff;text-align:center}
.hm-hero--min::before{left:50%;right:auto;top:-55%;transform:translateX(-50%);width:80vw;height:80vw;background:radial-gradient(closest-side,rgba(242,106,27,.24),transparent 70%)}
.hm-hero--min::after{content:"";position:absolute;right:-20vw;bottom:-30vw;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(closest-side,rgba(242,106,27,.10),transparent 70%);pointer-events:none}
.hm-hero--min .hm-wrap{position:relative;z-index:1}
.hm-min{position:relative;padding:64px 16px 48px;max-width:1000px;display:grid;justify-items:center}
.hm-hero--min .hm-kicker{justify-content:center}
.hm-hero--min h1{font-size:clamp(34px,5.6vw,64px);max-width:16ch;margin:0 auto 28px;text-align:center}
.hm-min__line{margin:22px 0 0;font-size:14px;color:#D9D9D9;font-weight:600}
/* 2.5.2: checklist sutil no lugar da frase */
.hm-min__checks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center}
.hm-min__checks li{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#B0B4BA;font-weight:500}
.hm-min__checks .ic{width:14px;height:14px;color:var(--imp-orange);opacity:.85;flex:none}
/* 2.5.2: assistente em destaque abaixo da busca (só no celular; no desktop o ícone fica no campo) */
.hm-ai-cta{display:none;width:100%;max-width:640px;margin:12px 0 0;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(90deg,rgba(242,106,27,.22),rgba(242,106,27,.08));color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hm-ai-cta__ic{flex:none;width:42px;height:41px;border-radius:11px;background:url(img/icon.png) center/contain no-repeat}
.hm-ai-cta__txt{flex:1;display:grid;gap:2px;min-width:0;line-height:1.25}
.hm-ai-cta__txt b{font-size:14.5px;font-weight:800}
.hm-ai-cta__txt span{font-size:12.5px;color:#D9D9D9}
.hm-ai-cta .ic-ai{flex:none;width:22px;height:22px;color:var(--imp-orange);animation:imp-ai-twinkle 3s ease-in-out infinite}
/* 2.4.7: hero em duas colunas — texto/busca à esquerda, tela de produto ilustrativa à direita */
.hm-min__text{display:grid;justify-items:center;min-width:0}
.hm-min--demo{max-width:1180px;grid-template-columns:minmax(0,1.25fr) minmax(300px,420px);gap:36px 48px;align-items:center;justify-items:stretch;text-align:left}
.hm-min--demo .hm-min__text{justify-items:start}
.hm-min--demo .hm-kicker{justify-content:flex-start}
.hm-min--demo .hm-search--xl{margin:0;max-width:640px}
.hm-min--demo .hm-chips--light{justify-content:flex-start}
.hm-demo{position:relative;background:#fff;color:var(--imp-ink);border-radius:20px;padding:18px 18px 16px;box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);display:grid;gap:14px;transform:rotate(-1.2deg)}
.hm-demo__rc{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:6px 11px 6px 8px;border-radius:999px;background:#FFF1E8;color:var(--imp-orange-dk);font-size:11.5px;font-weight:800;letter-spacing:.02em;line-height:1.2}
.hm-demo__rc svg{width:14px;height:14px;flex:none;color:var(--imp-orange)}
.hm-demo__hint{margin:-4px 0 -6px;font-size:12px;font-weight:600;color:#98A2B3;letter-spacing:.01em}
.hm-demo__head{display:flex;gap:14px;align-items:center}
.hm-demo__img{flex:none;width:72px;height:72px;border-radius:14px;background:#F6F6F4;border:1px solid #EAECF0;display:grid;place-items:center;color:var(--imp-orange)}
.hm-demo__img svg{width:44px;height:44px}
.hm-demo__info{display:grid;gap:3px;min-width:0}
.hm-demo__cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--imp-orange)}
.hm-demo__title{font-size:16px;font-weight:700;line-height:1.25}
.hm-demo__stars{font-size:13px;color:#475467;font-weight:600}
.hm-demo__stars i{font-style:normal;color:#F59E0B;letter-spacing:1px;font-size:12px}
.hm-demo__stars small{font-weight:400;color:#98A2B3}
.hm-demo__rows{margin:0;display:grid;gap:8px;border-top:1px solid #EAECF0;padding-top:12px}
.hm-demo__rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.hm-demo__rows dt{display:grid;color:#344054;font-weight:600}
.hm-demo__rows dt small{font-weight:400;font-size:11.5px;color:#98A2B3}
.hm-demo__rows dd{margin:0;font-weight:700;white-space:nowrap}
.hm-demo__total{position:relative;background:#202020;color:#fff;border-radius:14px;padding:14px 88px 14px 16px;display:grid;gap:2px}
.hm-demo__total span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B0B4BA}
.hm-demo__total strong{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.hm-demo__total small{font-size:12px;color:#B0B4BA}
.hm-demo__total .imp-box{position:absolute;right:14px;top:50%;margin-top:-24px;width:54px;height:48px}
/* .hm-boxes — bloco acima da busca na coluna da esquerda: título, a imagem dos produtos saindo da caixa Importaí
   e os cinco pontos. */
.hm-boxes{width:100%;max-width:640px;text-align:left;margin-bottom:22px} /* respiro antes da busca */
.hm-hero--min .hm-boxes__title{font-size:clamp(26px,3.3vw,40px);max-width:none;margin:0;text-align:left;line-height:1.08;letter-spacing:-.03em;background:none;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.hm-boxes__sub{max-width:34em;text-wrap:pretty}
@media(max-width:900px){.hm-boxes__title br{display:none}}
.hm-boxes__sub{margin:8px 0 0;font-size:16px;color:#B0B4BA;font-weight:500}
/* 3.0.1: o palco é só a imagem dos produtos saindo da caixa Importaí (fundo via CSS, proporção 3:1, sem link) */
.hm-boxes__stage{position:relative;width:100%;aspect-ratio:3/1;margin-top:18px;background:url(img/hero-products.png) center/contain no-repeat;pointer-events:none;user-select:none}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){.hm-boxes__stage{background-image:image-set(url(img/hero-products.webp) type("image/webp"),url(img/hero-products.png) type("image/png"))}}
.hm-boxes__checks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;font-size:13px;color:#C9CDD3;font-weight:500} /* 2.8.6: centralizado também no desktop */
.hm-boxes__checks li{display:inline-flex;align-items:center;gap:7px}
.hm-boxes__checks li::before{content:"";width:15px;height:15px;border-radius:50%;background:var(--imp-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.4 2.4 4.6-5.2' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat;flex:none}
/* 2.8.6: "Zero imposto até US$ 50" com pontilhado e balão (o mesmo texto da nota do Remessa Conforme): abre no mouse
   (:hover), no teclado (:focus-within) e no toque (.is-open, home.js); balão branco acima do texto, com a seta apontando
   para ele (--tip-x) e deslocado quando encostaria na borda da tela (--tip-shift, home.js) */
.hm-tip{position:relative;display:inline-flex}
.hm-tip__t{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0 0 1px;margin:0;font:inherit;color:inherit;line-height:1.25;cursor:help;border-bottom:1.5px dotted rgba(255,255,255,.6);border-radius:0;transition:color .15s,border-color .15s}
.hm-tip__t:hover,.hm-tip.is-open .hm-tip__t,.hm-tip__t:focus-visible{color:#fff;border-bottom-color:var(--imp-orange)}
.hm-tip__t:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(242,106,27,.4);border-radius:3px}
.hm-tip__pop{display:none;position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(calc(-50% + var(--tip-shift,0px)));z-index:6;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:10px 12px;border-radius:12px;background:#fff;color:#344054;font-size:12.5px;line-height:1.45;font-weight:500;text-align:left;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.hm-tip__pop strong{color:var(--imp-ink);font-weight:800}
.hm-tip__pop::before{content:"";position:absolute;left:var(--tip-x,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:#fff;transform:rotate(45deg);border-radius:2px}
.hm-tip:hover .hm-tip__pop,.hm-tip:focus-within .hm-tip__pop,.hm-tip.is-open .hm-tip__pop{display:block}
/* 2.8.6: o mesmo hm-tip dentro do "Como funciona" ({tip}…{/tip} na descrição do passo, steps.php): no fluxograma escuro
   igual ao hero; nos cartões claros (.hm-steps sem --dark) pontilhado e texto em charcoal, balão com borda */
.hm-flow__d .hm-tip,.hm-steps__d .hm-tip,.hm-flow__d .hm-tip__t,.hm-steps__d .hm-tip__t{display:inline} /* no texto corrido (gatilho <span>): nada de caixa atômica, para o "(" não se separar do trecho */
.hm-steps .hm-tip__t{border-bottom-color:rgba(16,24,40,.4)}
.hm-steps .hm-tip__t:hover,.hm-steps .hm-tip.is-open .hm-tip__t,.hm-steps .hm-tip__t:focus-visible{color:var(--imp-ink)}
.hm-section--dark .hm-steps .hm-tip__t{border-bottom-color:rgba(255,255,255,.5)}
.hm-section--dark .hm-steps .hm-tip__t:hover,.hm-section--dark .hm-steps .hm-tip.is-open .hm-tip__t,.hm-section--dark .hm-steps .hm-tip__t:focus-visible{color:#fff}
.hm-section:not(.hm-section--dark) .hm-tip__pop{border:1px solid #EAECF0;box-shadow:0 12px 30px rgba(16,24,40,.18)}
@media (prefers-reduced-motion:no-preference){
}
@media (max-width:900px){.hm-boxes{text-align:center}
.hm-hero--min .hm-boxes__title{text-align:center;margin:0 auto;line-height:1.14} /* 3.5.8: sem <br>, o título quebra em 2–3 linhas: respiro entre elas… */
.hm-boxes__sub{margin-top:14px} /* …e entre o título e o subtítulo (ficavam colados) */
.hm-boxes__stage{margin:16px auto 0}}
@media (max-width:900px){.hm-min--demo{grid-template-columns:1fr;gap:28px;justify-items:center}
.hm-min--demo .hm-min__text{justify-items:center}
.hm-min--demo .hm-kicker{justify-content:center}
.hm-min--demo .hm-chips--light{justify-content:center}
.hm-demo{width:100%;max-width:440px;transform:none}}
.hm-hero--min .hm-chips--light a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.hm-hero--min .hm-chips--light a:hover{background:rgba(242,106,27,.2);border-color:rgba(242,106,27,.6);color:#fff}

/* v4: faixa curta */
.hm-hero--band .hm-band{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;padding-top:40px;padding-bottom:36px}
.hm-hero--band h1{font-size:clamp(26px,3.6vw,38px);margin-bottom:10px}
.hm-hero--band .hm-lead{margin-bottom:0;font-size:15.5px}
.hm-hero--band .hm-search{max-width:none;width:100%}

/* v5: formulário no hero */
.hm-hero__in--form{grid-template-columns:minmax(0,1.25fr) minmax(0,460px);align-items:start}
.hm-hero__form .hm-form{box-shadow:0 30px 70px rgba(0,0,0,.4)}
.hm-form--logged{display:grid;gap:10px;color:var(--imp-ink)}
.hm-end{text-align:center;display:grid;justify-items:center}
.hm-end h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;margin:0 0 8px;font-weight:900;color:var(--imp-ink)}
.hm-end .hm-lead{text-align:center}
.hm-sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:90;display:none;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:14px;background:var(--imp-orange);color:#fff;font-weight:800;text-decoration:none;box-shadow:0 12px 30px rgba(242,106,27,.4);transition:transform .25s,opacity .25s}
.hm-sticky svg{width:18px;height:18px}
.hm-sticky.is-hidden{transform:translateY(120%);opacity:0}
@media (max-width:760px){.hm-sticky{display:inline-flex}}

/* confiança */
.hm-trust{background:#fff;border-bottom:1px solid #EAECF0}
.hm-trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:18px;padding-bottom:18px}
.hm-trust__it{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#475467}
.hm-trust__it b{display:block;color:var(--imp-ink);font-size:14px}
.hm-trust__it small{display:block;font-size:12.5px}
.hm-trust__ic{width:40px;height:40px;border-radius:12px;background:#FFF1E8;color:var(--imp-orange);display:grid;place-items:center;flex:none}
.hm-trust__ic svg{width:20px;height:20px}
.hm-trust--dark{background:var(--imp-ink-2,#2A2E34);border-bottom:0;border-top:1px solid rgba(255,255,255,.06)}
.hm-trust--dark .hm-trust__it{color:#C9CDD3}
.hm-trust--dark .hm-trust__it b{color:#fff}
.hm-trust--dark .hm-trust__ic{background:rgba(242,106,27,.15)}

/* garantias (v3) */
.hm-guar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hm-guar__it{background:#fff;border:1px solid #EAECF0;border-radius:20px;padding:24px;display:grid;gap:10px;position:relative}
.hm-guar__n{width:34px;height:34px;border-radius:10px;background:var(--imp-ink);color:#fff;display:grid;place-items:center;font-weight:900}
.hm-guar__it b{font-size:18px;letter-spacing:-.01em;color:var(--imp-ink)}
.hm-guar__it p{margin:0;font-size:14.5px;color:#475467;line-height:1.55}

/* linha do tempo (v3) */
.hm-tl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:36px;align-items:center}
.hm-tl__copy h2{font-size:clamp(24px,3.2vw,34px);font-weight:900;letter-spacing:-.03em;margin:0 0 10px;color:var(--imp-ink)}
.hm-tl__list{list-style:none;margin:0;padding:0;display:grid;gap:0;background:#fff;border:1px solid #EAECF0;border-radius:20px;padding:10px 18px}
.hm-tl__list li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;position:relative}
.hm-tl__list li+li::before{content:"";position:absolute;left:19px;top:-14px;height:20px;border-left:2px dashed #E4E7EC}
.hm-tl__dot{width:40px;height:40px;border-radius:50%;background:#F2F4F7;color:#98A2B3;display:grid;place-items:center;flex:none}
.hm-tl__dot svg{width:18px;height:18px}
.hm-tl__list li.is-done .hm-tl__dot{background:#ECFDF3;color:#12B76A}
.hm-tl__list li.is-now .hm-tl__dot{background:var(--imp-orange);color:#fff;box-shadow:0 0 0 6px rgba(242,106,27,.18)}
.hm-tl__list b{display:block;font-size:15px;color:var(--imp-ink)}
.hm-tl__list span{font-size:13.5px;color:#667085}

/* categorias */
.hm-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
/* 2.4: cards com altura fixa (o nome ocupa no máximo 2 linhas), independentes do tamanho do texto */
.hm-cat{display:flex;align-items:center;gap:12px;height:68px;padding:0 16px;background:#fff;border:1px solid #EAECF0;border-radius:14px;text-decoration:none;color:var(--imp-ink);font-weight:700;font-size:14.5px;line-height:1.25;transition:border-color .15s,transform .15s,box-shadow .15s}
.hm-cat>span:not(.hm-cat__ic){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.hm-cat:hover{border-color:var(--imp-orange)}
.hm-cat__ic{width:38px;height:38px;border-radius:11px;background:#FFF1E8;color:var(--imp-orange);display:grid;place-items:center;flex:0 0 38px;transition:background .15s,color .15s,transform .2s}
.hm-cat__ic svg{width:19px;height:19px}
.hm-cat:hover .hm-cat__ic{background:var(--imp-orange);color:#fff;transform:rotate(-8deg) scale(1.06)}
.hm-cat__go{margin-left:auto;flex:none;opacity:.55;animation:none;transition:transform .15s,opacity .15s}
.hm-cat:hover .hm-cat__go{transform:translate(2px,-1px);opacity:1}
.hm-cats--tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.hm-cats--tiles .hm-cat{flex-direction:column;justify-content:center;text-align:center;gap:10px;height:138px;padding:0 12px;font-size:14px}
.hm-cats--tiles .hm-cat__ic{width:52px;height:52px;border-radius:16px}
.hm-cats--tiles .hm-cat__ic svg{width:24px;height:24px}
.hm-cats--tiles .hm-cat__go{display:none}

/* passos */
.hm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} /* 2.6.0: 5 passos cabem em uma linha */
.hm-steps li{background:#fff;border:1px solid #EAECF0;border-radius:18px;padding:22px 20px;display:grid;gap:10px;align-content:start;position:relative;transition:transform .2s,border-color .2s} /* 2.6.7: conteúdo alinhado no topo */
.hm-section--dark .hm-steps li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.hm-steps li:hover{transform:translateY(-3px);border-color:rgba(242,106,27,.7)}
.hm-steps__ic{width:52px;height:52px;border-radius:14px;background:var(--imp-orange);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(242,106,27,.35)}
.hm-steps__ic svg{width:24px;height:24px;transition:transform .3s}
.hm-steps li:hover .hm-steps__ic svg{transform:scale(1.15)}
.hm-steps__n{position:absolute;right:16px;top:14px;font-size:44px;font-weight:900;color:rgba(0,0,0,.05);line-height:1}
.hm-section--dark .hm-steps__n{color:rgba(255,255,255,.07)}
.hm-steps b{font-size:17px;color:var(--imp-ink);line-height:1.25}
.hm-steps--compact b{min-height:0!important}
.hm-section--dark .hm-steps b{color:#fff}
.hm-steps li>span:last-child,.hm-steps__d{font-size:14px;color:#475467;line-height:1.5}
.hm-section--dark .hm-steps li>span:last-child,.hm-section--dark .hm-steps__d{color:#C9CDD3}
.hm-steps__d b,.hm-flow__d b{font-weight:800;color:inherit}
/* 2.6.0: link opcional do passo (abre o assistente) */
.hm-steps__link{font-size:14px;font-weight:700;color:var(--imp-orange);text-decoration:none;justify-self:start}
.hm-steps__link:hover{text-decoration:underline}
/* 2.8.4: nota em letras miúdas (detalhes do Remessa Conforme no passo 2).
   2.8.6: fechada por padrão — caixinha discreta (cinza, letras miúdas, cantos arredondados) só com o rótulo e o "+" do
   padrão do FAQ; o clique abre os detalhes. Uma string simples no 5º elemento continua saindo como <small> (--plain). */
.hm-steps__note{display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:#98A2B3;width:100%;max-width:100%;justify-self:stretch;box-sizing:border-box}
details.hm-steps__note{border:1px solid #EAECF0;border-radius:10px;background:#F9FAFB;transition:border-color .15s}
details.hm-steps__note[open]{border-color:rgba(242,106,27,.55)}
.hm-steps__note summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:7px 10px;font-weight:500;color:inherit}
.hm-steps__note summary>span{flex:1 1 auto;min-width:0} /* o rótulo é um item só do flex (o <strong> não vira coluna) */
.hm-steps__note summary::-webkit-details-marker{display:none}
.hm-steps__note summary::after{content:"+";flex:none;font-size:13px;line-height:1.2;font-weight:800;color:var(--imp-orange)}
.hm-steps__note[open] summary::after{content:"–"}
.hm-steps__note p{margin:0;padding:0 10px 9px;color:inherit;font-size:inherit;line-height:inherit}
.hm-steps__note b,.hm-steps__note strong{font-weight:700;color:#667085}
.hm-section--dark .hm-steps__note b,.hm-section--dark .hm-steps__note strong,.hm-flow .hm-steps__note b,.hm-flow .hm-steps__note strong{color:#B0B4BA}
.hm-section--dark .hm-steps__note,.hm-flow .hm-steps__note{color:#8A9099}
.hm-section--dark details.hm-steps__note,.hm-flow details.hm-steps__note{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.hm-section--dark details.hm-steps__note[open],.hm-flow details.hm-steps__note[open]{border-color:rgba(242,106,27,.55)}
.hm-steps--compact .hm-steps__note{grid-column:2}
.hm-flow .hm-steps__link{font-size:13.5px;margin-top:2px}
.hm-steps--compact li{padding:16px;gap:6px;grid-template-columns:auto 1fr;align-items:center}
.hm-steps--compact .hm-steps__ic{width:40px;height:40px;border-radius:12px;grid-row:span 2}
.hm-steps--compact .hm-steps__ic svg{width:20px;height:20px}
.hm-steps--compact .hm-steps__n{display:none}
.hm-steps--compact b{font-size:15px}
.hm-steps--compact li>span:last-child,.hm-steps--compact .hm-steps__d{font-size:13px;grid-column:2}
.hm-steps--compact .hm-steps__link{grid-column:2;font-size:13px}

/* como funciona: fluxograma minimalista (nós ligados por setas em degradê, como a seta do logotipo) */
.hm-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--hm-flow-n,4),1fr);gap:56px;counter-reset:hm-flow} /* 2.6.0: colunas = número de passos */
.hm-flow li{position:relative;display:grid;gap:10px;justify-items:start;align-content:start} /* 2.6.7: as linhas não esticam mais (cada coluna ficava com o título numa altura) */
.hm-flow__ic{width:56px;height:56px;border-radius:50%;background:#fff;color:#202020;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(242,106,27,.0);position:relative}
.hm-flow__ic svg{width:26px;height:26px}
.hm-flow__ic::after{content:counter(hm-flow);counter-increment:hm-flow;position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--imp-orange);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid #202020}
.hm-flow b{font-size:17px;color:#fff;letter-spacing:-.01em;margin-top:6px;line-height:1.25}
/* 2.8.4: sem altura reservada no título (deixava uma linha vazia quando outro título quebrava); tudo encostado no topo */
/* 2.4.3: entre os passos, só uma linha reta pontilhada de fluxo (<i class="hm-flow__line">), na altura dos ícones */
.hm-flow__line{position:absolute;top:27px;left:64px;right:-48px;height:0;border-top:2px dotted rgba(255,255,255,.38)}
.hm-flow__d{font-size:14px;color:#B0B4BA;line-height:1.5}
/* 2.6.0: com 5 passos, colunas mais estreitas: menos folga e linha de fluxo mais curta */
.hm-flow--dense{gap:36px}
.hm-flow--dense b{font-size:16px}
.hm-flow--dense .hm-flow__d{font-size:13.5px}
.hm-flow--dense .hm-flow__line{right:-28px}
.hm-section--flow{background:#202020}
.hm-section--flow .hm-section__head span{color:#B0B4BA}

/* 2.9.0: a calculadora saiu da home; só a marca da fita da caixa do hero ficou */
/* campos do formulário de cadastro (hm-field) */
.hm-field{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:#475467}
.hm-field input:not([type=radio]):not([type=checkbox]),.hm-field select{font:inherit;font-size:15px;min-height:46px;padding:0 12px;border:1px solid #D0D5DD;border-radius:12px;background:#fff;width:100%;color:var(--imp-ink)}
.hm-field input:focus,.hm-field select:focus{outline:0;border-color:var(--imp-orange);box-shadow:0 0 0 3px rgba(242,106,27,.15)}
.hm-field input[type=radio]{width:18px;height:18px;accent-color:var(--imp-orange);margin:0}
.hm-field__row{display:grid;grid-template-columns:1fr 68px;gap:6px}
.hm-field__2{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.hm-field--pay{border:0;padding:0;margin:0;display:flex;gap:16px;flex-wrap:wrap}
.hm-field--pay legend{padding:0;margin:0 0 6px;width:100%}
.hm-field--pay label{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--imp-ink)}

/* incluso */
.hm-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.hm-perk{background:#F9FAFB;border:1px solid #EAECF0;border-radius:18px;padding:18px;display:grid;gap:8px;transition:transform .2s,border-color .2s}
.hm-perk:hover{transform:translateY(-2px);border-color:var(--imp-orange)}
.hm-perk__ic{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid #EAECF0;color:var(--imp-orange);display:grid;place-items:center}
.hm-perk__ic svg{width:20px;height:20px}
.hm-perk b{font-size:16px;letter-spacing:-.01em;color:var(--imp-ink)}
.hm-perk span:last-child{font-size:14px;color:#475467;line-height:1.5}
.hm-perk--hi{background:var(--imp-ink);border-color:var(--imp-ink);color:#fff}
.hm-perk--hi b{color:#fff}
.hm-perk--hi span:last-child{color:#C9CDD3}
.hm-perk--hi .hm-perk__ic{background:var(--imp-orange);border-color:var(--imp-orange);color:#fff}

/* comparativo */
.hm-cmp-wrap{overflow-x:auto;border:1px solid #EAECF0;border-radius:18px;background:#fff}
.hm-cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.hm-cmp th,.hm-cmp td{padding:12px 14px;border-bottom:1px solid #F2F4F7;text-align:left;vertical-align:top}
.hm-cmp thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:#667085;background:#F9FAFB}
.hm-cmp tbody th{font-weight:600;color:#344054;width:24%}
.hm-cmp .is-us{background:#FFF1E8}
.hm-cmp thead .is-us{color:var(--imp-orange-dk)}
.hm-cmp td.is-good::before{content:"✓ ";color:#12B76A;font-weight:800}
.hm-cmp td.is-bad::before{content:"✕ ";color:#F04438;font-weight:800}
.hm-cmp td.is-mid::before{content:"– ";color:#98A2B3;font-weight:800}

/* faq / antes / cadastro */
.hm-faq details{background:#fff;border:1px solid #EAECF0;border-radius:14px;margin:0 0 8px;padding:0 16px;transition:border-color .15s}
.hm-faq details[open]{border-color:var(--imp-orange)}
.hm-faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:10px;color:var(--imp-ink)}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:"+";color:var(--imp-orange);font-weight:800}
.hm-faq details[open] summary::after{content:"–"}
.hm-faq p{margin:0 0 14px;color:#475467;line-height:1.55;font-size:15px}
.hm-before{background:#fff;border:1px solid #FFD9C2;border-left:5px solid var(--imp-orange);border-radius:18px;padding:22px}
.hm-before h2{font-size:20px;margin:0 0 10px;letter-spacing:-.01em;color:var(--imp-ink)}
.hm-before ul{margin:0;padding-left:20px;display:grid;gap:8px;color:#475467;font-size:14px;line-height:1.5}
.hm-signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px;align-items:center}
.hm-signup__icon{border-radius:14px;margin-bottom:12px;box-shadow:0 10px 24px rgba(27,30,34,.25)}
.hm-signup h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;margin:0 0 10px;font-weight:900;color:var(--imp-ink)}
.hm-form{background:#fff;border:1px solid #EAECF0;border-radius:20px;padding:22px;display:grid;gap:12px;box-shadow:0 20px 50px rgba(16,24,40,.08)}
.hm-form__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hm-hp{position:absolute;left:-9999px}
.hm-form .hm-fine{margin:0}

/* prévia (gestores) */
.hm-preview{position:fixed;left:12px;bottom:12px;z-index:200;background:var(--imp-ink);color:#fff;border-radius:12px;padding:8px 12px;font-size:13px;display:flex;gap:6px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.hm-preview a{color:#C9CDD3;text-decoration:none;padding:4px 8px;border-radius:8px;font-weight:700}
.hm-preview a[aria-current]{background:var(--imp-orange);color:#fff}
.hm-preview__set{margin-left:8px;color:#FFB48A!important}

@media (max-width:1000px){
  .hm-flow,.hm-flow--dense{grid-template-columns:1fr 1fr;gap:44px 56px}
  .hm-flow--dense .hm-flow__line{right:-48px}
  .hm-flow li:nth-child(2n) .hm-flow__line{display:none}
  .hm-trust__in{grid-template-columns:1fr 1fr}
  .hm-guar{grid-template-columns:1fr}
  .hm-tl{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hm-hero__in,.hm-hero__in--calc,.hm-hero__in--form,.hm-hero--band .hm-band{grid-template-columns:1fr;gap:28px;padding-top:40px;padding-bottom:40px}
  .hm-stats{grid-template-columns:1fr 1fr}
  .hm-preview{display:none}
}
@media (max-width:640px){
  .hm-flow,.hm-flow--dense{grid-template-columns:1fr;gap:40px}
  .hm-flow li:nth-child(2n) .hm-flow__line{display:block}
  .hm-flow__line,.hm-flow--dense .hm-flow__line{top:auto;right:auto;left:27px;bottom:-36px;height:28px;width:0;border-top:0;border-left:2px dotted rgba(255,255,255,.38)}
  .hm-section{padding:40px 0}
  .hm-section--tight{padding:28px 0}
  .hm-signup{grid-template-columns:1fr;padding:18px}
  /* 2.5.2: no celular o campo continua em linha, com o botão da lupa ao lado (só o ícone) */
  .hm-search,.hm-search--xl{flex-direction:row;border-radius:14px}
  .hm-search input,.hm-search--xl input{min-height:56px;font-size:16px;padding:0 14px}
  .hm-search button,.hm-search--xl button{min-height:56px;width:58px;padding:0;justify-content:center;flex:none;font-size:0}
  .hm-search button svg{width:22px;height:22px}
  .hm-search .hm-search__ai{display:none}
  .hm-ai-cta{display:flex}
  .hm-hero--min .hm-chips--light{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
  .hm-hero--min .hm-chips--light::-webkit-scrollbar{display:none}
  .hm-hero--min .hm-chips--light a{flex:none}
  .hm-min__checks{justify-content:flex-start;gap:6px 14px}
  .hm-form__row{grid-template-columns:1fr}
  .hm-cats--tiles .hm-cat{height:118px}
  .hm-stats b{font-size:28px}
  .hm-trust__in{grid-template-columns:1fr;gap:10px;padding-top:14px;padding-bottom:14px}
  .hm-min{padding-top:44px}
  .hm-kicker{font-size:11.5px;letter-spacing:.06em}
  .hm-cta-row .btn{flex:1 1 100%;justify-content:center}
}

/* títulos com o degradê da marca: no claro charcoal → laranja, no escuro branco → laranja (o "a" do logotipo) */
.hm-hero h1,.hm-section--dark .hm-section__head h2,.hm-grad--light{background:linear-gradient(90deg,#fff 0%,#fff 48%,#FFB48A 74%,var(--imp-orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}
.hm-grad,.hm-section__head h2,.hm-signup h2,.hm-end h2,.hm-tl__copy h2,.hm-before h2,.hm-hero--light h1{background:linear-gradient(90deg,#202020 0%,#202020 52%,var(--imp-orange) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;max-width:100%}
.hm-hero h1 em,.hm-grad em{color:inherit}
/* 2.4: o título da v2 é branco sólido (sem degradê), com a segunda linha em laranja */
.hm-hero--min h1{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;width:auto;max-width:16ch}
.hm-min--demo h1{text-align:left;margin:0 0 28px;max-width:14ch}
@media (max-width:900px){.hm-min--demo h1{text-align:center;margin:0 auto 28px;max-width:16ch}}
.hm-hero--min h1 em{color:var(--imp-orange)}
@supports not (background-clip:text){.hm-grad,.hm-section__head h2,.hm-signup h2,.hm-end h2,.hm-tl__copy h2,.hm-before h2,.hm-hero--light h1{color:var(--imp-ink);background:none}.hm-hero h1,.hm-section--dark .hm-section__head h2,.hm-grad--light{color:#fff;background:none}.hm-hero h1 em{color:var(--imp-orange)}}


/* =========================================================================
   3.1.0 — tipografia de display do tema (Montserrat) nos títulos da home
   ========================================================================= */
.hm .hm-boxes__title,.hm .section-title,.hm .hm-section h2,.hm .hm-brands__head h2,.hm .hm-demo__total strong{font-family:var(--imp-disp,Montserrat,Inter,sans-serif)}

/* =========================================================================
   3.1.0 — Mini Banner no palco do hero (.hm-stage): slides com fade + bullets
   ========================================================================= */
.hm-boxes__stage.hm-stage{background:none;pointer-events:auto;user-select:auto;position:relative}
.hm-stage__track{position:absolute;inset:0}
.hm-stage__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hm-stage__slide.is-active{opacity:1;pointer-events:auto}
.hm-stage__slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;-webkit-user-drag:none}
.hm-stage__dots{position:absolute;left:0;right:0;bottom:-18px;display:flex;justify-content:center;gap:6px;z-index:2}
.hm-stage__dot{width:18px;height:5px;padding:0;border:0;border-radius:5px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.hm-stage__dot.is-active{width:34px;background:var(--imp-orange)}
.hm-stage__dot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hm-boxes:has(.hm-stage) .hm-boxes__checks{margin-top:26px}
@media(prefers-reduced-motion:reduce){.hm-stage__slide{transition:none}}

/* =========================================================================
   3.1.0 — Slides publicados (hero do tema) dentro da home do plugin
   ========================================================================= */
.hm-section--slides{padding-bottom:8px}
.hm-section--slides + .hm-section{padding-top:28px}
.hm-hero-slides .spx-hero-block.spx-hai{margin-bottom:0}
.hm-hero-slides .spx-hai .spx-hero-carousel{box-shadow:0 18px 44px -24px rgba(16,24,40,.35)}

/* =========================================================================
   3.1.4 — Seções de produtos: cada seção é um bloco igual ao "Produtos em destaque" clássico (.shop-feat/.shop-carousel)
   ========================================================================= */
.hm-section--products{padding-top:12px}
.hm-sections{display:flex;flex-direction:column;gap:34px}
.shop-feat--sec{margin:0}
.shop-feat--sec .shop-feat__head{align-items:center;gap:8px 12px}
.shop-feat--sec .shop-feat__head h2 a{color:inherit;text-decoration:none}
.shop-feat--sec .shop-feat__head h2 a:hover{color:var(--accent)}
.shop-feat__badge{display:inline-block;order:-1;padding:3px 10px;border-radius:999px;background:#FFF1E8;color:var(--imp-orange-dk,#D95A10);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.shop-feat--sec .shop-feat__tabs{margin:0 0 12px}
.hm .shop-feat__note{justify-content:flex-start}

/* =========================================================================
   3.1.0 — Marcas em destaque: uma aba por categoria raiz, marcas em badges
   ========================================================================= */
.hm-brands{background:var(--c-surface,#F9FAFB);border:1px solid var(--c-border,#EAECF0);border-top:3px solid var(--c-primary);border-radius:var(--radius-lg,12px);padding:22px 22px 20px}
.hm-brands__head{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin:0 0 14px}
.hm-brands__head h2{margin:0}
.hm-brands__head p{margin:0;font-size:13.5px;color:#667085}
.hm-brands__star{color:var(--c-primary)}
.hm-brands__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.hm-brands__tab{background:#fff;border:1px solid var(--c-border,#EAECF0);color:var(--c-text,#101828);border-radius:999px;padding:5px 16px;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;line-height:1.5;transition:border-color .15s,color .15s,background .15s,box-shadow .15s}
@media(hover:hover){.hm-brands__tab:hover{border-color:var(--c-primary);color:var(--c-primary)}}
.hm-brands__tab.is-active{background:var(--c-primary);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(242,106,27,.3)}
.hm-brands__panel{display:none;flex-wrap:wrap;gap:8px}
.hm-brands__panel.is-active{display:flex}
.hm-brand{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:#fff;border:1px solid var(--c-border,#EAECF0);color:var(--c-text,#101828);text-decoration:none;font-size:13px;font-weight:600;line-height:1.2;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s;max-width:100%}
.hm-brand__i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#F2F4F7;color:#475467;font-size:12px;font-weight:800;flex:none}
.hm-brand__n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.hm-brand__rank{font-size:10.5px;font-weight:800;color:var(--imp-orange-dk,#D95A10);background:#FFF1E8;padding:2px 6px;border-radius:999px}
.hm-brand.is-top{border-color:rgba(242,106,27,.45);background:#FFFCFA;font-size:14px;padding:6px 14px 6px 6px}
.hm-brand.is-top .hm-brand__i{background:var(--c-primary);color:#fff;width:30px;height:30px;font-size:13px}
.hm-brand.is-mid .hm-brand__i{background:#FFF1E8;color:var(--imp-orange-dk,#D95A10)}
.hm-brand--all{background:transparent;border-style:dashed;color:var(--c-text-secondary,#475467);padding:5px 12px}
@media(hover:hover){.hm-brand:hover{border-color:var(--c-primary);box-shadow:0 6px 16px rgba(16,24,40,.08);transform:translateY(-1px)}}
@media(max-width:640px){.hm-brands{padding:16px 14px 14px}.hm-brand__n{max-width:140px}}