/* Vaart · site institucional
   Base: tokens.css e componentes.css do kit de marca (05-design-system).
   Este arquivo só compõe o layout. Cores, espaços e cantos vêm sempre dos tokens. */

@font-face { font-family: "Libre Baskerville"; src: url("/assets/fonts/libre-baskerville.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* corpo com 16px no celular (regra mobile first do manual) */
body { font-size: 16px; line-height: 26px; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 120ms; }
a:hover { color: var(--action-hover); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; color: var(--ink); text-wrap: balance; }
.vt-field__label, .vt-field__hint { font-family: var(--font-ui); }
.vt-btn { min-height: 44px; text-decoration: none; justify-content: center; }
.vt-btn--primario:hover { color: var(--on-action); }

.pular { position: absolute; left: var(--space-4); top: -64px; background: var(--surface-raised); color: var(--ink); padding: var(--space-2) var(--space-3); font-family: var(--font-ui); font-size: 14px; z-index: 10; }
.pular:focus { top: var(--space-2); }

/* Grade da página */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.secao { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.secao--branca { background: var(--surface-raised); }
.secao__cab { display: grid; gap: var(--space-3); max-width: 680px; margin-bottom: var(--space-6); }
.h2 { font-family: var(--font-display); font-size: 28px; line-height: 36px; }
.lead { font-size: 17px; line-height: 28px; color: var(--ink-muted); max-width: 65ch; }
.texto { color: var(--ink-muted); max-width: 65ch; }
.texto + .texto { margin-top: var(--space-4); }
.rotulo { font-family: var(--font-ui); font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.6px; color: var(--ink-muted); }

/* Cabeçalho (CabecalhoPortal adaptado ao site) */
.cab { background: var(--surface-deep); }
.cab__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 64px; }
.cab__logo { display: block; flex: none; }
.cab__logo img { height: 40px; width: auto; }
.cab__nav { display: none; gap: var(--space-5); font-family: var(--font-ui); font-size: 14px; line-height: 20px; }
.cab__nav a { color: var(--aguada-soft); text-decoration: none; }
.cab__nav a:hover, .cab__nav a[aria-current] { color: var(--on-deep); text-decoration: underline; }
.cab__cta { font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--on-deep); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.cab__cta:hover { color: var(--on-deep); text-decoration-thickness: 2px; }
.cab :focus-visible { outline-color: var(--on-deep); }

/* Hero (HeroSite) */
.hero { padding: var(--space-7) 0 var(--space-6); }
.hero__grade { display: grid; gap: var(--space-6); }
.hero__texto { display: grid; gap: var(--space-5); align-content: start; }
.hero h1 { font-family: var(--font-display); font-size: 34px; line-height: 42px; letter-spacing: -0.5px; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; }
.hero__acoes .vt-btn--primario { width: 100%; }
.hero__publico { font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink-muted); border-left: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }

.promessa { color: var(--on-deep); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-5); align-content: space-between; }
.promessa blockquote { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 32px; }
.promessa figcaption { font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--aguada-soft); }

.beneficios { display: grid; gap: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-5); margin-top: var(--space-7); }
.beneficios h3, .beneficios .h3 { font-family: var(--font-display); font-size: 20px; line-height: 28px; margin-bottom: var(--space-2); }
.beneficios p { color: var(--ink-muted); font-size: 16px; line-height: 26px; }

