/* Comt IPTV — sistema de design: paleta "sinal em colmeia" (verde-
   petróleo profundo + amarelo-sinal vibrante + creme quente, com tijolo
   terroso como realce), tipografia Urbanist (títulos, grotesca larga) e
   Nunito Sans (corpo). Cabeçalho com navegação em cápsula segmentada
   (estilo alternador de abas), hero em banner de largura total com
   sobreposição escura e cartão de destaque flutuante, diferenciais em
   grade hexagonal, planos em lista de acordeão expansível, passo a passo
   em coluna vertical reta com selos hexagonais numerados, FAQ com ícone
   de cruz que se funde em traço por transição de opacidade, botões em
   formato hexagonal (corte duplo nas laterais), rodapé com onda de sinal
   em zigue-zague — layout, paleta e componentes distintos dos demais
   projetos gerados a partir de prompts semelhantes. */

:root{
  --teal:#0E3B3A;
  --teal-2:#164F4D;
  --yellow:#F4C430;
  --yellow-dark:#D9A81A;
  --brick:#C1432B;
  --cream:#FBF6E9;
  --bg:#FBF6E9;
  --bg-2:#F3E9CE;
  --card:#FFFFFF;
  --text:#20241F;
  --text-soft:#69675C;
  --border:#E6DAB8;
  --radius-sm:6px;
  --radius-md:16px;
  --radius-lg:24px;
  --font-head:"Urbanist", Arial, sans-serif;
  --font-body:"Nunito Sans", Arial, sans-serif;
  --shadow-card:0 1px 3px rgba(14,59,58,.09), 0 16px 32px -20px rgba(14,59,58,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.62;
}
img{max-width:100%;display:block}
a{color:var(--brick);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--teal);line-height:1.15;margin:0 0 .5em;font-weight:800}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
section{padding:2.6rem 0}

@media (prefers-reduced-motion: no-preference){
  html.js-anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
  html.js-anim .reveal.is-visible{opacity:1;transform:none}
  .fab-whatsapp{animation:fab-bob 2.4s ease-in-out infinite}
  @keyframes fab-bob{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
  }
}

/* ---------- Botões (formato hexagonal) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.8rem;font-weight:800;font-size:.95rem;
  border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:44px;font-family:var(--font-head);
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brick);color:#fff}
.btn-primary:hover{background:#A6371F;text-decoration:none;box-shadow:0 10px 22px -10px rgba(193,67,43,.55)}
.btn-outline{background:transparent;border-color:var(--teal);color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff;text-decoration:none}
.btn-cream{background:var(--yellow);color:var(--teal);border-color:var(--yellow)}
.btn-cream:hover{background:var(--yellow-dark);text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.24);text-decoration:none}
.btn-sm{padding:.55rem 1.2rem;font-size:.85rem;min-height:38px}
.btn-block{width:100%}

/* ---------- Cabeçalho (cápsula de navegação segmentada) ---------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.5rem}
.logo img{height:34px;width:auto}
.main-nav{display:none}
.main-nav ul{
  display:flex;list-style:none;gap:.15rem;margin:0;padding:.25rem;background:var(--bg-2);
  border-radius:999px;border:1px solid var(--border);
}
.main-nav a{
  display:inline-block;color:var(--teal);font-weight:700;font-size:.85rem;padding:.5rem 1rem;
  border-radius:999px;
}
.main-nav a:hover{text-decoration:none;background:rgba(14,59,58,.06)}
.main-nav a[aria-current="page"]{background:var(--teal);color:#fff}
.header-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--border);background:transparent;cursor:pointer;color:var(--teal);
}
.icon-btn:hover{background:var(--bg-2)}
.menu-toggle{display:inline-flex}
@media (min-width:960px){
  .main-nav{display:block}
  .menu-toggle{display:none}
}

/* ---------- Menu mobile ---------- */
.mobile-nav{position:fixed;inset:0;background:rgba(14,59,58,.62);z-index:60;display:none}
.mobile-nav.open{display:block}
.mobile-nav-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(88vw,340px);background:#fff;
  padding:1.4rem;overflow-y:auto;box-shadow:-12px 0 30px rgba(14,59,58,.3);
}
.mobile-nav-panel ul{list-style:none;margin:1.2rem 0;padding:0}
.mobile-nav-panel li{border-bottom:1px solid var(--border)}
.mobile-nav-panel a{display:block;padding:.85rem .2rem;font-weight:700;color:var(--teal);font-size:1.02rem;font-family:var(--font-head)}
.mobile-nav-panel a:hover{text-decoration:none;color:var(--brick)}
.mobile-nav-panel .icon-btn{color:var(--teal);border-color:var(--border)}
.mobile-close{float:right}

