/* =========================================================================
   Como funciona (/como-funciona). Sem tela própria no rascunho: montada com os componentes dele (blocos, tabela
   .tbl/.tbl-stack, .side-list, etiqueta .act, .note). Base em /assets/site.css.
   ========================================================================= */
.hiw-toc { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
.hiw-toc a { display: inline-flex; align-items: center; padding: .45rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); transition: border-color var(--t), color var(--t), background var(--t); }
.hiw-toc a:hover { border-color: var(--brand-300); color: var(--brand-2); background: var(--brand-50); }

.hiw { padding-bottom: 1rem; }
/* Sem scroll-margin: o scroll-padding-top do html já desconta o cabeçalho (somados, o título parava ~150 px abaixo) */
.hiw-sec { padding-top: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }
.hiw-sec:first-child { padding-top: .5rem; }
.hiw-sec .section-head { margin-bottom: 1.1rem; }
.hiw-sec .section-head h2 { font-size: var(--fs-lg); }
.hiw-sec .section-head p { max-width: 72ch; }
.hiw-h3 { margin-top: 2rem; }

/* Etapas da esteira */
.hiw-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; counter-reset: none; }
.hiw-steps li { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.05rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.hiw-steps .n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-50); border: 1px solid var(--line-2); color: var(--brand-2); font-family: var(--font-mono); font-weight: 600; font-size: .8rem; margin-bottom: .2rem; }
.hiw-steps b { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-base); line-height: 1.3; }
/* De 761 a 1100 px: 3 em cima e 2 embaixo, sem vaga (6 colunas: as 3 de cima ocupam 2 cada; as 2 de baixo, 3 cada) */
@media (max-width: 1100px) { .hiw-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } .hiw-steps li { grid-column: span 2; } .hiw-steps li:nth-child(n+4) { grid-column: span 3; } }
/* Em 5 colunas, "Resumo em português" quebra em 2 linhas: todos os títulos com a mesma altura, os textos alinhados */
@media (min-width: 1101px) { .hiw-steps b { min-height: 2.6em; } }
@media (max-width: 760px) { .hiw-steps { grid-template-columns: 1fr; } .hiw-steps li, .hiw-steps li:nth-child(n+4) { grid-column: auto; } .hiw-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: .75rem; } .hiw-steps .n { grid-row: span 2; margin: 0; } }

/* Fontes por produto (altura de linha "normal", como as tabelas do rascunho, que rodava em modo quirks) */
table.hiw-src { line-height: normal; }
.hiw-src td:first-child { min-width: 11rem; }
.src-prod { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ink); }
.src-prod:hover { color: var(--brand-2); }
.src-prod .ptile-xs { flex: 0 0 auto; }
.hiw-src .tag-partial { margin-top: .35rem; margin-left: 0; display: flex; width: max-content; }
.hosts { display: flex; flex-wrap: wrap; gap: .3rem; }
/* Domínio só quebra antes de um ponto (<wbr> do SourceCatalog::breakableHost), nunca no meio da palavra ("cpanel.ne|t") */
.hosts code { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: .12rem .4rem; overflow-wrap: normal; word-break: normal; }
.hosts .via { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; font-size: var(--fs-xs); color: var(--muted); }
.hiw-src td.every { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.every-t > span { display: block; }
@media (max-width: 760px) {
  .hiw-src td.every { white-space: normal; }
  .every-t { text-align: right; }
  .every-t > span { display: inline; }
  .every-t > span + span::before { content: " · "; }
  .hiw-src .hosts { justify-content: flex-end; }
}

/* Quem atualiza o quê: dois planos, com o estilo da política da página do produto */
/* Título, lista e rodapé em linhas comuns aos dois planos (subgrid): as divisórias do rodapé ficam na mesma altura */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; grid-template-rows: none; } }
.plan { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: .9rem; }
@supports not (grid-template-rows: subgrid) { .plan { display: flex; flex-direction: column; } .plan-tag { margin-top: auto; } }
.plan h3 { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-base); }
.plan h3 svg { width: 18px; height: 18px; color: var(--brand-2); }
.plan ul { display: grid; gap: .55rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.plan li svg { width: 18px; height: 18px; margin-top: .1rem; }
.plan li.rc svg { color: var(--success); }
.plan li.voce svg { color: var(--brand-2); }
.plan li.dica, .plan li.dica svg { color: var(--muted); }
.plan-tag { padding-top: .9rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: .4rem .5rem; font-size: var(--fs-xs); color: var(--muted); }
/* A frase da etiqueta numa linha só dela, em cima das etiquetas, nos dois planos */
.plan-tag-t { flex-basis: 100%; }

/* Prazos */
.due-rows { display: grid; gap: 0; }
.due-rows > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.due-rows > div:first-child { padding-top: 0; }
.due-rows dt { font-weight: 800; color: var(--ink); }
.due-rows dd { color: var(--ink-2); }
@media (max-width: 520px) { .due-rows > div { grid-template-columns: 1fr; gap: .1rem; } }

/* Resumos automáticos (lista com ícone, a .side-list do /receber) */
.hiw-rules { display: grid; gap: 1.1rem; }
.hiw-rules li { display: grid; grid-template-columns: 38px 1fr; gap: .8rem; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.hiw-rules li b { display: block; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-base); margin-bottom: .1rem; }
.hiw-rules .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-2); border: 1px solid var(--line-2); }
.hiw-rules .ic svg { width: 18px; height: 18px; }
.hiw-rules .lang { display: inline-block; vertical-align: 1px; font-family: var(--font-body); font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 .3rem; }

/* Glossário (mesmo desenho do "O que são esses termos?" da página do aviso, aberto) */
.terms { display: grid; gap: 0; }
.terms > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.55; }
.terms > div:first-child { padding-top: 0; }
.terms > div:last-child { border-bottom: 0; padding-bottom: 0; }
.terms dt { font-weight: 800; color: var(--ink); }
.terms dd { color: var(--ink-2); text-wrap: pretty; }
.terms dd .ext { white-space: nowrap; }
@media (max-width: 520px) { .terms > div { grid-template-columns: 1fr; gap: .1rem; } }

/* Créditos */
.credits { display: grid; gap: .9rem; }
.credits li { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.credits li > b { display: block; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-base); margin-bottom: .1rem; }