/* O problema */
.problema { display: grid; gap: var(--space-6); }
.custos { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.custos li { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.custos strong { font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--ink); }
.custos span { color: var(--ink-muted); font-size: 16px; }

/* Como trabalhamos: a ordem importa, por isso a lista é numerada */
.passos { list-style: none; padding: 0; counter-reset: passo; display: grid; border-top: 1px solid var(--ink); }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.passos li::before { content: counter(passo); font-family: var(--font-mono); font-size: 15px; line-height: 28px; color: var(--ink-muted); }
.passos h3 { font-family: var(--font-display); font-size: 20px; line-height: 28px; margin-bottom: var(--space-2); }
.passos p { color: var(--ink-muted); }

/* Para quem */
.perfis { display: grid; border-top: 1px solid var(--ink); }
.perfis > div { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--space-2); }
.perfis dt { font-family: var(--font-ui); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.6px; color: var(--ink-muted); }
.perfis dd { font-family: var(--font-display); font-size: 20px; line-height: 30px; color: var(--ink); }
.perfis dd + dd { font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.corte { margin-top: var(--space-5); color: var(--ink-muted); max-width: 65ch; }

/* Benefício em números */
.numeros { display: grid; gap: var(--space-6); }
.tabela-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vt-table { font-size: 15px; }
.vt-table td, .vt-table th { padding-left: 0; }
.vt-table .vt-r { font-size: 16px; padding-right: 0; }
.vt-table th.vt-r { font-family: var(--font-ui); font-size: 12px; }
.selo { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-1); background: var(--surface-raised); }
.nb { white-space: nowrap; }
.selo p { font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* Por que a Vaart e não o banco direto */
.compara { border-top: 1px solid var(--ink); }
.compara__cab { display: none; }
.compara__linha { display: grid; gap: var(--space-2); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.compara__tema { font-family: var(--font-display); font-size: 20px; line-height: 28px; color: var(--ink); }
.compara__col { display: grid; gap: var(--space-1); }
.compara__col .rotulo { font-size: 13px; }
.compara__banco { color: var(--ink-muted); }
.compara__vaart { color: var(--ink); }

/* Faixa Prússia com cianotipia */
.faixa { color: var(--on-deep); padding: var(--space-7) 0; }
.faixa p { font-family: var(--font-display); font-size: 24px; line-height: 34px; max-width: 26ch; }
.faixa p.rotulo { font-family: var(--font-ui); color: var(--aguada-soft); margin-top: var(--space-4); max-width: none; font-size: 14px; line-height: 20px; }

/* Perguntas frequentes */
.faq { border-top: 1px solid var(--ink); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6) var(--space-4) 0; position: relative; font-family: var(--font-display); font-size: 18px; line-height: 28px; color: var(--ink); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: var(--space-4); font-family: var(--font-mono); font-size: 20px; color: var(--ink-muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--action); }
.faq__resp { padding: 0 0 var(--space-5); color: var(--ink-muted); max-width: 65ch; display: grid; gap: var(--space-3); }

/* Formulário do raio-x */
.contato { display: grid; gap: var(--space-6); }
.contato__lado { display: grid; gap: var(--space-4); align-content: start; }
.contato__lado ul { padding-left: var(--space-5); color: var(--ink-muted); display: grid; gap: var(--space-2); }
.form { display: grid; gap: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-5) var(--space-4); }
.form .vt-field { max-width: none; align-content: start; }
.form .vt-field__label { font-size: 13px; color: var(--ink); }
.form .vt-field__input { font-size: 16px; min-height: 44px; width: 100%; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); min-width: 0; }
.form legend { font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.6px; color: var(--ink); padding: 0; margin-bottom: var(--space-2); }
.opcoes { display: grid; gap: var(--space-2); }
.opcao { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-1); font-family: var(--font-ui); font-size: 15px; line-height: 20px; cursor: pointer; transition: border-color 120ms, background-color 120ms; }
.opcao:hover { border-color: var(--ink); }
.opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--action); flex: none; }
.opcao:has(input:checked) { border-color: var(--action); background: var(--aguada-soft); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--action); flex: none; }
.form .vt-btn--primario { width: 100%; font-size: 15px; }
.form__erro { font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--danger); }
.vt-field--erro .vt-field__input, fieldset.vt-field--erro .opcao { border-color: var(--danger); }
fieldset.vt-field--erro .vt-field__hint { color: var(--danger); }
.form__nota { font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.sucesso { display: grid; gap: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-6) var(--space-5); }
.sucesso h3 { font-family: var(--font-display); font-size: 24px; line-height: 32px; }
.sucesso p { color: var(--ink-muted); }
[hidden] { display: none !important; }

/* Rodapé legal (RodapeLegal) */
.rodape { background: var(--surface-deep); color: var(--aguada-soft); padding: var(--space-7) 0 var(--space-6); font-family: var(--font-ui); font-size: 13px; line-height: 20px; }
.rodape__topo { display: grid; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--grade); }
.rodape__topo img { height: 32px; width: auto; }
.rodape__decl { color: var(--on-deep); margin: var(--space-5) 0 var(--space-4); max-width: 75ch; font-size: 14px; }
.rodape__inst { border: 1px dashed var(--aguada); padding: var(--space-4); color: var(--on-deep); }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--grade); }
.rodape a { color: var(--on-deep); }
.rodape a:hover { color: var(--on-deep); text-decoration-thickness: 2px; }
.rodape :focus-visible { outline-color: var(--on-deep); }