/* ---------- Busca ---------- */
.search-overlay{position:fixed;inset:0;background:rgba(14,59,58,.62);z-index:70;display:none;padding-top:6vh}
.search-overlay.open{display:block}
.search-panel{background:#fff;max-width:640px;margin:0 auto;border-radius:var(--radius-lg);padding:1.5rem;max-height:82vh;overflow-y:auto}
.search-panel h2{margin-bottom:.8rem}
.search-panel .icon-btn{color:var(--teal);border-color:var(--border)}
.search-form{display:flex;gap:.5rem}
.search-form input{flex:1;padding:.75rem 1rem;border:2px solid var(--border);border-radius:8px;font-size:1rem;font-family:inherit}
.search-form input:focus{border-color:var(--brick)}
.search-results{margin-top:1.2rem;display:grid;gap:.7rem}
.search-results a{display:block;padding:.85rem 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--teal)}
.search-results a:hover{border-color:var(--brick);text-decoration:none;background:var(--bg-2)}
.search-results small{display:block;color:var(--text-soft);font-weight:400;margin-top:.2rem}
.search-empty{color:var(--text-soft)}

/* ---------- Hero (banner de largura total com sobreposição) ---------- */
.hero{position:relative;padding:0;overflow:hidden}
.hero-banner{position:relative;min-height:420px;display:flex;align-items:center}
.hero-banner img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-banner::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(14,59,58,.94) 0%, rgba(14,59,58,.82) 42%, rgba(14,59,58,.42) 100%);
  z-index:1;
}
.hero-inner{position:relative;z-index:2;padding:3.4rem 0}
.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--teal);background:var(--yellow);padding:.32rem .9rem;border-radius:4px;
}
.hero-inner h1{font-size:2.3rem;margin-top:1rem;color:#fff;max-width:20ch}
.hero-inner .lead{color:rgba(251,246,233,.88);font-size:1.05rem;max-width:48ch;margin:.8rem 0 0}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem;color:rgba(251,246,233,.78);font-size:.86rem}
.hero-meta strong{color:var(--yellow)}
.hero-float-card{
  position:relative;z-index:2;max-width:300px;background:var(--card);border-radius:var(--radius-lg);
  box-shadow:0 20px 44px -18px rgba(14,59,58,.5);padding:1.3rem 1.4rem;margin:-2.6rem auto 2.4rem;
}
.hero-float-card h3{font-size:.98rem;margin:0 0 .3rem}
.hero-float-card p{color:var(--text-soft);font-size:.86rem;margin:0}
@media (min-width:760px){
  .hero-float-card{margin:-3.2rem 0 0 2.4rem}
}

/* ---------- Cabeçalhos de seção ---------- */
.section-head{text-align:center;max-width:64ch;margin:0 auto 2rem}
.section-head .eyebrow-center{
  display:inline-flex;font-size:.76rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brick);background:rgba(193,67,43,.09);padding:.3rem .75rem;border-radius:4px;margin-bottom:.6rem;
}
.section-head h2{margin:0}
.section-head p{color:var(--text-soft);margin-top:.5rem}
.section-head.left{text-align:left;margin:0 0 1.6rem}

/* ---------- Diferenciais: grade hexagonal ---------- */
.hex-grid{display:grid;gap:1.6rem 1.1rem;grid-template-columns:1fr;max-width:900px;margin:0 auto}
@media (min-width:680px){ .hex-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .hex-grid{grid-template-columns:repeat(4,1fr)} }
.hex-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.hex-badge{
  width:88px;height:96px;display:flex;align-items:center;justify-content:center;font-size:1.9rem;
  background:var(--teal);color:var(--yellow);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hex-item:nth-child(3n+2) .hex-badge{background:var(--brick);color:var(--cream)}
.hex-item:nth-child(3n) .hex-badge{background:var(--yellow-dark);color:var(--teal)}
.hex-item h3{font-size:1.02rem;margin:0}
.hex-item p{color:var(--text-soft);font-size:.9rem;margin:0;max-width:26ch}

/* ---------- Compatibilidade (chips) ---------- */
.compat-chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.2rem}
.compat-chip{
  padding:.5rem 1.1rem;border-radius:999px;background:var(--card);border:1px solid var(--border);
  font-weight:700;font-size:.86rem;color:var(--teal);box-shadow:var(--shadow-card);
}

/* ---------- Passo a passo: coluna vertical reta com selos hexagonais ---------- */
.hex-steps{position:relative;max-width:640px;margin:0 auto;display:grid;gap:0}
.hex-step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:1.1rem;padding-bottom:1.8rem}
.hex-step:last-child{padding-bottom:0}
.hex-step::before{
  content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--border);
}
.hex-step:last-child::before{display:none}
.hex-step-num{
  width:56px;height:60px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--teal);color:var(--yellow);font-family:var(--font-head);font-weight:800;font-size:1.1rem;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);position:relative;z-index:1;
}
.hex-step-body{padding-top:.5rem}
.hex-step-body h3{font-size:1.02rem;margin:0 0 .3rem}
.hex-step-body p{color:var(--text-soft);font-size:.9rem;margin:0}

/* ---------- Planos: lista de acordeão expansível ---------- */
.plans-accordion{max-width:760px;margin:0 auto;display:grid;gap:.9rem}
.plan-row{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-card);
}
.plan-row.is-highlight{border-color:var(--yellow);border-width:2px}
.plan-row-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;cursor:pointer;
  list-style:none;
}
.plan-row-head::-webkit-details-marker{display:none}
.plan-row-name{display:flex;align-items:center;gap:.7rem;font-family:var(--font-head);font-weight:800;color:var(--teal);font-size:1.05rem}
.plan-ribbon{
  font-family:var(--font-body);font-weight:800;font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--yellow);color:var(--teal);padding:.2rem .55rem;border-radius:4px;
}
.plan-row-price{display:flex;align-items:baseline;gap:.4rem}
.plan-row-price .amount{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--brick)}
.plan-row-price .period{font-size:.78rem;color:var(--text-soft)}
.plan-row-toggle{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;border:2px solid var(--border);position:relative;
}
.plan-row-toggle::before,.plan-row-toggle::after{
  content:"";position:absolute;background:var(--teal);left:50%;top:50%;transform:translate(-50%,-50%);
}
.plan-row-toggle::before{width:12px;height:2px}
.plan-row-toggle::after{width:2px;height:12px;transition:opacity .15s ease}
.plan-row[open] .plan-row-toggle::after{opacity:0}
.plan-row[open] .plan-row-toggle{border-color:var(--brick)}
.plan-row-body{padding:0 1.4rem 1.3rem}
.plan-feats{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.5rem;font-size:.9rem}
.plan-feat{display:flex;gap:.5rem;align-items:flex-start}
.plan-feat::before{content:"✓";font-weight:800;color:var(--brick)}

/* ---------- Faixa CTA ---------- */
.cta-band{
  background:var(--teal);color:#fff;border-radius:var(--radius-lg);
  padding:2.2rem;display:grid;gap:1.3rem;position:relative;overflow:hidden;text-align:center;
}
.cta-band::before{
  content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(244,196,48,.32), transparent 70%);
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.84);max-width:56ch;margin:.4rem auto 0}
.article-body .cta-band h2{color:#fff}
.article-body .cta-band p{color:rgba(255,255,255,.84)}
.cta-band .cta-action{display:flex;justify-content:center;margin-top:.4rem;position:relative}

/* ---------- Grids e cards de artigo ---------- */
.grid{display:grid;gap:1.3rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:680px){ .grid-2{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} }

.card{
  background:var(--card);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;position:relative;
}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(14,59,58,.1), 0 18px 36px -18px rgba(14,59,58,.38)}
.card .thumb{aspect-ratio:16/9;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{padding:1.05rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{font-size:1.03rem;margin:0}
.card h3 a{color:var(--teal)}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{color:var(--text-soft);font-size:.92rem;margin:0}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-soft);margin-top:auto;padding-top:.4rem}
.card .read-more{font-weight:700;color:var(--brick)}