/* Páginas legais */
.legal { padding: var(--space-7) 0; }
.legal__corpo { max-width: 720px; display: grid; gap: var(--space-4); }
.legal h1 { font-family: var(--font-display); font-size: 32px; line-height: 40px; }
.legal h2 { font-family: var(--font-display); font-size: 22px; line-height: 30px; margin-top: var(--space-5); }
.legal p, .legal li { color: var(--ink-muted); }
.legal ul { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.pendente { font-family: var(--font-ui); font-size: 14px; color: var(--ink); border: 1px dashed var(--line-strong); padding: var(--space-2) var(--space-3); }

/* A partir do tablet */
@media (min-width: 768px) {
  .wrap { padding: 0 var(--space-6); }
  .secao { padding: var(--space-8) 0; }
  .h2 { font-size: 32px; line-height: 40px; }
  .hero { padding: var(--space-8) 0 var(--space-7); }
  .hero h1 { font-size: 44px; line-height: 52px; }
  .hero__acoes .vt-btn--primario { width: auto; }
  .beneficios { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .perfis { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .form { padding: var(--space-6); }
  .form__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .opcoes--2 { grid-template-columns: 1fr 1fr; }
  .form .vt-btn--primario { width: auto; justify-self: start; }
  .faixa p { font-size: 28px; line-height: 40px; }
  .compara__cab { display: grid; grid-template-columns: 0.7fr 1fr 1fr; gap: var(--space-6); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .compara__linha { grid-template-columns: 0.7fr 1fr 1fr; gap: var(--space-6); }
  .compara__col .rotulo { display: none; }
}
.form__dupla { display: grid; gap: var(--space-5); }

/* Desktop */
@media (min-width: 1024px) {
  .cab__nav { display: flex; }
  .hero__grade { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
  .beneficios { grid-template-columns: repeat(4, 1fr); }
  .problema { grid-template-columns: 5fr 6fr; gap: var(--space-8); align-items: start; }
  .problema .secao__cab { margin-bottom: 0; }
  .passos { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-7); }
  .passos li { grid-template-columns: 40px 1fr; }
  .perfis { grid-template-columns: repeat(3, 1fr); }
  .numeros { grid-template-columns: 5fr 6fr; gap: var(--space-8); align-items: start; }
  .numeros .secao__cab { margin-bottom: 0; }
  .contato { grid-template-columns: 4fr 7fr; gap: var(--space-8); }
  .rodape__topo { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-6); }
  .rodape__topo span { justify-self: end; }
  .promessa { padding: var(--space-7) var(--space-6); }
  .promessa blockquote { font-size: 22px; line-height: 34px; }
}

/* ===== v2 (benchmark 13/10): confiança, perfis, guias, formulário em etapas ===== */
.tabela-titulo { text-align: left; caption-side: top; padding-bottom: var(--space-3); }

/* Faixa de confiança: regulação e método, sem número inventado */
.confianca { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; border-top: 1px solid var(--ink); }
.confianca li { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.confianca strong { font-family: var(--font-ui); font-weight: 500; font-size: 15px; line-height: 22px; color: var(--ink); }
.confianca span { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.hero .beneficios { margin-top: var(--space-6); }

.nota-guia { margin-top: var(--space-5); color: var(--ink-muted); max-width: 65ch; }
.perfis .perfis__link { font-family: var(--font-ui); font-size: 15px; line-height: 22px; }
.faixa__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-4); font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--on-deep); }
.faixa__link:hover { color: var(--on-deep); text-decoration-thickness: 2px; }
.faixa :focus-visible { outline-color: var(--on-deep); }

/* Lista de guias: lista com filetes, sem cartões */
.guias-lista { list-style: none; padding: 0; border-top: 1px solid var(--ink); max-width: 820px; }
.guias-lista li { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.guias-lista a { font-family: var(--font-display); font-size: 19px; line-height: 28px; color: var(--ink); text-decoration-color: var(--line-strong); }
.guias-lista a:hover { color: var(--action); text-decoration-color: currentColor; }
.guias-lista span { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.mais { margin-top: var(--space-5); font-family: var(--font-ui); font-size: 15px; }
.guias-proximos { margin-top: var(--space-6); max-width: 820px; }
.guias-proximos ul { margin-top: var(--space-2); padding-left: var(--space-5); color: var(--ink-muted); display: grid; gap: var(--space-2); }

/* Páginas de perfil */
.migalhas { font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-bottom: var(--space-5); }
.migalhas a { color: var(--ink-muted); }
.migalhas a:hover { color: var(--action); }
.hero--perfil { padding-top: var(--space-5); }
.tabela-texto th { font-family: var(--font-ui); font-size: 12px; }
.tabela-texto td { font-family: var(--font-display); font-size: 15px; line-height: 24px; vertical-align: top; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.tabela-texto td:first-child { font-family: var(--font-display); color: var(--ink); white-space: nowrap; padding-right: var(--space-4); }
.tabela-texto td + td { color: var(--ink-muted); padding-right: var(--space-4); }
.tabela-nota { margin-top: var(--space-3); font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.exemplo { margin-top: var(--space-6); max-width: 720px; display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-2); background: var(--surface-raised); }
.secao--branca .exemplo { background: var(--surface); }
.exemplo p { color: var(--ink); }

/* Formulário em duas etapas */
.contato__prazo { font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink-muted); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.form__etapa { display: grid; gap: var(--space-5); }
.form__passo { font-family: var(--font-ui); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-muted); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.form__retorno { color: var(--ink); }
.form__retorno:empty { display: none; }
.form__wa { font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.form__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }

/* Rodapé: mapa do site */
.rodape__mapa { display: grid; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--grade); }
.rodape__mapa div { display: grid; gap: var(--space-2); align-content: start; }
.rodape__mapa a { text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.rodape__mapa a:hover { text-decoration: underline; }
.rodape__tit { color: var(--aguada-soft); font-weight: 500; }

/* Guias (artigos) */
.artigo { padding: var(--space-6) 0 var(--space-7); }
.artigo__corpo { max-width: 720px; }
.artigo__corpo > * + * { margin-top: var(--space-4); }
.artigo h1, .guias-cab h1 { font-family: var(--font-display); font-size: 30px; line-height: 38px; letter-spacing: -0.3px; }
.artigo__cab { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.artigo__meta { font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.resposta { padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-2); background: var(--surface-raised); display: grid; gap: var(--space-2); }
.resposta p:not(.rotulo) { font-size: 17px; line-height: 28px; color: var(--ink); }
.artigo h2 { font-family: var(--font-display); font-size: 22px; line-height: 30px; margin-top: var(--space-7); }
.artigo__corpo p, .artigo__corpo li { color: var(--ink-muted); }
.artigo__corpo strong { color: var(--ink); font-weight: 700; }
.artigo__corpo ul, .artigo__corpo ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.artigo__corpo .exemplo, .artigo__corpo .tabela-rola { margin-top: var(--space-5); }
.artigo__cta { margin-top: var(--space-7); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-2); display: grid; gap: var(--space-3); justify-items: start; max-width: 720px; }
.artigo__cta-tit { font-family: var(--font-display); font-size: 20px; line-height: 28px; color: var(--ink); }
.artigo__cta p:not(.artigo__cta-tit) { color: var(--ink-muted); }
.artigo__aviso { margin-top: var(--space-6); font-family: var(--font-ui); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.guias-cab { margin-bottom: var(--space-6); }

@media (max-width: 767px) {
  .tabela-texto thead { display: none; }
  .tabela-texto, .tabela-texto tbody, .tabela-texto tr, .tabela-texto td { display: block; }
  .tabela-texto tr { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
  .tabela-texto td { border: 0; padding: var(--space-1) 0; white-space: normal; font-family: var(--font-display); font-size: 16px; line-height: 26px; }
  .tabela-texto td:first-child { font-size: 19px; line-height: 28px; white-space: normal; padding-bottom: var(--space-2); }
  .tabela-texto td + td::before { content: attr(data-r); display: block; font-family: var(--font-ui); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); }
  .tabela-texto tbody { border-top: 1px solid var(--ink); }
}
@media (min-width: 768px) {
  .confianca { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .rodape__mapa { grid-template-columns: repeat(3, 1fr); }
  .artigo { padding: var(--space-7) 0 var(--space-8); }
  .artigo h1, .guias-cab h1 { font-size: 38px; line-height: 46px; }
  .artigo h2 { font-size: 26px; line-height: 34px; }
}
@media (min-width: 1024px) {
  .confianca { grid-template-columns: repeat(4, 1fr); }
  .confianca li { border-bottom: 0; padding-right: var(--space-4); }
  .tabela-texto { min-width: 0; }
}