.eyebrow{
  display:inline-flex;align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:4px;color:#fff;
}
.tag-iptv{background:var(--teal)}
.tag-teste-iptv{background:var(--brick)}
.tag-lista-iptv{background:#5C4A1F}
.tag-planos{background:#8A5A1F}
.tag-canais{background:#3E6B4A}

/* ---------- FAQ (cruz que se funde em traço) ---------- */
.faq{margin-top:1.6rem;max-width:820px;margin-left:auto;margin-right:auto}
.faq details{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:.7rem;padding:0;transition:border-color .15s ease;
}
.faq details[open]{border-color:var(--brick)}
.faq summary{
  cursor:pointer;padding:1.05rem 1.2rem;font-weight:700;color:var(--teal);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;font-family:var(--font-head);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .faqicon{
  flex:0 0 auto;width:22px;height:22px;position:relative;
}
.faq summary .faqicon::before,.faq summary .faqicon::after{
  content:"";position:absolute;background:var(--teal);left:50%;top:50%;transform:translate(-50%,-50%);
  transition:opacity .18s ease, background .15s ease;
}
.faq summary .faqicon::before{width:16px;height:3px}
.faq summary .faqicon::after{width:3px;height:16px}
.faq details[open] summary .faqicon::after{opacity:0}
.faq details[open] summary .faqicon::before{background:var(--brick)}
.faq p{padding:0 1.2rem 1.1rem;color:var(--text-soft);margin:0}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding:.85rem 0;font-size:.85rem;color:var(--text-soft)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0}
.breadcrumbs li:not(:last-child)::after{content:"›";margin-left:.4rem;color:var(--border)}
.breadcrumbs a{color:var(--text-soft)}

/* ---------- Artigo ---------- */
.article-hero-media{border-radius:var(--radius-lg);overflow:hidden;margin:1.2rem 0 1.6rem;aspect-ratio:16/8.4}
.article-hero-media img{width:100%;height:100%;object-fit:cover}
.article-layout{display:grid;gap:2rem;padding-top:1rem;padding-bottom:2rem}
@media (min-width:960px){ .article-layout{grid-template-columns:1fr 280px} }
.article-body h2{margin-top:1.7em;scroll-margin-top:5rem;font-size:1.32rem}
.article-body h3{margin-top:1.2em;scroll-margin-top:5rem;font-size:1.08rem}
.article-body p{color:#292D26;font-size:1.02rem}
.article-body ul,.article-body ol{color:#292D26;margin-bottom:1.1em}
.article-body li{margin-bottom:.4em}
.toc{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.2rem;
  align-self:start;position:sticky;top:5.4rem;
}
.toc h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.7rem}
.toc ol{margin:0;padding-left:1.1rem;font-size:.9rem}
.toc li{margin-bottom:.5em}
.toc a{color:var(--text-soft)}
.author-box{
  display:flex;gap:.9rem;align-items:center;background:var(--bg-2);border-radius:var(--radius-md);
  padding:1rem 1.1rem;margin-top:1.8rem;
}
.author-avatar{width:44px;height:44px;border-radius:50%;background:var(--brick);flex:0 0 auto}
.author-box strong{color:var(--teal);display:block;font-family:var(--font-head)}
.author-box p{margin:.15rem 0 0;color:var(--text-soft);font-size:.88rem}

/* ---------- Institucional ---------- */
.prose{max-width:76ch}
.prose h2{margin-top:1.6em}
.prose p,.prose li{color:#292D26}

/* ---------- Formulário de contato (estático) ---------- */
.contact-grid{display:grid;gap:1.6rem}
@media (min-width:820px){ .contact-grid{grid-template-columns:1.1fr .9fr} }
.contact-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-card)}

/* ---------- Rodapé (onda de sinal em zigue-zague) ---------- */
.site-footer{background:var(--teal);color:rgba(255,255,255,.8);margin-top:2.5rem;position:relative}
.site-footer::before{
  content:"";display:block;height:14px;
  background-image:
    linear-gradient(135deg, transparent 47%, rgba(244,196,48,.55) 49%, rgba(244,196,48,.55) 51%, transparent 53%),
    linear-gradient(45deg, transparent 47%, rgba(251,246,233,.4) 49%, rgba(251,246,233,.4) 51%, transparent 53%);
  background-size:24px 100%, 24px 100%;
  background-position:0 0, 12px 0;
  opacity:.85;
}
.footer-grid{display:grid;gap:1.8rem;padding:2.6rem 0 1.6rem}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr} }
.footer-grid h4{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.7rem;font-family:var(--font-head)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-grid a{color:rgba(255,255,255,.76)}
.footer-grid a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:.5rem;font-weight:800;color:#fff;margin-bottom:.6rem}
.footer-brand img{height:26px;filter:brightness(0) invert(1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:1.1rem 0;font-size:.82rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between}
.footer-disclaimer{font-size:.78rem;color:rgba(255,255,255,.55);padding-bottom:1rem}

/* ---------- Botão flutuante do WhatsApp ---------- */
.fab-whatsapp{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;width:58px;height:58px;
  background:var(--brick);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 6px 18px -6px rgba(14,59,58,.5);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.fab-whatsapp:hover{background:#A6371F;text-decoration:none}
@media (min-width:960px){ .fab-whatsapp{right:1.6rem;bottom:1.6rem} }

/* ---------- Diversos ---------- */
.pill-list{margin:0;padding-left:1.2rem}
.pill-list li{margin-bottom:.5em}
.hub-intro{color:var(--text-soft);max-width:76ch;margin-left:auto;margin-right:auto;text-align:center}
.error-page{padding:4rem 0;text-align:center}
.error-page .code{font-family:var(--font-head);font-size:4.5rem;color:var(--brick);font-weight:800;margin:0}