/* GENERATED by scripts/build-design-layer.mjs — edit the files in src/design-layer/ */

/* ═════ tokens.css ═════ */
/* tokens.css — camada de design por cima do qa.brikl.com
 * Destino no repo: o CSS global (:root) e o CSS da homepage (.rbx).
 *
 * EXPLORAÇÃO: LIGHT MODE v1 (2026-09-08)
 * Os valores do :root abaixo são os que o próprio site já define em
 * `:root[data-theme=light]`. No repo, ativar light = data-theme="light" no <html>
 * OU promover estes valores pro :root. Os valores do .rbx não existem no site;
 * são propostos aqui.
 */

:root {
  --background: #ffffff;
  --foreground: #0e1116;

  /* shell (header, footer, nav, announce) — valores do bloco light do site */
  --sh-bg: #ffffff;
  --sh-ink: #0e1116;
  --sh-mut: #565c68;
  --sh-dim: #838a97;
  --sh-line: #e7e9ee;
  --sh-line2: #d7dae1;
  --sh-panel: #ffffff;
  --sh-panel2: #f3f4f7;
  --sh-mega-bg: linear-gradient(180deg, #e9eefb 0%, #f4f7fe 100%);
  --sh-hover: #141e3c0d;
  --sh-acc: #3a5fd9;
  --sh-acc-hover: #2f52d8;
  --sh-acc-ink: #2f52d8;
  --sh-acc-soft: #3a5fd91a;
  --sh-acc-border: #c3d0f5;
  --sh-new: #0a8a44;
  --sh-new-soft: #0a8a441f;
  --sh-soon-bg: #5a5a6e1a;
  --sh-soon-ink: #565c68;
  --sh-soon-border: #d7dae1;
  --sh-header-bg: #ffffffdb;
  --sh-footer-bg: #f7f8fa;
  --sh-announce-grad: linear-gradient(90deg, #eef2ff, #f7f8fa 60%);
  --sh-promo-grad: linear-gradient(160deg, #eef2ff, #f7f8fc);
  --sh-promo-border: #d8e0f5;
  --sh-mega-shadow: 0 24px 60px #141e3c1f;
  --sh-brand-grad: linear-gradient(135deg, #6f95ff, #3a5fd9);
  --sh-tm: #a2a7b2;
}

/* homepage — valores originais (dark) em comentário ao lado */
.rbx {
  --bg: #ffffff;              /* #08080b */
  --bg-raise: #f7f8fa;        /* #101016 */
  --bg-card: #ffffff;         /* #12121a */
  --bg-pill: #f3f4f7;         /* #16161c */
  --text: #0e1116;            /* #f5f5f7 */
  --muted: #565c68;           /* #9a9da8 */
  --muted-2: #6b7280;         /* #83868f */
  --line: #0e111614;          /* #ffffff14 */
  --blue: #3a63f5;            /* igual */
  --blue-hover: #2f52d8;      /* #4d74ff */
  --grad-a: #4d74ff;          /* igual */
  --grad-b: #7c5cff;          /* igual */
  --grad-text: linear-gradient(90deg, #7c3aed -31.11%, #0ea5e9 100%); /* #b688d5 → #45e1fc: escurecido p/ fundo claro */
  --green: #0a8a44;           /* #34d399 */
  /* --radius: 10px; --radius-lg: 20px; --container: 1120px; (inalterados) */
}


/* ═════ overrides.css ═════ */
/* overrides.css — remapeamento das cores FIXAS (classes Tailwind arbitrárias) do qa.brikl.com
 *
 * v2 — TODAS as cores acompanham --k (0 = claro, 1 = escuro), como os tokens da home.
 * Cada regra é color-mix(claro, ORIGINAL-escuro k): no trecho escuro a página inteira
 * (internas incluídas) volta à paleta escura original do site, sem corte.
 *
 * [DE]   páginas internas usam text-[#f5f5f7], bg-[#16161c], border-white/[0.08] etc.
 *        direto no className, sem token.
 * [PARA] no repo, cada classe abaixo vira um token de tema (ex.: text-[#f5f5f7] → text-[var(--text)]).
 *        Esta lista É a lista de literais a tokenizar. A versão estática anterior está em
 *        overrides.light-static.bak.css.
 * Nota técnica: utilities do Tailwind v4 vivem em @layer utilities; regras sem layer vencem sem !important.
 */

/* ---- texto ---- */
.text-\[\#f5f5f7\], .text-white, .hover\:text-white:hover,
.hover\:text-\[\#f5f5f7\]:hover,
.group-hover\:text-\[\#f5f5f7\]:is(:where(.group):hover *) { color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
.text-\[\#e6e7ea\] { color: color-mix(in srgb, #1a1f27, #e6e7ea calc(var(--k) * 100%)); }
.text-\[\#c2c4cb\], .text-\[\#c7c9d1\] { color: color-mix(in srgb, #2b3038, #c2c4cb calc(var(--k) * 100%)); }
.text-\[\#9a9da6\], .hover\:text-\[\#9a9da6\]:hover, .text-\[\#a8abb4\], .text-\[\#a0a0b4\] { color: color-mix(in srgb, #565c68, #9a9da6 calc(var(--k) * 100%)); }
.text-\[\#83868f\] { color: color-mix(in srgb, #6b7280, #83868f calc(var(--k) * 100%)); }
.text-\[\#6d6d7b\] { color: color-mix(in srgb, #838a97, #6d6d7b calc(var(--k) * 100%)); }
.text-\[\#4d74ff\], .hover\:text-\[\#4d74ff\]:hover,
.group-hover\:text-\[\#4d74ff\]:is(:where(.group):hover *) { color: color-mix(in srgb, #2f52d8, #4d74ff calc(var(--k) * 100%)); }
.text-\[\#7c9cff\], .hover\:text-\[\#7c9cff\]:hover, .hover\:text-\[\#6a8bff\]:hover,
.group-hover\:text-\[\#7f9cff\]:is(:where(.group):hover *) { color: color-mix(in srgb, #3a5fd9, #7c9cff calc(var(--k) * 100%)); }
.text-\[\#a9c0ff\] { color: color-mix(in srgb, #2f52d8, #a9c0ff calc(var(--k) * 100%)); }
.text-green-400 { color: color-mix(in srgb, #0a8a44, #4ade80 calc(var(--k) * 100%)); }
.text-amber-400 { color: color-mix(in srgb, #b45309, #fbbf24 calc(var(--k) * 100%)); }
.text-emerald-400 { color: color-mix(in srgb, #047857, #34d399 calc(var(--k) * 100%)); }
.text-\[\#5eead4\] { color: color-mix(in srgb, #0f766e, #5eead4 calc(var(--k) * 100%)); }
.\[--tw-prose-body\:\#c2c4cb\] { --tw-prose-body: color-mix(in srgb, #2b3038, #c2c4cb calc(var(--k) * 100%)); }

/* ---- fundos (página segue --bg-l/--bg-d; superfícies derivam deles) ---- */
.bg-\[\#08080b\] { background-color: color-mix(in srgb, var(--bg-l), var(--bg-d) calc(var(--k) * 100%)); }   /* fundo de página */
.bg-\[\#08080b\]\/90 { background-color: color-mix(in srgb, color-mix(in srgb, var(--bg-l), transparent 10%), color-mix(in srgb, var(--bg-d), transparent 10%) calc(var(--k) * 100%)); }
.bg-\[\#0e0e13\], .bg-\[\#0e0e12\], .bg-\[\#0b0d18\] { background-color: color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 3%), color-mix(in srgb, var(--bg-d), #fff 2.5%) calc(var(--k) * 100%)); }   /* faixas de seção */
.bg-\[\#101015\], .bg-\[\#16161c\], .bg-\[\#12141c\], .focus\:bg-\[\#16161c\]:focus { background-color: color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 5%), color-mix(in srgb, var(--bg-d), #fff 6%) calc(var(--k) * 100%)); }   /* cards / pills */
.bg-\[\#101015\]\/50, .bg-\[\#16161c\]\/50 { background-color: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 5%), transparent 50%), color-mix(in srgb, #16161c, transparent 50%) calc(var(--k) * 100%)); }
.bg-\[\#16161c\]\/90 { background-color: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 5%), transparent 10%), color-mix(in srgb, #16161c, transparent 10%) calc(var(--k) * 100%)); }
.bg-\[\#1b2036\] { background-color: color-mix(in srgb, #e9eefb, #1b2036 calc(var(--k) * 100%)); }
.bg-\[\#1b1b22\], .hover\:bg-\[\#1b1b22\]:hover { background-color: color-mix(in srgb, #e7e9ee, #1b1b22 calc(var(--k) * 100%)); }
.bg-\[\#3a3f52\] { background-color: color-mix(in srgb, #d7dae1, #3a3f52 calc(var(--k) * 100%)); }
.hover\:bg-white\/5:hover, .hover\:bg-white\/\[0\.05\]:hover, .hover\:bg-white\/\[0\.06\]:hover, .bg-white\/\[0\.06\] { background-color: color-mix(in srgb, rgba(14,17,22,.05), rgba(255,255,255,.06) calc(var(--k) * 100%)); }
.from-\[\#08080b\] { --tw-gradient-from: color-mix(in srgb, var(--bg-l), var(--bg-d) calc(var(--k) * 100%)); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); }
.hover\:bg-\[\#3a63f5\]:hover { color: #ffffff; }

/* ---- bordas e divisores (white/α → ink/α no claro; voltam a white/α no escuro) ---- */
.border-white\/\[0\.06\] { border-color: color-mix(in srgb, rgba(14,17,22,.06), rgba(255,255,255,0.06) calc(var(--k) * 100%)); }
.border-white\/\[0\.08\] { border-color: color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,0.08) calc(var(--k) * 100%)); }
.border-white\/\[0\.10\] { border-color: color-mix(in srgb, rgba(14,17,22,.10), rgba(255,255,255,0.10) calc(var(--k) * 100%)); }
.border-white\/\[0\.12\] { border-color: color-mix(in srgb, rgba(14,17,22,.12), rgba(255,255,255,0.12) calc(var(--k) * 100%)); }
.border-white\/\[0\.14\] { border-color: color-mix(in srgb, rgba(14,17,22,.14), rgba(255,255,255,0.14) calc(var(--k) * 100%)); }
.border-white\/\[0\.16\], .hover\:border-white\/\[0\.16\]:hover { border-color: color-mix(in srgb, rgba(14,17,22,.16), rgba(255,255,255,0.16) calc(var(--k) * 100%)); }
.border-white\/10 { border-color: color-mix(in srgb, rgba(14,17,22,.10), rgba(255,255,255,.10) calc(var(--k) * 100%)); }
.hover\:border-white\/25:hover { border-color: color-mix(in srgb, rgba(14,17,22,.25), rgba(255,255,255,.25) calc(var(--k) * 100%)); }
.border-white, .hover\:border-\[\#f5f5f7\]:hover { border-color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
.border-\[\#4a4a52\] { border-color: color-mix(in srgb, #d7dae1, #4a4a52 calc(var(--k) * 100%)); }
:where(.divide-white\/\[0\.08\] > :not(:last-child)) { border-color: color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.08) calc(var(--k) * 100%)); }

/* ---- logo (replica o que o site faz em :root[data-theme=light]) ---- */
.sh .brand-logo-dark  { display: none; }
.sh .brand-logo-light { height: 44px; margin: -7px 0; display: block; }

/* ---- homepage: regras custom .rbx com hex escuro ---- */
.rbx .site-header.scrolled { background: transparent; }
.rbx .btn-ghost:hover { border-color: color-mix(in srgb, rgba(14,17,22,.3), rgba(255,255,255,.3) calc(var(--k) * 100%)); }
.rbx .badge-pill:hover { border-color: color-mix(in srgb, rgba(14,17,22,.25), rgba(255,255,255,.25) calc(var(--k) * 100%)); }
.rbx .event-card:hover { border-color: color-mix(in srgb, rgba(14,17,22,.2), rgba(255,255,255,.2) calc(var(--k) * 100%)); }
.rbx .rating-line .star-dim { color: color-mix(in srgb, #d7dae1, #4a4a52 calc(var(--k) * 100%)); }
.rbx .step-node { background: color-mix(in srgb, rgba(255,255,255,.65), rgba(255,255,255,.06) calc(var(--k) * 100%)); }
.rbx .step-node:before { border-color: color-mix(in srgb, rgba(14,17,22,.24), rgba(255,255,255,.24) calc(var(--k) * 100%)); }
.rbx .modtile { background: color-mix(in srgb, rgba(14,17,22,.02), rgba(255,255,255,.02) calc(var(--k) * 100%)); }

/* ---- faixas de logos: multiply no claro, screen+invert no escuro (classe .is-dark vem do JS) ---- */
.invert.mix-blend-screen                 { filter: grayscale(1) opacity(.75); mix-blend-mode: multiply; }
body.is-dark .invert.mix-blend-screen    { filter: grayscale(1) invert(1) opacity(.75); mix-blend-mode: screen; }
.rbx .story-eyebrow img                  { filter: grayscale(1) opacity(.75); mix-blend-mode: multiply; }
body.is-dark .rbx .story-eyebrow img     { filter: grayscale(1) invert(1) opacity(.75); mix-blend-mode: screen; }

/* ---- blog (prose) ---- */
.prose :where(h1,h2,h3,h4,h5,h6,strong,th):not(:where([class~=not-prose] *)) { color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
.prose :where(p,li,td):not(:where([class~=not-prose] *)) { color: color-mix(in srgb, #2b3038, #c2c4cb calc(var(--k) * 100%)); }
.prose :where(a):not(:where([class~=not-prose] *)) { color: color-mix(in srgb, #2f52d8, #7c9cff calc(var(--k) * 100%)); }
.prose :where(th,td):not(:where([class~=not-prose] *)) { border-color: color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.08) calc(var(--k) * 100%)); }
.prose :where(th):not(:where([class~=not-prose] *)) { background-color: color-mix(in srgb, #f3f4f7, #16161c calc(var(--k) * 100%)); }

/* ---- painéis com gradiente escuro em style= inline (stops misturados por --k) ---- */
[style*="#1b2340"], [style*="#141a2c 0%"] { background: linear-gradient(160deg, color-mix(in srgb, #e9eefb, #1b2340 calc(var(--k) * 100%)) 0%, color-mix(in srgb, #f4f7fe, #141a2c calc(var(--k) * 100%)) 100%) !important; }
[style*="#0c0f19"] { background: linear-gradient(135deg, color-mix(in srgb, #f3f4f7, #0c0f19 calc(var(--k) * 100%)) 0%, color-mix(in srgb, #f7f8fa, #0b0d14 calc(var(--k) * 100%)) 100%) !important; }
[style*="#2a1f14"] { background: linear-gradient(160deg, color-mix(in srgb, #fbf3ea, #2a1f14 calc(var(--k) * 100%)) 0%, color-mix(in srgb, #f8f2eb, #1c1712 calc(var(--k) * 100%)) 100%) !important; }
[style*="#14251b"] { background: linear-gradient(160deg, color-mix(in srgb, #eaf7ee, #14251b calc(var(--k) * 100%)) 0%, color-mix(in srgb, #f1f7f3, #131c17 calc(var(--k) * 100%)) 100%) !important; }
[style*="#0f2320"] { background: linear-gradient(160deg, color-mix(in srgb, #e9f6f5, #0f2320 calc(var(--k) * 100%)) 0%, color-mix(in srgb, #f1f5f7, #10131f calc(var(--k) * 100%)) 100%) !important; }


/* ═════ components.css ═════ */
/* components.css — componentes "Goons-style" por cima do qa.brikl.com (light mode)
 * Referência: goonsdesign.com/en
 *   1. nav = pílula glassy flutuante centralizada
 *   2. depoimentos = cards empilhados (azul + ink atrás do branco)
 *   3. banners texto + imagem = painel glassy
 *   4. seção que escurece ao entrar no viewport e volta ao claro (CSS scroll-driven)
 *   +  formas desfocadas de fundo = logo Brikl em perspectiva (assets/brikl-mark-perspective.png)
 *
 * [PARA] tudo aqui é CSS de componente. No repo: header (shell), Quote/Testimonial,
 * seções texto+mídia, e a seção "How it works" da home. O asset vai pra public/images.
 */

:root {
  --gl-bg:     rgba(255, 255, 255, .58);
  --gl-border: rgba(14, 17, 22, .08);
  --gl-hi:     inset 0 1px 0 rgba(255, 255, 255, .85);
  --gl-shadow: 0 30px 80px -40px rgba(14, 17, 22, .28);
  --gl-blur:   blur(22px) saturate(1.35);
  --mark:      url(/images/brikl-mark-perspective.png);
}

/* ============================================================
   1. NAV PILL — header transparente, menu vira pílula glassy
   ============================================================ */
.site-header,
.rbx .site-header.scrolled {
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header .hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 76px;
  gap: 0;
}
.site-header .hdr > .brand   { justify-self: start; }
.site-header .hdr > .actions { justify-self: end; }
.mainnav {
  flex: initial;
  height: 52px;
  padding: 0 10px;
  gap: 2px;
  border-radius: 999px;
  /* claro sobre o claro; cinza-claro opaco sobre o trecho escuro (como no Goons) */
  background: color-mix(in srgb, rgba(255, 255, 255, .58), #e2e4ea calc(var(--k) * 100%));
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-hi), 0 10px 30px -16px rgba(14, 17, 22, .35);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
.mainnav > li { height: 52px; }
.sh .navlink {
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0e1116;
}
.sh .navlink:hover,
.sh .navlink[aria-expanded=true] { background: rgba(14, 17, 22, .06); color: #0e1116; }
.sh .actions .ghost   { border-radius: 999px; }
.sh .actions .primary { border-radius: 999px; }
/* ---- MEGA MENU: painel glassy flutuante pendurado na pílula (não mais full-bleed) ----
 * [DE]   .mega absoluto left:0/right:0, gradiente azul, borda-topo azul 2px, itens com tinta azul,
 *        promo com gradiente + placa roxa (imagem).
 * [PARA] shell/header CSS: painel centralizado, vidro branco, ink + um acento. */
.mega {
  left: 50%; right: auto;
  width: min(1120px, calc(100vw - 48px));
  top: calc(100% + 10px);
  margin-top: 0;
  border: 1px solid var(--gl-border);
  border-top: 1px solid var(--gl-border);
  border-bottom: 1px solid var(--gl-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-hi), 0 30px 80px -30px rgba(14, 17, 22, .35);
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .22s ease, transform .32s cubic-bezier(.22, 1, .36, 1), visibility .22s;
}
.mega.open { transform: translateX(-50%) translateY(0); }
.mega .sh-wrap { padding: 30px 34px 28px; gap: 34px; }
.mega .col h3 {
  color: #838a97; border-bottom: 1px solid rgba(14, 17, 22, .08);
  font-size: 11px; letter-spacing: .12em; font-weight: 600;
}
.mega .item { border-radius: 12px; }
.mega .item:hover { background: rgba(14, 17, 22, .05); }
.mega .item .t { color: #0e1116; }
.mega .item:hover .t { color: #0e1116; }
.mega .item .d { color: #565c68; }
.mega .item.item-feature { background: rgba(14, 17, 22, .04); border: 1px solid rgba(14, 17, 22, .08); }
.mega .item.item-feature:hover { border-color: rgba(14, 17, 22, .18); background: rgba(14, 17, 22, .06); }
.mega .promo {
  background: #fff; border: 1px solid rgba(14, 17, 22, .08); border-radius: 18px;
  box-shadow: 0 18px 50px -30px rgba(14, 17, 22, .35);
}
.mega .promo .tag, .mega .tag {
  background: transparent; color: #0e1116; border: 1px solid rgba(14, 17, 22, .18);
  border-radius: 999px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 3px 8px;
}
.mega .tag.soon { color: #565c68; border-color: rgba(14, 17, 22, .12); }
.mega .promo h4 { color: #0e1116; }
.mega .promo p { color: #565c68; }
.mega .promo .go, .mega .seeall { color: #0e1116; }
.mega .promo .go:hover, .mega .seeall:hover { color: #2f52d8; }
/* placa "Turbo store": cor original (Luana: em p&b ficou bizarro) */
.mega .promo-img { border-radius: 10px; }
.mega .seeall.seeall-cta { background: #0e1116; color: #fff; }
.mega .seeall.seeall-cta:hover { background: #2f52d8; }
.mega .mcta a { border-radius: 999px; }
.mega .mcta .a2 { background: #0e1116; }
.mega .promo-feat-plate { border: 1px solid rgba(14, 17, 22, .08); }

/* faixa de logos: a trilha do carrossel tinha background:var(--bg) e virava uma barra
 * branca cortando as nuvens que descem do hero. Transparente; a linha do topo sai também. */
.rbx .marquee-track { background: transparent; }
.rbx .logos { border-top: 0; }
/* a mask-image do .marquee isola o grupo, então multiply nas <img> não vê o fundo da página.
 * Blend no container inteiro: brancos das logos JPEG somem, cinzas escurecem. */
.rbx .marquee { mix-blend-mode: multiply; }
.rbx .marquee-track img { mix-blend-mode: normal; filter: grayscale(1) opacity(.75); }

/* ============================================================
   1c. ANNOUNCE → pílula glassy fixa no rodapé da tela
   Sai do topo (o header sobe pro limite da página). Mesma linguagem da nav:
   vidro claro, texto ink, um só acento. O "Brikl v3.0" vira um chip discreto
   contornado; a marca Hanes fica monocromática; a seta em ink.
   ============================================================ */
.announce {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  z-index: 120;
  width: max-content; max-width: calc(100vw - 32px);
  background: color-mix(in srgb, rgba(255, 255, 255, .72), #e2e4ea calc(var(--k) * 100%));
  border: 1px solid var(--gl-border);
  border-bottom: 1px solid var(--gl-border);
  border-radius: 999px;
  box-shadow: var(--gl-hi), 0 14px 40px -18px rgba(14, 17, 22, .45);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  color: #0e1116;
  font-size: 13px;
}
.announce .sh-wrap { height: 44px; max-width: none; padding: 0 18px 0 8px; gap: 12px; }
.announce .pill {
  color: #0e1116; background: transparent;
  border: 1px solid rgba(14, 17, 22, .18);
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px;
}
.announce .announce-logo { height: 14px; filter: grayscale(1); opacity: .55; }
.announce .announce-copy { color: #0e1116; font-weight: 500; }
.announce .announce-copy strong { color: #0e1116; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(14,17,22,.3); text-underline-offset: 3px; }
.announce .announce-arrow { color: #0e1116; }
.announce .announce-link:hover .announce-copy,
.announce .announce-link:hover .announce-arrow { color: #2f52d8; }
/* o rodapé ganha respiro pra pílula não cobrir a última linha */
.site-footer { padding-bottom: 96px; }
/* o wrapper .sh do header (z 100) e o <footer class="sh"> têm o mesmo z-index; o footer vem
 * depois no DOM e cobria o mega menu e a pílula no fim da página. Sobe o wrapper do header.
 * 2026-09-29: a regra casava só com o announce (`.sh:has(> .announce)`); o site tirou a barra
 * de anúncio e o header voltou a ficar por baixo do footer — agora casa pelo próprio header. */
.sh:has(> .site-header) { z-index: 130; }
.sh:has(> .announce) { top: 0; }   /* o site usa top negativo pra esconder o announce ao rolar; sem announce no fluxo, isso cortava o header */

/* ============================================================
   1b. BOTÕES = PÍLULAS
   home: .btn (primary/ghost). internas: <a>/<button> com rounded-[10px]
   (481 usos, é a classe de botão do site) e os mini-links de ação rounded-lg
   com padding horizontal. Cards-link (rounded-xl/2xl, p-4/p-6) ficam como estão.
   ============================================================ */
.rbx .btn,
a.rounded-\[10px\], button.rounded-\[10px\],
a.rounded-lg.px-3, a.rounded-lg.px-4, button.rounded-lg.px-3, button.rounded-lg.px-4,
a.rounded-lg[class*="py-1"], button.rounded-lg[class*="py-1"] {
  border-radius: 999px;
}
/* cards-link que também têm rounded-lg + p-4 não são botões */
a.rounded-lg.p-4, button.rounded-lg.p-4 { border-radius: .5rem; }

/* ============================================================
   + FORMAS DE FUNDO — "nuvens": manchas de gradiente suaves que derivam
   Três cores (lavanda, azul, ciano), cada mancha com sua própria deriva,
   30–50s por ciclo, ease-in-out, ida e volta. Nada de blur() em movimento:
   o gradiente já nasce difuso e o movimento é só transform (GPU).
   ============================================================ */
/* cores no claro → no escuro (por --k) viram índigo/azul profundo em vez de fumaça cinza */
body {
  --cl-a: color-mix(in srgb, #cdd0ff, #3b2fd6 calc(var(--k) * 100%));   /* lavanda (menos violeta) → índigo */
  --cl-b: color-mix(in srgb, #a9c4ff, #1f49c9 calc(var(--k) * 100%));   /* periwinkle → azul */
  --cl-c: color-mix(in srgb, #bfe9ff, #1a6fa8 calc(var(--k) * 100%));   /* ciano → petróleo */
  /* cauda longa: some devagar, sem borda circular perceptível */
  --cl-stops-a: var(--cl-a) 0%, color-mix(in srgb, var(--cl-a), transparent 30%) 28%, color-mix(in srgb, var(--cl-a), transparent 78%) 62%, transparent 100%;
  --cl-stops-b: var(--cl-b) 0%, color-mix(in srgb, var(--cl-b), transparent 30%) 28%, color-mix(in srgb, var(--cl-b), transparent 78%) 62%, transparent 100%;
  --cl-stops-c: var(--cl-c) 0%, color-mix(in srgb, var(--cl-c), transparent 30%) 28%, color-mix(in srgb, var(--cl-c), transparent 78%) 62%, transparent 100%;
}
@keyframes cloud-drift-1 { to { transform: translate3d( 7%, -5%, 0) scale(1.14); } }
@keyframes cloud-drift-2 { to { transform: translate3d(-6%,  7%, 0) scale(.92);  } }
@keyframes cloud-drift-3 { to { transform: translate3d( 5%,  6%, 0) scale(1.10) rotate(6deg); } }

/* CTA da home: logo glassy escuro original, mas com o fundo preto removido (assets/…-alpha.png) */
img[src*="brikl-mark-distorted"] { content: url(/images/brikl-mark-distorted-alpha.png); }

/* containers de nuvem (os antigos glows): limpam o gradiente radial original */
.rbx .hero-glow, .rbx .showcase-glow, .rbx .cta-glow {
  pointer-events: none;
  filter: none;
  background: none;
  overflow: visible;
  opacity: calc(1 - var(--k) * .45);   /* no trecho escuro, mais discreto */
  will-change: transform;
}
/* cada mancha: um radial que já nasce difuso */
.rbx .hero-glow::before, .rbx .hero-glow::after,
.rbx .showcase-glow::before, .rbx .showcase-glow::after,
.rbx .cta-glow::before, .rbx .cta-glow::after,
.rbx .story::before, .rbx .story::after,
section > .max-w-5xl:has(> .flex.md\:flex-row)::before,
section > .max-w-5xl:has(> .flex.md\:flex-row)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
  animation: cloud-drift-1 42s ease-in-out infinite alternate;
}
/* mancha A = o próprio container (lavanda), B = ::before (azul), C = ::after (ciano) */
.rbx .hero-glow, .rbx .showcase-glow, .rbx .cta-glow {
  background: radial-gradient(40% 44% at 30% 68%, var(--cl-stops-a));
  animation: cloud-drift-1 46s ease-in-out infinite alternate;
}
.rbx .hero-glow::before, .rbx .showcase-glow::before, .rbx .cta-glow::before {
  left: 34%; top: 30%; width: 58%; height: 62%;
  background: radial-gradient(closest-side, var(--cl-stops-b));
  animation-name: cloud-drift-2; animation-duration: 38s;
}
.rbx .hero-glow::after, .rbx .showcase-glow::after, .rbx .cta-glow::after {
  left: 52%; top: 48%; width: 52%; height: 58%;
  background: radial-gradient(closest-side, var(--cl-stops-c));
  animation-name: cloud-drift-3; animation-duration: 50s;
}

/* posicionamento por seção */
.rbx .hero { overflow: visible; }         /* a nuvem sobe até atrás da pílula do menu */
/* hero: nuvens começam abaixo do lettering e ficam mais sutis */
.rbx .hero-glow {
  /* caixa bem maior que as manchas: o gradiente do container morre antes da borda (sem corte reto) */
  z-index: 0; inset: 38% -10% -90% -10%; width: auto; height: auto; transform: none;
  opacity: calc(.7 - var(--k) * .4);
  background: radial-gradient(42% 50% at 20% 70%, var(--cl-stops-a));
}
.rbx .hero-glow::before { left: 28%; top: 14%; width: 58%; height: 46%; }
.rbx .hero-glow::after  { left: 56%; top: 18%; width: 50%; height: 42%; }
.rbx .hero-glow { background: radial-gradient(42% 28% at 20% 38%, var(--cl-stops-a)); }
.rbx .showcase-glow { opacity: calc(.8 - var(--k) * .45); }
/* CTA: nuvens abaixo do título, como no hero */
.rbx .cta-glow {
  inset: 34% -10% -30% -10%; width: auto; height: auto; transform: none;
  opacity: calc(.8 - var(--k) * .3);
  background: radial-gradient(42% 50% at 22% 72%, var(--cl-stops-a));
}
.rbx .cta-glow::before { left: 28%; top: 30%; width: 58%; height: 78%; }
.rbx .cta-glow::after  { left: 56%; top: 36%; width: 50%; height: 72%; }

.rbx .story, .rbx .cta { overflow: visible; }   /* overflow hidden cortava as nuvens nas bordas das seções */
.rbx .story::before {
  right: -12%; top: -6%; width: 62%; height: 78%;
  background: radial-gradient(closest-side, var(--cl-stops-b));
  animation-name: cloud-drift-2; animation-duration: 44s;
}
.rbx .story::after {
  right: -4%; top: 30%; width: 50%; height: 70%;
  background: radial-gradient(closest-side, var(--cl-stops-c));
  animation-name: cloud-drift-3; animation-duration: 52s;
}
.rbx .story > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .rbx .hero-glow, .rbx .showcase-glow, .rbx .cta-glow,
  .rbx .hero-glow::before, .rbx .hero-glow::after,
  .rbx .showcase-glow::before, .rbx .showcase-glow::after,
  .rbx .cta-glow::before, .rbx .cta-glow::after,
  .rbx .story::before, .rbx .story::after,
  section > .max-w-5xl:has(> .flex.md\:flex-row)::before,
  section > .max-w-5xl:has(> .flex.md\:flex-row)::after { animation: none; }
}

/* ============================================================
   2. QUOTES — cards empilhados (azul + ink atrás)
   ============================================================ */
/* Técnica: o card NÃO cria stacking context (sem isolation/transform/opacity), então os
 * pseudo-elementos com z-index:-1 pintam ATRÁS do fundo branco dele, dentro do contexto
 * do wrapper (que ganha isolation:isolate e não tem fundo). */
div:has(> .rbx .quote-card),
div:has(> blockquote.border-l-4),
div:has(> div.border-l-4.rounded-xl:has(> blockquote)),
div:has(> blockquote.text-center.max-w-3xl) { isolation: isolate; }
.rbx .quote-card,
blockquote.border-l-4,
div.border-l-4.rounded-xl:has(> blockquote),
blockquote.text-center.max-w-3xl {
  position: relative;
  background: #fff;
  border: 1px solid var(--gl-border);
  border-left-width: 1px;
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: var(--gl-hi), 0 28px 70px -36px rgba(14, 17, 22, .4);
}
.rbx .quote-card { margin: 44px 0; }
blockquote.text-center.max-w-3xl { text-align: left; padding: 40px 44px; }
blockquote.text-center.max-w-3xl p { color: #0e1116; font-size: 24px; }
blockquote.text-center.max-w-3xl footer span { color: #0e1116; }
.rbx .quote-card::before, .rbx .quote-card::after,
blockquote.border-l-4::before, blockquote.border-l-4::after,
div.border-l-4.rounded-xl:has(> blockquote)::before, div.border-l-4.rounded-xl:has(> blockquote)::after,
blockquote.text-center.max-w-3xl::before, blockquote.text-center.max-w-3xl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
}
.rbx .quote-card::before, blockquote.border-l-4::before, div.border-l-4.rounded-xl:has(> blockquote)::before, blockquote.text-center.max-w-3xl::before {
  background: #3a63f5;
  transform: rotate(-6deg) translate(-18px, 4px);
}
.rbx .quote-card::after, blockquote.border-l-4::after, div.border-l-4.rounded-xl:has(> blockquote)::after, blockquote.text-center.max-w-3xl::after {
  background: #0e1116;
  transform: rotate(4deg) translate(20px, 2px);
}
/* em grades de vários depoimentos (our-clients), card branco simples: a pilha só faz sentido em destaque */
.grid > div.border-l-4.rounded-xl:has(> blockquote)::before,
.grid > div.border-l-4.rounded-xl:has(> blockquote)::after { display: none; }
.grid > div.border-l-4.rounded-xl:has(> blockquote) { padding: 28px; }
/* aspas em azul, como no Goons */
.rbx .quote-card p::before { content: "“"; display: block; color: #3a63f5; font-size: 44px; line-height: .6; margin-bottom: 14px; font-style: normal; }
.rbx .quote-card p { color: #2b3038; }

/* ============================================================
   2c. "STAND WITH CLIENTS" — stack de depoimentos sobre 3 linhas de logos (home .logos)
   Estrutura criada por components.js: .marquee.mq > .mq-row×3 > .mq-track > .mq-block×2,
   e .tstack > .tcard×3 + .tdots. Aqui só estilo e motion.
   ⚠ PROTÓTIPO: os 3 depoimentos são reais (home + our-clients) mas hardcoded no JS.
   ============================================================ */
.rbx .logos { position: relative; }
.rbx .logos .marquee { anchor-name: --mq; padding: 34px 0; }
.rbx .logos .marquee.mq .marquee-track { display: none; }      /* trilha original (4 logos) sai */
.rbx .logos .marquee.mq::before, .rbx .logos .marquee.mq::after { content: none; }
.mq-row { position: relative; height: 34px; margin: 0 0 118px; overflow: visible; }
.mq-row:last-child { margin-bottom: 0; }
.mq-track { display: flex; width: max-content; will-change: transform; animation: mq-left linear infinite; }
.mq-row[data-dir="right"] .mq-track { animation-name: mq-right; }
.mq-block { display: flex; align-items: center; gap: 96px; padding-right: 96px; }
.mq-block img {
  height: 34px; width: auto; max-width: 150px; object-fit: contain;   /* tamanho único */
  filter: grayscale(1) opacity(.75); mix-blend-mode: normal;
}
@keyframes mq-left  { from { transform: translateX(0) }    to { transform: translateX(-50%) } }
@keyframes mq-right { from { transform: translateX(-50%) } to { transform: translateX(0) } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* --- stack --- */
/* a caixa da pilha é maior que o card (60px de folga) e tem overflow hidden: os cards
 * entram de baixo pra cima "emergindo" pela borda inferior, sempre opacos — nada de fade
 * (com transparência os logos de trás apareciam através do card). */
.tstack {
  position: absolute; z-index: 4;
  left: 50%; top: anchor(--mq center, 50%);
  width: 900px; height: 440px; padding: 70px;
  box-sizing: border-box; overflow: hidden;
  translate: -50% -50%;
  outline: none; cursor: grab; user-select: none; touch-action: pan-y;
}
.tstack:active { cursor: grabbing; }
.tcard {
  position: absolute; inset: 70px; margin: 0;
  border-radius: 22px;
  box-sizing: border-box; padding: 40px 52px 0;
  background: #fff; color: #2b3038;
  border: 1px solid var(--gl-border);
  box-shadow: var(--gl-hi), 0 28px 70px -36px rgba(14, 17, 22, .4);
  transform-origin: 50% 60%;
  transition:
    transform 1.1s cubic-bezier(.22, 1, .36, 1),
    background-color .7s ease, border-color .7s ease, box-shadow .7s ease;
  will-change: transform;
}
.tcard.is-front { z-index: 3; transform: none; }
.tcard.is-2     { z-index: 2; background: #3a63f5; border-color: #3a63f5; box-shadow: none; transform: rotate(-6deg) translate(-18px, 4px); }
.tcard.is-3     { z-index: 1; background: #0e1116; border-color: #0e1116; box-shadow: none; transform: rotate(4deg) translate(20px, 2px); }
/* saída: a da frente afunda um pouco, gira e vai pra trás das outras — opaca */
.tcard.is-leaving { z-index: 0; transform: translateY(26px) rotate(5deg) scale(.94); box-shadow: none; transition-duration: .45s, .3s, .3s, .3s; }
.tcard-inner { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.tcard.is-front .tcard-inner { opacity: 1; transform: none; transition-delay: .35s; }
.thead { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.tq { display: block; color: #3a63f5; font-family: Georgia, serif; font-size: 56px; line-height: .5; margin: 18px 0 0 -2px; }
.tlogo { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.tcard blockquote { margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: #2b3038; }
.tcard figcaption { font-size: 14px; color: #565c68; }
.tcard figcaption strong { color: #0e1116; font-weight: 600; }
/* indicador: 3 barras; a ativa preenche no ritmo do autoplay */
.tdots { position: absolute; left: 50%; bottom: 104px; translate: -50% 0; display: flex; gap: 6px; z-index: 5; }
.tdot { width: 56px; height: 3px; border: 0; padding: 0; border-radius: 2px; background: #e2e4ea; cursor: pointer; position: relative; overflow: hidden; }
.tdot::after { content: ""; position: absolute; inset: 0; background: #3a63f5; transform: scaleX(0); transform-origin: 0 50%; }
.tdot.is-active::after { animation: tdot-fill var(--auto, 7s) linear forwards; }
.tdots.is-paused .tdot.is-active::after { animation-play-state: paused; }
@keyframes tdot-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tdot.is-active::after { animation: none; transform: scaleX(1); } }

/* --- entrada de baixo pra cima (classe .is-in vem do IntersectionObserver) ---
 * antes de entrar, os cards ficam abaixo da borda inferior da caixa (recortados), opacos */
.rbx .logos:not(.is-in) .tcard.is-front   { transform: translateY(420px) rotate(2deg); }
.rbx .logos:not(.is-in) .tcard.is-2       { transform: translateY(440px) rotate(-12deg) translate(-18px, 4px); }
.rbx .logos:not(.is-in) .tcard.is-3       { transform: translateY(460px) rotate(10deg) translate(20px, 2px); }
.rbx .logos:not(.is-in) .tdots            { transform: translateY(300px); }
.tdots { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1) .3s; }
.rbx .logos.is-in .tcard.is-front { transition-delay: .22s; }
.rbx .logos.is-in .tcard.is-2     { transition-delay: .10s; }
.rbx .logos.is-in .tcard.is-3     { transition-delay: 0s; }
.rbx .logos.is-in .tstack:not(.is-moving) .tcard { transition-duration: 1.35s, .7s, .7s, .7s; }
.rbx .logos.is-in .tstack.is-moving .tcard { transition-delay: 0s; }

/* o depoimento da Vernon já está na pilha: sai da Customer Story pra não repetir */
.rbx .story .quote-card { display: none; }

/* rodapé da seção (PPAI · SOC 2) respira abaixo do card */
.rbx .logos .marquee + .tstack + .eyebrow, .rbx .logos .marquee ~ .eyebrow { margin-top: 36px; }

/* fallback sem anchor(): a stack vai pro centro da marquee por padding conhecido */
@supports not (top: anchor(--x center)) { .tstack { top: calc(50% + 40px); } }

/* ============================================================
   2d. "WHO IT'S FOR" → estrutura Goons: mídia fixa à esquerda, lista numerada à direita
   (DOM construído em components.js a partir dos 6 .who-card; a grade original fica oculta)
   ============================================================ */
:is(.rbx .who, .catwf) .wf-hidden { display: none; }
:is(.rbx .who, .catwf) .wf {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 48px; align-items: start; margin: 40px 0 24px;
}
/* mídia menor, fixa: 4:3 e gruda no topo enquanto a lista rola */
:is(.rbx .who, .catwf) .wf-media {
  position: sticky; top: 108px;
  aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  background: #f3f4f7; box-shadow: 0 30px 80px -40px rgba(14, 17, 22, .35);
}
:is(.rbx .who, .catwf) .wf-slide {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity .7s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
:is(.rbx .who, .catwf) .wf-slide.is-active { opacity: 1; transform: none; z-index: 1; }
:is(.rbx .who, .catwf) .wf-slide .who-media { width: 100%; height: 100%; border-radius: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: auto; }
:is(.rbx .who, .catwf) .wf-slide .who-media svg { width: 88px; height: 88px; }
:is(.rbx .who, .catwf) .wf-slide .who-media::after { display: none; }

/* lista compacta; rola dentro da própria caixa (altura ≈ mídia) se precisar */
:is(.rbx .who, .catwf) .wf-list {
  display: flex; flex-direction: column;
  max-height: 440px; overflow-y: auto;
  /* overscroll-behavior AUTO: ao chegar no fim da lista, a roda passa a rolar a página (scroll chaining) */
  overscroll-behavior: auto;
  scrollbar-width: none;             /* sem barra visível (Firefox) */
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
:is(.rbx .who, .catwf) .wf-list::-webkit-scrollbar { display: none; width: 0; height: 0; }   /* Chrome/Safari */
:is(.rbx .who, .catwf) .wf-item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 18px;
  padding: 16px 22px; border-radius: 18px; flex: none;
  border-bottom: 0;                    /* sem fio entre os itens: quem separa é o bloco do item ativo */
  color: color-mix(in srgb, #9aa0ab, #6d6d7b calc(var(--k) * 100%));
  text-decoration: none; background: transparent;
  transition: background-color .45s ease, color .45s ease, padding .5s cubic-bezier(.22, 1, .36, 1);
}
:is(.rbx .who, .catwf) .wf-name { font-size: 17px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
:is(.rbx .who, .catwf) .wf-num  { font-size: 26px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:is(.rbx .who, .catwf) .wf-arrow { font-size: 22px; width: 0; opacity: 0; overflow: hidden; transition: width .4s, opacity .4s; }
:is(.rbx .who, .catwf) .wf-desc {
  grid-column: 1 / -1; max-height: 0; opacity: 0; overflow: hidden;
  font-size: 15px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%));
  transition: max-height .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease .1s, margin .5s;
}
:is(.rbx .who, .catwf) .wf-item.is-active {
  background: color-mix(in srgb, rgba(14,17,22,.045), rgba(255,255,255,.06) calc(var(--k) * 100%));
  color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%));
  padding: 20px 22px 18px;
}
:is(.rbx .who, .catwf) .wf-item.is-active .wf-arrow { width: 24px; opacity: 1; }
:is(.rbx .who, .catwf) .wf-item.is-active .wf-desc  { max-height: 72px; opacity: 1; margin-top: 10px; }
:is(.rbx .who, .catwf) .wf-item:not(.is-active):hover { color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
@media (max-width: 900px) { :is(.rbx .who, .catwf) .wf { grid-template-columns: 1fr; } :is(.rbx .who, .catwf) .wf-media { position: static; } :is(.rbx .who, .catwf) .wf-list { max-height: none; mask-image: none; } }

/* ============================================================
   3. BANNERS texto + imagem — painel glassy
   ============================================================ */
.rbx .story-grid,
.flex.flex-col.md\:flex-row.items-center.gap-12 {
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: 28px;
  padding: 56px;
  box-shadow: var(--gl-hi), var(--gl-shadow);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
}
.flex.flex-col.md\:flex-row.items-center.gap-12 { padding: 40px; border-radius: 24px; }
/* nuvens atrás de cada bloco texto+imagem das páginas internas (alternam o lado) */
section > .max-w-5xl:has(> .flex.md\:flex-row) { position: relative; isolation: isolate; }
section > .max-w-5xl:has(> .flex.md\:flex-row)::before {
  z-index: -1;
  right: -16%; top: -30%; width: 60%; height: 120%;
  background: radial-gradient(closest-side, var(--cl-stops-a));
  animation-name: cloud-drift-1; animation-duration: 44s;
}
section > .max-w-5xl:has(> .flex.md\:flex-row)::after {
  z-index: -1;
  right: -4%; top: 10%; width: 46%; height: 100%;
  background: radial-gradient(closest-side, var(--cl-stops-c));
  animation-name: cloud-drift-3; animation-duration: 50s;
}
section:nth-of-type(even) > .max-w-5xl:has(> .flex.md\:flex-row)::before { right: auto; left: -16%; }
section:nth-of-type(even) > .max-w-5xl:has(> .flex.md\:flex-row)::after  { right: auto; left: -4%;
  background: radial-gradient(closest-side, var(--cl-stops-b)); }

/* ============================================================
   4. SEÇÃO QUE ESCURECE AO ROLAR — home ".how"
   CSS scroll-driven animation: entra escuro, sai claro. Sem JS.
   ============================================================ */
/* --k é o tom da página (0 claro → 1 escuro). Todas as cores da camada (overrides.css,
 * o shell, os painéis) são color-mix por --k, então o valor único que importa é este.
 *
 * 2026-09-28: a home escurecia DUAS vezes — no meio (".how", --k1) e no fim (CTA, --k2).
 * O do meio saiu a pedido do chefe da Luana.
 * 2026-09-29: o do fim também saiu — nenhuma página escurece mais; todas terminam
 * claras, com o footer claro. A animação por scroll (go-dark-stay sobre a timeline
 * --cta) foi removida; --k fica em 0 em todo o site. As propriedades continuam
 * declaradas porque as regras de cor referenciam --k, e body.is-dark (components.js §6c)
 * agora nunca liga. */
@property --k  { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --k1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --k2 { syntax: "<number>"; inherits: true; initial-value: 0; }
body {
  /* fundos testáveis (o painel de teste em components.js troca estes dois valores) */
  --bg-l: #ffffff;
  --bg-d: #08080b;
  --k: max(var(--k1), var(--k2));   /* sempre 0 desde 2026-09-29 (ver acima) */
  background: color-mix(in srgb, var(--bg-l), var(--bg-d) calc(var(--k) * 100%));
}
/* shell (header/footer) segue --k, que hoje é sempre 0: claro */
.sh {
  --sh-bg:        color-mix(in srgb, var(--bg-l), var(--bg-d) calc(var(--k) * 100%));
  --sh-footer-bg: color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 3%), color-mix(in srgb, var(--bg-d), #fff 1.5%) calc(var(--k) * 100%));
  --sh-panel:     color-mix(in srgb, var(--bg-l), color-mix(in srgb, var(--bg-d), #fff 3%) calc(var(--k) * 100%));
  --sh-panel2:    color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 5%), color-mix(in srgb, var(--bg-d), #fff 6%) calc(var(--k) * 100%));
  --sh-line:      color-mix(in srgb, #e7e9ee, #1e1e26 calc(var(--k) * 100%));
  --sh-line2:     color-mix(in srgb, #d7dae1, #2a2a34 calc(var(--k) * 100%));
  --sh-dim:       color-mix(in srgb, #838a97, #6d6d7b calc(var(--k) * 100%));
  --sh-tm:        color-mix(in srgb, #a2a7b2, #4e4e5b calc(var(--k) * 100%));
  --sh-soon-bg:   color-mix(in srgb, #5a5a6e1a, #9494aa1f calc(var(--k) * 100%));
}
/* tokens da home acompanham --k (herdado do body) */
.rbx {
  --bg:       color-mix(in srgb, var(--bg-l), var(--bg-d) calc(var(--k) * 100%));
  --bg-raise: color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 3%), color-mix(in srgb, var(--bg-d), #fff 3%) calc(var(--k) * 100%));
  --bg-card:  color-mix(in srgb, color-mix(in srgb, var(--bg-l), #fff 70%), color-mix(in srgb, var(--bg-d), #fff 5%) calc(var(--k) * 100%));
  --bg-pill:  color-mix(in srgb, color-mix(in srgb, var(--bg-l), #0e1116 5%), color-mix(in srgb, var(--bg-d), #fff 7%) calc(var(--k) * 100%));
  --text:     color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%));
  --muted:    color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%));
  --muted-2:  color-mix(in srgb, #6b7280, #83868f calc(var(--k) * 100%));
  --line:     color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.08) calc(var(--k) * 100%));
  --blue-hover: color-mix(in srgb, #2f52d8, #4d74ff calc(var(--k) * 100%));
}
.rbx .step-node .step-num { background: color-mix(in srgb, #f3f4f7, #12141c calc(var(--k) * 100%)); }
/* header: textos do shell acompanham; a pílula continua clara (como no Goons) */
.sh {
  --sh-ink: color-mix(in srgb, #0e1116, #f4f4f6 calc(var(--k) * 100%));
  --sh-mut: color-mix(in srgb, #565c68, #9c9cab calc(var(--k) * 100%));
}
/* painéis glass escurecem junto */
/* no body, não no :root — o --k é animado no body e só herda pra baixo */
body { --gl-bg: color-mix(in srgb, rgba(255,255,255,.58), rgba(255,255,255,.06) calc(var(--k) * 100%)); }
.rbx .quote-card { background: color-mix(in srgb, #ffffff, #14141b calc(var(--k) * 100%)); }

/* O TESTADOR DE FUNDOS (ferramenta de design) foi removido junto com o passe §5 do
   components.js; o estilo do painel saía com ele. */

/* ============================================================
   7. PÁGINAS INTERNAS acompanham a home
   ============================================================ */
/* (a) fundo contínuo: as faixas de seção alternadas (cinza) viram transparentes; cards mantêm cor */
main section.bg-\[\#16161c\], main section.bg-\[\#0e0e13\], main section.bg-\[\#101015\],
main section.bg-\[\#0e0e12\], main section.bg-\[\#0b0d18\], main section.bg-\[\#08080b\] { background-color: transparent; }
main section.border-t, main section.border-b, main section.border-y { border-color: transparent; }

/* (b) cards internos: brancos com borda ink 8% e raio 22, como os da home; escurecem por --k */
main :is(div, a, article, li).rounded-2xl.bg-\[\#16161c\],
main :is(div, a, article, li).rounded-xl.bg-\[\#16161c\],
main :is(div, a, article, li).rounded-2xl.bg-\[\#101015\],
main :is(div, a, article, li).rounded-xl.bg-\[\#101015\] {
  background-color: color-mix(in srgb, color-mix(in srgb, var(--bg-l), #fff 70%), color-mix(in srgb, var(--bg-d), #fff 5%) calc(var(--k) * 100%));
  border-color: color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.08) calc(var(--k) * 100%));
}
main :is(div, a, article, li).rounded-2xl.bg-\[\#16161c\], main :is(div, a, article, li).rounded-2xl.bg-\[\#101015\] { border-radius: 22px; }
main :is(div, a, article, li).rounded-xl.bg-\[\#16161c\],  main :is(div, a, article, li).rounded-xl.bg-\[\#101015\]  { border-radius: 18px; }

/* (c) nuvens no hero interno (container genérico .cl: A = próprio, B = ::before, C = ::after) */
main .in-hero { position: relative; overflow: visible; }
main .in-hero > :not(.cl) { position: relative; z-index: 1; }
/* Nuvens: três massas CIRCULARES com desfoque real. A versão anterior usava elipses achatadas
 * (42%×28%) e degradês de 4 paradas — daí o aspecto esmagado e as faixas de banding. */
main section.in-hero > .cl, .in-hero > .cl, .cl {
  /* ancorado no PÉ da seção: a massa acompanha o fim do hero em vez de encher o topo */
  position: absolute; inset: auto; left: -12%; right: -12%; top: auto; bottom: -34%; height: max(118%, 600px); z-index: 0;
  pointer-events: none; opacity: calc(.62 - var(--k) * .34);
  background: radial-gradient(circle at 74% 62%, var(--cl-c) 0%, color-mix(in srgb, var(--cl-c), transparent 55%) 34%, transparent 70%);
  filter: blur(64px) saturate(1.04);
  animation: cloud-drift-1 46s ease-in-out infinite alternate;
  will-change: transform;
}
.cl::before, .cl::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
  aspect-ratio: 1; animation: cloud-drift-2 38s ease-in-out infinite alternate;
}
.cl::before { left: 6%; top: 22%; width: min(48%, 740px); height: auto;
  background: radial-gradient(circle, var(--cl-a) 0%, color-mix(in srgb, var(--cl-a), transparent 52%) 36%, transparent 70%); }
.cl::after  { left: 40%; top: 34%; width: min(42%, 640px); height: auto;
  background: radial-gradient(circle, var(--cl-b) 0%, color-mix(in srgb, var(--cl-b), transparent 52%) 36%, transparent 70%);
  animation-name: cloud-drift-3; animation-duration: 50s; }
/* grão fino por cima: mata o banding que todo degradê grande produz em 8 bits */
main .in-hero::after, section:has(> .cl.cl-hero)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .cl, .cl::before, .cl::after { animation: none; } }

/* (d) 2026-09-29: a CTA final não emite mais a timeline --cta — as páginas não escurecem no fim. */

/* o testador de fundos não deve cobrir conteúdo nas capturas */

/* ============================================================
   8. LOGO — wordmark completo (marca gradiente + "brikl") no header e no footer,
   em todas as versões de cor: texto ink no claro, texto branco no escuro (body.is-dark).
   assets/brikl-logo-ink.svg é o brikl-white.svg do site com o texto em #1a1a1a.
   ============================================================ */
/* header: no claro, o ícone 30×30 vira o wordmark completo; no escuro, o SVG branco do site */
.sh .brand-logo-light { content: url(/images/brikl-logo-ink.svg); height: 40px; width: auto; margin: -5px 0; display: block; }
.sh .brand-logo-dark  { display: none; height: 40px; width: auto; margin: -5px 0; }
body.is-dark .sh .brand-logo-light { display: none; }
body.is-dark .sh .brand-logo-dark  { display: block; }
/* footer: o <a class="brand"> era <i class="mark"> + texto "brikl" em CSS; vira o mesmo wordmark */
.site-footer .brand {
  display: block; width: 120px; height: 47px;
  font-size: 0; color: transparent;
  background: url(/images/brikl-logo-ink.svg) no-repeat left center / auto 47px;
}
.site-footer .brand .mark { display: none; }
body.is-dark .site-footer .brand { background-image: url(/images/brikl-logo-white.svg); }

/* ============================================================
   9. TEXTO BRANCO SOBRE FUNDO AZUL
   O remapeamento de .text-white (→ ink no claro) alcançava os botões e chips azuis.
   Tudo que tem fundo azul mantém texto branco em qualquer modo.
   ============================================================ */
.bg-\[\#3a63f5\], .bg-\[\#3a5fd9\], .bg-\[\#4d74ff\], .bg-\[\#2f52d8\],
.hover\:bg-\[\#3a63f5\]:hover, .hover\:bg-\[\#2f52d8\]:hover,
.bg-\[\#3a63f5\] *, .bg-\[\#3a5fd9\] *, .bg-\[\#4d74ff\] *,
.rbx .btn-primary, .rbx .btn-primary *, .sh .primary, .mega .seeall-cta, .mega .mcta .a2 { color: #ffffff; }

/* blocos de página que não são <section> (ex.: artigo do blog) também ficam transparentes;
 * cards continuam com fundo porque estão mais fundo na árvore */
main > :is(div, article).bg-\[\#08080b\], main > :is(div, article).bg-\[\#0e0e13\], main > :is(div, article).bg-\[\#16161c\],
main > div > :is(div, article).bg-\[\#08080b\], main > div > :is(div, article).bg-\[\#0e0e13\], main > div > :is(div, article).bg-\[\#16161c\],
main > div > :is(div, article).bg-\[\#101015\] { background-color: transparent; }

/* ============================================================
   10. TURBO PLATE (mega menu) — hover vivo, porte do Alloy #dPanelCreate .dw-turbo:
   streaks em chevron que avançam no hover + shine sweep + leve elevação
   ============================================================ */
.turbo-plate { position: relative; display: block; width: 78%; margin-top: 14px; border-radius: 10px; overflow: hidden; isolation: isolate;
  transition: transform .28s cubic-bezier(.32,.72,0,1), box-shadow .28s; box-shadow: 0 4px 16px rgba(94, 61, 214, .28); }
.turbo-plate .promo-img { width: 100%; margin: 0; display: block; }
.turbo-plate::before { content: ""; position: absolute; inset: -30% -12%; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(112deg, transparent 0 26px, rgba(255,255,255,.09) 26px 29px, transparent 29px 40px, rgba(255,255,255,.05) 40px 42px);
  transition: transform .3s cubic-bezier(.32,.72,0,1); }
.turbo-plate::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 46%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-18deg); }
.mega .promo:hover .turbo-plate, .turbo-plate:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(94, 61, 214, .42); }
@media (prefers-reduced-motion: no-preference) {
  .mega .promo:hover .turbo-plate::before, .turbo-plate:hover::before { transform: translateX(10px); }
  .mega .promo:hover .turbo-plate::after, .turbo-plate:hover::after { opacity: 1; animation: turboShine .55s cubic-bezier(.32,.72,0,1); }
  @keyframes turboShine { from { left: -70%; } to { left: 130%; } }
}

/* ============================================================
   11. ÍCONES GLASS (rollout por página em components.js · icons/README.md)
   ============================================================ */
img.gi { display: block; object-fit: contain; pointer-events: none; }
img.gi-hero { width: 72%; height: 72%; }                              /* dentro de tiles quadrados */
.rbx .who-media img.gi, .rbx .wf-slide .who-media img.gi { width: 62%; height: 62%; }
.rbx .step-node img.gi { width: 150%; height: 150%; max-width: none; margin: -25%; }   /* transborda o chip 56px */
.rbx .step-node { background: transparent !important; box-shadow: none; }
.rbx .step-node::before { display: none; }
.rbx .v3-media img.gi { width: 70%; height: 70%; }
img.gi-tile { width: 40px; height: 40px; }
img.gi-inline { width: 22px; height: 22px; }
/* os tiles coloridos atrás dos ícones de feature ficam mais suaves pro vidro respirar */
.rbx .who-media { background: linear-gradient(155deg, #fcfdff 0%, #eef2fa 56%, #e5eaf4 100%) !important; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 16px 38px rgba(3,7,20,.12); }

/* ---- encaixe dos ícones glass nos tiles (todas as páginas com ICON_PAGES) ---- */
/* tiles coloridos que recebem um ícone glass viram frostados, como na referência (o vidro precisa de fundo claro) */
:is(div, span):has(> img.gi-tile), .who-media:has(> img.gi) {
  background: linear-gradient(155deg, #fcfdff 0%, #eef2fa 56%, #e5eaf4 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 12px 28px rgba(3,7,20,.14) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
:is(div, span):has(> img.gi-tile) > .absolute.inset-0 { display: none; }   /* só o brilho decorativo; o badge numérico fica */  /* brilho decorativo do tile antigo */
img.gi-tile { width: 82%; height: 82%; }
.who-media img.gi, .rbx .who-media img.gi, .rbx .wf-slide .who-media img.gi { width: 60%; height: 60%; max-height: 70%; margin: auto; }
.rbx .step-node img.gi { width: 170%; height: 170%; margin: -35%; }
:is(div, span).w-14:has(> img.gi-tile) { width: 72px !important; height: 72px !important; }   /* tile 56 → 72 pro objeto de vidro respirar */

/* ============================================================
   12. TILES DE ÍCONE — nível Apple: proporção fixa, respiro, paleta da marca, motion
   Causa do corte anterior: `.rbx .v3-media img{aspect-ratio:16/9;object-fit:cover}` pegava o <img> do ícone.
   ============================================================ */
.rbx .v3-media img.gi, .rbx .v3-media--art img.gi {
  aspect-ratio: auto !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important;
  width: auto !important; height: 66% !important; max-width: 78%; margin: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 14px 22px rgba(20, 24, 60, .18));
}
/* todo tile que hospeda vidro: frostado, sem gradiente saturado, sem glare antigo */
.rbx .v3-media--art:has(> img.gi) {
  background: linear-gradient(155deg, #fcfdff 0%, #eef2fa 56%, #e5eaf4 100%) !important;
  border: 1px solid rgba(14,17,22,.06) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), 0 18px 40px -22px rgba(20,24,60,.35);
  border-radius: 16px; overflow: hidden; isolation: isolate;
}
.rbx .v3-media--art:has(> img.gi)::after { display: none; }
.rbx .v3-card:hover .v3-media--art img.gi { transform: none; }   /* o scale antigo sai; o motion novo assume */

/* --- motion --- */
/* tile com tilt 3D (variáveis --rx/--ry vêm do ponteiro, components.js) */
.gi-tilt {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
  will-change: transform;
}
.gi-tilt.is-hover { box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), 0 28px 60px -26px rgba(20,24,60,.5) !important; }
/* brilho que varre o vidro no hover */
.gi-tilt::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 40%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-16deg);
}
.gi-tilt.is-hover::before { opacity: 1; animation: gi-shine 1.1s cubic-bezier(.32,.72,0,1) 1; }
@keyframes gi-shine { from { left: -60%; } to { left: 130%; } }
/* ícone: flutuação idle lenta + lift no hover (usa `translate`/`scale` individuais pra não brigar com transform) */
img.gi-hero { animation: gi-float 6.5s ease-in-out infinite; transition: scale .45s cubic-bezier(.22,1,.36,1), filter .45s; }
.gi-tilt.is-hover img.gi-hero { scale: 1.07; filter: drop-shadow(0 22px 30px rgba(20,24,60,.26)); }
@keyframes gi-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.v3-card:nth-child(2) img.gi-hero, .who-card:nth-child(2) img.gi-hero { animation-delay: -1.6s; }
.v3-card:nth-child(3) img.gi-hero, .who-card:nth-child(3) img.gi-hero { animation-delay: -3.2s; }
.v3-card:nth-child(4) img.gi-hero, .who-card:nth-child(4) img.gi-hero { animation-delay: -4.8s; }
@media (prefers-reduced-motion: reduce) { img.gi-hero { animation: none; } .gi-tilt { transform: none !important; } .gi-tilt::before { display: none; } }

/* ---- v3 cards: menos gordura, mais tech ---- */
.rbx .v3-card { padding: 14px 18px 20px; gap: 6px; border-radius: 16px; }
/* tile sangra até as bordas do card, raio mais justo, sombra curta */
.rbx .v3-media { margin: 0 -4px 14px; }
.rbx .v3-media--art:has(> img.gi) {
  border-radius: 12px !important; aspect-ratio: 16 / 9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 18px -12px rgba(20,24,60,.35) !important;
}
/* ícone grande: o SVG já tem respiro interno, então 96% da altura lê como ~78% do tile */
.rbx .v3-media img.gi, .rbx .v3-media--art img.gi { height: 96% !important; max-width: 92%; filter: drop-shadow(0 10px 16px rgba(20,24,60,.16)); }
.gi-tilt.is-hover img.gi-hero { scale: 1.05; }
/* mesma lógica nos tiles pequenos dos passos e nos segmentos */
img.gi-tile { width: 96%; height: 96%; }
.who-media img.gi, .rbx .who-media img.gi, .rbx .wf-slide .who-media img.gi { width: 74%; height: 74%; }

/* ---- v3 cards: sem tile interno; o ícone vive direto no card, alinhado ao texto ---- */
.rbx .v3-card { padding: 26px 24px 24px; gap: 6px; border-radius: 18px; position: relative; overflow: hidden; isolation: isolate; }
.rbx .v3-media { margin: 0 0 18px; }
.rbx .v3-media--art:has(> img.gi) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  aspect-ratio: auto; height: 132px; border-radius: 0; overflow: visible;
  justify-content: flex-start; align-items: flex-end; padding: 0 0 0 2px;
  transform: none !important;   /* o tilt sai do tile… */
}
.rbx .v3-media--art img.gi, .rbx .v3-media img.gi {
  height: 100% !important; max-width: none; margin: 0;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));   /* …e vai pro ícone */
  transition: transform .35s cubic-bezier(.22,1,.36,1), scale .45s cubic-bezier(.22,1,.36,1), filter .45s;
  filter: drop-shadow(0 16px 22px rgba(20,24,60,.14));
}
.rbx .v3-media--art.gi-tilt::before { display: none; }     /* brilho sai do tile… */
.rbx .v3-card::before {                                      /* …e varre o card inteiro */
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 34%; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-16deg);
}
.rbx .v3-card:has(.gi-tilt.is-hover)::before { opacity: 1; animation: gi-shine 1.2s cubic-bezier(.32,.72,0,1) 1; }
.rbx .v3-card:has(.gi-tilt.is-hover) { border-color: rgba(14,17,22,.14); box-shadow: 0 24px 50px -30px rgba(20,24,60,.35); transition: box-shadow .4s, border-color .4s; }
.rbx .v3-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .rbx .v3-media--art img.gi { transform: none !important; } .rbx .v3-card::before { display: none; } }

/* ============================================================
   13. HOW IT WORKS (home .how .steps) — numeral tipográfico, ícone grande, trilho no lugar das setas
   ============================================================ */
.rbx .steps { position: relative; }
/* trilho fino atravessa a grade por trás dos cards; aparece só nos vãos */
.rbx .steps::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 74px; height: 1px; z-index: 0;
  background: color-mix(in srgb, rgba(14,17,22,.14), rgba(255,255,255,.16) calc(var(--k) * 100%));
}
.rbx .step { position: relative; z-index: 1; padding: 30px 28px 32px; min-height: 340px; }
.rbx .step:not(:last-child)::after { display: none !important; }        /* as setinhas saem */
/* ícone: grande, solto, ancorado à esquerda */
.rbx .step-node { position: static !important; width: 112px !important; height: 112px !important; margin: 0 0 26px !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0; display: block !important; }
.rbx .step-node::before { display: none !important; }
.rbx .step-node img.gi { width: 100%; height: 100%; margin: 0; max-width: none;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.22,1,.36,1), scale .45s, filter .45s;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.28)); }
.rbx .step:hover .step-node img.gi { scale: 1.05; }
/* numeral: grande, leve, gradiente da marca, canto superior direito do card */
.rbx .step-node .step-num {
  position: absolute !important; top: 22px; right: 26px; width: auto !important; height: auto !important;
  display: block !important; border: 0 !important; background: var(--grad-text) !important; color: #0000 !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
  font: 300 44px/1 var(--font-display) !important; letter-spacing: -.03em !important; z-index: 2;
}
.rbx .step h3 { font-size: 19px; margin-bottom: 10px; }
/* numeral: neutraliza o resto da regra de chip do site (left/box-shadow/margens) */
.rbx .step-node .step-num { left: auto !important; bottom: auto !important; margin: 0 !important; padding: 0 !important;
  box-shadow: none !important; text-shadow: none !important; transform: none !important; line-height: 1 !important; }
/* sombra do ícone no escuro: tinta da marca, sem borrão preto */
.rbx .step-node img.gi { filter: drop-shadow(0 14px 22px rgba(58, 99, 245, .22)); }
.rbx .step-node { width: 128px !important; height: 128px !important; margin: -6px 0 22px -6px !important; }   /* mais presença, alinhado ao texto pelo respiro interno do SVG */
.rbx .step-node .step-num { width: max-content !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; text-align: right !important; overflow: visible !important; }
/* gradiente com background-clip:text só pinta dentro da caixa: folga pros glifos não serem decepados */
.rbx .step-node .step-num { padding: 4px 6px !important; margin: -4px -6px 0 0 !important; letter-spacing: -.01em !important; line-height: 1.1 !important; }

/* ============================================================
   14. SISTEMA DE COMPONENTES — poucos e consistentes (2026-09-15)
   Inventário: 118 assinaturas de card, 3 dominam (>1000 usos). Consolidação:
   Card · Botão (pílula) · Numeral · Banner · Quote (só citação) · Ícone glass solto
   ============================================================ */
/* CARD: um raio (18), um padding (24), uma borda (ink 8%), sem shadow-sm, hover discreto */
main :is(div, a, article, li):is(.rounded-xl, .rounded-2xl):is(.p-5, .p-6, .p-7):is(.bg-\[\#16161c\], .bg-\[\#101015\], .bg-\[\#0e0e13\]) {
  border-radius: 18px !important; padding: 24px !important; box-shadow: none !important;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.08) calc(var(--k) * 100%)) !important;
  transition: border-color .3s, box-shadow .3s;
}
main a:is(.rounded-xl, .rounded-2xl):is(.p-5, .p-6, .p-7):is(.bg-\[\#16161c\], .bg-\[\#101015\]):hover {
  border-color: color-mix(in srgb, rgba(14,17,22,.16), rgba(255,255,255,.16) calc(var(--k) * 100%)) !important;
  box-shadow: 0 18px 40px -28px rgba(20,24,60,.35) !important;
}
/* callouts "border-l-4" que NÃO são citação: viram Card comum, sem a barra azul */
main div.border-l-4:not(:has(> blockquote)) { border-left-width: 1px !important; }

/* NUMERAL: as bolinhas azuis com número (bg-[#3a63f5] rounded-full w-10/12 font-bold) viram numeral em gradiente */
main :is(div, span).rounded-full.bg-\[\#3a63f5\].font-bold:is(.w-10, .w-12) {
  background: var(--grad-text, linear-gradient(90deg, #7c3aed, #0ea5e9)) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  width: auto !important; height: auto !important; border-radius: 0 !important; padding: 2px 4px !important; margin-left: -4px !important;
  font: 300 40px/1.1 var(--font-poppins), system-ui, sans-serif !important; letter-spacing: -.01em !important;
  display: inline-block !important; justify-content: flex-start !important;
}
main :is(div, span).rounded-full.bg-\[\#3a63f5\].font-bold.mx-auto:is(.w-10, .w-12) { margin-left: auto !important; }

/* BANNER: painéis com gradiente escuro inline viram .bn (o JS tira o style e põe a classe) */
.bn {
  background: color-mix(in srgb, rgba(255,255,255,.62), rgba(255,255,255,.06) calc(var(--k) * 100%)) !important;
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  border: 1px solid color-mix(in srgb, rgba(58,99,245,.28), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important;
  border-radius: 20px !important; box-shadow: var(--gl-hi), 0 24px 60px -36px rgba(20,24,60,.35);
  position: relative; isolation: isolate; overflow: hidden;
}
.bn::before {   /* nuvem discreta atrás do banner */
  content: ""; position: absolute; right: -10%; top: -60%; width: 55%; height: 220%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--cl-stops-b)); opacity: .5;
}
/* CHIP: os pills sólidos azuis em caixa alta dentro de banners/cards viram chips contornados (mesma linguagem do announce) */
.bn .rounded-full.bg-\[\#3a63f5\], main .rounded-full.bg-\[\#3a63f5\].uppercase, main .rounded-full.bg-\[\#3a63f5\].text-xs {
  background: transparent !important; border: 1px solid color-mix(in srgb, rgba(14,17,22,.22), rgba(255,255,255,.28) calc(var(--k) * 100%)) !important;
  color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)) !important; font-weight: 600 !important; letter-spacing: .08em !important;
}

/* ÍCONE SOLTO: nos cards internos, sem tile atrás (mesma decisão dos v3 cards) */
:is(div, span):has(> img.gi-tile) { background: transparent !important; box-shadow: none !important; border: 0 !important; width: auto !important; height: auto !important; margin-bottom: 18px !important; justify-content: flex-start !important; }
:is(div, span).w-14:has(> img.gi-tile) { width: auto !important; height: auto !important; }
img.gi-tile { width: 72px; height: 72px; filter: drop-shadow(0 12px 18px rgba(20,24,60,.16)); }
:is(div, span):has(> img.gi-tile) > b.absolute { position: static !important; display: inline-flex; margin-left: 10px; }   /* badge numérico ao lado, não em cima */

/* TILE INTERIM (.it): frostado na paleta da marca, glifo em azul; some quando o ícone glass entra */
.it {
  background: linear-gradient(155deg, #fcfdff 0%, #eef2fa 56%, #e5eaf4 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), 0 10px 24px -14px rgba(20,24,60,.3) !important;
  color: #3a63f5 !important; border-radius: 16px !important; width: 64px !important; height: 64px !important;
}
.it > .absolute.inset-0 { display: none; }
.it svg { width: 30px !important; height: 30px !important; }
.it:has(> img.gi) { background: transparent !important; box-shadow: none !important; }
main :is(div, span).rounded-full.bg-\[\#3a63f5\].font-bold:is(.w-10, .w-12) { padding: 4px 10px 4px 8px !important; margin-left: -8px !important; line-height: 1.15 !important; }
main :is(div, span).rounded-full.bg-\[\#3a63f5\].font-bold:is(.w-10, .w-12) { padding: 4px 12px 4px 18px !important; margin-left: -18px !important; min-width: 1.4em !important; text-align: left !important; }

/* ============================================================
   15. LAUNCH OFFER — hero com camiseta + logo em bounding box, e editor Beefy-T
   Look and feel dos componentes: SDK design tool da Brikl
   (tokens: --accent #3262EA · --ink #1F1F1F · muted 6B6B66 / 9A9A95 / C7C7C2)
   ============================================================ */
.lo { --accent: #3262EA; --ink: #1F1F1F; --m1: #6B6B66; --m2: #9A9A95; --m3: #C7C7C2; --paper: #FCFCFB; }

/* ---------- HERO: palco de edição ---------- */
.lo-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; isolation: isolate; }
.lo-canvas {   /* grade sutil de editor */
  position: absolute; inset: -6% -4%; z-index: 0; border-radius: 22px; pointer-events: none;
  background-image: linear-gradient(rgba(14,17,22,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,17,22,.045) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(70% 60% at 50% 45%, #000 40%, transparent 100%);
}
/* camiseta flutuando */
.lo-tee { position: relative; z-index: 1; width: min(380px, 42vw); animation: lo-float 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(20,24,60,.16)); }
.lo-tee svg { width: 100%; height: auto; display: block; }
@keyframes lo-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* caixa de seleção do logo (estilo Figma/Photoshop) */
.lo-sel { position: absolute; z-index: 3; animation: lo-float2 6s ease-in-out infinite; }
.lo-sel-box { position: relative; border: 1.5px solid var(--accent); border-radius: 2px; padding: 16px; background: rgba(50,98,234,.04); }
.lo-sel-box img { display: block; width: 100%; height: auto; }
.lo-h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--accent); border-radius: 1px; }
.lo-h.tl { top: -5px; left: -5px; } .lo-h.tr { top: -5px; right: -5px; }
.lo-h.bl { bottom: -5px; left: -5px; } .lo-h.br { bottom: -5px; right: -5px; }
.lo-h.tc { top: -5px; left: 50%; margin-left: -4.5px; } .lo-h.bc { bottom: -5px; left: 50%; margin-left: -4.5px; }
.lo-h.ml { top: 50%; left: -5px; margin-top: -4.5px; } .lo-h.mr { top: 50%; right: -5px; margin-top: -4.5px; }
.lo-tag {
  position: absolute; bottom: -26px; left: 50%; translate: -50% 0; white-space: nowrap;
  background: var(--accent); color: #fff; border-radius: 3px; padding: 2px 7px;
  font: 500 11px/1.5 var(--font-poppins), system-ui; font-variant-numeric: tabular-nums;
}
.lo-label {
  position: absolute; top: -24px; left: 0; white-space: nowrap; color: var(--accent);
  font: 500 11px/1 var(--font-poppins), system-ui;
}
@keyframes lo-float2 { 0%,100% { translate: 0 0; } 50% { translate: 0 -20px; } }
/* guias de alinhamento */
.lo-guide { position: absolute; z-index: 2; background: var(--accent); opacity: .28; pointer-events: none; }
.lo-guide.v { width: 1px; top: 8%; bottom: 8%; }
.lo-guide.h { height: 1px; left: 6%; right: 6%; }

/* ---------- EDITOR Beefy-T ---------- */
.lo-editor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .lo-editor { grid-template-columns: 1fr; } }

/* painel esquerdo = janela do design tool */
.lo-panel {
  background: var(--paper); border: 1px solid rgba(31,31,31,.10); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(20,24,60,.4);
}
.lo-panel-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(31,31,31,.08); background: #fff; }
.lo-dots { display: flex; gap: 5px; }
.lo-dots i { width: 9px; height: 9px; border-radius: 50%; background: #E3E3E0; display: block; }
.lo-panel-title { font: 500 12.5px/1 var(--font-poppins), system-ui; color: var(--ink); }
.lo-panel-meta { margin-left: auto; font: 400 11px/1 var(--font-poppins), system-ui; color: var(--m2); font-variant-numeric: tabular-nums; }
.lo-viewport {
  position: relative; display: flex; align-items: center; justify-content: center; padding: 26px 20px 8px; min-height: 340px;
  background-image: linear-gradient(rgba(31,31,31,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(31,31,31,.035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.lo-viewport .lo-tee-live { width: min(300px, 70%); animation: none; filter: drop-shadow(0 18px 26px rgba(20,24,60,.14)); transition: filter .4s; }
.lo-tee-live svg { width: 100%; height: auto; display: block; }
/* logo aplicado no peito */
.lo-chest { position: absolute; top: 40%; left: 50%; translate: -50% -50%; width: 74px; opacity: .96; transition: opacity .3s; }
.lo-chest img { width: 100%; display: block; }

/* barra de swatches — padrão .swatch-card do SDK tool */
.lo-tools { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(31,31,31,.08); background: #fff; }
.lo-tool { font: 400 11.5px/1 var(--font-poppins), system-ui; color: var(--m1); display: inline-flex; align-items: center; gap: 6px; }
.lo-tool b { color: var(--ink); font-weight: 500; }
.lo-count { margin-left: auto; font: 400 11px/1 var(--font-poppins), system-ui; color: var(--m2);
  background: rgba(31,31,31,.05); border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }

/* coluna direita: história */
.lo-story .lo-eyebrow { font: 600 11px/1 var(--font-poppins), system-ui; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lo-story h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.14; letter-spacing: -.02em; margin: 14px 0 18px; font-weight: 600; }
.lo-story p { font-size: 16px; line-height: 1.62; color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)); margin: 0 0 14px; }
.lo-brands { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; }
.lo-brands img { height: 34px; width: auto; display: block; }
.lo-beefy {
  display: inline-flex; align-items: baseline; gap: 2px; font: 800 19px/1 var(--font-poppins), system-ui;
  letter-spacing: -.02em; color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%));
}
.lo-beefy sup { font-size: 9px; font-weight: 600; }
.lo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(14,17,22,.09); }
.lo-fact b { display: block; font: 300 30px/1.1 var(--font-poppins), system-ui; letter-spacing: -.02em; padding: 2px 4px 2px 0;
  background: var(--grad-text, linear-gradient(90deg,#7c3aed,#0ea5e9)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lo-fact span { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, #6b7280, #9a9da8 calc(var(--k) * 100%)); }
@media (prefers-reduced-motion: reduce) { .lo-tee, .lo-sel { animation: none; } }

/* --- garment: foto real tingida por multiply mascarado na silhueta --- */
.lo-garment { position: relative; isolation: isolate; }
.lo-garment img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.lo-garment::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--c, #fff); mix-blend-mode: multiply;
  -webkit-mask: url(/images/beefy-tee-photo.png) center/contain no-repeat;
  mask: url(/images/beefy-tee-photo.png) center/contain no-repeat;
  transition: background-color .26s cubic-bezier(.32,.9,.3,1);
}
/* --- hero: camiseta com respiro, logo ao lado --- */
.lo-stage { min-height: 520px; }
.lo-tee { width: min(320px, 66%); margin-left: 18%; filter: drop-shadow(0 26px 34px rgba(20,24,60,.14)); }
.lo-stage::before {
  content: ""; position: absolute; z-index: 0; left: 52%; top: 46%; translate: -50% -50%;
  width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(50,98,234,.09), transparent 72%);
}
.lo-sel { left: -4%; top: 46%; right: auto; width: 152px; }
.lo-guide.v { left: 52%; } .lo-guide.h { top: 46%; }
/* --- editor --- */
.lo-chest { top: 41%; width: 92px; }
.lo-viewport .lo-tee-live { width: min(340px, 80%); }
.lo-viewport { padding: 26px 20px 10px; min-height: 380px; }
.lo-brands img.lo-hanes { height: 36px; }
.lo-brands img.lo-beefy { height: 20px; filter: invert(1); }
body.is-dark .lo-brands img.lo-beefy { filter: none; }
/* hero: logo encostado no peito da camiseta — lê como "posicionando a arte" */
.lo-sel { left: 8%; top: 41%; width: 150px; }
.lo-tee { margin-left: 24%; }
.lo-stage::before { left: 56%; }
.lo-guide.v { left: 56%; } .lo-guide.h { top: 44%; }
.lo-chest { width: 84px; }
/* hero v3: camiseta maior, sem guias, logo vazando pra dentro do peito */
.lo-guide { display: none; }
.lo-tee { width: min(400px, 82%); margin-left: 20%; }
.lo-stage { min-height: 640px; }
.lo-stage::before { left: 56%; width: 560px; height: 560px; }
.lo-sel { left: 8%; top: 43%; width: 236px; z-index: 4; }
.lo-sel { left: 26%; top: 44%; }   /* mais dentro do peito */
/* hero v4: camiseta bem maior (vaza do container) e logo no PEITO, não na barriga */
.lo-stage { min-height: 620px; overflow: visible; }
.lo-tee { width: 560px; max-width: none; margin-left: 12%; }
.lo-stage::before { left: 52%; width: 560px; height: 560px; }
.lo-sel { left: 18%; top: 34%; width: 178px; }
/* hero v5 */
.lo-stage { min-height: 680px; }
.lo-tee { width: 660px; margin-left: 4%; }
.lo-stage::before { left: 50%; width: 640px; height: 640px; }
.lo-sel { left: 26%; top: 31%; width: 190px; }

/* ============================================================
   16. LAUNCH OFFER — hero maior + logo arrastável (brincadeira: só faíscas)
   ============================================================ */
.lo-canvas { display: none; }
.lo-stage { min-height: 780px; }
.lo-tee { width: 820px !important; max-width: none !important; margin-left: -14%; }
.lo-stage::before { left: 44%; width: 760px; height: 760px; }
.lo-sel { left: 20%; top: 29%; width: 210px; cursor: grab; touch-action: none; user-select: none; }
.lo-sel.is-drag { cursor: grabbing; animation: none; z-index: 6; }
.lo-sel.is-drag .lo-sel-box { box-shadow: 0 18px 40px -18px rgba(50,98,234,.55); }
/* faíscas: coloridas, com deriva própria */
.lo-spark {
  position: absolute; z-index: 5; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, var(--sc, #7c9cff) 42%, transparent);
  animation: lo-spark ease-out forwards;
}
@keyframes lo-spark {
  0%   { opacity: .95; scale: 1; translate: 0 0; }
  100% { opacity: 0; scale: .25; translate: var(--dx, 0) var(--dy, -20px); }
}
@media (prefers-reduced-motion: reduce) { .lo-spark { display: none; } }


/* ============================================================
   17. EDITOR Beefy-T — sem janela: a camiseta é a estrela
   ============================================================ */
.lo-panel, .lo-panel-bar, .lo-viewport, .lo-tools { all: unset; display: contents; }
.lo-canvas2 { position: relative; display: flex; flex-direction: column; align-items: center; }
.lo-canvas2 .lo-tee-live { width: min(560px, 100%); position: relative; filter: drop-shadow(0 34px 44px rgba(20,24,60,.16)); }
.lo-canvas2 .lo-tee-live img { width: 100%; display: block; }
/* logo no peito: maior e alto, logo abaixo da gola */
.lo-canvas2 .lo-chest { position: absolute; top: 32%; left: 50%; translate: -50% -50%; width: 150px; z-index: 2; transition: opacity .3s; }
.lo-canvas2 .lo-chest img { width: 100%; display: block; }
/* bolinhas flutuando: uma linha, scroll lateral sem barra */
.lo-dots-row { width: 100%; margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lo-swatches {
  display: flex; flex-wrap: nowrap; gap: 12px; padding: 6px 4px; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.lo-swatches::-webkit-scrollbar { display: none; }
.lo-sw { flex: 0 0 auto; border-radius: 50%; padding: 0; cursor: pointer; background: var(--c); }
.lo-colorname { font: 500 12px/1 var(--font-poppins), system-ui; letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, #6b7280, #9a9da8 calc(var(--k) * 100%)); }
/* editor: a camiseta ganha a coluna maior e não vaza */
.lo-editor { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.lo-canvas2 .lo-tee-live { width: 100%; max-width: 560px; }
.lo-dots-row { margin-top: 22px; }
.lo-canvas2 .lo-chest { top: 33%; width: 27%; }

/* --- refino: escala menor e bolinhas discretas --- */
.lo-editor { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; }
.lo-canvas2 .lo-tee-live { max-width: 430px; }
.lo-canvas2 .lo-chest { width: 25%; top: 33.5%; }
.lo-dots-row { margin-top: 14px; gap: 12px; }
/* uma linha de bolinhas pequenas; sem máscara (cortava a última cor) */
.lo-swatches { gap: 9px; padding: 3px 2px; mask-image: none; justify-content: center; }
.lo-sw {
  width: 20px; height: 20px; border: 1px solid rgba(31,31,31,.14); box-shadow: none;
  outline: none; position: relative; transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.lo-sw::after {   /* anel fino, só na selecionada */
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid #0e1116; opacity: 0; transition: opacity .18s;
}
.lo-sw:hover { transform: translateY(-2px); }
.lo-sw[aria-pressed="true"] { transform: none; }
.lo-sw[aria-pressed="true"]::after { opacity: .55; }
.lo-sw:focus-visible::after { opacity: .55; border-color: #3262EA; }
.lo-colorname { font-size: 10.5px; letter-spacing: .1em; opacity: .75; }


/* ============================================================
   18. LAUNCH OFFER — a arte chega e passa a fazer parte do tecido
   ============================================================ */
.lo-sel { left: 20%; top: 29%; width: 210px; cursor: default; animation: none; }
/* voo: entrada limpa, de fora e de cima, desacelerando até o peito. Sem cartoon. */
@keyframes lo-fly {
  0%   { left: -20%; top: 6%;  scale: 1.22; rotate: -5deg; opacity: 0; }
  14%  { left: -14%; top: 7%;  scale: 1.20; rotate: -5deg; opacity: 1; }
  100% { left: 20%;  top: 29%; scale: 1;    rotate: 0deg;  opacity: 1; }
}
.lo-sel.is-flying { animation: lo-fly 1.25s cubic-bezier(.22,.78,.24,1) both; }
/* aplicado: moldura dissolve e a arte vira parte da camiseta (o JS move o nó pra dentro dela) */
.lo-sel .lo-sel-box, .lo-sel .lo-h, .lo-sel .lo-tag, .lo-sel .lo-label { transition: opacity .45s, border-color .45s, background-color .45s; }
.lo-sel.is-applied { animation: none; }
.lo-sel.is-applied .lo-sel-box { border-color: transparent; background: transparent; }
.lo-sel.is-applied .lo-h, .lo-sel.is-applied .lo-label, .lo-sel.is-applied .lo-tag { opacity: 0; }
@keyframes lo-press { 0% { scale: 1; } 34% { scale: 1.05; } 100% { scale: 1; } }
.lo-sel.is-applied .lo-sel-box img { animation: lo-press .5s cubic-bezier(.22,1,.36,1); }

/* o tecido cede no instante da aplicação */
@keyframes lo-hit { 0% { scale: 1; } 24% { scale: 1.012; } 60% { scale: .997; } 100% { scale: 1; } }
.lo-tee.is-hit { animation: lo-float 7s ease-in-out infinite, lo-hit .7s cubic-bezier(.22,1,.36,1); }

/* onda de impacto, discreta */
.lo-ripple {
  position: absolute; z-index: 4; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid rgba(124,156,255,.7); opacity: 0; pointer-events: none;
}
@keyframes lo-ring { 0% { scale: 1; opacity: .8; border-width: 2.5px; } 100% { scale: 26; opacity: 0; border-width: .5px; } }
.lo-ripple.is-on { animation: lo-ring .95s cubic-bezier(.17,.7,.3,1) forwards; }

/* faíscas: estrela de quatro pontas, giram e derivam */
.lo-spark {
  position: absolute; z-index: 5; pointer-events: none; background: var(--sc, #7c9cff);
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sc, #7c9cff), transparent 40%));
  animation: lo-spark cubic-bezier(.12,.7,.3,1) forwards;
}
@keyframes lo-spark {
  0%   { opacity: 0; scale: .3; rotate: 0deg; }
  20%  { opacity: 1; scale: 1.1; }
  100% { opacity: 0; scale: .2; rotate: var(--rot, 120deg); translate: var(--dx, 0) var(--dy, -30px); }
}

/* validações */
.lo-checks {
  position: absolute; z-index: 6; left: 50%; bottom: 9%; translate: -50% 0;
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 7px; pointer-events: none;
}
.lo-check {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: rgba(255,255,255,.84); border: 1px solid rgba(22,163,74,.32); color: #15803d;
  border-radius: 999px; padding: 5px 11px 5px 8px;
  font: 600 11px/1 var(--font-poppins), system-ui;
  box-shadow: 0 8px 20px -12px rgba(22,163,74,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; translate: 0 10px; scale: .9;
  transition: opacity .4s cubic-bezier(.22,1,.36,1), translate .46s cubic-bezier(.3,1.25,.4,1), scale .46s cubic-bezier(.3,1.25,.4,1);
}
.lo-check svg { width: 13px; height: 13px; fill: none; stroke: #16a34a; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18; stroke-dashoffset: 18; }
.lo-checks.is-on .lo-check { opacity: 1; translate: 0 0; scale: 1; }
.lo-checks.is-on .lo-check svg { animation: lo-tick .45s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes lo-tick { to { stroke-dashoffset: 0; } }
.lo-checks.is-on .lo-check:nth-child(1) { transition-delay: 0s; }
.lo-checks.is-on .lo-check:nth-child(2) { transition-delay: .16s; }
.lo-checks.is-on .lo-check:nth-child(3) { transition-delay: .32s; }
.lo-checks.is-on .lo-check:nth-child(1) svg { animation-delay: .12s; }
.lo-checks.is-on .lo-check:nth-child(2) svg { animation-delay: .28s; }
.lo-checks.is-on .lo-check:nth-child(3) svg { animation-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .lo-sel.is-flying { animation: none; } .lo-spark, .lo-ripple { display: none; }
  .lo-checks .lo-check { opacity: 1; translate: 0 0; scale: 1; }
  .lo-checks .lo-check svg { stroke-dashoffset: 0; animation: none; }
}

/* ---- numeral a partir dos chips coloridos (1 · 2 · 3) — mesma linguagem dos passos da home ---- */
.num {
  background: var(--grad-text, linear-gradient(90deg, #7c3aed, #0ea5e9)) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  width: auto !important; height: auto !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 3px 10px 3px 4px !important; margin: 0 0 14px -4px !important;
  font: 300 42px/1.05 var(--font-poppins), system-ui, sans-serif !important; letter-spacing: -.02em !important;
  display: block !important; justify-content: flex-start !important; align-items: baseline !important;
}
/* banners: a borda colorida some junto com o gradiente saturado */
.bn[class*="border-[#f97316]"], .bn[class*="border-[#22c55e]"], .bn[class*="border-[#14b8a6]"],
.bn[class*="border-[#a855f7]"], .bn[class*="border-[#3a63f5]"] {
  border-color: color-mix(in srgb, rgba(58,99,245,.26), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important;
}

/* ============================================================
   19. LAUNCH OFFER — miniaturas dos três passos (o numeral sozinho era fraco)
   Look do SDK design tool: vidro claro, tipografia pequena, um só acento.
   ============================================================ */
.sm-wrap { margin: -4px 0 18px; }
.sm {
  aspect-ratio: 16 / 11; border-radius: 12px; padding: 12px; box-sizing: border-box;
  background: linear-gradient(155deg, #fcfdff 0%, #eef2fa 58%, #e7ecf6 100%);
  border: 1px solid rgba(14,17,22,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px -18px rgba(20,24,60,.5);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font: 500 7.5px/1.25 var(--font-poppins), system-ui; color: #1F1F1F; overflow: hidden; position: relative;
}
/* 1 — login */
.sm-login .sm-logo { height: 13px; width: auto; margin: 3px 0 1px; }
.sm-t { font-size: 9px; font-weight: 600; letter-spacing: -.01em; }
.sm-sub { font-size: 6.5px; font-weight: 400; color: #9A9A95; text-align: center; }
.sm-oauth { display: flex; gap: 7px; margin-top: 3px; }
.sm-oauth i { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1px solid rgba(14,17,22,.1); display: block; }
.sm-oauth i:nth-child(1) { background: radial-gradient(circle at 50% 50%, #4285F4 42%, #fff 44%); }
.sm-oauth i:nth-child(2) { background: radial-gradient(circle at 50% 50%, #1F1F1F 38%, #fff 40%); }
.sm-oauth i:nth-child(3) { background: radial-gradient(circle at 50% 50%, #F25022 38%, #fff 40%); }
.sm-rule { width: 78%; display: flex; align-items: center; gap: 6px; color: #C7C7C2; font-size: 6px; }
.sm-rule::before, .sm-rule::after { content: ""; flex: 1; height: 1px; background: rgba(14,17,22,.1); }
.sm-field { width: 82%; padding: 5px 7px; border-radius: 999px; background: #fff; border: 1px solid rgba(14,17,22,.1); color: #C7C7C2; font-weight: 400; font-size: 6.5px; }
.sm-btn { width: 82%; padding: 5px 7px; border-radius: 999px; background: #3262EA; color: #fff; text-align: center; font-size: 7px; font-weight: 600; }
/* 2 — turbo order */
.sm-bar { width: 100%; display: flex; align-items: center; gap: 3px; font-size: 6.5px; color: #6B6B66; }
.sm-bar b { margin-left: 4px; color: #1F1F1F; font-weight: 600; }
.sm-dot { width: 4px; height: 4px; border-radius: 50%; background: #E3E3E0; }
.sm-turbo-cta {
  margin: 8px 0 2px; padding: 7px 12px; border-radius: 999px; color: #fff; font-size: 7.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(108deg, #2c3fb0, #3262EA 62%, #6f95ff 135%);
  box-shadow: 0 6px 16px -8px rgba(50,98,234,.7);
}
.sm-turbo-cta svg { width: 9px; height: 9px; fill: #fff; }
.sm-rows { width: 100%; margin-top: auto; display: grid; gap: 3px; }
.sm-rows-1 { grid-template-columns: 1fr; }
.sm-rows span { display: flex; align-items: center; justify-content: space-between; background: #fff;
  border: 1px solid rgba(14,17,22,.07); border-radius: 6px; padding: 4px 7px; }
.sm-rows i { font-style: normal; color: #9A9A95; font-weight: 400; font-size: 6.5px; }
.sm-rows b { font-weight: 600; font-size: 6.5px; }
.sm-sw { width: 9px; height: 9px; border-radius: 50%; background: #1c2a4a; border: 1px solid rgba(14,17,22,.14); }
/* 3 — impresso e enviado */
.sm-ship .sm-tee { position: relative; width: 52%; margin: 1px auto 4px; }
.sm-ship .sm-tee > img { width: 100%; display: block; }
.sm-ship .sm-print { position: absolute; top: 33%; left: 50%; translate: -50% -50%; width: 30%; }
.sm-track { width: 82%; height: 3px; border-radius: 999px; background: rgba(14,17,22,.08); overflow: hidden; }
.sm-track-on { display: block; height: 100%; width: 72%; border-radius: 999px; background: linear-gradient(90deg, #3262EA, #16a34a); }
/* o numeral encolhe: a miniatura passa a liderar o card */
.has-mock .num { font-size: 26px !important; margin-bottom: 8px !important; }
/* refino das miniaturas: proporções coerentes entre os três */
.sm-turbo { justify-content: flex-start; }
.sm-turbo-cta { margin: 14px 0 10px; }
.sm-ship { justify-content: center; gap: 7px; }
.sm-ship .sm-tee { width: 68%; margin: 0 auto 2px; }
.sm-ship .sm-print { width: 26%; top: 34%; }
.sm-ship .sm-rows { margin-top: 0; }
/* `.sm-ship .sm-tee > img` (0,2,1) vencia `.sm-ship .sm-print` (0,2,0) — daí o print a 100% */
.sm-ship .sm-tee > img.sm-print { width: 27%; top: 34%; }
.sm-ship .sm-tee { width: 56%; }
.sm-ship { gap: 6px; padding-bottom: 10px; }

/* ---- cards de passo: sem borda e sem gordura, como os outros que já limpamos ---- */
main .grid > div:has(.num) {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
}
main .grid > div:has(.num) .num { font-size: 40px !important; margin-bottom: 12px !important; }
.has-mock .num { font-size: 40px !important; }
/* a miniatura da camiseta perde a moldura: é produto, não captura de tela */
.sm-ship { background: none; border: 0; box-shadow: none; aspect-ratio: auto; padding: 0; }
.sm-ship .sm-tee { width: 62%; }
/* a regra do Card consolidado (0,3,2) vencia a dos passos (0,2,2) — especificidade equiparada aqui */
main .grid > div.rounded-2xl.p-6:has(.num), main .grid > div.rounded-xl.p-6:has(.num),
main .grid > div.rounded-2xl.p-5:has(.num) {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
}

/* ---- miniatura 1: a tela de login real (escura, como a captura) ---- */
.sm-auth {
  background: radial-gradient(120% 90% at 78% 58%, #24379e 0%, #101a4a 42%, #060a1c 100%) !important;
  border: 0 !important; box-shadow: 0 12px 28px -18px rgba(6,10,28,.9) !important;
  aspect-ratio: 16 / 11; padding: 0 !important; align-items: center; justify-content: center; overflow: hidden;
}
.sm-auth-card {
  width: 62%; background: #15171c; border-radius: 7px; padding: 9px 9px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.8);
}
.sm-auth .sm-logo { height: 8px; width: auto; margin-bottom: 1px; }
.sm-auth .sm-t { font-size: 6.5px; font-weight: 600; color: #f3f5fa; }
.sm-auth .sm-sub { font-size: 4.2px; font-weight: 400; color: #8d93a3; text-align: center; line-height: 1.35; }
.sm-auth .sm-oauth { gap: 4px; margin: 3px 0 1px; }
.sm-auth .sm-oauth i { width: 9px; height: 9px; background: #23262e; border: 0; }
.sm-auth .sm-oauth i.g { background: #23262e radial-gradient(circle at 50% 50%, #4285F4 34%, transparent 36%); }
.sm-auth .sm-oauth i.a { background: #23262e radial-gradient(circle at 50% 50%, #fff 30%, transparent 32%); }
.sm-auth .sm-oauth i.m { background: #23262e radial-gradient(circle at 50% 50%, #F25022 30%, transparent 32%); }
.sm-auth .sm-rule { width: 88%; color: #5c6273; font-size: 4px; gap: 4px; margin: 1px 0; }
.sm-auth .sm-rule::before, .sm-auth .sm-rule::after { background: rgba(255,255,255,.1); }
.sm-auth .sm-lab { align-self: flex-start; margin-left: 6%; font-size: 4.2px; font-weight: 600; color: #e6e9f2; }
.sm-auth .sm-field {
  width: 88%; display: flex; align-items: center; gap: 3px; padding: 4px 5px; border-radius: 3px;
  background: #1c1f26; border: 1px solid rgba(255,255,255,.08); color: #6f7585; font-size: 4.4px; font-weight: 400;
}
.sm-auth .sm-field svg { width: 5px; height: 5px; fill: none; stroke: #6f7585; stroke-width: 2; flex: 0 0 auto; }
.sm-auth .sm-btn {
  width: 88%; padding: 4px; border-radius: 3px; text-align: center; font-size: 4.6px; font-weight: 600;
  background: #1c1f26; border: 1px solid rgba(255,255,255,.12); color: #eef1f7;
}
.sm-auth .sm-btn-2 { font-weight: 500; }
.sm-auth .sm-legal { font-size: 3.4px; font-weight: 400; color: #5c6273; text-align: center; line-height: 1.4; margin-top: 2px; width: 88%; }
/* a 3 volta a ter moldura, pra casar com as outras duas */
.sm-ship { background: linear-gradient(155deg, #fcfdff 0%, #eef2fa 58%, #e7ecf6 100%); border: 1px solid rgba(14,17,22,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px -18px rgba(20,24,60,.5);
  aspect-ratio: 16 / 11; padding: 12px; justify-content: center; }
.sm-ship .sm-tee { width: 46%; }
.has-mock .num { font-size: 30px !important; margin-bottom: 10px !important; }

/* ============================================================
   20. LAUNCH OFFER — molduras de vidro, nuvens e fechamento com o produto
   ============================================================ */
.lo-glass {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 28px; padding: 54px 48px;
  background: color-mix(in srgb, rgba(255,255,255,.58), rgba(255,255,255,.05) calc(var(--k) * 100%));
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.07), rgba(255,255,255,.1) calc(var(--k) * 100%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 34px 80px -50px rgba(20,24,60,.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
}
.lo-glass > * { position: relative; z-index: 1; }
/* cada painel carrega a sua nuvem, em posições alternadas */
.lo-glass-cloud {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 62%; height: 150%; opacity: .55;
  animation: cloud-drift-1 44s ease-in-out infinite alternate;
}
.lo-glass-a .lo-glass-cloud { right: -14%; top: -34%; background: radial-gradient(closest-side, var(--cl-stops-b)); }
.lo-glass-b .lo-glass-cloud { left: -16%; bottom: -40%; background: radial-gradient(closest-side, var(--cl-stops-a)); animation-name: cloud-drift-3; animation-duration: 52s; }
.lo-glass h2 { margin-top: 0; }
@media (max-width: 760px) { .lo-glass { padding: 34px 22px; border-radius: 22px; } }

/* FAQ em vidro, no lugar das barras cinzas */
.lo-faq details, .lo-faq .rounded-lg, .lo-faq [class*="bg-[#16161c]"] {
  background: color-mix(in srgb, rgba(255,255,255,.72), rgba(255,255,255,.06) calc(var(--k) * 100%)) !important;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.07), rgba(255,255,255,.1) calc(var(--k) * 100%)) !important;
  border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.lo-faq details:hover, .lo-faq .rounded-lg:hover {
  border-color: color-mix(in srgb, rgba(58,99,245,.3), rgba(255,255,255,.18) calc(var(--k) * 100%)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px -20px rgba(20,24,60,.4);
}

/* fechamento: a peça pronta ao lado da chamada */
.lo-cta > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 44px; align-items: center; text-align: left; max-width: 1080px; }
.lo-cta h2, .lo-cta p { text-align: left; }
.lo-cta-art { position: relative; display: flex; justify-content: center; }
.lo-cta-tee { position: relative; width: min(320px, 100%); animation: lo-float 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(20,24,60,.18)); }
.lo-cta-tee > img { width: 100%; display: block; }
.lo-cta-tee img.lo-cta-print { position: absolute; top: 34%; left: 50%; translate: -50% -50%; width: 27%; }
.lo-cta-art::before {
  content: ""; position: absolute; z-index: -1; inset: -18% -10%; pointer-events: none;
  background: radial-gradient(closest-side, var(--cl-stops-c)); opacity: .6;
  animation: cloud-drift-2 40s ease-in-out infinite alternate;
}
@media (max-width: 860px) { .lo-cta > div { grid-template-columns: 1fr; } .lo-cta-art { order: -1; } }
@media (prefers-reduced-motion: reduce) { .lo-glass-cloud, .lo-cta-tee, .lo-cta-art::before { animation: none; } }
/* CTA final: duas colunas de verdade (arte + texto agrupado) */
.lo-cta > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 52px; align-items: center; max-width: 1060px; text-align: left; }
.lo-cta-copy { text-align: left; }
.lo-cta-copy h2 { margin-top: 0; }
.lo-cta-copy > div { justify-content: flex-start; }
.lo-cta-tee { width: min(330px, 100%); }
@media (max-width: 860px) { .lo-cta > div { grid-template-columns: 1fr; } .lo-cta-copy, .lo-cta-copy h2 { text-align: center; } .lo-cta-copy > div { justify-content: center; } }

/* ============================================================
   21. LAUNCH OFFER — ritmo: um tratamento por seção, nunca o mesmo duas vezes
   ============================================================ */
/* 1 · faixa tonal de borda a borda (sem moldura): os passos flutuam sobre cor */
.lo-band { position: relative; isolation: isolate; overflow: hidden;
  background: color-mix(in srgb, #eef1fb, #0c1020 calc(var(--k) * 100%)) !important; }
.lo-band::before {
  content: ""; position: absolute; z-index: 0; right: -8%; top: -50%; width: 52%; height: 200%;
  background: radial-gradient(closest-side, var(--cl-stops-b)); opacity: .5; pointer-events: none;
  animation: cloud-drift-2 46s ease-in-out infinite alternate;
}
.lo-band > div { position: relative; z-index: 1; }
.lo-band .sm { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 22px 44px -26px rgba(20,24,60,.5); }

/* 2 · lista editorial: numeral na lateral, régua entre itens, sem card e sem painel */
.lo-list .grid { display: block !important; }
.lo-list .grid > div:has(.num) {
  display: grid !important; grid-template-columns: 74px minmax(0, 1fr); align-items: start; column-gap: 26px;
  padding: 26px 0 !important; border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)) !important;
}
.lo-list .grid > div:has(.num):first-child { border-top: 0 !important; }
.lo-list .grid > div:has(.num) .num { grid-row: 1 / span 3; font-size: 56px !important; margin: -6px 0 0 !important; align-self: start; }
.lo-list .grid > div:has(.num) > *:not(.num) { grid-column: 2; }
.lo-list h3 { font-size: 19px; margin-bottom: 6px; }

/* 3 · o painel de vidro fica só aqui (usado uma vez) */
.lo-glass { padding: 48px 44px; }

/* 4 · FAQ: coluna estreita, linhas finas, sem cartão nem painel */
.lo-faq > div { max-width: 720px; }
.lo-faq details, .lo-faq .rounded-lg, .lo-faq [class*="bg-[#16161c]"] {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-bottom: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)) !important;
  padding: 4px 2px !important;
}
.lo-faq details:hover, .lo-faq .rounded-lg:hover { box-shadow: none !important;
  border-bottom-color: color-mix(in srgb, rgba(58,99,245,.45), rgba(255,255,255,.3) calc(var(--k) * 100%)) !important; }
.lo-faq summary, .lo-faq .rounded-lg > button, .lo-faq .rounded-lg > div:first-child { padding: 16px 0 !important; }
/* a regra que zera os cards de passo (0,4,2) vencia `.lo-list .grid > div:has(.num)` (0,3,2) */
section.lo-list .grid > div.rounded-2xl.p-6:has(.num),
section.lo-list .grid > div.rounded-xl.p-6:has(.num),
section.lo-list .grid > div.rounded-2xl.p-5:has(.num) {
  display: grid !important; grid-template-columns: 78px minmax(0, 1fr); align-items: start; column-gap: 28px;
  padding: 30px 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.11), rgba(255,255,255,.13) calc(var(--k) * 100%)) !important;
}
section.lo-list .grid > div:has(.num):first-child { border-top: 0 !important; padding-top: 6px !important; }
section.lo-list .grid > div:has(.num) .num { grid-row: 1 / span 4; font-size: 58px !important; margin: -10px 0 0 !important; }
section.lo-list .grid > div:has(.num) > *:not(.num) { grid-column: 2; }
section.lo-list .grid > div:has(.num) h3 { margin-bottom: 8px !important; }
/* hero: a caixa do palco tinha 780px e o texto ~450 — centralizado, sobrava um vão enorme em cima */
.lo-stage { min-height: 580px; }
.lo-tee { width: 660px; margin-left: 2%; }
.lo-stage::before { width: 620px; height: 620px; }
.lo-tee { width: 560px; margin-left: 6%; }   /* cabia na caixa: 660 estourava embaixo */
.lo-stage { min-height: 640px; }
.lo-stage::before { width: 540px; height: 540px; }
.lo-checks { bottom: 4%; }

/* ---- nota dentro da faixa tonal: sólida, sem gradiente (a faixa já é o gradiente) ---- */
.lo-band .bn {
  background: color-mix(in srgb, #ffffff, #14161d calc(var(--k) * 100%)) !important;
  border: 0 !important; border-left: 2px solid #3262EA !important;
  border-radius: 4px !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 22px 26px !important;
}
.lo-band .bn::before { display: none !important; }   /* a nuvem do banner sai: gradiente dentro de gradiente */
.lo-band .bn h3, .lo-band .bn h4, .lo-band .bn strong { font-size: 15px; margin-bottom: 6px; }
.lo-band .bn p { font-size: 14.5px; line-height: 1.6; }

/* ============================================================
   22. LAUNCH OFFER — banho de layout: imagem, mídia fixa, ícones, revelação
   ============================================================ */

/* ---- 1 · seção de imagem: sete Beefy-T reais, em linha, com parallax de rolagem ---- */
.lo-fast { position: relative; overflow: hidden; padding-bottom: 0 !important; }
.lo-fast-copy { max-width: 880px !important; padding-bottom: 24px !important; }
.lo-fast-copy h2 { font-size: clamp(34px, 4.2vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -.03em !important; }
.lo-fast-copy p { font-size: clamp(17px, 1.4vw, 21px) !important; line-height: 1.55 !important; max-width: 760px; margin: 0 auto; }
.lo-lineup {
  position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0;
  width: min(1600px, 118vw); margin: 8px auto -6%; left: 50%; translate: -50% 0; pointer-events: none;
}
.lo-lu { flex: 0 0 auto; width: 15.5%; position: relative; isolation: isolate;
  filter: drop-shadow(0 34px 40px rgba(20,24,60,.16));
  animation: lo-lu-par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
  /* profundidade: as pontas ficam menores e mais atrás */
  --depth: calc(abs(var(--i) - 3) / 3);
  scale: calc(1 - var(--depth) * .22); z-index: calc(10 - var(--i)); margin: 0 -2.4%;
  translate: 0 calc(var(--depth) * 6%);
}
.lo-lu:nth-child(n+5) { z-index: calc(3 + var(--i)); }
.lo-lu img { width: 100%; display: block; position: relative; z-index: 1; }
.lo-lu img.lo-lu-print { position: absolute; top: 33.5%; left: 50%; translate: -50% -50%; width: 24%; z-index: 3; }
.lo-lu::after { z-index: 2; }
/* parallax: as centrais sobem mais que as das pontas, cada uma no seu passo */
@keyframes lo-lu-par { from { transform: translateY(calc(70px + var(--depth) * -50px)); } to { transform: translateY(calc(-40px + var(--depth) * 40px)); } }
@media (max-width: 860px) { .lo-lu { width: 26%; } .lo-lineup { width: 140vw; } .lo-lu:nth-child(1), .lo-lu:nth-child(7) { display: none; } }

/* ---- 2 · "Four things": mídia fixa à esquerda que troca com a leitura ---- */
.lo-four { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.lo-kv-col { position: sticky; top: 108px; }
.lo-kv { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; isolation: isolate;
  box-shadow: 0 40px 90px -50px rgba(20,24,60,.6); }
.lo-kv-p { position: absolute; inset: 0; margin: 0; opacity: 0; scale: 1.04; transition: opacity .7s cubic-bezier(.22,1,.36,1), scale 1.1s cubic-bezier(.22,1,.36,1); }
.lo-kv-p .lo-kv-img { position: absolute; inset: 0; z-index: 0;
  background: url(/images/beefy-tee-photo.png) var(--pos, 50% 40%) / 210% auto no-repeat; }
.lo-kv-p .lo-kv-img::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; }
.lo-kv-p::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%); }
.lo-kv-p b { position: absolute; z-index: 2; left: 8%; bottom: 17%; color: #fff;
  font: 300 clamp(64px, 7.4vw, 118px)/.9 var(--font-poppins), system-ui; letter-spacing: -.04em; white-space: nowrap;
  translate: 0 22px; opacity: 0; transition: translate .8s cubic-bezier(.22,1,.36,1) .1s, opacity .6s .1s; }
.lo-kv-p figcaption { position: absolute; z-index: 2; left: 8%; bottom: 9%; color: rgba(255,255,255,.78);
  font: 500 13px/1.3 var(--font-poppins), system-ui; letter-spacing: .06em; text-transform: uppercase;
  translate: 0 14px; opacity: 0; transition: translate .8s cubic-bezier(.22,1,.36,1) .22s, opacity .6s .22s; }
.lo-kv[data-on="0"] .lo-kv-p:nth-child(1), .lo-kv[data-on="1"] .lo-kv-p:nth-child(2),
.lo-kv[data-on="2"] .lo-kv-p:nth-child(3), .lo-kv[data-on="3"] .lo-kv-p:nth-child(4) { opacity: 1; scale: 1; }
.lo-kv[data-on="0"] .lo-kv-p:nth-child(1) :is(b, figcaption), .lo-kv[data-on="1"] .lo-kv-p:nth-child(2) :is(b, figcaption),
.lo-kv[data-on="2"] .lo-kv-p:nth-child(3) :is(b, figcaption), .lo-kv[data-on="3"] .lo-kv-p:nth-child(4) :is(b, figcaption) { translate: 0 0; opacity: 1; }
/* a lista fica mais respirada, para o scroll ter onde trocar a mídia */
section.lo-list .grid > div.rounded-2xl.p-6:has(.num) { padding: 40px 0 !important; grid-template-columns: 64px minmax(0, 1fr); }
section.lo-list .grid > div:has(.num) .num { font-size: 48px !important; }
@media (max-width: 900px) { .lo-four { grid-template-columns: 1fr; } .lo-kv-col { position: static; } .lo-kv { aspect-ratio: 16 / 10; } }

/* ---- 3 · cards da conta: ícone de vidro no lugar do numeral ---- */
.lo-card-ico { padding-top: 26px !important; }
.lo-card-ico .lo-ci { width: 72px; height: 72px; margin: 0 0 18px -6px; animation: gi-float 6s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 4); }
@keyframes gi-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---- 4 · slot de imagem para gerar: brief visível, nunca invenção ---- */
.img-brief {
  position: relative; margin: 0 0 26px; padding: 22px 24px 20px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  background: linear-gradient(160deg, #f4efe6 0%, #e8dfd0 55%, #d9cdb9 100%);
  border: 1px dashed rgba(90,70,40,.28);
}
.img-brief::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.img-brief-tag { align-self: flex-start; font: 700 10px/1 var(--font-poppins), system-ui; letter-spacing: .14em; text-transform: uppercase;
  color: #6b4e2a; background: rgba(255,255,255,.7); border-radius: 999px; padding: 6px 10px; }
.img-brief p { margin: 0 !important; font: 400 14px/1.5 var(--font-poppins), system-ui !important; color: #3d3226 !important; max-width: 46ch; }
.img-brief-meta { font: 500 11px/1 var(--font-poppins), system-ui; color: #8a7455; letter-spacing: .04em; }
body.is-dark .img-brief { filter: saturate(.85) brightness(.9); }

/* ---- 5 · revelação em cascata ---- */
.rv { opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.22,1,.36,1) var(--d, 0ms), translate .9s cubic-bezier(.22,1,.36,1) var(--d, 0ms); }
.rv.is-in { opacity: 1; translate: none; }   /* `none`, não `0 0`: qualquer translate ≠ none vira containing block e prende os modais position:fixed (calendário do /book-your-demo) dentro do card */
.lo-lu.rv { translate: 0 calc(var(--depth) * 6%); }   /* preserva a profundidade */
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; transition: none; } .lo-lu { animation: none; } .lo-card-ico .lo-ci { animation: none; } }
/* a linha mostra a camiseta inteira, com a sombra; só as pontas vazam pelos lados */
.lo-lineup { margin: 8px auto 0; padding-bottom: 28px; }
.lo-fast { padding-bottom: 0 !important; }
.lo-editor .img-brief { aspect-ratio: 16 / 7; margin-bottom: 22px; }
/* a fila de camisetas saiu; no lugar, um slot largo com o brief */
.lo-lineup { display: none; }
.img-brief-wide { aspect-ratio: 21 / 9; max-width: 1120px; margin: 8px auto 64px; }
.lo-fast { padding-bottom: 0 !important; }

/* ============================================================
   23. LAUNCH OFFER — conceito SERIGRAFIA: retícula, tinta, marcas de registro
   ============================================================ */
/* marcas de registro (assinatura de impressão) */
.regmark { position: absolute; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; pointer-events: none; z-index: 3; }
.regmark-tl { top: 18px; left: 18px; } .regmark-tr { top: 18px; right: 18px; }
.regmark-bl { bottom: 18px; left: 18px; } .regmark-br { bottom: 18px; right: 18px; }

/* placas: as bandas coloridas viram placas arredondadas flutuando na página (transição entre seções) */
.lo-press, .lo-band { margin: 24px 16px !important; border-radius: 40px; }
.lo-band { overflow: hidden; }
.lo-fast-copy, .lo-lineup, .img-brief-wide { display: none; }

/* ---- a PROVA DE IMPRESSÃO: banda de tinta com a camiseta real em retícula ---- */
.lo-press {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: #0f1636 !important; min-height: 560px;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  padding: 0 !important;
}
/* textura de retícula por trás, só um sopro */
.lo-press::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.075) 0 1.1px, transparent 1.6px) 0 0 / 9px 9px; }
/* a tinta não é chapada: uma mancha de azul mais vivo respira ao fundo */
.lo-press::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -10%; top: -30%; width: 70%; height: 160%;
  background: radial-gradient(closest-side, rgba(50,98,234,.55), rgba(50,98,234,.18) 45%, transparent 100%); animation: cloud-drift-2 40s ease-in-out infinite alternate; }
.lo-press-copy { position: relative; z-index: 2; text-align: left !important; max-width: none !important; padding: 72px 20px 72px 72px !important; }
.lo-press-copy h2 { color: #fff !important; font-size: clamp(34px, 3.8vw, 52px) !important; line-height: 1.04 !important; letter-spacing: -.03em !important; margin-bottom: 22px !important; }
.lo-press-copy p { color: rgba(255,255,255,.78) !important; font-size: clamp(16px, 1.25vw, 19px) !important; line-height: 1.6 !important; max-width: 52ch; }
.lo-press-art { position: relative; z-index: 1; height: 100%; min-height: 560px; }
.lo-press-tee { position: absolute; right: -14%; top: -6%; width: 118%; max-width: none;
  animation: lo-press-par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
/* o logo é a única coisa lisa num mundo reticulado: a arte vira impressão */
.lo-press-logo { position: absolute; right: 34%; top: 33%; width: 22%; z-index: 2; filter: drop-shadow(0 2px 18px rgba(15,22,54,.95)); translate: 0 0;
  animation: lo-press-par-logo linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
@keyframes lo-press-par { from { transform: translateY(60px) rotate(-2deg); } to { transform: translateY(-60px) rotate(1.5deg); } }
@keyframes lo-press-par-logo { from { transform: translateY(58px) rotate(-2deg); } to { transform: translateY(-58px) rotate(1.5deg); } }
.lo-press-meta { position: absolute; z-index: 3; left: 72px; bottom: 26px; font: 600 10.5px/1 var(--font-poppins), system-ui; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.lo-press .regmark { color: #fff; }
@media (max-width: 900px) { .lo-press { grid-template-columns: 1fr; min-height: 0; } .lo-press-copy { padding: 48px 28px 24px !important; } .lo-press-art { min-height: 340px; } .lo-press-tee { width: 110%; right: -20%; top: 0; } .lo-press-meta { left: 28px; } }

/* ---- história: a FOLHA DE PROVA em tinta ---- */
.lo-proof { position: relative; margin: 0 0 26px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9;
  background: color-mix(in srgb, #fbfbfd, #171a26 calc(var(--k) * 100%)); color: color-mix(in srgb, #16214a, #fff calc(var(--k) * 100%));
  border: 1px solid color-mix(in srgb, rgba(22,33,74,.14), rgba(255,255,255,.12) calc(var(--k) * 100%)); }
.lo-proof img { position: absolute; left: 50%; top: 8%; translate: -50% 0; width: 118%; max-width: none; }
.lo-proof figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; padding: 10px 44px 10px 44px;
  font: 600 10px/1 var(--font-poppins), system-ui; letter-spacing: .16em; text-transform: uppercase; opacity: .75;
  background: linear-gradient(0deg, color-mix(in srgb, #fbfbfd, #171a26 calc(var(--k) * 100%)) 55%, transparent); }
.lo-proof .regmark-tl { top: 12px; left: 12px; } .lo-proof .regmark-br { bottom: 12px; right: 12px; }

/* ---- Three steps: a RÉGUA DAS 48 HORAS, desenhada no scroll ---- */
.lo-rail { display: block; width: 100%; height: 88px; margin: 6px 0 -6px; overflow: visible;
  color: color-mix(in srgb, #16214a, #fff calc(var(--k) * 100%)); }
.lo-rail .rail-base { stroke: currentColor; stroke-opacity: .16; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lo-rail .rail-ink { stroke: #3262EA; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: rail-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
@keyframes rail-draw { to { stroke-dashoffset: 0; } }
.lo-rail .tk { stroke: currentColor; stroke-opacity: .35; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lo-rail .tk-big { stroke-opacity: .7; stroke-width: 1.5; }
.lo-rail .rail-node circle { fill: color-mix(in srgb, #fff, #171a26 calc(var(--k) * 100%)); stroke: #3262EA; stroke-width: 2; vector-effect: non-scaling-stroke; }
.lo-rail .rail-lbl { fill: currentColor; fill-opacity: .7; font: 600 11px var(--font-poppins), system-ui; letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }
.lo-band .grid > div:has(.num) .num { margin-top: 6px !important; }

/* ---- KV 4: 1.000 pontos, um por camiseta ---- */
.lo-kv-dotsp { background: var(--c); }
.lo-kv-dots { position: absolute; inset: 7% 7% 30% 7%; z-index: 0; display: grid; grid-template-columns: repeat(40, 1fr); gap: 3px; align-content: start; }
.lo-kv-dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.92); scale: .2; opacity: .15;
  transition: scale .5s cubic-bezier(.22,1,.36,1), opacity .5s; transition-delay: calc(var(--k) * 1.1ms); }
.lo-kv[data-on="3"] .lo-kv-dots i { scale: 1; opacity: 1; }
.lo-kv-dotsp::after { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.38) 100%); }
/* os outros três KVs ganham a retícula por cima do tecido — mesmo idioma */
.lo-kv-p .lo-kv-img::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light; opacity: .7;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0 1.1px, transparent 1.7px) 0 0 / 8px 8px; }
@media (prefers-reduced-motion: reduce) { .lo-press-tee, .lo-press-logo, .lo-rail .rail-ink { animation: none; stroke-dashoffset: 0; } }
/* folha de prova: mostra o peito da camiseta, não só o ombro */
.lo-proof img { width: 104%; top: -4%; }
.lo-proof { aspect-ratio: 16 / 10; }
/* placa de tinta: camiseta real, sem retícula, sem marcas, sem carimbo */
.lo-press::before { display: none; }
.lo-press .regmark, .lo-press-meta { display: none; }
.lo-press-tee { right: -6%; top: 4%; width: 100%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.lo-press-logo { right: 31.5%; top: 34.5%; width: 17%; filter: none; }
@keyframes lo-press-par { from { transform: translateY(50px); } to { transform: translateY(-50px); } }
@keyframes lo-press-par-logo { from { transform: translateY(50px); } to { transform: translateY(-50px); } }

/* ---- régua das 48 h, refeita em HTML/CSS: nada estica, tudo no idioma do site ---- */
.lo-rail { position: relative; height: 64px; margin: 4px 0 2px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible;
  --ink: color-mix(in srgb, #16214a, #fff calc(var(--k) * 100%)); }
.lo-rail .rail-line, .lo-rail .rail-ink, .lo-rail .rail-ticks { position: absolute; top: 20px; left: calc(100% / 6); width: calc(100% * 4 / 6); }
.lo-rail .rail-line { height: 1px; background: color-mix(in srgb, var(--ink), transparent 84%); }
.lo-rail .rail-ink  { height: 1px; background: #3262EA; transform-origin: 0 50%; scale: 0 1;
  animation: rail-grow linear both; animation-timeline: view(); animation-range: entry 35% cover 60%; }
@keyframes rail-grow { to { scale: 1 1; } }
/* traços: 48 horas (grandes a cada 12) na primeira metade, 10 dias (grandes a cada 5) na segunda */
.lo-rail .rail-ticks { height: 10px; top: 10px; }
.lo-rail .rail-hours { width: calc(100% * 2 / 6);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 40%) 0 1px, transparent 1px calc(100% / 4)) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 74%) 0 1px, transparent 1px calc(100% / 48)) 0 4px / 100% 6px no-repeat; }
.lo-rail .rail-days { left: 50%; width: calc(100% * 2 / 6);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 40%) 0 1px, transparent 1px calc(100% / 2)) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink), transparent 74%) 0 1px, transparent 1px calc(100% / 10)) 0 4px / 100% 6px no-repeat; }
/* nós: círculo branco com anel azul — a mesma linguagem das bolinhas de cor */
.lo-rail .rail-node { grid-column: var(--c); position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; }
.lo-rail .rail-node i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, #fff, #171a26 calc(var(--k) * 100%)); border: 1.5px solid #3262EA; box-sizing: border-box; display: block; }
.lo-rail .rail-node b { font: 600 10.5px/1 var(--font-poppins), system-ui; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--ink), transparent 30%); }
.lo-rail .tk, .lo-rail .rail-base, .lo-rail .rail-lbl { display: none; }
@media (max-width: 860px) { .lo-rail .rail-node b { font-size: 9px; letter-spacing: .06em; } }

/* ============================================================
   24. LAUNCH OFFER — menos camisetas repetidas: viagem em ícones, envio, logo como estrela
   ============================================================ */
/* A · placa de tinta: a viagem de ida e volta */
.lo-press-tee, .lo-press-logo { display: none; }
.lo-press-art { display: flex; align-items: center; justify-content: center; padding: 48px 56px 48px 24px; min-height: 0; }
.lo-trip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; width: 100%; max-width: 560px; }
.lo-trip-path { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: 52px; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 6px, transparent 6px 14px) 0 0 / 200% 100%;
  animation: trip-flow 1.6s linear infinite; }
@keyframes trip-flow { to { background-position: -28px 0; } }
.lo-trip-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  animation: lo-float2 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.6s); }
.lo-trip-tile { width: 104px; height: 104px; border-radius: 26px; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 30px 60px -30px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lo-trip-tile img.gi { width: 74px; height: 74px; }
.lo-trip-node b { font: 600 10.5px/1.3 var(--font-poppins), system-ui; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
@media (max-width: 900px) { .lo-press-art { padding: 8px 24px 44px; } .lo-trip-tile { width: 76px; height: 76px; border-radius: 20px; } .lo-trip-tile img.gi { width: 54px; height: 54px; } }

/* B · passo 3: ícone de envio */
.sm-ship .sm-ship-ico { width: 92px; height: 92px; margin: 2px auto 8px; animation: gi-float 6s ease-in-out infinite; }

/* C · fechamento: o logo do cliente como estrela */
.lo-cta-tee { display: none; }
.lo-cta-logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 30px 0; width: 100%; }
.lo-cta-frame { position: relative; width: min(360px, 88%); padding: 34px 40px; border-radius: 6px; border: 1.5px solid #7c9cff;
  background: rgba(124,156,255,.06); box-shadow: 0 0 0 1px rgba(124,156,255,.12), 0 40px 90px -50px rgba(124,156,255,.8); }
.lo-cta-frame > img { width: 100%; display: block; }
.lo-cta-frame .h { position: absolute; width: 10px; height: 10px; border-radius: 2px; background: #fff; border: 1.5px solid #7c9cff; box-sizing: border-box; }
.lo-cta-frame .h.tl { left: -6px; top: -6px; } .lo-cta-frame .h.tr { right: -6px; top: -6px; }
.lo-cta-frame .h.bl { left: -6px; bottom: -6px; } .lo-cta-frame .h.br { right: -6px; bottom: -6px; }
.lo-cta-file { position: absolute; left: 0; top: -26px; font: 500 11px/1 var(--font-poppins), system-ui; color: #9fb4ff; letter-spacing: .02em; }
.lo-cta-logo .lo-checks { position: static; translate: none; flex-wrap: wrap; }
.lo-cta-logo .lo-check { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.4); color: #6ee7a0; box-shadow: none; }
.lo-cta-logo .lo-check svg { stroke: #6ee7a0; }
.lo-cta-logo .lo-spark { z-index: 5; }
.lo-cta-art::before { opacity: .45; }
/* caminho sinuoso entre os passos: sobe até o primeiro, desce até o segundo, volta ao centro */
.lo-trip-path { position: absolute; z-index: 0; left: 0; right: 0; top: 52px; height: 2px; width: 100%; background: none; animation: none;
  overflow: visible; translate: 0 -60px; height: 120px; pointer-events: none; }
.lo-trip-path path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lo-trip-path .tp-base { stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.lo-trip-path .tp-flow { stroke: rgba(255,255,255,.85); stroke-width: 1.5; stroke-dasharray: .045 .07; animation: tp-run 2.4s linear infinite; }
@keyframes tp-run { to { stroke-dashoffset: -.115; } }
.lo-trip-node:nth-child(2) { translate: 0 -34px; }   /* o primeiro sobe com a curva */
.lo-trip-node:nth-child(4) { translate: 0 -34px; }   /* o terceiro também: o do meio fica embaixo, no vale */
.lo-trip-node:nth-child(3) { translate: 0 22px; }

/* ============================================================
   25. LAUNCH OFFER — a viagem como COMPOSIÇÃO (diagonal, pesos, movimento com sentido)
   ============================================================ */
.lo-press-art { padding: 40px 40px 40px 0; }
.lo-trip { position: relative; display: block; width: 560px; height: 340px; max-width: none; --T: 7s; }
.lo-trip-path { position: absolute; inset: 0; width: 100%; height: 100%; translate: none; overflow: visible; }
.lo-trip-path .tp-base { stroke: rgba(255,255,255,.18); stroke-width: 1.5; }
.lo-trip-path .tp-flow { stroke: rgba(255,255,255,.7); stroke-width: 1.5; stroke-dasharray: 3 9; animation: tp-run 1.8s linear infinite; }
@keyframes tp-run { to { stroke-dashoffset: -12; } }

/* nós posicionados pelo centro, cada um com o seu peso */
.lo-trip-node { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: 14px; animation: none; }
.lo-trip-node b { white-space: nowrap; text-align: left; }
.tn-a { left: 70px;  top: 70px;  }                       /* atrás: menor, mais apagado */
.tn-b { left: 300px; top: 190px; flex-direction: column; gap: 16px; }   /* o coração: maior, à frente */
.tn-c { left: 470px; top: 280px; flex-direction: row-reverse; }         /* chegada: médio */
.tn-a .lo-trip-tile { width: 76px; height: 76px; border-radius: 20px; opacity: .78; }
.tn-a .lo-trip-tile img.gi { width: 52px; height: 52px; }
.tn-b .lo-trip-tile { width: 136px; height: 136px; border-radius: 34px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 44px 80px -34px rgba(0,0,0,.9), 0 0 0 0 rgba(124,156,255,0); }
.tn-b .lo-trip-tile img.gi { width: 98px; height: 98px; }
.tn-c .lo-trip-tile { width: 100px; height: 100px; border-radius: 26px; }
.tn-c .lo-trip-tile img.gi { width: 70px; height: 70px; }
.lo-trip-tile { transition: none; animation-duration: var(--T); animation-timing-function: ease-out; animation-iteration-count: infinite; }
/* cada estágio acende quando o arquivo chega nele */
.tn-a .lo-trip-tile { animation-name: tile-lit-a; } .tn-b .lo-trip-tile { animation-name: tile-lit-b; } .tn-c .lo-trip-tile { animation-name: tile-lit-c; }
@keyframes tile-lit-a { 0%, 3% { scale: 1; border-color: rgba(255,255,255,.18); } 6% { scale: 1.06; border-color: rgba(124,156,255,.7); } 16%, 100% { scale: 1; border-color: rgba(255,255,255,.18); } }
@keyframes tile-lit-b { 0%, 40% { scale: 1; border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 44px 80px -34px rgba(0,0,0,.9), 0 0 0 0 rgba(124,156,255,0); }
  46% { scale: 1.07; border-color: rgba(124,156,255,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 44px 80px -34px rgba(0,0,0,.9), 0 0 80px 10px rgba(124,156,255,.35); }
  60%, 100% { scale: 1; border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 44px 80px -34px rgba(0,0,0,.9), 0 0 0 0 rgba(124,156,255,0); } }
@keyframes tile-lit-c { 0%, 86% { scale: 1; border-color: rgba(255,255,255,.18); } 92% { scale: 1.06; border-color: rgba(110,231,160,.8); } 100% { scale: 1; border-color: rgba(255,255,255,.18); } }

/* o arquivo do logo viaja pelo caminho: entra, para na produção (pulsa), segue até a porta e some */
.lo-trip-file { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 7px; border-radius: 8px; background: #fff; color: #1F1F1F;
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.8); offset-rotate: 0deg; offset-anchor: 50% 50%;
  animation: file-go var(--T) cubic-bezier(.45,.05,.25,1) infinite; }
.lo-trip-file img { height: 14px; width: auto; display: block; }
.lo-trip-file i { font: 500 10px/1 var(--font-poppins), system-ui; font-style: normal; color: #6B6B66; letter-spacing: .01em; }
@keyframes file-go {
  0%   { offset-distance: 0%;   opacity: 0; scale: .8; }
  5%   { offset-distance: 0%;   opacity: 1; scale: 1; }
  40%  { offset-distance: 50%;  opacity: 1; scale: 1; }
  46%  { offset-distance: 50%;  opacity: 1; scale: .72; }     /* entra na produção */
  56%  { offset-distance: 50%;  opacity: 1; scale: 1; }
  88%  { offset-distance: 100%; opacity: 1; scale: 1; }
  93%  { offset-distance: 100%; opacity: 0; scale: .8; }
  100% { offset-distance: 100%; opacity: 0; scale: .8; }
}
@media (max-width: 1100px) { .lo-trip { scale: .82; transform-origin: 50% 50%; } }
@media (max-width: 900px) { .lo-press-art { padding: 0 0 20px; justify-content: center; } .lo-trip { scale: .7; margin: -40px 0; } }
@media (prefers-reduced-motion: reduce) { .lo-trip-file, .lo-trip-tile, .tp-flow { animation: none; } .lo-trip-file { offset-distance: 50%; opacity: 1; } }
/* as regras da onda anterior (:nth-child, 0,2,0) venciam a centralização (0,1,0) — equiparado aqui */
.lo-trip .lo-trip-node:is(.tn-a, .tn-b, .tn-c) { translate: -50% -50%; }
/* o rótulo da chegada fica embaixo, fora do caminho do arquivo */
.tn-c { flex-direction: column; gap: 14px; }
/* o arquivo ENTRA na produção: some por um instante dentro do tile e sai do outro lado */
@keyframes file-go {
  0%   { offset-distance: 0%;   opacity: 0; scale: .8; }
  5%   { offset-distance: 0%;   opacity: 1; scale: 1; }
  40%  { offset-distance: 48%;  opacity: 1; scale: 1; }
  45%  { offset-distance: 50%;  opacity: 0; scale: .6; }     /* dentro da máquina */
  53%  { offset-distance: 50%;  opacity: 0; scale: .6; }
  57%  { offset-distance: 53%;  opacity: 1; scale: 1; }
  88%  { offset-distance: 100%; opacity: 1; scale: 1; }
  93%  { offset-distance: 100%; opacity: 0; scale: .8; }
  100% { offset-distance: 100%; opacity: 0; scale: .8; }
}
.lo-trip-file { padding: 5px 9px 5px 7px; gap: 6px; border-radius: 7px; }
.lo-trip-file img { height: 12px; }
.lo-trip-file i { font-size: 9.5px; }

/* ============================================================
   26. LAUNCH OFFER — passe APPLE
   Menos elementos. Um material. Numerais finos com brilho. Um acento. Nada flutua à toa.
   ============================================================ */
/* raios e materiais */
.lo-press, .lo-band { border-radius: 28px; }
.lo-press { background: #07091a !important; }
.lo-press::after { opacity: .55; }
.lo-glass { border-radius: 24px; }
.sm, .lo-kv, .lo-cta-frame { border-radius: 18px; }

/* nada fofo: faíscas em estrela, ícones flutuando, tiles de ícone */
.lo-spark { display: none !important; }
.lo-trip, .lo-trip-path, .lo-trip-file { display: none !important; }
.lo-card-ico .lo-ci, .sm-ship .sm-ship-ico { display: none !important; }
.gi, .lo-trip-node, .sm-ship-ico { animation: none !important; }

/* numeral metálico: fino, grande, brilho varrendo devagar */
.lo-metal { font-weight: 200; letter-spacing: -.045em; line-height: .9;
  background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #9fb4ff 50%, #ffffff 62%, #ffffff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes metal-sheen { 0%, 35% { background-position: 120% 0; } 65%, 100% { background-position: -20% 0; } }

/* placa escura: "48h" como objeto */
.lo-press-art { display: flex; align-items: center; justify-content: center; padding: 56px 64px; }
.lo-big { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.lo-big-n { font: 200 clamp(150px, 15vw, 224px)/.85 var(--font-poppins), system-ui; letter-spacing: -.06em;
  background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #9fb4ff 50%, #ffffff 62%, #ffffff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0 .06em 0 0;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
.lo-big-n small { font-size: .42em; font-weight: 200; letter-spacing: -.02em; margin-left: .04em; }
.lo-big-l { font: 400 14px/1.45 var(--font-poppins), system-ui; color: rgba(255,255,255,.55); letter-spacing: .01em; padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,.22); padding-left: 14px; }
.lo-press-copy h2 { font-weight: 600 !important; letter-spacing: -.035em !important; }
.lo-press-copy p { color: rgba(255,255,255,.62) !important; font-size: 17px !important; line-height: 1.6 !important; }

/* passos: um material só — os três cards escuros, como a tela real de login */
.sm-turbo, .sm-ship { background: linear-gradient(160deg, #171a2c 0%, #0d1020 100%) !important; border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 48px -28px rgba(0,0,0,.8) !important; color: #e8eaf2; }
.sm-turbo .sm-bar { color: rgba(255,255,255,.5); } .sm-turbo .sm-bar b { color: #fff; } .sm-turbo .sm-dot { background: rgba(255,255,255,.14); }
.sm-turbo .sm-rows span { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.sm-turbo .sm-rows i { color: rgba(255,255,255,.45); } .sm-turbo .sm-rows b { color: #fff; }
.sm-turbo .sm-sw { background: #fff; border-color: transparent; }
.sm-turbo-cta { box-shadow: 0 8px 22px -10px rgba(50,98,234,.9); }
.sm-ship { justify-content: center; align-items: center; gap: 12px; }
.sm-ship .sm-big { font: 200 58px/1 var(--font-poppins), system-ui; letter-spacing: -.05em; display: inline-flex; align-items: baseline; gap: 2px;
  background: linear-gradient(110deg, #fff 0%, #fff 38%, #9fb4ff 50%, #fff 62%, #fff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-right: .05em;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
.sm-ship .sm-big i { font-style: normal; font-weight: 200; opacity: .7; }
.sm-ship .sm-big small { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-left: 8px; -webkit-text-fill-color: rgba(255,255,255,.55); }
.sm-ship .sm-track { width: 70%; background: rgba(255,255,255,.1); } .sm-ship .sm-track-on { background: #fff; width: 62%; }
.sm-ship .sm-rows { display: none; }
.sm-auth-card { border-radius: 10px; }

/* cards da conta: o dado-chave, grande e fino, no lugar do ícone */
.lo-card-ico { padding-top: 24px !important; }
.lo-stat { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.lo-stat b { font: 200 54px/1 var(--font-poppins), system-ui; letter-spacing: -.05em;
  color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)); }
.lo-stat b small { font-size: .5em; letter-spacing: -.02em; margin-left: .04em; }
.lo-stat i { font: 500 11px/1 var(--font-poppins), system-ui; font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, #6B6B66, #9a9da8 calc(var(--k) * 100%)); }

/* validações: uma linha de texto precisa, sem pílulas nem verde */
.lo-checks-line { gap: 0 !important; }
.lo-checks-line .lo-check { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; opacity: .55; font: 500 11px/1 var(--font-poppins), system-ui !important; letter-spacing: .12em; text-transform: uppercase; }
.lo-checks-line .lo-check svg { display: none; }
.lo-checks-line .lo-check + .lo-check::before { content: "·"; margin: 0 12px; opacity: .6; }
.lo-checks.is-on.lo-checks-line .lo-check { opacity: .55; }
.lo-cta-logo .lo-check { color: #fff !important; }

/* CTA: o logo com uma varredura de luz, sem moldura azul berrante */
.lo-cta-frame { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); box-shadow: none; }
.lo-cta-frame .h { border-color: rgba(255,255,255,.6); background: #0e1116; }
.lo-cta-file { color: rgba(255,255,255,.45); }
.lo-cta-frame > img { -webkit-mask: linear-gradient(110deg, #000 40%, rgba(0,0,0,.35) 50%, #000 60%) 0 0 / 240% 100%; mask: linear-gradient(110deg, #000 40%, rgba(0,0,0,.35) 50%, #000 60%) 0 0 / 240% 100%;
  animation: logo-sheen 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes logo-sheen { 0%, 30% { -webkit-mask-position: 120% 0; mask-position: 120% 0; } 60%, 100% { -webkit-mask-position: -20% 0; mask-position: -20% 0; } }

/* hero: sem faíscas; o pouso fica com a onda e um brilho varrendo a estampa */
.lo-sel.is-applied .lo-sel-box img { animation: lo-press .5s cubic-bezier(.22,1,.36,1), print-sheen 1.4s cubic-bezier(.4,0,.2,1) .25s 1;
  -webkit-mask: linear-gradient(110deg, #000 40%, rgba(0,0,0,.25) 50%, #000 60%) 0 0 / 240% 100%; mask: linear-gradient(110deg, #000 40%, rgba(0,0,0,.25) 50%, #000 60%) 0 0 / 240% 100%; -webkit-mask-position: -20% 0; mask-position: -20% 0; }
@keyframes print-sheen { from { -webkit-mask-position: 120% 0; mask-position: 120% 0; } to { -webkit-mask-position: -20% 0; mask-position: -20% 0; } }
.lo-ripple { border-color: rgba(14,17,22,.35); }
@media (prefers-reduced-motion: reduce) { .lo-big-n, .sm-big, .lo-stat b, .lo-cta-frame > img, .lo-metal { animation: none; } }
/* o travessão sumia: opacity cria camada própria e sai do background-clip:text do pai */
.sm-ship .sm-big i { opacity: 1; }

/* ---- KVs em grafite: um material, tecido em p&b sutil, numeral metálico ---- */
.lo-kv { border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 40px 90px -50px rgba(7,9,26,.8); }
.lo-kv-p, .lo-kv-dotsp { background: linear-gradient(165deg, #1b1f2e 0%, #0b0e1c 62%, #07091a 100%); }
.lo-kv-p .lo-kv-img { opacity: .28; filter: grayscale(1) contrast(1.15) brightness(1.1); mix-blend-mode: screen; }
.lo-kv-p .lo-kv-img::before, .lo-kv-p .lo-kv-img::after { display: none; }   /* sem tinta colorida, sem pontinhos */
.lo-kv-p::after, .lo-kv-dotsp::after { background: linear-gradient(180deg, rgba(7,9,26,0) 30%, rgba(7,9,26,.55) 100%); }
.lo-kv-p b { font-weight: 200; letter-spacing: -.05em; color: transparent;
  background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #9fb4ff 50%, #ffffff 62%, #ffffff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
.lo-kv-p figcaption { color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .12em; }
/* 1.000 pontos: dado, não decoração — brancos, discretos */
.lo-kv-dots { inset: 8% 8% 32% 8%; gap: 4px; }
.lo-kv-dots i { background: rgba(255,255,255,.28); }
.lo-kv[data-on="3"] .lo-kv-dots i { opacity: 1; }
/* tecido mais discreto: os quatro painéis no mesmo grafite profundo */
.lo-kv-p .lo-kv-img { opacity: .14; filter: grayscale(1) contrast(1.6) brightness(1.05); }
/* tecido invertido: o plano branco vira preto (não levanta o fundo) e só as dobras viram veios de luz */
.lo-kv-p .lo-kv-img { opacity: .5; filter: grayscale(1) invert(1) contrast(1.5) brightness(.9); mix-blend-mode: screen; }

/* ---- KV: preenchimento discreto — índice no topo, numeral fantasma, luz que anda ---- */
.lo-kv-tag { position: absolute; z-index: 2; left: 8%; top: 7%; font: 500 10.5px/1 var(--font-poppins), system-ui; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px;
  opacity: 0; translate: 0 -8px; transition: opacity .6s .15s, translate .7s cubic-bezier(.22,1,.36,1) .15s; }
.lo-kv-tag em { font-style: normal; color: rgba(255,255,255,.28); }
.lo-kv-tag::before { content: ""; width: 18px; height: 1px; background: rgba(255,255,255,.35); }
.lo-kv-idx { position: absolute; z-index: 1; right: -3%; top: 2%; font: 200 clamp(220px, 26vw, 330px)/.85 var(--font-poppins), system-ui; letter-spacing: -.07em;
  color: rgba(255,255,255,.045); pointer-events: none; user-select: none;
  scale: 1.04; opacity: 0; transition: opacity 1.1s .05s, scale 1.4s cubic-bezier(.22,1,.36,1) .05s; }
.lo-kv-glow { position: absolute; z-index: 0; left: -30%; top: -40%; width: 110%; height: 110%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(50,98,234,.34), rgba(50,98,234,.10) 45%, transparent 100%);
  animation: cloud-drift-2 38s ease-in-out infinite alternate; }
.lo-kv-p .lo-kv-img { z-index: 0; }
.lo-kv-p::after { z-index: 1; }
/* o painel ativo revela índice e fantasma junto com a palavra */
.lo-kv[data-on="0"] .lo-kv-p:nth-child(1) :is(.lo-kv-tag, .lo-kv-idx), .lo-kv[data-on="1"] .lo-kv-p:nth-child(2) :is(.lo-kv-tag, .lo-kv-idx),
.lo-kv[data-on="2"] .lo-kv-p:nth-child(3) :is(.lo-kv-tag, .lo-kv-idx), .lo-kv[data-on="3"] .lo-kv-p:nth-child(4) :is(.lo-kv-tag, .lo-kv-idx) { opacity: 1; translate: 0 0; scale: 1; }
.lo-kv[data-on="0"] .lo-kv-p:nth-child(1) .lo-kv-idx, .lo-kv[data-on="1"] .lo-kv-p:nth-child(2) .lo-kv-idx,
.lo-kv[data-on="2"] .lo-kv-p:nth-child(3) .lo-kv-idx, .lo-kv[data-on="3"] .lo-kv-p:nth-child(4) .lo-kv-idx { opacity: 1; }
/* no painel dos 1.000 pontos, o fantasma sai (os pontos já preenchem) */
.lo-kv-dotsp .lo-kv-idx { display: none; }
.lo-kv-dots { z-index: 1; top: 16%; }
@media (prefers-reduced-motion: reduce) { .lo-kv-glow { animation: none; } }

/* ---- cards da conta no mesmo grafite das regras; o painel de vidro em volta sai ---- */
.lo-glass:has(.lo-card-dark) { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; overflow: visible; }
.lo-glass:has(.lo-card-dark) .lo-glass-cloud { display: none; }
.lo-card-dark { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(165deg, #1b1f2e 0%, #0b0e1c 62%, #07091a 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 40px 90px -50px rgba(7,9,26,.8) !important;
  padding: 30px 30px 28px !important; transition: translate .5s cubic-bezier(.22,1,.36,1), border-color .5s, box-shadow .5s; }
.lo-card-dark:hover { translate: 0 -4px; border-color: rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 50px 100px -50px rgba(7,9,26,.95) !important; }
.lo-card-dark > * { position: relative; z-index: 1; }
.lo-card-glow { position: absolute !important; z-index: 0 !important; left: -40%; top: -50%; width: 120%; height: 120%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(50,98,234,.30), rgba(50,98,234,.08) 45%, transparent 100%); animation: cloud-drift-2 38s ease-in-out infinite alternate; }
.lo-card-idx { position: absolute !important; z-index: 0 !important; right: -4%; top: -6%; font: 200 190px/.85 var(--font-poppins), system-ui; letter-spacing: -.07em; color: rgba(255,255,255,.045); pointer-events: none; }
.lo-card-dark .lo-stat b { color: transparent;
  background: linear-gradient(110deg, #ffffff 0%, #ffffff 38%, #9fb4ff 50%, #ffffff 62%, #ffffff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
.lo-card-dark .lo-stat b small { -webkit-text-fill-color: rgba(255,255,255,.6); }
.lo-card-dark .lo-stat i { color: rgba(255,255,255,.45); }
.lo-card-dark h3 { color: #fff !important; }
.lo-card-dark p { color: rgba(255,255,255,.62) !important; }
.lo-card-dark > span:last-child, .lo-card-dark a, .lo-card-dark [class*="text-[#4d74ff]"] { color: #9fb4ff !important; }
.lo-card-dark:hover h3 { color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .lo-card-glow { animation: none; } }
/* título branco: o seletor do link pegava a classe group-hover do h3 */
.lo-card-dark h3.font-bold, .lo-card-dark:hover h3.font-bold { color: #fff !important; }
/* o voo termina no peito medido (--tx/--ty), não numa coordenada fixa do palco */
@keyframes lo-fly {
  0%   { left: -20%; top: 6%;  scale: 1.22; rotate: -5deg; opacity: 0; }
  14%  { left: -14%; top: 7%;  scale: 1.20; rotate: -5deg; opacity: 1; }
  100% { left: var(--tx, 20%); top: var(--ty, 29%); scale: 1; rotate: 0deg; opacity: 1; }
}
.lo-sel.is-flying, .lo-sel.is-landing { left: var(--tx, 20%); top: var(--ty, 29%); }

/* ---- conta: placa TONAL clara (contraponto ao grafite acima), colunas com linhas finas, sem caixas ---- */
.lo-glass:has(.lo-card-dark) { margin: 24px 16px !important; padding: 64px 48px 56px !important; border-radius: 28px !important;
  background: color-mix(in srgb, #eef1fb, #0c1020 calc(var(--k) * 100%)) !important; overflow: hidden !important; isolation: isolate; }
.lo-glass:has(.lo-card-dark) .lo-glass-cloud { display: block; right: auto; left: -14%; bottom: -60%; top: auto; width: 60%; height: 150%; opacity: .5;
  background: radial-gradient(closest-side, var(--cl-stops-c)); animation: cloud-drift-3 50s ease-in-out infinite alternate; }
.lo-glass:has(.lo-card-dark) .grid { gap: 0 !important; }
.lo-card-dark { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible;
  padding: 8px 36px 8px 36px !important; }
.lo-card-dark:first-child { padding-left: 8px !important; } .lo-card-dark:last-child { padding-right: 8px !important; }
.lo-card-dark + .lo-card-dark { border-left: 1px solid color-mix(in srgb, rgba(14,17,22,.12), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important; }
.lo-card-dark:hover { translate: 0 0; border-color: color-mix(in srgb, rgba(14,17,22,.12), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important; box-shadow: none !important; }
.lo-card-glow, .lo-card-idx { display: none !important; }
/* o dado em tinta, grande, com brilho azul varrendo */
.lo-card-dark .lo-stat { margin-bottom: 26px; }
.lo-card-dark .lo-stat b { font-size: 72px;
  background: linear-gradient(110deg, #0e1116 0%, #0e1116 38%, #3262EA 50%, #0e1116 62%, #0e1116 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lo-card-dark .lo-stat b small { -webkit-text-fill-color: color-mix(in srgb, #0e1116, transparent 45%); }
.lo-card-dark .lo-stat i { color: color-mix(in srgb, #6B6B66, #9a9da8 calc(var(--k) * 100%)); }
.lo-card-dark h3.font-bold, .lo-card-dark:hover h3.font-bold { color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; }
.lo-card-dark p { color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)) !important; }
.lo-card-dark > span:last-child, .lo-card-dark a, .lo-card-dark [class*="text-[#4d74ff]"]:not(h3) { color: #3262EA !important; }
@media (max-width: 860px) { .lo-card-dark + .lo-card-dark { border-left: 0 !important; border-top: 1px solid rgba(14,17,22,.12) !important; padding-top: 28px !important; } .lo-card-dark { padding-left: 8px !important; padding-right: 8px !important; } }
/* placa tonal na SEÇÃO (largura igual à dos passos); o painel interno fica transparente */
main section:has(.lo-card-dark) { position: relative; isolation: isolate; overflow: hidden; margin: 24px 16px !important; border-radius: 28px;
  background: color-mix(in srgb, #eef1fb, #0c1020 calc(var(--k) * 100%)) !important; }
main section:has(.lo-card-dark)::before { content: ""; position: absolute; z-index: 0; left: -14%; bottom: -60%; width: 60%; height: 150%; pointer-events: none; opacity: .5;
  background: radial-gradient(closest-side, var(--cl-stops-c)); animation: cloud-drift-3 50s ease-in-out infinite alternate; }
main section:has(.lo-card-dark) > div { position: relative; z-index: 1; }
.lo-glass:has(.lo-card-dark) { margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.lo-glass:has(.lo-card-dark) .lo-glass-cloud { display: none; }
/* a regra consolidada de Card (0,3,2) vencia — (0,4,0) aqui */
.lo-card-dark.lo-card-dark.lo-card-dark.lo-card-dark { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 36px !important; }
.lo-card-dark.lo-card-dark.lo-card-dark.lo-card-dark:first-child { padding-left: 8px !important; }
.lo-card-dark.lo-card-dark.lo-card-dark.lo-card-dark:last-child { padding-right: 8px !important; }
.lo-card-dark.lo-card-dark.lo-card-dark.lo-card-dark + .lo-card-dark { border-left: 1px solid color-mix(in srgb, rgba(14,17,22,.12), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important; }
@media (max-width: 860px) { .lo-card-dark.lo-card-dark.lo-card-dark.lo-card-dark + .lo-card-dark { border-left: 0 !important; border-top: 1px solid rgba(14,17,22,.12) !important; } }

/* ---- editor: wordmark Beefy-T no peito, mais alto; carrossel automático ---- */
.lo-canvas2 .lo-chest { top: 27%; width: 30%; }
.lo-canvas2 .lo-chest img { transition: filter .45s cubic-bezier(.22,1,.36,1); }
.lo-sw::after { transition: opacity .35s; }
.lo-sw[aria-pressed="true"]::after { transition: opacity .35s; }
/* o anel da bolinha ativa sai 4px pra fora: a linha precisa de respiro pra não cortar */
.lo-swatches { padding: 7px 10px !important; scroll-padding: 0 10px; }

/* ---- FAQ: hover sem bloco — só a linha acende e o "+" muda de cor ---- */
.lo-faq :is(button, summary, [class*="hover:bg"], .rounded-lg > div):hover,
.lo-faq :is(button, summary, [class*="hover:bg"]) { background: transparent !important; box-shadow: none !important; }
.lo-faq :is(details, .rounded-lg) { transition: border-color .35s; }
.lo-faq :is(details, .rounded-lg):hover { border-bottom-color: #3262EA !important; }
.lo-faq :is(details, .rounded-lg):hover :is(h3, span, p):first-child { color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; }
.lo-faq :is(details, .rounded-lg) svg, .lo-faq :is(details, .rounded-lg) [class*="text-[#"]:last-child { transition: color .35s, transform .35s cubic-bezier(.22,1,.36,1); }
.lo-faq :is(details, .rounded-lg):hover svg { transform: rotate(90deg); color: #3262EA; }

/* ---- placa escura: carrossel dos três atributos ---- */
.lo-slider { position: relative; display: grid; width: 100%; max-width: 520px; min-height: 300px; }
.lo-slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 48px;
  opacity: 0; translate: 0 18px; filter: blur(6px); pointer-events: none;
  transition: opacity .42s cubic-bezier(.22,1,.36,1), translate .55s cubic-bezier(.22,1,.36,1), filter .42s; }
.lo-slider[data-on="0"] .lo-slide:nth-child(1), .lo-slider[data-on="1"] .lo-slide:nth-child(2), .lo-slider[data-on="2"] .lo-slide:nth-child(3) { opacity: 1; translate: 0 0; filter: blur(0); pointer-events: auto; }
/* o que sai, sobe e desfoca */
.lo-slider[data-on="1"] .lo-slide:nth-child(1), .lo-slider[data-on="2"] .lo-slide:nth-child(2), .lo-slider[data-on="0"] .lo-slide:nth-child(3) { translate: 0 -18px; }
.lo-slide .lo-big-n i { font-style: normal; font-weight: 200; }
.lo-slide .lo-big-n small { font-size: .42em; }
/* bolinhas: a ativa vira um traço que se enche no tempo do slide */
.lo-dots { grid-area: 1 / 1; align-self: end; justify-self: start; display: flex; gap: 8px; padding-left: 8px; }
.lo-dots button { all: unset; cursor: pointer; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.28); position: relative; overflow: hidden;
  transition: width .5s cubic-bezier(.22,1,.36,1), background-color .4s; }
.lo-dots button[aria-selected="true"] { width: 28px; background: rgba(255,255,255,.22); }
.lo-dots button[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #fff; transform-origin: 0 50%; animation: dot-fill 2.4s linear forwards; }
@keyframes dot-fill { from { scale: 0 1; } to { scale: 1 1; } }
.lo-slider:hover .lo-dots button[aria-selected="true"]::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lo-slide { transition: none; filter: none; } .lo-dots button::after { animation: none; scale: 1 1; } }
/* slider: altura do conteúdo, bolinhas logo abaixo da legenda */
.lo-slider { grid-template-rows: auto auto; min-height: 0; height: auto; align-self: center; }
.lo-slide { grid-area: 1 / 1; padding-bottom: 0; }
.lo-dots { grid-area: 2 / 1; align-self: start; margin-top: 34px; }
/* "7–10 days" quebrava em duas linhas e esticava a célula dos três slides */
.lo-slide .lo-big-n { white-space: nowrap; font-size: clamp(120px, 12.5vw, 184px); }
.lo-slide .lo-big-n small { font-size: .34em; margin-left: .08em; }
.lo-slider { max-width: 560px; }
/* slider centralizado na coluna: numeral, legenda e bolinhas no mesmo eixo */
.lo-press-art { align-items: center; justify-content: center; }
.lo-slider { justify-self: center; margin: 0 auto; }
.lo-slide { align-items: center; text-align: center; gap: 22px; }
.lo-slide .lo-big-l { border-left: 0; padding-left: 0; text-align: center; }
.lo-dots { justify-self: center; padding-left: 0; margin-top: 30px; }

/* ============================================================
   27. HEADER SOBRE PLACA ESCURA — logo e nav em branco
   ============================================================ */
body.hdr-dark .sh .brand-logo-light { display: none; }
body.hdr-dark .sh .brand-logo-dark  { display: block; }
body.hdr-dark .sh .navpill, body.hdr-dark .sh nav > div:first-child { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; }
body.hdr-dark .sh .navlink, body.hdr-dark .sh a:not([class*="bg-"]), body.hdr-dark .sh button:not([class*="bg-"]) { color: #fff !important; }
body.hdr-dark .sh .navlink:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.sh .brand-logo-light, .sh .brand-logo-dark { transition: opacity .25s; }

/* ============================================================
   28. REGRAS DA LAUNCH-OFFER NAS PÁGINAS INTERNAS (body.rules)
   ============================================================ */
/* placa tonal: seção alternada vira placa arredondada com nuvem própria */
body.rules .r-plate { position: relative; isolation: isolate; overflow: hidden; margin: 24px 16px !important; border-radius: 28px;
  background: color-mix(in srgb, #eef1fb, #0c1020 calc(var(--k) * 100%)) !important; border: 0 !important; }
body.rules .r-plate > * { position: relative; z-index: 1; }
body.rules .r-cloud { position: absolute; z-index: 0 !important; pointer-events: none; width: 60%; height: 150%; top: -40%; opacity: .5;
  background: radial-gradient(closest-side, var(--cl-stops-b)); animation: cloud-drift-2 46s ease-in-out infinite alternate; }
body.rules .r-cloud[style*="left"] { left: -16%; } body.rules .r-cloud[style*="right"] { right: -16%; background: radial-gradient(closest-side, var(--cl-stops-c)); animation-name: cloud-drift-3; }
body.rules .r-plain { background: transparent !important; border: 0 !important; }
/* dentro da placa: cards viram colunas com linhas finas, sem caixas */
body.rules .r-cols { gap: 0 !important; }
body.rules .r-col.r-col.r-col.r-col { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 32px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules .r-col.r-col.r-col.r-col:first-child { padding-left: 8px !important; } body.rules .r-col.r-col.r-col.r-col:last-child { padding-right: 8px !important; }
body.rules .r-col.r-col.r-col.r-col + .r-col { border-left: 1px solid color-mix(in srgb, rgba(14,17,22,.12), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important; }
body.rules .r-col:hover { translate: none !important; box-shadow: none !important; }
@media (max-width: 860px) { body.rules .r-col.r-col.r-col.r-col + .r-col { border-left: 0 !important; border-top: 1px solid rgba(14,17,22,.12) !important; padding-top: 24px !important; } }
/* cards fora da placa: raio Apple, sem flutuar */
body.rules main :is(div,a,article,li):is(.rounded-xl,.rounded-2xl):is(.p-5,.p-6,.p-7) { border-radius: 18px !important; }
body.rules img.gi, body.rules .gi-tilt { animation: none !important; }
/* numerais: chips → thin; números grandes → thin com brilho (ink no claro, branco no escuro) */
body.rules .num { font-weight: 200 !important; letter-spacing: -.04em !important; }
body.rules .stat-num { font-weight: 200 !important; letter-spacing: -.045em !important; color: transparent !important;
  background: linear-gradient(110deg, var(--sn-a) 0%, var(--sn-a) 38%, #3262EA 50%, var(--sn-a) 62%, var(--sn-a) 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; padding-right: .06em;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; --sn-a: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)); }
body.rules .stat-num * { -webkit-text-fill-color: inherit; }
/* FAQ: linhas finas, hover sem bloco */
body.rules .r-faq > div { max-width: 760px; }
body.rules .r-faq :is(details, .rounded-lg, .rounded-xl, [class*="bg-[#16161c]"]) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-bottom: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)) !important; padding: 4px 2px !important; transition: border-color .35s; }
body.rules .r-faq :is(button, summary, [class*="hover:bg"]), body.rules .r-faq :is(button, summary, [class*="hover:bg"]):hover { background: transparent !important; box-shadow: none !important; }
body.rules .r-faq :is(details, .rounded-lg, .rounded-xl):hover { border-bottom-color: #3262EA !important; }
body.rules .r-faq :is(details, .rounded-lg, .rounded-xl) svg { transition: transform .35s cubic-bezier(.22,1,.36,1), color .35s; }
body.rules .r-faq :is(details, .rounded-lg, .rounded-xl):hover svg { transform: rotate(90deg); color: #3262EA; }
body.rules .r-faq summary, body.rules .r-faq .rounded-lg > button { padding: 16px 0 !important; }
/* revelação em cascata */
body.rules .rv { opacity: 0; translate: 0 18px; transition: opacity .7s cubic-bezier(.22,1,.36,1) var(--d, 0ms), translate .9s cubic-bezier(.22,1,.36,1) var(--d, 0ms); }
body.rules .rv.is-in { opacity: 1; translate: none; }
/* banner dentro da placa: sólido com régua (nunca gradiente sobre gradiente) */
body.rules .r-plate .bn { background: color-mix(in srgb, #fff, #14161d calc(var(--k) * 100%)) !important; border: 0 !important; border-left: 2px solid #3262EA !important; border-radius: 4px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules .r-plate .bn::before { display: none !important; }
@media (prefers-reduced-motion: reduce) { body.rules .rv { opacity: 1; translate: none; transition: none; } body.rules .r-cloud, body.rules .stat-num { animation: none; } }

/* ---- fechamento: seleção de Figma de verdade — tight, cantos vivos, alças nos vértices, dimensão embaixo ---- */
.lo-cta-frame { padding: 26px 34px; border-radius: 0; border: 1px solid rgba(124,156,255,.85); background: none; box-shadow: none; width: min(340px, 84%); margin-top: 26px; }
.lo-cta-frame > img { display: block; width: 100%; -webkit-mask: none; mask: none; animation: none; }
.lo-cta-frame .h { width: 8px; height: 8px; border-radius: 1px; background: #fff; border: 1px solid #7c9cff; box-sizing: border-box; }
.lo-cta-frame .h.tl { left: -4.5px; top: -4.5px; } .lo-cta-frame .h.tr { right: -4.5px; top: -4.5px; }
.lo-cta-frame .h.bl { left: -4.5px; bottom: -4.5px; } .lo-cta-frame .h.br { right: -4.5px; bottom: -4.5px; }
.lo-cta-file { left: 0; top: -24px; font: 500 11px/1 var(--font-poppins), system-ui; color: rgba(159,180,255,.9); letter-spacing: .01em; }
.lo-cta-size { position: absolute; left: 50%; bottom: -13px; translate: -50% 0; background: #3262EA; color: #fff; border-radius: 4px; padding: 4px 7px;
  font: 600 10px/1 var(--font-poppins), system-ui; letter-spacing: .02em; white-space: nowrap; }
.lo-cta-logo { gap: 34px; }

/* ---- sem rolagem lateral: as nuvens do hero vazam 144px pra cada lado; recorte no eixo X (clip não vira scroll container nem quebra sticky) ---- */
section:has(> .cl.cl-hero), .in-hero, main section:has(.cl-hero) { overflow-x: clip; }
html { overflow-x: clip; }

/* ============================================================
   29. CRITÉRIOS NAS PÁGINAS INTERNAS — componentes
   ============================================================ */
/* placeholder de imagem → painel grafite (o mesmo material das regras da launch-offer) */
body.rules .r-ph { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  min-height: 300px; aspect-ratio: 16 / 9; padding: 40px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important;
  background: linear-gradient(165deg, #1b1f2e 0%, #0b0e1c 62%, #07091a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 40px 90px -50px rgba(7,9,26,.7); color: #fff; text-align: left; }
body.rules .r-ph > * { position: relative; z-index: 1; }
body.rules .r-ph-glow { position: absolute; z-index: 0 !important; left: 50%; top: 42%; translate: -50% -50%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(50,98,234,.34), rgba(50,98,234,.10) 42%, transparent 70%); filter: blur(26px); animation: cloud-drift-2 38s ease-in-out infinite alternate; }

body.rules .r-ph b { font: 400 16px/1.4 var(--font-poppins), system-ui; letter-spacing: -.005em; color: rgba(255,255,255,.88); max-width: 34ch; text-align: center; }
body.rules .r-ph i { display: none; }
body.rules .r-ph.plate-dark { } /* header inverte sobre ele */
/* tile de ícone → glifo: sem caixa, sem sombra, 24px em brand */
body.rules .r-glyph { background: none !important; box-shadow: none !important; border: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important;
  display: inline-flex !important; margin: 0 0 14px !important; color: #3262EA !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules .r-glyph svg { width: 24px !important; height: 24px !important; stroke-width: 1.6 !important; }
/* quadrado azul numerado → numeral fino no fluxo do card */
body.rules .r-num-abs { position: static !important; width: auto !important; height: auto !important; box-shadow: none !important; display: block !important; margin: 0 0 10px !important;
  background: none !important; color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; -webkit-text-fill-color: currentColor !important;
  font: 200 40px/1 var(--font-poppins), system-ui !important; letter-spacing: -.04em !important; }
body.rules .r-num-abs + h3 { margin-top: 0 !important; }
body.rules :is(div, li):has(> .r-num-abs) { padding-top: 24px !important; }
/* Tip → nota sólida com régua (nunca bloco azul chapado) */
body.rules .r-note { background: color-mix(in srgb, #fff, #14161d calc(var(--k) * 100%)) !important; border: 0 !important; border-left: 2px solid #3262EA !important; border-radius: 4px !important; padding: 14px 18px !important; }
body.rules .r-note p { color: color-mix(in srgb, #3b404b, #c9ccd6 calc(var(--k) * 100%)) !important; }
body.rules .r-note .font-bold { color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)); margin-right: 6px; }
/* títulos de seção: um tamanho, um tracking */
body.rules main section h2 { font-size: clamp(30px, 3vw, 40px) !important; letter-spacing: -.028em !important; line-height: 1.1 !important; }
body.rules .r-plate > div { padding-top: 72px !important; padding-bottom: 72px !important; }
/* o header inverte sobre os painéis grafite */
/* colunas: glifo alinhado à esquerda; o índice absoluto (01/02/03) entra no fluxo como caixa alta antes do título */
body.rules .r-col .r-glyph { justify-content: flex-start !important; margin-left: 0 !important; align-self: flex-start; }
body.rules .r-col [class*="absolute"][class*="top-"]:not(.r-num-abs) { position: static !important; display: block; margin: 0 0 10px !important;
  font: 500 10.5px/1 var(--font-poppins), system-ui !important; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #6B6B66, #9a9da8 calc(var(--k) * 100%)) !important; }
body.rules .r-col { text-align: left; }
/* painel de imagem: não domina a seção */
body.rules .r-ph { max-height: 380px; min-height: 240px; }

/* ============================================================
   30. PÁGINAS INTERNAS — POLIMENTO: uma grade, um ritmo, uma escala
   A medição mostrou 5 bordas esquerdas diferentes numa página só, corpo em 4 tamanhos
   e linha entre 600 e 960px. Tudo passa a pendurar no mesmo trilho.
   ============================================================ */
/* — A. o trilho único: 1080px centrados, idêntico dentro da placa e fora dela — */
body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div {
  width: min(1080px, 100% - 96px) !important; max-width: none !important; margin-inline: auto !important;
  padding-left: 0 !important; padding-right: 0 !important; }
/* — B. um ritmo vertical: 88px em toda seção; placas separadas por 24px — */
body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div { padding-top: 88px !important; padding-bottom: 88px !important; }
body.rules .r-plate { margin-block: 12px !important; }
body.rules .r-plain + .r-plain > div { padding-top: 0 !important; }        /* prosa seguida não duplica o respiro */
/* — C. uma escala: título centrado, lead centrado e medido, corpo com medida fixa — */
body.rules main section:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) h2 { text-align: center; margin-inline: auto; margin-bottom: 14px !important; }
body.rules main section:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) > div > p:first-of-type, body.rules main section:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) h2 + p { text-align: center; margin-inline: auto !important; max-width: 62ch;
  font-size: 18.5px !important; line-height: 1.55 !important; margin-bottom: 52px !important;
  color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)) !important; }
body.rules main section h2 + p + p { text-align: left; margin-inline: 0 !important; }
body.rules .r-plain > div > p, body.rules .r-col p, body.rules .r-plate p:not(:first-of-type) { font-size: 16.5px !important; line-height: 1.65 !important; max-width: 68ch; }
body.rules .r-col p, body.rules .r-col li { text-align: left; }
/* eyebrow acima do título acompanha a centralização */
body.rules main section > div > :is(p, span, div):first-child:is([class*="uppercase"], [class*="tracking-"]) { text-align: center; display: block; margin-inline: auto; }
/* — D. colunas: réguas de altura igual, glifo e índice na mesma linha — */
body.rules .r-cols { align-items: stretch; }
body.rules .r-col { display: flex; flex-direction: column; }
body.rules .r-col .r-glyph { margin: 0 !important; }
body.rules .r-col > :is(span, p)[class*="uppercase"], body.rules .r-col [class*="absolute"][class*="top-"]:not(.r-num-abs) { margin: 0 !important; }
body.rules .r-col-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 24px; }
body.rules .r-col :is(h2, h3, h4), body.rules .r-col .font-bold { margin-top: 0 !important; }
/* — E. listas de check alinhadas ao texto — */
body.rules main li { line-height: 1.6; }
body.rules main section ul { margin-top: 14px; }
@media (max-width: 900px) {
  body.rules main section > div { width: min(1080px, 100% - 44px) !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  body.rules main section h2 { max-width: none; }
}
/* o hero tem regras próprias: o trilho e a escala não valem para ele */
body.rules main section:is(.r-hero, .in-hero, :has(h1)) :is(h2, p) { text-align: inherit; max-width: none; font-size: inherit !important; line-height: inherit !important; margin-inline: 0 !important; text-wrap: initial; }
/* ritmo igual dentro e fora da placa (a regra §29 de 72px era mais específica) */
body.rules .r-plate > div, body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div { padding-top: 88px !important; padding-bottom: 88px !important; }
body.rules .r-plain + .r-plain > div { padding-top: 88px !important; }

/* — títulos: sem órfãs; o navegador equilibra as linhas em vez de cortar em 20ch — */
body.rules main section h2 { max-width: min(100%, 880px) !important; text-wrap: balance; }
body.rules main section h2 + p, body.rules main section > div > p:first-of-type { text-wrap: pretty; }
/* — réguas: só entre colunas de verdade (num grid 2×2 o 3º item abre coluna nova, não leva régua) — */
body.rules .r-col.r-col.r-col.r-col + .r-col { border-left: 0 !important; }
body.rules .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(2n) { border-left: 1px solid var(--r-rule) !important; }
body.rules .r-cols-3 > .r-col.r-col.r-col.r-col:not(:nth-child(3n+1)) { border-left: 1px solid var(--r-rule) !important; }
body.rules .r-cols-4 > .r-col.r-col.r-col.r-col:not(:nth-child(4n+1)) { border-left: 1px solid var(--r-rule) !important; }
/* linhas entre fileiras, quando há mais de uma */
body.rules .r-cols-2 > .r-col:nth-child(n+3) { border-top: 1px solid var(--r-rule) !important; margin-top: 34px; padding-top: 34px !important; }
body.rules { --r-rule: color-mix(in srgb, rgba(14,17,22,.12), rgba(255,255,255,.14) calc(var(--k) * 100%)); }
body.rules .r-cols { column-gap: 0; row-gap: 0 !important; }
@media (max-width: 860px) {
  body.rules .r-col.r-col.r-col.r-col { border-left: 0 !important; }
  body.rules .r-cols > .r-col:not(:first-child) { border-top: 1px solid var(--r-rule) !important; margin-top: 28px; padding-top: 28px !important; }
}

/* ============================================================
   31. PÁGINAS INTERNAS — o ícone de vidro tem presença; o painel tem objeto
   ============================================================ */
/* ícone autoral no lugar do glifo de 1px: 52px, sem caixa, com respiro próprio */
body.rules .r-glyph img.gi, body.rules .r-col img.gi, body.rules main img.gi-tile {
  width: 52px !important; height: 52px !important; max-width: none !important; margin: 0 !important; display: block; }
body.rules .r-col-head { gap: 14px; min-height: 52px; margin-bottom: 18px; }
body.rules .r-col-head > :is(span, p) { font-size: 10.5px !important; letter-spacing: .14em; text-transform: uppercase; }
body.rules main img.gi-hero { width: 64px !important; height: 64px !important; }
/* fora de colunas (listas, blocos avulsos) o ícone também respira */
body.rules main :is(div, li, a) > img.gi-inline { width: 40px !important; height: 40px !important; }
/* o que não tem ícone autoral fica coerente: glifo 26px em brand */
body.rules .r-glyph svg { width: 26px !important; height: 26px !important; }

/* painel de imagem: objeto de vidro grande, flutuando sobre o grafite */

body.rules .r-ph-art { position: absolute; z-index: 1; right: 7%; top: 50%; translate: 0 -50%;
  width: clamp(120px, 34%, 210px) !important; height: auto !important; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
  animation: ph-float 9s ease-in-out infinite; }
@keyframes ph-float { 0%, 100% { translate: 0 -50%; } 50% { translate: 0 calc(-50% - 10px); } }
body.rules .r-ph b { max-width: 20ch; }
body.rules .r-ph-glow { left: 34%; top: -40%; width: 80%; height: 130%; }
@media (prefers-reduced-motion: reduce) { body.rules .r-ph-art { animation: none; } }
@media (max-width: 700px) { body.rules .r-ph-art { right: 5%; width: 26% !important; } }
/* colunas: um slot de ícone de altura fixa, para os títulos alinharem entre si */
body.rules .r-col > :is(img.gi, .r-glyph):first-child, body.rules .r-col-head { height: 52px; min-height: 52px; display: flex; align-items: center; margin: 0 0 18px !important; }
body.rules .r-col .r-glyph { height: auto; }
body.rules .r-col-head img.gi { width: 52px !important; height: 52px !important; }
/* painel de imagem: ocupa o trilho, legenda menor, nada cortado */
body.rules .r-ph { width: 100% !important; max-width: none !important; max-height: none !important; aspect-ratio: 16 / 9; min-height: 0; padding: 30px 34px !important; margin: 8px 0 !important; }
body.rules .r-ph b { font-size: 16px !important; line-height: 1.4; max-width: 34ch; }
/* o objeto de vidro é o assunto da placa: centrado, escala definida */
body.rules .r-ph-art { position: relative !important; right: auto !important; top: auto !important; translate: none !important;
  width: clamp(104px, 13vw, 140px) !important; height: auto !important; z-index: 1;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.6)); animation: ph-float 9s ease-in-out infinite; }
@keyframes ph-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
/* legenda da placa: sem órfã, mais perto do objeto */
body.rules .r-ph { gap: 20px; }
body.rules .r-ph b { text-wrap: balance; }

/* hero com mais respiro: a massa de cor precisa de espaço no fim da seção */
main section.in-hero { padding-bottom: 72px; }
/* Hero with a cut-out figure (people, product on transparent background): the figure stands on the
   bottom edge of the hero and the numbers band sits right under it. Without this the wrapper's own
   padding plus the hero padding leave ~150px of empty plate between the figure and the band. */
body.rules main section.in-hero:has(img[data-cutout]) { padding-bottom: 0 !important; }
body.rules main section.in-hero:has(img[data-cutout]) > div:not(.cl) { padding-bottom: 0 !important; align-items: center !important; }
body.rules main section.in-hero:has(img[data-cutout]) > div:not(.cl) > div:has(> img[data-cutout]) { align-self: flex-end; margin-bottom: -24px; position: relative; z-index: 3; }
body.rules main section.in-hero:has(img[data-cutout]) > div:not(.cl) > div:has(> img[data-cutout]) img[data-cutout] { display: block; filter: drop-shadow(0 30px 40px rgba(14,17,22,.22)); }
body.rules main section.in-hero:has(img[data-cutout]) > div:not(.cl) > div:not(:has(> img[data-cutout])) { padding-bottom: 72px; }

/* ============================================================
   32. PLACA GRAFITE — onde há ícone de vidro, o fundo é escuro (é para ele que o ícone foi desenhado)
   ============================================================ */
body.rules .r-plate-dark {
  background: linear-gradient(168deg, #1b1f2e 0%, #0d1120 58%, #07091a 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 110px -60px rgba(7,9,26,.8);
}
body.rules .r-plate-dark .r-cloud { opacity: .34; filter: blur(30px); }
body.rules .r-plate-dark :is(h2, h3, h4, .font-bold) { color: #fff !important; }
body.rules .r-plate-dark :is(p, li) { color: rgba(255,255,255,.66) !important; }
body.rules .r-plate-dark .r-col + .r-col, body.rules .r-plate-dark .r-cols-2 > .r-col:nth-child(n+3) { border-color: rgba(255,255,255,.12) !important; }
body.rules .r-plate-dark a:not([class*="bg-"]) { color: #9fb4ff !important; }
body.rules .r-plate-dark .r-note { background: rgba(255,255,255,.06) !important; }
body.rules .r-plate-dark .r-note p { color: rgba(255,255,255,.74) !important; }
body.rules .r-plate-dark .stat-num { --sn-a: #ffffff; }
/* ícones maiores e mais perto do título: o bloco lê como uma unidade */
body.rules .r-plate-dark .r-col > :is(img.gi, .r-glyph):first-child,
body.rules .r-plate-dark .r-col-head { height: 72px; min-height: 72px; margin-bottom: 20px !important; }
body.rules .r-plate-dark .r-col img.gi, body.rules .r-plate-dark .r-col-head img.gi { width: 72px !important; height: 72px !important; }
body.rules .r-plate-dark .r-col { padding: 10px 40px !important; }
body.rules .r-plate-dark .r-col:first-child { padding-left: 0 !important; }
body.rules .r-plate-dark .r-col:last-child { padding-right: 0 !important; }
/* a regra do lead (modo claro) vencia por especificidade dentro da placa escura */
body.rules .r-plate-dark main p, body.rules main section.r-plate-dark > div > p:first-of-type,
body.rules main section.r-plate-dark h2 + p, body.rules .r-plate-dark :is(p, li) { color: rgba(255,255,255,.7) !important; }
body.rules .r-plate-dark h2 + p { color: rgba(255,255,255,.62) !important; }
/* ícone e título como uma unidade */
body.rules .r-plate-dark .r-col > :is(img.gi, .r-glyph):first-child,
body.rules .r-plate-dark .r-col-head { height: 64px; min-height: 64px; margin-bottom: 12px !important; }
body.rules .r-plate-dark .r-col img.gi, body.rules .r-plate-dark .r-col-head img.gi { width: 64px !important; height: 64px !important; }
body.rules .r-plate-dark .r-cols-2 > .r-col:nth-child(n+3) { margin-top: 44px; padding-top: 44px !important; }

/* layout dividido (texto numa coluna, imagem noutra): cabeçalho alinhado à esquerda, como o corpo */
body.rules .r-split :is(h2, h2 + p, > div > p:first-of-type) { text-align: left !important; margin-inline: 0 !important; max-width: none !important; }
body.rules .r-split h2 + p { max-width: 62ch !important; }
/* critério de tamanho do objeto na placa: fração da própria placa, não valor solto */
body.rules .r-ph-art { width: clamp(84px, 21%, 168px) !important; }
body.rules .r-ph b { font-size: clamp(14px, 1.15vw, 16px) !important; }
/* placa escura com proporção de cartão (não lápide de borda a borda) e sem mancha */
body.rules .r-plate-dark { width: min(1240px, 100% - 64px) !important; margin: 40px auto !important; border-radius: 30px !important; }
body.rules .r-plate-dark .r-cloud { display: none !important; }
body.rules .r-plate-dark > div { width: min(1000px, 100% - 120px) !important; padding-top: 76px !important; padding-bottom: 76px !important; }
body.rules .r-plate-dark h2 + p { color: rgba(255,255,255,.7) !important; margin-bottom: 44px !important; }
body.rules .r-plate-dark h2 { margin-bottom: 12px !important; }
/* proporção interna: ícone perto do título, fileiras mais próximas */
body.rules .r-plate-dark .r-col > :is(img.gi, .r-glyph):first-child,
body.rules .r-plate-dark .r-col-head { height: 60px; min-height: 60px; margin-bottom: 2px !important; }
body.rules .r-plate-dark .r-col img.gi, body.rules .r-plate-dark .r-col-head img.gi { width: 60px !important; height: 60px !important; margin-left: -6px !important; }
body.rules .r-plate-dark .r-cols-2 > .r-col:nth-child(n+3) { margin-top: 28px; padding-top: 28px !important; }
body.rules .r-plate-dark .r-col :is(h2, h3), body.rules .r-plate-dark .r-col .font-bold { margin-bottom: 8px !important; }
/* nas páginas internas o ícone não mora mais num tile: o brilho do tilt vira um risco cinza — desligado */
body.rules .gi-tilt::before, body.rules .r-glyph::before, body.rules .r-col::before { display: none !important; content: none !important; }
body.rules .gi-tilt { transform: none !important; box-shadow: none !important; background: none !important; }
/* ícone com presença de verdade */
body.rules .r-plate-dark .r-col > :is(img.gi, .r-glyph):first-child,
body.rules .r-plate-dark .r-col-head { height: 88px; min-height: 88px; margin-bottom: 6px !important; }
body.rules .r-plate-dark .r-col img.gi, body.rules .r-plate-dark .r-col-head img.gi { width: 88px !important; height: 88px !important; margin-left: -8px !important; }
body.rules .r-col img.gi, body.rules .r-glyph img.gi { width: 64px !important; height: 64px !important; }
body.rules .r-col > :is(img.gi, .r-glyph):first-child, body.rules .r-col-head { height: 64px; min-height: 64px; }

/* ---- UMA geometria para toda placa, clara ou escura: 1240 centrada, conteúdo 1080 → mesmo trilho L180 ---- */
body.rules .r-plate, body.rules .r-plate-dark { width: min(1240px, 100% - 64px) !important; margin: 40px auto !important; border-radius: 30px !important; }
body.rules .r-plate > div, body.rules .r-plate-dark > div { width: min(1080px, 100% - 96px) !important; margin-inline: auto !important; padding-top: 84px !important; padding-bottom: 84px !important; }

/* ---- correção: a geometria certa é a das placas claras (borda a borda, margem 16). A escura se alinha a ELAS. ---- */
body.rules .r-plate, body.rules .r-plate-dark { width: auto !important; margin: 12px 16px !important; border-radius: 28px !important; }
body.rules .r-plate > div, body.rules .r-plate-dark > div { width: min(1080px, 100% - 96px) !important; margin-inline: auto !important; padding-top: 88px !important; padding-bottom: 88px !important; }
/* card com placa: respiro interno e a placa como único visual */
body.rules main :is(div, a, article, li):is(.rounded-xl, .rounded-2xl):has(> .r-ph, > * > .r-ph) { padding: 36px 36px 28px !important; }
body.rules :is(div, a, article, li):has(.r-ph) > .r-glyph:empty { display: none; }
body.rules .r-ph b { text-wrap: pretty; hyphens: none; overflow-wrap: normal; }

/* Banner (.bn) nas páginas internas: vira Nota em qualquer contexto — sólida, régua brand, sem nuvem, sem vidro */
body.rules main .bn { background: color-mix(in srgb, #fff, #14161d calc(var(--k) * 100%)) !important; border: 0 !important; border-left: 2px solid #3262EA !important;
  border-radius: 4px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 22px 28px !important; max-width: 68ch; margin-inline: auto; }
body.rules main .bn::before, body.rules main .bn::after { display: none !important; content: none !important; }
body.rules main .bn p { font-size: 16.5px !important; line-height: 1.6 !important; color: color-mix(in srgb, #3b404b, #c9ccd6 calc(var(--k) * 100%)) !important; text-align: left !important; margin: 0 !important; max-width: none; }
body.rules main .bn strong, body.rules main .bn b { color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)); }
body.rules .r-plate-dark .bn { background: rgba(255,255,255,.06) !important; }
body.rules .r-plate-dark .bn p { color: rgba(255,255,255,.74) !important; }

/* ---- declaração: a frase-tese como tipografia. Sem caixa, sem régua, sem fundo. ---- */
body.rules main .bn.r-statement { background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 !important; max-width: 46ch; margin: 24px auto !important; }
body.rules main .bn.r-statement p { font: 300 clamp(22px, 2vw, 28px)/1.4 var(--font-poppins), system-ui !important; letter-spacing: -.015em !important; text-align: center !important;
  color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; text-wrap: balance; }
body.rules main .bn.r-statement :is(strong, b) { font-weight: 600; color: #3262EA; }
/* ---- nota com título: barra reta, cantos esquerdos vivos para a barra não entortar ---- */
body.rules main .bn.r-note-bar, body.rules main .r-note { border-radius: 0 8px 8px 0 !important; border-left: 2px solid #3262EA !important; }
/* declaração: 3–4 linhas, ênfase em azul também quando a marcação é span.font-bold */
body.rules main .bn.r-statement { max-width: 60ch; }
body.rules main .bn.r-statement p { font-size: clamp(21px, 1.7vw, 25px) !important; line-height: 1.42 !important; }
body.rules main .bn.r-statement :is(strong, b, .font-bold, [class*="font-bold"], [class*="font-semibold"]) { font-weight: 600 !important; color: #3262EA !important; }

/* ---- prosa: tudo à esquerda, no trilho. Nada centrado numa seção de texto corrido. ---- */
body.rules .r-prose :is(h2, h2 + p, > div > p, > div > :first-child) { text-align: left !important; margin-inline: 0 !important; }
body.rules .r-prose h2 { max-width: 24ch !important; }
/* artigo (prosa com ≥ 3 h2): subtítulos de 26px colados na resposta; 44px entre um par pergunta+resposta
   e o próximo. Os pares são filhos do wrapper (space-y-12), por isso o ritmo é dado ali. */
body.rules .r-prose.r-article.r-article h2 { font-size: 26px !important; line-height: 1.25 !important; margin: 0 0 10px !important; letter-spacing: -.015em !important; max-width: 62ch; }
body.rules .r-prose.r-article.r-article > div > * { margin-bottom: 0 !important; }        /* o space-y-12 do wrapper (48px) somava-se aos 18px do parágrafo: 66px entre resposta e pergunta */
body.rules .r-prose.r-article.r-article > div > * + * { margin-top: 44px !important; }
body.rules .r-prose.r-article.r-article > div > * > p:last-child { margin-bottom: 0 !important; }
body.rules .r-prose.r-article.r-article > div h2 + p { margin-top: 0 !important; }
body.rules .r-prose h2 + p { max-width: 68ch !important; font-size: 17px !important; line-height: 1.6 !important; margin-bottom: 18px !important; color: color-mix(in srgb, #3b404b, #c9ccd6 calc(var(--k) * 100%)) !important; }
body.rules .r-prose > div > p { max-width: 68ch; }

/* ---- promoção da launch offer: o cartão grafite da própria oferta ---- */
body.rules main .bn.r-promo, body.rules main .bn.r-promo:hover {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px;
  background: linear-gradient(168deg, #1b1f2e 0%, #0d1120 58%, #07091a 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 20px !important; padding: 34px 38px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -50px rgba(7,9,26,.8) !important; max-width: none !important; margin: 40px 0 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: border-color .4s, translate .4s cubic-bezier(.22,1,.36,1); }
body.rules main .bn.r-promo:hover { border-color: rgba(255,255,255,.18) !important; translate: 0 -2px; }
body.rules main .bn.r-promo::before, body.rules main .bn.r-promo::after { display: none !important; }
body.rules .r-promo-pill { background: rgba(255,255,255,.1) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.16); border-radius: 999px !important;
  font: 700 10.5px/1 var(--font-poppins), system-ui !important; letter-spacing: .14em !important; text-transform: uppercase; padding: 9px 13px !important; margin: 0 !important; white-space: nowrap; }
body.rules .r-promo h3 { color: #fff !important; font-size: 19px !important; letter-spacing: -.015em; margin: 0 0 6px !important; }
body.rules .r-promo p { color: rgba(255,255,255,.66) !important; font-size: 15px !important; line-height: 1.6 !important; max-width: 70ch; margin: 0 !important; }
body.rules .r-promo-cta { color: #9fb4ff !important; font: 600 14px/1 var(--font-poppins), system-ui !important; white-space: nowrap; margin: 0 !important; }
body.rules .r-promo:hover .r-promo-cta { text-decoration: none !important; color: #fff !important; }
@media (max-width: 860px) { body.rules main .bn.r-promo { grid-template-columns: 1fr; gap: 16px; padding: 26px !important; } }

/* ---- especificidade medida (CSS.getMatchedStylesForNode): estas regras precisam vencer as que estavam ganhando ---- */
/* pill do promo perdia para o Chip `main .rounded-full.bg-[#3a63f5].uppercase` (0,3,1) */
body.rules main .bn.r-promo .r-promo-pill.r-promo-pill { color: #fff !important; background: rgba(255,255,255,.1) !important; }
/* parágrafo do promo perdia para `body.rules main .bn p` (0,2,2) */
body.rules main .bn.r-promo.r-promo p { color: rgba(255,255,255,.7) !important; }
body.rules main .bn.r-promo.r-promo h3 { color: #fff !important; }
/* prosa: a regra de lead (0,2,6) vencia por tipos; aqui (0,3,x). Parágrafos idênticos, ritmo de texto corrido */
body.rules .r-prose.r-prose h2 + p, body.rules .r-prose.r-prose > div > p { font-size: 16.5px !important; line-height: 1.65 !important; margin-bottom: 18px !important;
  color: color-mix(in srgb, #3b404b, #c9ccd6 calc(var(--k) * 100%)) !important; max-width: 68ch !important; text-align: left !important; margin-inline: 0 !important; }
body.rules .r-prose.r-prose h2 { margin-bottom: 22px !important; }
body.rules .r-prose.r-prose > div > p:last-of-type { margin-bottom: 36px !important; }

/* ============================================================
   33. OLHANDO O TODO (why-brikl de cima a baixo)
   ============================================================ */
/* A · declaração: no trilho, à esquerda, como fecho do bloco acima — não um órfão centrado */
body.rules main .bn.r-statement { margin: 36px 0 0 !important; max-width: 60ch; }
body.rules main .bn.r-statement p { text-align: left !important; }
/* B · prosa: título com fôlego (30ch), colunas com linhas finas mesmo sem placa */
body.rules .r-prose.r-prose h2 { max-width: 30ch !important; }
body.rules .r-prose .r-cols { margin-top: 40px; }
/* C · logos dos clientes: os PNGs vêm com invert+screen (pensados para fundo escuro) → em fundo claro, multiply sem invert */
body.rules:not(.is-dark) main img.mix-blend-screen { filter: grayscale(1) !important; mix-blend-mode: multiply !important; opacity: .7 !important; }
body.rules main img.mix-blend-screen { height: 44px !important; width: auto !important; }
body.rules main section:has(> div > p + div > img.mix-blend-screen) > div { padding-top: 72px !important; padding-bottom: 72px !important; }
body.rules main :has(> img.mix-blend-screen) { gap: 56px !important; align-items: center !important; }
/* D · lista de tiles: links curtos sem caixa, linhas finas entre fileiras */
body.rules .r-tiles { gap: 0 32px !important; }
body.rules .r-tiles > a.r-tiles-a, body.rules .r-tiles > a { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 18px 0 !important;
  border-top: 1px solid var(--r-rule) !important; transition: border-color .3s; }
body.rules .r-tiles > a:hover { border-top-color: #3262EA !important; translate: none !important; }
body.rules .r-tiles > a > :first-child { font-weight: 600; }
/* declaração: a largura dos cards que ela sintetiza — o trilho inteiro, 2–3 linhas, sem meia página vazia */
body.rules main .bn.r-statement { max-width: none !important; width: 100%; margin: 40px 0 0 !important; }
body.rules main .bn.r-statement p { font-size: clamp(24px, 1.95vw, 28px) !important; line-height: 1.38 !important; letter-spacing: -.02em !important; max-width: none !important; text-wrap: balance; }
/* fileiras alinhadas: quem abre coluna (não só o 1º item) zera o padding esquerdo; quem fecha, o direito */
body.rules .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(2n+1), body.rules .r-cols-3 > .r-col.r-col.r-col.r-col:nth-child(3n+1), body.rules .r-cols-4 > .r-col.r-col.r-col.r-col:nth-child(4n+1) { padding-left: 8px !important; }
body.rules .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(2n), body.rules .r-cols-3 > .r-col.r-col.r-col.r-col:nth-child(3n), body.rules .r-cols-4 > .r-col.r-col.r-col.r-col:nth-child(4n) { padding-right: 8px !important; }
body.rules .r-plate-dark .r-cols-2 > .r-col:nth-child(2n+1), body.rules .r-plate-dark .r-cols-3 > .r-col:nth-child(3n+1) { padding-left: 0 !important; }
/* announce: a marca Hanes em cor e com presença (pedido: "maior e colorido") */
.announce .announce-logo { height: 24px !important; width: auto; filter: none !important; opacity: 1 !important; }
.announce .sh-wrap { gap: 14px; }

/* ============================================================
   34. PRODUCT-CATALOG — sistêmico
   ============================================================ */
/* A · cabeçalho com texto à esquerda encosta no trilho */
body.rules .r-lead-left { margin-left: 0 !important; margin-right: auto !important; }
/* B · tiles: qualquer grid grande dentro de placa — sem caixa, linha fina por fileira, emoji/ícone + título + contagem */
body.rules .r-tile.r-tile.r-tile.r-tile { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 22px 0 !important;
  border-top: 1px solid var(--r-rule) !important; transition: border-color .3s; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules .r-tile:hover { border-top-color: #3262EA !important; translate: none !important; }
body.rules .r-tiles { column-gap: 40px !important; row-gap: 0 !important; }
body.rules .r-tile h3, body.rules .r-tile .font-bold { font-size: 16px !important; }
body.rules .r-tile p { font-size: 14px !important; line-height: 1.55 !important; }
/* nota dentro de tiles = um tile como os outros, título em brand */
body.rules .r-tiles > .bn.r-tile { border-left: 0 !important; }
body.rules .r-tiles > .bn.r-tile :is(h3, .font-bold) { color: #3262EA !important; }
/* C · nota com barra: raio só à direita — o Card consolidado (0,3,2) devolvia o raio e a barra entortava */
body.rules main .bn.r-note-bar.r-note-bar.r-note-bar { border-radius: 0 10px 10px 0 !important; border-left: 2px solid #3262EA !important; }
body.rules .r-tiles > .bn.r-tile-note.r-tile-note.r-tile-note { border-left: 0 !important; border-radius: 0 !important; background: none !important; }
/* tile-nota: mesmo corpo dos outros tiles (a nota vinha com texto em negrito) */
body.rules .r-tiles > .r-tile-note p { font-weight: 400 !important; font-size: 14px !important; color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)) !important; }

/* ---- linhas alternadas (texto/mídia): as colunas encostam no trilho; a calha vem do gap, não de padding ---- */
body.rules .r-split > div > div[class*="flex"], body.rules .r-split > div > div[class*="grid"] {
  padding-left: 0 !important; padding-right: 0 !important; gap: 56px !important; align-items: center !important; }
body.rules .r-split > div > div[class*="flex"] > div { flex: 1 1 0 !important; min-width: 0; }

/* ---- foto de hero: a imagem é o assunto, sangra para fora da coluna e não carrega mancha atrás ---- */
.has-hero-photo .hero-photo-col { width: auto !important; flex: 1 1 52% !important; max-width: none !important; }
.has-hero-photo .hero-photo-box { position: relative; }
img.hero-photo { width: 118% !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important;
  border-radius: 0 !important; background: none !important; margin-left: -9%; display: block;
  filter: drop-shadow(0 40px 60px rgba(14,17,22,.18)); }
body.is-dark img.hero-photo { filter: drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
@media (max-width: 1023px) { img.hero-photo { width: 100% !important; margin-left: 0; } }
/* proporção do hero: o texto manda, a foto acompanha (minha regra anterior deu 790px à foto e 250 ao título) */
.has-hero-photo .hero-photo-col { flex: 0 1 600px !important; width: auto !important; max-width: 600px !important; }
.has-hero-photo > div { align-items: center !important; }
.has-hero-photo > div > div:first-child { flex: 1 1 auto !important; min-width: 420px; }
img.hero-photo { width: 124% !important; margin-left: -12%; }
@media (max-width: 1100px) { .has-hero-photo .hero-photo-col { flex-basis: 480px !important; } }

/* ---- hero com foto: sangra à direita e desce por baixo da faixa de números ---- */
.has-hero-photo { overflow: visible !important; position: relative; z-index: 0; padding-bottom: 0 !important; }
.has-hero-photo > div { padding-bottom: 0 !important; }
.has-hero-photo .hero-photo-col { flex: 0 1 620px !important; max-width: none !important; }
img.hero-photo { width: calc(100% + 300px) !important; max-width: none !important; margin: 0 -300px -130px 0 !important;
  position: relative; z-index: 1; filter: drop-shadow(0 30px 50px rgba(14,17,22,.16)); }
@media (max-width: 1100px) { img.hero-photo { width: calc(100% + 120px) !important; margin-right: -120px !important; } }
@media (max-width: 860px) { img.hero-photo { width: 100% !important; margin: 0 0 -70px !important; } }

/* ---- faixa de números do headwear: escura, numerais claros, mesma geometria das placas ---- */
.hw-stats { position: relative; z-index: 2; margin: 0 16px 12px !important; border-radius: 28px; overflow: hidden;
  background: linear-gradient(168deg, #1b1f2e 0%, #0d1120 58%, #07091a 100%);
  border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 110px -60px rgba(7,9,26,.8); }
.hw-stats-in { width: min(1080px, 100% - 96px); margin-inline: auto; padding: 46px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.hw-stat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 16px; }
.hw-stat + .hw-stat { border-left: 1px solid rgba(255,255,255,.1); }
.hw-stat b { font: 200 clamp(34px, 3.4vw, 46px)/1 var(--font-poppins), system-ui; letter-spacing: -.045em; color: transparent;
  background: linear-gradient(110deg, #fff 0%, #fff 38%, #9fb4ff 50%, #fff 62%, #fff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .05em;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
.hw-stat i { font: 500 11px/1.3 var(--font-poppins), system-ui; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .hw-stats-in { grid-template-columns: repeat(2, 1fr); row-gap: 28px; padding: 34px 0; }
  .hw-stat + .hw-stat { border-left: 0; } .hw-stat:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.1); } }
@media (prefers-reduced-motion: reduce) { .hw-stat b { animation: none; } }
/* faixa montada a partir dos números do hero (branded-stores, merch-sellers, our-partners): 3 a 6 colunas */
.hw-stats.hw-from-hero .hw-stats-in { grid-template-columns: repeat(var(--hw-n, 5), 1fr) !important; }
@media (max-width: 900px) { .hw-stats.hw-from-hero .hw-stats-in { grid-template-columns: repeat(2, 1fr) !important; } }
.hw-moved { display: none !important; }
/* seção que sobrou só com a legenda dos números (sustainability: "Every figure… sources below") */
body.rules section.hw-caption.hw-caption { background: none !important; border: 0 !important; padding: 0 0 24px !important; margin: 0 !important; box-shadow: none !important; }
body.rules section.hw-caption.hw-caption > div { padding: 12px 0 0 !important; }
body.rules section.hw-caption > .r-cloud { display: none !important; }
body.rules section.hw-caption a { display: inline !important; margin: 0 !important; }   /* o link "sources below" seguia a regra de link solto (bloco) e deixava o ponto final sozinho na linha de baixo */
/* grade de 3 colunas com sobra: 6 trilhas, cada card ocupa 2; a última linha centra */
@media (min-width: 1024px) {
  body.rules main .grid.r-orphan-3.r-orphan-3 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  body.rules main .grid.r-orphan-3 > * { grid-column: span 2; }
  body.rules main .grid.r-orphan-3.r-rem-1 > :last-child { grid-column: 3 / span 2; }
  body.rules main .grid.r-orphan-3.r-rem-2 > :nth-last-child(2) { grid-column: 2 / span 2; }
}
/* a faixa é componente nosso: o passe de seções não a repinta */
body.rules section.hw-stats.hw-stats, section.hw-stats.hw-stats {
  background: linear-gradient(168deg, #1b1f2e 0%, #0d1120 58%, #07091a 100%) !important; }

/* ---- hero da foto: duas colunas iguais, imagem flutuando (sem moldura), faixa sem o respiro de seção ---- */
.has-hero-photo > div { display: flex !important; align-items: center !important; gap: 48px !important; padding-top: 64px !important; }
.has-hero-photo > div > div:first-child { flex: 1 1 50% !important; min-width: 0 !important; }
.has-hero-photo .hero-photo-col { flex: 1 1 50% !important; max-width: none !important; width: auto !important; }
/* a moldura de 1px do <img> some: a peça flutua */
img.hero-photo { border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important;
  width: calc(100% + 288px) !important; margin: 0 -288px -150px 0 !important; }
@media (max-width: 1100px) { img.hero-photo { width: calc(100% + 130px) !important; margin-right: -130px !important; } }
@media (max-width: 860px) { .has-hero-photo > div { display: block !important; } img.hero-photo { width: 100% !important; margin: 0 0 -80px !important; } }
/* a faixa é componente nosso: não recebe o padding de 88px das seções */
body.rules .hw-stats > div, .hw-stats > .hw-stats-in { padding-top: 44px !important; padding-bottom: 44px !important; width: min(1080px, 100% - 96px) !important; }
/* o corte do boné cai depois do logo, não no meio da palavra */
img.hero-photo { width: calc(100% + 196px) !important; margin-right: -196px !important; }
@media (max-width: 1100px) { img.hero-photo { width: calc(100% + 90px) !important; margin-right: -90px !important; } }
/* especificidade equiparada à regra de padding das seções (0,4,3) */
body.rules section.hw-stats.hw-stats.hw-stats > .hw-stats-in { padding-top: 44px !important; padding-bottom: 44px !important; }
/* o retângulo difuso atrás da foto é do próprio site (gradiente azul/roxo + blur 40px).
   O JS remove, mas o React recria na hidratação — então some também por CSS. */
.has-hero-photo [class*="blur-"], .hero-photo-box > div[class*="bg-gradient"], .hero-photo-col [class*="blur-"] { display: none !important; }

/* ---- vídeo de hero: mesmo tratamento da foto; o fundo branco do arquivo some por mistura ---- */
/* o fundo já foi removido quadro a quadro no arquivo (WebM com alfa) — nada de mistura, que não funciona
   dentro de contexto isolado. O MP4 de reserva (sem alfa) usa multiply. */
video.hero-video { display: block; background: none; }
video.hero-video.is-fallback { mix-blend-mode: multiply; }

/* ---- faixa de números convertida (a página já traz os números em <p>) ---- */
.hw-stats .hw-stats-in { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 !important; text-align: center; }
.hw-stats .hw-stat { padding: 0 16px; }
.hw-stats .hw-stat + .hw-stat { border-left: 1px solid rgba(255,255,255,.1); }
.hw-stats p.hw-stat-n { font: 200 clamp(34px, 3.4vw, 46px)/1 var(--font-poppins), system-ui !important; letter-spacing: -.045em !important; color: transparent !important;
  background: linear-gradient(110deg, #fff 0%, #fff 38%, #9fb4ff 50%, #fff 62%, #fff 100%) 0 0 / 240% 100%;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; padding-right: .05em; margin: 0 !important;
  animation: metal-sheen 6s cubic-bezier(.4,0,.2,1) infinite; }
.hw-stats p.hw-stat-l { font: 500 11px/1.3 var(--font-poppins), system-ui !important; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5) !important; margin: 10px 0 0 !important; }
.hw-stats.hw-stats.hw-stats > div { width: min(1080px, 100% - 96px) !important; margin-inline: auto !important; padding: 44px 0 !important; }
@media (max-width: 900px) { .hw-stats .hw-stats-in { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .hw-stats .hw-stat + .hw-stat { border-left: 0; } .hw-stats .hw-stat:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.1); } }
/* especificidade equiparada à regra de padding das seções */
body.rules section.hw-stats.hw-stats.hw-stats > div { width: min(1080px, 100% - 96px) !important; margin-inline: auto !important; padding: 44px 0 !important; }
/* faixa convertida: o respiro fica no envoltório; a grade não repete o padding (era 44+46 dos dois lados) */
.hw-stats > div > .hw-stats-in { padding: 0 !important; }

/* ---- vídeo do hero maior: cresce para a direita e para cima, o pé some atrás da faixa.
   O monitor ocupa 10,6%→92% do quadro, então a moldura vazia pode passar por trás do texto,
   mas o aparelho em si para antes da coluna de texto. ---- */
.has-hero-photo .hero-photo-col { display: flex !important; justify-content: flex-end !important; position: relative; z-index: 0 !important; }
.has-hero-photo > div > div:first-child { position: relative; z-index: 2 !important; }
video.hero-video { flex: 0 0 auto; width: 800px !important; max-width: none !important; margin: -60px -144px -150px 0 !important; }
@media (max-width: 1240px) { video.hero-video { width: 660px !important; margin-right: -90px !important; } }
@media (max-width: 900px) { .has-hero-photo .hero-photo-col { justify-content: center !important; } video.hero-video { width: 100% !important; margin: 0 0 -80px !important; } }
/* mais presença: o monitor cresce até quase a borda direita e o pé entra mais na faixa */
video.hero-video { width: 900px !important; margin: -80px -204px -175px 0 !important; }
@media (max-width: 1240px) { video.hero-video { width: 680px !important; margin-right: -90px !important; } }
/* 10% menor, mantendo a âncora à direita e o pé por trás da faixa */
video.hero-video { width: 810px !important; margin: -64px -184px -150px 0 !important; }
@media (max-width: 1240px) { video.hero-video { width: 615px !important; margin-right: -80px !important; } }
/* a base aparece: a faixa desce ~16px, deixando só uns milímetros do pé escondidos */
video.hero-video { margin-bottom: -134px !important; }

/* ---- sem costura no topo: o hero passa por trás do header (que é sticky e transparente)
   e a nuvem sobe até a borda da página, então a cor é contínua do pixel 0 em diante ---- */
body.rules main section:first-of-type { margin-top: -76px !important; padding-top: 76px !important; }
body.rules main section.in-hero > .cl.cl-hero { height: calc(max(118%, 600px) + 140px) !important; bottom: -34% !important; }

/* ---- hero montado em duas colunas (páginas cujo hero só tinha texto) ---- */
.has-hero-photo .hero-built { display: flex !important; align-items: center !important; gap: 48px !important;
  max-width: 1152px !important; width: min(1152px, 100% - 64px) !important; margin-inline: auto !important; }
.has-hero-photo .hero-copy-col { flex: 1 1 50% !important; min-width: 0; position: relative; z-index: 2 !important; }
.has-hero-photo .hero-copy-col :is(h1, p) { max-width: none !important; }
@media (max-width: 900px) { .has-hero-photo .hero-built { display: block !important; } }
/* why-brikl: o objeto é alto e estreito (telefone ocupa 20,6%→81% na largura e 3,7%→93,9% na altura),
   então a escala e as margens são próprias — o telefone passa abaixo do header e encosta na placa escura. */
body.hero-why-brikl video.hero-video { width: 650px !important; margin: 0px -170px -111px 0 !important; }
@media (max-width: 1240px) { body.hero-why-brikl video.hero-video { width: 520px !important; margin-right: -80px !important; } }
body.hero-why-brikl video.hero-video { margin-bottom: -70px !important; }


/* ---- marca do fabricante dentro da pílula (o bloco de marcas não muda de forma) ---- */
body.rules span.has-mark { display: inline-flex !important; align-items: center; gap: 7px; }
body.rules img.brand-mark { width: 14px; height: 14px; object-fit: contain; flex: 0 0 14px;
  opacity: .78; display: block; }
body.is-dark img.brand-mark { filter: invert(1); opacity: .7; }

/* ---- business card: peça centrada numa área quadrada de cantos arredondados ---- */
/* banner glassy da home: texto + peça dentro de um painel de vidro, não uma moldura solta */
body.rules .glass-banner {
  display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 44px;
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 28px !important;
  padding: 44px 48px !important; box-shadow: var(--gl-hi), var(--gl-shadow) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  width: min(1080px, 100% - 96px) !important; margin-inline: auto !important; }
body.rules .glass-banner > * { border: 0 !important; padding: 0 !important; min-width: 0; }
body.rules .glass-banner h2, body.rules .glass-banner p { text-align: left !important; margin-inline: 0 !important; }
body.rules .bizcard-box { display: grid; place-items: center; }
body.rules .bizcard-frame {
  width: min(340px, 100%); aspect-ratio: 1 / 1; display: grid; place-items: center;
  padding: 6%; box-sizing: border-box; background: none; box-shadow: none; }
@media (max-width: 900px) { body.rules .glass-banner { grid-template-columns: 1fr !important; padding: 30px !important; } }
body.rules img.bizcard { width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: auto !important;
  object-fit: contain !important; border: 0 !important; background: none !important; border-radius: 0 !important; padding: 0 !important;
  filter: drop-shadow(0 18px 22px rgba(15,20,35,.16)) drop-shadow(0 3px 5px rgba(15,20,35,.10)); }

/* ---- carrossel de marcas: uma linha, sobre o fundo neutro, pontas esfumaçadas ---- */
.bq { position: relative; overflow: hidden; padding: 46px 0 10px; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.bq .bq-row { height: 28px; margin: 0; }
.bq .mq-block { gap: 72px; padding-right: 72px; }
.bq .mq-block img { height: 26px; width: auto; max-width: 112px; object-fit: contain;
  filter: grayscale(1) opacity(.34); mix-blend-mode: normal; }        /* wordmarks pretos: bem mais leves que os logos coloridos da home */
.bq .mq-block img:hover { filter: grayscale(1) opacity(.6); }
body.is-dark .bq .mq-block img { filter: grayscale(1) invert(1) opacity(.7); }
/* as pílulas voltam sem marca */
body.rules span.has-mark { display: inline-block !important; gap: 0; }
/* o contêiner da peça tinha um radial azul de fundo (o retângulo atrás da moldura) */
body.rules .bizcard-host, body.rules .bizcard-host::before, body.rules .bizcard-host::after {
  background: none !important; background-image: none !important; }
body.rules .bizcard-host { display: grid !important; place-items: center !important; min-height: 0 !important; }

/* ---- bizcard com a anatomia do Customer Story da home ---- */
body.rules .story-like { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important; gap: 40px !important; padding: 52px 48px !important; }
body.rules .story-eyebrow-x { display: flex !important; align-items: center; gap: 14px; margin: 0 0 18px !important;
  font: 700 12px/1 var(--font-poppins), system-ui !important; letter-spacing: .14em; text-transform: uppercase; color: #3262EA !important; }
body.rules .story-eyebrow-x img { height: 26px; width: auto; display: block; background: none; padding: 0; mix-blend-mode: multiply; }
body.rules .story-copy-x h2, body.rules .story-copy-x h3 {
  font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.16 !important; letter-spacing: -.02em !important;
  margin: 0 0 18px !important; color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; }
body.rules .story-copy-x p { font-size: 17px !important; line-height: 1.6 !important; margin: 0 0 22px !important; }
/* sem caixa dentro de caixa: a peça flutua direto no painel de vidro, grande */
body.rules .story-media-x .bizcard-frame {
  width: 100%; aspect-ratio: auto; border-radius: 0; padding: 0;
  background: none !important; box-shadow: none !important; overflow: visible; }
body.rules .story-media-x img.bizcard { width: 118% !important; max-width: none !important; margin: -6% -12% -6% 0 !important; }

/* a linha do bizcard é banner de vidro, não Nota: sem barra e com o raio inteiro */
body.rules .story-like.story-like.story-like { border: 1px solid var(--gl-border) !important; border-left: 1px solid var(--gl-border) !important; border-radius: 28px !important; }
body.rules .story-eyebrow-x, body.rules .story-eyebrow-x span { color: #3262EA !important; }
/* imagem real da loja no Customer Story da home */
.story-media img.story-shot { width: 100%; height: auto; display: block; border-radius: 0; background: none;
  filter: drop-shadow(0 30px 44px rgba(15,20,35,.18)) drop-shadow(0 4px 8px rgba(15,20,35,.10)); }
/* a regra de trilho zerava o padding do painel (texto encostando no canto arredondado) */
body.rules .glass-banner.story-like.story-like.story-like {
  padding: 52px 48px !important; width: 100% !important; max-width: none !important; margin-inline: 0 !important;
  overflow: visible !important; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important; gap: 44px !important; }
body.rules .story-media-x img.bizcard { width: 112% !important; margin: -4% -10% -4% 0 !important; }
/* o componente real da home mora num <section> próprio, que é :first-of-type dentro do .rbx —
   a regra de isenção do hero o alcançava e zerava o tamanho do título */
body.rules .rbx .display, body.rules .rbx .story-copy .display { font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.12 !important; }
body.rules .rbx .lead { font-size: 17px !important; line-height: 1.62 !important; }
body.rules .rbx section { margin: 0 !important; padding: 0 !important; background: none !important; }
/* respiro entre o carrossel de marcas e o que vem depois */
.bq { padding-bottom: 26px; margin-bottom: 26px; }

/* o banner glassy ganha a mesma caixa da placa lilás (borda a borda, margem 16), com o conteúdo no trilho */
/* mesma margem interna da placa escura da launch-offer (72px), não a do trilho (164px, que esmagava o conteúdo) */
body.rules .rbx > section.story > .container.story-grid {
  width: auto !important; max-width: none !important; margin: 12px 16px !important;
  padding: 56px 72px !important; gap: 56px !important; }

/* ---- HOME: fundo de nuvens novo (mesmas massas circulares com desfoque das páginas internas) ---- */
/* o hero tem min-height fixo e centraliza: puxar 76px pra trás do header sobe o conteúdo 76px,
   e como o centro é (altura − padding)/2, a compensação é o DOBRO (152px), não 76 */
.rbx section.home-hero { position: relative; isolation: isolate; overflow-x: clip; margin-top: -76px; padding-top: 228px; }
.rbx section.home-hero > .hero-glow { display: none !important; }        /* o brilho antigo sai: quem pinta agora é a nuvem */
.rbx section.home-hero > .cl.cl-hero { height: calc(max(118%, 620px) + 140px) !important; bottom: -34% !important; z-index: 0; }
.rbx section.home-hero > :not(.cl):not(.hero-grain) { position: relative; z-index: 1; }
.rbx section.home-hero > .hero-grain { z-index: 0; opacity: .5; }

/* ---- HOME: Customer Story com a mesma caixa e margem do banner do bizcard ---- */
.rbx section.story > .container.story-grid {
  width: auto !important; max-width: none !important; margin: 12px 16px !important;
  padding: 56px 72px !important; gap: 56px !important; }
/* ---- HOME: seção da comissão vira a placa lilás de cantos arredondados ---- */
.rbx section.pricing.home-plate {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 24px 16px !important; border-radius: 28px;
  background: color-mix(in srgb, #eef1fb, #0c1020 calc(var(--k) * 100%)) !important; }
.rbx section.pricing.home-plate > *:not(.r-cloud) { position: relative; z-index: 1; }
.rbx section.pricing.home-plate > .r-cloud {
  position: absolute; z-index: 0; pointer-events: none; right: -16%; top: -40%; width: 60%; height: 150%; opacity: .5;
  background: radial-gradient(closest-side, var(--cl-stops-c)); animation: cloud-drift-3 46s ease-in-out infinite alternate; }

/* ---- ícone de categoria: o objeto de vidro no lugar do emoji ---- */
body.rules img.cat-ico { width: 44px !important; height: 44px !important; flex: 0 0 44px; object-fit: contain; display: block; margin: 0 2px 0 0 !important; }
body.rules .has-cat-ico { align-items: flex-start; }

/* ============================================================
   36. MOVIMENTO nas páginas internas — mesma gramática da home
   ============================================================ */
/* entrada tipográfica: cada palavra sobe de dentro de uma máscara */
:is(h1, h2)[data-split] .sw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
:is(h1, h2)[data-split] .swi { display: inline-block; transform: translateY(105%); opacity: 0;
  transition: transform .82s cubic-bezier(.22,1,.36,1) var(--d, 0ms), opacity .6s ease var(--d, 0ms); }
:is(h1, h2)[data-split].split-in .swi { transform: translateY(0); opacity: 1; }
/* barra de progresso do scroll */
.design-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, #3262EA, #46A6FF); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: .9; }
body.is-dark .design-progress { background: linear-gradient(90deg, #6f95ff, #87E7FF); }
@media (prefers-reduced-motion: reduce) { .design-progress { display: none; } [data-split] .swi { transform: none; opacity: 1; } }

/* ---- FAQ canônico: o componente da home; nossas regras de linha fina saem de cena ---- */
:is(body.rules, body.lo-page) .has-faq-canon :is(details, .rounded-lg, .rounded-xl) { border-bottom: 0 !important; padding: 0 !important; }
:is(body.rules, body.lo-page) .faq-canon { max-width: 860px; margin-inline: auto; }
:is(body.rules, body.lo-page) .faq-canon .faq-item { background: color-mix(in srgb, #fff, #15181f calc(var(--k) * 100%)) !important;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%)) !important;
  border-radius: 16px !important; overflow: hidden; transition: border-color .3s; }
:is(body.rules, body.lo-page) .faq-canon .faq-item[open] { border-color: rgba(77,116,255,.4) !important; }
:is(body.rules, body.lo-page) .faq-canon .faq-item summary { display: flex !important; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px !important; font: 500 16px/1.4 var(--font-poppins), system-ui !important; cursor: pointer; list-style: none;
  color: color-mix(in srgb, #0e1116, #fff calc(var(--k) * 100%)) !important; background: none !important; }
:is(body.rules, body.lo-page) .faq-canon .faq-item summary::-webkit-details-marker { display: none; }
:is(body.rules, body.lo-page) .faq-canon .faq-icon { position: relative; flex: 0 0 14px; width: 14px; height: 14px; }
:is(body.rules, body.lo-page) .faq-canon .faq-icon::before, :is(body.rules, body.lo-page) .faq-canon .faq-icon::after { content: ""; position: absolute; inset: 0; margin: auto;
  background: color-mix(in srgb, #3b404b, #c9ccd6 calc(var(--k) * 100%)); transition: transform .3s, opacity .3s; }
:is(body.rules, body.lo-page) .faq-canon .faq-icon::before { width: 14px; height: 1.6px; }
:is(body.rules, body.lo-page) .faq-canon .faq-icon::after { width: 1.6px; height: 14px; }
:is(body.rules, body.lo-page) .faq-canon .faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
:is(body.rules, body.lo-page) .faq-canon .faq-item > :not(summary) { padding: 0 24px 22px !important; font-size: 15px !important; line-height: 1.65 !important;
  color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)) !important; }
/* o .faq-list precisa do layout do componente da home (coluna + 12px), que veio junto com o escopo .rbx */
:is(body.rules, body.lo-page) .faq-canon .faq-list { display: flex !important; flex-direction: column; gap: 12px; margin: 48px 0 40px; }
/* barra de progresso: mesmas cores da home (--grad-a → --grad-b) */
.design-progress { background: linear-gradient(90deg, var(--grad-a, #4d74ff), var(--grad-b, #46A6FF)) !important; }
/* a faixa é sempre escura, mesmo quando a seção que a contém virou placa clara */
body.rules section.hw-stats.hw-stats.hw-stats { background: linear-gradient(168deg, #1b1f2e 0%, #0d1120 58%, #07091a 100%) !important;
  border: 1px solid rgba(255,255,255,.07) !important; border-radius: 28px !important; margin: 24px 16px !important; overflow: hidden; }
body.rules section.hw-stats > .r-cloud { display: none !important; }
body.rules .hw-stats :is(p, span, div).hw-stat-l { color: rgba(255,255,255,.5) !important; }
body.rules .hw-stats :is(p, span, div, b).hw-stat-n { color: transparent !important; }

/* ============================================================
   37. PLACA DE COLUNAS — o índice, a linha de base e o rodapé
   Medido: o índice 01–04 era um disco absoluto pendurado no ícone (o trilho o
   tornava estático e ele virava uma bolha cortada ao lado da figura); as setas
   de ligação caíam soltas no meio do parágrafo; e os títulos de 1, 2 e 3 linhas
   deixavam cada parágrafo começando numa altura diferente.
   ============================================================ */
/* o índice é rótulo, não medalha: vai para a ponta da linha do cabeçalho */
body.rules .r-col-num {
  margin-left: auto !important; align-self: center;
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace !important;
  letter-spacing: .18em !important; font-variant-numeric: tabular-nums;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; position: static !important;
  padding: 0 !important; box-shadow: none !important;
  color: color-mix(in srgb, rgba(14,17,22,.32), rgba(255,255,255,.34) calc(var(--k) * 100%)) !important;
}
body.rules .r-plate-dark .r-col-num { color: rgba(255,255,255,.34) !important; }
/* o cabeçalho ocupa a coluna inteira para o índice encostar na régua */
body.rules .r-col-head { width: 100%; }
/* nuvem da placa escura: fica atrás do título, não acende o rodapé vazio */
body.rules .r-plate-dark .r-cloud { top: -74% !important; height: 112% !important; opacity: .28 !important; }
/* réguas da placa escura: fio visível, não fantasma */
body.rules .r-plate-dark .r-cols-4 > .r-col.r-col.r-col.r-col:not(:nth-child(4n+1)),
body.rules .r-plate-dark .r-cols-3 > .r-col.r-col.r-col.r-col:not(:nth-child(3n+1)),
body.rules .r-plate-dark .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(2n) { border-left: 1px solid rgba(255,255,255,.1) !important; }
/* corpo da coluna na placa escura: contraste de leitura, não cinza morto */
body.rules .r-plate-dark .r-col p { color: rgba(255,255,255,.74) !important; }
/* o título da coluna vale pelo PAPEL, não pela etiqueta: dentro de `.r-col` não existe título
   de seção, então <h2> ali é título de coluna como <h3> — ver o critério em components.js */
body.rules .r-plate-dark .r-col :is(h2, h3, h4) {
  font-size: 17px !important; line-height: 1.3 !important; letter-spacing: -.012em; margin-bottom: 10px !important; }
/* 4 colunas: a medida de 190px espremia tudo; a régua é fina, o ar entra por ela */
body.rules .r-plate-dark .r-cols-4 > .r-col { padding: 10px 26px !important; }
body.rules .r-plate-dark .r-cols-4 > .r-col:first-child { padding-left: 0 !important; }
body.rules .r-plate-dark .r-cols-4 > .r-col:last-child { padding-right: 0 !important; }
body.rules .r-plate-dark .r-cols-4 .r-col p { font-size: 15.5px !important; line-height: 1.6 !important; }

/* ============================================================
   38. CARTÃO DE RECURSO (/features/) — um bloco, não caixa dentro de caixa
   Medido: cartão branco → placa grafite → objeto, com o nome repetido na legenda
   e no título, e o "Learn more" solto a alturas diferentes em cada cartão.
   ============================================================ */
body.rules .r-feat.r-feat.r-feat {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
  display: flex !important; flex-direction: column; height: 100%;
}
body.rules .r-feat:hover { transform: none !important; }
body.rules .r-feat .r-ph {
  width: 100% !important; aspect-ratio: 16 / 10 !important; min-height: 0 !important; max-height: none !important;
  margin: 0 0 20px !important; padding: 22px !important; border-radius: 20px !important;
  transition: transform .5s cubic-bezier(.22,.7,.2,1), box-shadow .5s cubic-bezier(.22,.7,.2,1);
}
body.rules .r-feat:hover .r-ph { transform: translateY(-3px); box-shadow: 0 30px 60px -34px rgba(8,10,26,.6); }
body.rules .r-feat .r-ph-art { position: relative !important; right: auto !important; top: auto !important;
  translate: none !important; width: clamp(76px, 34%, 132px) !important; transition: transform .5s cubic-bezier(.22,.7,.2,1); }
body.rules .r-feat:hover .r-ph-art { transform: scale(1.05); }
body.rules .r-feat .r-ph b { font-size: 15px !important; max-width: 24ch; }
/* corpo: dois níveis de texto, um só ritmo; o link fecha no rodapé para a fileira casar */
body.rules .r-feat-body { display: flex !important; flex-direction: column; flex: 1; margin-top: 0 !important; }
body.rules .r-feat h3, body.rules .r-feat h4 { font-size: 17px !important; line-height: 1.3 !important; letter-spacing: -.012em; margin: 0 0 8px !important; }
body.rules .r-feat p { font-size: 15px !important; line-height: 1.6 !important; margin: 0 0 8px !important; max-width: 34ch; }
body.rules .r-feat p + p { color: color-mix(in srgb, #6b7080, #8d92a0 calc(var(--k) * 100%)) !important; font-size: 15px !important; }
body.rules .r-feat-more { margin-top: auto !important; padding-top: 16px; display: inline-block; font-size: 13.5px !important; font-weight: 600 !important; }
/* a grade perde as caixas, então o ar passa a vir do vão */
body.rules main .grid:has(> .r-feat) { gap: 44px 40px !important; }
@media (max-width: 860px) { body.rules main .grid:has(> .r-feat) { gap: 40px 24px !important; } }
/* a regra §33 dava padding de cartão a quem contém .r-ph; o cartão de recurso não é caixa */
body.rules main :is(div, a, article, li).r-feat:is(.rounded-xl, .rounded-2xl) { padding: 0 !important; }

/* ============================================================
   39. CATEGORIAS na vitrine (.catwf) — o componente da home, com foto por categoria
   ============================================================ */
body.rules .catwf .wf { margin: 44px 0 28px; }
body.rules .catwf .wf-media { background: color-mix(in srgb, #f3f4f7, #14161f calc(var(--k) * 100%)); }
body.rules .catwf .cat-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
/* sem foto ainda: o objeto de vidro da categoria segura o painel */
body.rules .catwf .wf-obj { width: clamp(120px, 36%, 184px) !important; height: auto !important; aspect-ratio: 1;
  filter: drop-shadow(0 26px 40px rgba(24,32,84,.22)); }
body.rules .catwf .cat-media::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(52% 44% at 50% 46%, rgba(120,150,255,.28), transparent 70%); }
body.rules .catwf .cat-media { background:
  radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.9), transparent 60%),
  linear-gradient(160deg, #eef1fb 0%, #e6ebf8 100%); }
/* a contagem ocupa o lugar do índice: tabular, fina, sem peso de preço */
body.rules .catwf .wf-num { font-size: 22px !important; }
body.rules .catwf .wf-item.is-active .wf-desc { max-height: 96px; }
body.rules .catwf .wf-list { max-height: 520px; }
/* o cartão "Browse all categories" vira o rodapé da vitrine, largura inteira */
body.rules .catwf-lead { display: block; margin-top: 8px; }
@media (max-width: 900px) { body.rules .catwf .wf-list { max-height: none; } }

/* ---- how-it-works: o objeto é largo e baixo (o notebook ocupa 6,7%→93,2% na largura
   e 8%→89,7% na altura do quadro), então a escala é menor que a do monitor e o pé
   entra poucos milímetros atrás da faixa escura. ---- */
body.hero-how-it-works video.hero-video { width: 700px !important; margin: -24px -150px -112px 0 !important; }
@media (max-width: 1240px) { body.hero-how-it-works video.hero-video { width: 560px !important; margin-right: -70px !important; } }

/* hover do cartão de recurso: a moldura e a sombra da regra genérica de cartão (§13) ainda
   corriam no :hover e desenhavam um retângulo claro em volta do cartão sem caixa.
   O único sinal de hover é a placa subir, o objeto crescer e o link acender. */
body.rules a.r-feat:hover, body.rules .r-feat:hover {
  border: 0 !important; box-shadow: none !important; background: none !important; }
body.rules .r-feat:hover .r-feat-more { color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)) !important; }

/* ============================================================
   40. MATRIZ 2×2 — a régua vale nos dois sentidos
   Medido em "Find your role": a régua vertical aparecia, a horizontal não (a regra de
   reset do .r-col leva !important e vencia a do border-top), a primeira célula ainda
   carregava a barra azul de nota, e os links fechavam a alturas diferentes.
   ============================================================ */
body.rules .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(n+3),
body.rules .r-cols-3 > .r-col.r-col.r-col.r-col:nth-child(n+4),
body.rules .r-cols-4 > .r-col.r-col.r-col.r-col:nth-child(n+5) {
  border-top: 1px solid var(--r-rule) !important; margin-top: 34px; padding-top: 34px !important; }
body.rules .r-plate-dark .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(n+3),
body.rules .r-plate-dark .r-cols-3 > .r-col.r-col.r-col.r-col:nth-child(n+4) { border-top-color: rgba(255,255,255,.1) !important; }
/* dentro da matriz ninguém é destaque: a barra azul de nota sai */
body.rules .r-col.r-col.r-col.r-col.bn.r-note-bar, body.rules .r-col.r-col.r-col.r-col.r-note {
  border-left: 0 !important; border-radius: 0 !important; }
body.rules .r-cols-2 > .r-col.r-col.r-col.r-col:nth-child(2n).bn.r-note-bar { border-left: 1px solid var(--r-rule) !important; }
/* o link fecha a célula: as chamadas param todas na mesma linha */
body.rules .r-col > a:last-child, body.rules .r-col > :is(span, p):last-child > a:only-child { margin-top: auto !important; padding-top: 14px; }
/* frase de fecho depois da matriz: medida e quebra equilibrada, na régua da seção */
body.rules main section > div > p.text-center:last-child {
  max-width: 68ch !important; margin: 34px auto 0 !important; text-wrap: balance; font-size: 14.5px !important; }
/* a pergunta fica numa linha e a chamada desce inteira para a seguinte, em vez de quebrar no meio */
body.rules main section > div > p.text-center:last-child > a { display: block; margin-top: 6px; text-wrap: balance; }

/* dentro da placa grafite o cartão de recurso não precisa de placa própria:
   caixa escura sobre caixa escura some. O objeto passa a ficar direto sobre a placa,
   exatamente como nas colunas de "From product to payout". */
body.rules .r-plate-dark .r-feat .r-ph {
  background: none !important; border: 0 !important; box-shadow: none !important;
  aspect-ratio: auto !important; height: auto !important; padding: 0 !important;
  margin: 0 0 16px !important; align-items: flex-start !important; justify-content: flex-start !important; }
body.rules .r-plate-dark .r-feat .r-ph-glow { display: none !important; }
body.rules .r-plate-dark .r-feat .r-ph-art { width: 64px !important; }
body.rules .r-plate-dark .r-feat:hover .r-ph { transform: none; box-shadow: none !important; }
body.rules .r-plate-dark .r-feat:hover .r-ph-art { transform: translateY(-3px) scale(1.04); }
body.rules .r-plate-dark .r-feat .r-ph b { display: none !important; }

/* /showcase na vitrine: banners largos ancoram no topo; a descrição (tipo · texto) precisa de 5 linhas */
body.rules .showwf .wf-photo { object-position: top; }
body.rules .showwf .wf-item.is-active .wf-desc { max-height: 132px; }
body.rules .showwf .wf-name { text-transform: none; font-size: 18px; letter-spacing: 0; }
/* ============================================================
   41. FOTO DO ITEM NA VITRINE (.wf-photo) — home e categorias
   O painel mostra a foto do item ativo; enquanto o arquivo não existe, fica o objeto
   de vidro. Same component, mesma regra nos dois lugares.
   ============================================================ */
:is(.rbx .who, .catwf) .wf-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.02); transition: opacity .7s ease, transform 1.2s cubic-bezier(.22,1,.36,1); }
:is(.rbx .who, .catwf) .wf-slide.has-photo .wf-photo { opacity: 1; transform: none; }
:is(.rbx .who, .catwf) .wf-slide.has-photo > :not(.wf-photo) { opacity: 0; }
/* segmento ainda sem foto: o objeto de vidro fica centrado e grande, não um selo no canto */
.rbx .who .wf-slide:not(.has-photo) .who-media { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.rbx .who .wf-slide:not(.has-photo) .who-media img.gi { width: clamp(110px, 32%, 168px) !important; height: auto !important;
  filter: drop-shadow(0 26px 40px rgba(24,32,84,.22)); }

/* rodapé da vitrine de categorias: o cartão "Browse all categories" ficava como uma
   nota solta, com barra azul e metade da largura. Vira uma linha só, no trilho inteiro,
   fechada por um fio fino — é o fecho do componente, não um aviso. */
body.rules main a.catwf-lead.catwf-lead.catwf-lead.catwf-lead {
  display: block !important; width: 100% !important;
  margin: 10px 0 0 !important; padding: 24px 0 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  border-top: 1px solid var(--r-rule) !important; box-shadow: none !important; }
body.rules .catwf-lead > div { display: flex !important; align-items: center !important; gap: 18px !important; }
body.rules .catwf-lead :is(img.gi, .r-glyph) { width: 44px !important; height: 44px !important; flex: none !important; margin: 0 !important; }
body.rules .catwf-lead h3 { margin: 0 0 3px !important; font-size: 16px !important; }
body.rules .catwf-lead p { margin: 0 !important; font-size: 15px !important; max-width: 72ch; }
@media (max-width: 700px) { body.rules .catwf-lead > div { align-items: flex-start !important; } }

/* ============================================================
   42. STEPS EM LINHA DO TEMPO (how-it-works) — sobre o fundo claro da página
   Um percurso só: fio vertical ao centro, nó numerado por etapa, lados alternando.
   ============================================================ */
body.rules section.tl-sec { background: transparent !important; }
body.rules section.tl-sec > .tl-wrap { position: relative; width: min(1080px, 100% - 96px) !important;
  margin-inline: auto !important; padding: 88px 0 !important; }
/* o fio: começa e termina no centro do primeiro e do último nó */
body.rules .tl-wrap::before { content: ''; position: absolute; left: 50%; translate: -50% 0;
  top: calc(88px + 34px); bottom: calc(88px + 34px); width: 1px;
  background: linear-gradient(180deg, transparent, rgba(14,17,22,.14) 6%, rgba(14,17,22,.14) 94%, transparent); }
body.rules .tl-row { position: relative; display: grid; grid-template-columns: 1fr 96px 1fr;
  align-items: center; column-gap: 0; }
body.rules .tl-row + .tl-row { margin-top: 72px; }
body.rules .tl-side { min-width: 0; }
body.rules .tl-text { grid-column: 1; text-align: right; padding-right: 8px; }
body.rules .tl-media { grid-column: 3; }
body.rules .tl-row.tl-flip .tl-text { grid-column: 3; text-align: left; padding-right: 0; padding-left: 8px; }
body.rules .tl-row.tl-flip .tl-media { grid-column: 1; }
/* nó: numeral da etapa sobre o fio, com anel da própria página */
body.rules .tl-node { grid-column: 2; justify-self: center; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(14,17,22,.14);
  box-shadow: 0 0 0 8px var(--bg-l, #f7f8fc), 0 10px 26px -14px rgba(14,17,22,.4);
  font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em;
  color: rgba(14,17,22,.62); }
/* texto da etapa */
body.rules .tl-text h2 { text-align: inherit !important; margin: 0 0 12px !important; max-width: none !important;
  font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.18 !important; letter-spacing: -.02em; }
body.rules .tl-text p { text-align: inherit !important; margin: 0 !important; margin-inline: 0 !important;
  font-size: 16px !important; line-height: 1.6 !important; max-width: 46ch; }
body.rules .tl-text a { display: inline-block; margin-top: 16px !important; font-size: 13.5px !important; font-weight: 600 !important; }
/* mídia: painel claro frostado com o objeto de vidro por cima (o vidro foi desenhado para isso) */
body.rules .tl-media .r-ph { width: 100% !important; aspect-ratio: 4 / 3 !important; min-height: 0 !important; max-height: none !important;
  margin: 0 !important; padding: 26px !important; border-radius: 26px !important;
  background: linear-gradient(158deg, #fcfdff 0%, #eef2fa 52%, #e6ebf7 100%) !important;
  border: 1px solid rgba(14,17,22,.05) !important;
  box-shadow: 0 34px 70px -44px rgba(14,17,22,.4), inset 0 1.5px 0 rgba(255,255,255,.9) !important; }
body.rules .tl-media .r-ph-glow { left: 50% !important; top: 44% !important; width: 66% !important; height: 66% !important;
  background: radial-gradient(closest-side, rgba(120,150,255,.28), transparent 72%) !important; }
body.rules .tl-media .r-ph-art { position: relative !important; right: auto !important; top: auto !important; translate: none !important;
  width: clamp(96px, 34%, 156px) !important; filter: drop-shadow(0 26px 40px rgba(24,32,84,.22)); }
body.rules .tl-media .r-ph b { font-size: 14.5px !important; color: #6b7080 !important; max-width: 30ch; }
/* etapa sem ilustração: as duas fichas empilhadas fazem as vezes da mídia */
body.rules .tl-media-cards .r-cols { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
body.rules .tl-media-cards .r-col.r-col.r-col.r-col { background: #fff !important;
  border: 1px solid rgba(14,17,22,.07) !important; border-radius: 18px !important; padding: 20px 22px !important;
  border-left: 1px solid rgba(14,17,22,.07) !important; border-top: 0 !important; margin: 0 !important;
  box-shadow: 0 18px 40px -34px rgba(14,17,22,.4) !important; }
body.rules .tl-media-cards .r-col h3 { font-size: 16px !important; min-height: 0 !important; }
body.rules .tl-media-cards .r-col p { font-size: 14.5px !important; }
@media (max-width: 900px) {
  body.rules section.tl-sec > .tl-wrap { width: min(1080px, 100% - 44px) !important; padding: 56px 0 !important; }
  body.rules .tl-wrap::before { left: 23px; }
  body.rules .tl-row, body.rules .tl-row.tl-flip { grid-template-columns: 46px 1fr; row-gap: 18px; }
  body.rules .tl-node { grid-column: 1; grid-row: 1; }
  body.rules .tl-text, body.rules .tl-row.tl-flip .tl-text { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 0 12px; }
  body.rules .tl-media, body.rules .tl-row.tl-flip .tl-media { grid-column: 2; grid-row: 2; padding-left: 12px; }
}
/* auto-placement do grid empurrava o lado invertido para uma segunda fileira (a coluna 3
   vinha antes da 1 na ordem do DOM): as três peças ficam presas na mesma fileira */
body.rules .tl-row > * { grid-row: 1; }
body.rules .tl-media > * { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* a regra do lead (§30 C) vencia por especificidade dentro da linha do tempo e abria
   52px entre o parágrafo e o link; a escala da etapa é própria */
body.rules main section.tl-sec .tl-wrap .tl-row .tl-text.tl-text.tl-text h2 { margin: 0 0 12px !important; }
body.rules main section.tl-sec .tl-wrap .tl-row .tl-text.tl-text.tl-text p { margin: 0 !important; margin-inline: 0 !important; }
body.rules main section.tl-sec .tl-wrap .tl-row .tl-text.tl-text.tl-text p:not(.tl-flip p) { margin-left: auto !important; }
body.rules main section.tl-sec .tl-wrap .tl-row.tl-flip .tl-text.tl-text.tl-text p { margin-left: 0 !important; margin-right: auto !important; }
body.rules main section.tl-sec .tl-wrap .tl-row .tl-text.tl-text.tl-text a { margin: 18px 0 0 !important; }

/* ============================================================
   43. CARROSSEL DE CORES — a troca é um acontecimento, não um fade
   Ela: "muito lento e sem graça, preciso de mais vida".
   ============================================================ */
.lo-canvas2 { --live-c: #ffffff; }
/* halo na cor da vez, atrás da peça */
.lo-canvas2::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 46%; translate: -50% -50%;
  width: 108%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--live-c), transparent 22%),
    color-mix(in srgb, var(--live-c), transparent 62%) 46%, transparent 74%);
  filter: blur(26px);
}
/* rastro fixo: a cor da vez fica marcando o fundo, bem de leve, mesmo parada */
.lo-canvas2::after {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 52%; translate: -50% -50%;
  width: 92%; aspect-ratio: 1.15; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--live-c), transparent 78%), transparent 70%);
  filter: blur(34px); transition: background .5s ease;
}
/* só a peça sobe de camada; o logo do peito continua absoluto (position: relative aqui
   tirava ele do chest e jogava no canto de baixo) */
.lo-canvas2 .lo-tee-live { position: relative; z-index: 1; }
.lo-canvas2 .lo-chest { z-index: 2; }
.lo-canvas2.is-pop::before { animation: tee-halo .8s cubic-bezier(.22,1,.36,1); }
.lo-canvas2.is-pop .lo-tee-live { animation: tee-pop .52s cubic-bezier(.22,1,.36,1); }
@keyframes tee-halo { 0% { opacity: 0; scale: .8; } 30% { opacity: 1; scale: 1.02; } 100% { opacity: 0; scale: 1.14; } }
@keyframes tee-pop  { 0% { transform: scale(.988); } 46% { transform: scale(1.014); } 100% { transform: scale(1); } }
/* a bolinha da vez marca a batida */
.lo-sw[aria-pressed="true"] { animation: sw-pop .42s cubic-bezier(.22,1,.36,1); }
@keyframes sw-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.lo-sw::after { transition: opacity .16s; }
/* o nome da cor troca junto, sem arrastar */
.lo-colorname { transition: opacity .18s; }
@media (prefers-reduced-motion: reduce) {
  .lo-canvas2.is-pop::before, .lo-canvas2.is-pop .lo-tee-live, .lo-sw[aria-pressed="true"] { animation: none; }
}

/* ============================================================
   44. CAMISETA 3D na launch-offer — a foto sai quando o modelo entra
   ============================================================ */
.lo-canvas2 .lo-tee-live canvas.tee3d { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.lo-canvas2 .lo-tee-live canvas.tee3d:active { cursor: grabbing; }
.lo-canvas2 .lo-tee-live.has-3d { aspect-ratio: 1; }
/* a foto tingida e o logo em HTML somem: quem manda agora é a malha e o decal */
.lo-canvas2 .lo-tee-live.has-3d > .lo-garment { display: none !important; }
.lo-canvas2:has(.lo-tee-live.has-3d) > .lo-chest { display: none !important; }

/* ============================================================
   45. BEEFY-T EMPILHADA — título, texto e então a peça, centrada e grande
   Pedido dela: "a camiseta merece ter mais destaque de layout".
   ============================================================ */
.lo-stack { display: flex; flex-direction: column; align-items: center; gap: 0; }
.lo-head { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
.lo-head .lo-eyebrow { margin: 0 0 10px !important; }
.lo-head h2 { margin: 0 0 18px !important; text-align: center !important; max-width: 20ch; margin-inline: auto !important;
  font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -.025em; }
.lo-head .lo-brands { justify-content: center; margin: 0 0 26px !important; }
.lo-head .lo-story { max-width: 66ch; margin: 0 auto; }
.lo-head .lo-story p { text-align: center; margin: 0 0 14px; font-size: 16px; line-height: 1.66;
  color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)); }
.lo-head .lo-story p:last-child { margin-bottom: 0; }
/* a peça: grande, centrada, com ar em volta */
.lo-stack .lo-canvas2 { width: 100%; margin: 52px 0 8px; }
.lo-stack .lo-canvas2 .lo-tee-live { width: min(620px, 100%); max-width: 620px; }
.lo-stack .lo-dots-row { margin-top: 18px; }
.lo-stack .lo-swatches { justify-content: center; }
/* os três números fecham a seção numa faixa só, com régua fina */
.lo-stack .lo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; max-width: 880px;
  margin: 48px auto 0; padding-top: 30px; border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)); }
.lo-stack .lo-fact { text-align: center; padding: 0 22px; }
.lo-stack .lo-fact + .lo-fact { border-left: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)); }
.lo-stack .lo-fact b { font-size: clamp(28px, 2.6vw, 36px); }
.lo-stack .lo-fact span { display: block; max-width: 24ch; margin: 6px auto 0; }
@media (max-width: 760px) {
  .lo-stack .lo-facts { grid-template-columns: 1fr; gap: 24px; }
  .lo-stack .lo-fact + .lo-fact { border-left: 0; }
  .lo-stack .lo-canvas2 { margin-top: 36px; }
}
/* enquanto o 3D carrega: o espaço fica reservado e a foto não aparece (nada de troca à vista) */
.lo-canvas2 .lo-tee-live.tee-loading { aspect-ratio: 1; position: relative; }
.lo-canvas2 .lo-tee-live.tee-loading > .lo-garment { visibility: hidden; }
.lo-canvas2:has(.lo-tee-live.tee-loading) > .lo-chest { display: none !important; }
.lo-canvas2 .lo-tee-live.tee-loading::after { content: ""; position: absolute; inset: 12% 18%; border-radius: 28px;
  background: linear-gradient(100deg, rgba(14,17,22,.03) 30%, rgba(14,17,22,.06) 50%, rgba(14,17,22,.03) 70%) 0 0 / 240% 100%;
  animation: tee-wait 1.5s linear infinite; }
@keyframes tee-wait { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .lo-canvas2 .lo-tee-live.tee-loading::after { animation: none; } }
/* a faixa fixa "Sign up and get a free T-shirt" some na própria launch-offer: a página É a oferta */
body.lo-page .announce { display: none !important; }

/* ============================================================
   46. RÉGUA DAS 48 HORAS — três marcos num fio, sem escala técnica
   A versão com dezenas de ticks lia como paquímetro; o dado é o marco, não a graduação.
   ============================================================ */
.lo-rail.lo-rail { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  height: auto; margin: 8px 0 30px; padding-bottom: 7px; overflow: visible; color: var(--ink, #0e1116); }
.lo-rail .rail-line, .lo-rail .rail-ink, .lo-rail .rail-tail { position: absolute; top: auto; bottom: 11px; height: 1px; }
.lo-rail .rail-line { left: 16.666%; width: 66.667%; background: color-mix(in srgb, currentColor, transparent 88%); }
.lo-rail .rail-ink { left: 16.666%; width: 33.333%; background: #3262EA; transform-origin: 0 50%; scale: 0 1;
  transition: scale 1.1s cubic-bezier(.22,1,.36,1) .15s; }
.is-in .lo-rail .rail-ink, .lo-rail.is-in .rail-ink { scale: 1 1; }
.lo-rail .rail-tail { left: 50%; width: 33.333%; background: none;
  border-top: 1px dashed color-mix(in srgb, #3262EA, transparent 55%); }
.lo-rail .rail-node { grid-column: var(--c); position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 0; }
.lo-rail .rail-node b { font: 200 clamp(26px, 2.6vw, 34px)/1 var(--font-poppins), system-ui; letter-spacing: -.04em;
  color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
.lo-rail .rail-node b small { font-size: .42em; font-weight: 400; letter-spacing: 0; margin-left: .12em; text-transform: none; }
.lo-rail .rail-node b u { text-decoration: none; font-weight: 200; }
.lo-rail .rail-node em { font: 500 10.5px/1 var(--font-poppins), system-ui; letter-spacing: .12em; text-transform: uppercase;
  font-style: normal; color: color-mix(in srgb, #6b7280, #9a9da8 calc(var(--k) * 100%)); margin-bottom: 12px; }
.lo-rail .rail-node i { width: 9px; height: 9px; border-radius: 50%; background: #3262EA; display: block;
  box-shadow: 0 0 0 4px color-mix(in srgb, #fff, #0b0d14 calc(var(--k) * 100%)); }
.lo-rail .rail-node:last-child i { background: color-mix(in srgb, #3262EA, transparent 45%); }
.lo-rail .tk, .lo-rail .rail-base, .lo-rail .rail-lbl, .lo-rail .rail-ticks { display: none !important; }
@media (max-width: 700px) { .lo-rail .rail-node em { letter-spacing: .06em; font-size: 9.5px; } }
/* a trilha "Home / … / …" sai de TODAS as páginas internas (só a exibição; a marcação,
   e com ela o dado estruturado, continua no HTML) */
/* só o breadcrumb: o índice do /blog também é um nav.text-sm, dentro de <aside>, e sumia */
body.rules main nav.text-sm:not(aside nav), body.lo-page main nav.text-sm:not(aside nav) { display: none !important; }

/* ============================================================
   47. HERO DA LAUNCH-OFFER — a peça grande, mas fora da coluna de texto
   Ela: a camiseta cresceu e passou por cima do texto; e a faixa escura de baixo
   tem de subir e cortar a barra da peça, como nos heros das outras páginas.
   ============================================================ */
body.lo-page .lo-stage { min-height: 660px; overflow: visible; }
/* a peça sangra para a DIREITA, nunca para dentro do texto */
body.lo-page .lo-tee.lo-tee { width: min(680px, 48vw) !important; max-width: none !important;
  margin-left: 0 !important; margin-right: clamp(-200px, -9vw, -60px); flex: 0 0 auto; }
body.lo-page .lo-stage::before { left: 58%; width: 620px; height: 620px; }
body.lo-page .lo-sel { left: 26%; top: 30%; width: 216px; }
/* a coluna de texto fica por cima em qualquer caso */
body.lo-page main section:first-of-type > div > div:first-child { position: relative; z-index: 3; }
/* a linha "artwork accepted · placement locked · print ready" sai do hero */
body.lo-page .lo-stage .lo-checks, body.lo-page .lo-checks-line { display: none !important; }
/* a faixa escura sobe e corta a barra da camiseta */
body.lo-page main section:first-of-type { padding-bottom: 0 !important; overflow: visible; }
body.lo-page main section.lo-press { position: relative; z-index: 2; }
/* o logo no peito estava pequeno para a peça nova: cresce e fica ancorado no centro dela
   (a camiseta sangra para a direita, então o box desloca junto, via margin — translate é do float) */
body.lo-page .lo-sel.lo-sel { width: 300px; left: 50%; margin-left: 0; top: 27%; }
body.lo-page .lo-sel .lo-sel-box { padding: 20px; }
/* o texto ficava baixo: o palco de 680px empurrava a linha central da fileira para baixo.
   O palco encolhe, a peça continua grande e o excedente dela é cortado pela faixa escura. */
/* o hero volta à altura cheia e com respiro igual em cima e embaixo; quem entra na faixa
   escura é a PEÇA (margem negativa), não o corte do padding da seção */
body.lo-page .lo-stage { min-height: 560px !important; }
body.lo-page main section:first-of-type > div { padding-top: 84px !important; padding-bottom: 84px !important; }
body.lo-page main section:first-of-type > div > div { align-self: center; }
body.lo-page .lo-tee.lo-tee { margin-bottom: -168px; }
/* "Your logo, on a shirt, on / us" deixava um órfão: o navegador equilibra as duas linhas */
body.lo-page main h1 { text-wrap: balance; max-width: 16ch; }
/* títulos das quatro regras: "…don't / qualify" deixava órfã, como o "us" do hero */
body.lo-page section.lo-list :is(h3, .font-bold) { text-wrap: balance; }

/* ---- features: o clipe original é um travelling que fecha no notebook e volta; usar o laço
   inteiro fazia o aparelho passar por cima do texto. O vídeo foi cortado no trecho em que a
   câmera já parou (a tela segue viva) e recortado no próprio objeto, então a caixa É o aparelho. ---- */
/* o vídeo não disputa espaço na fileira: é uma CAMADA por cima do hero, ancorada na borda
   direita. O texto mantém a medida dele e o travelling passa por cima na entrada. */
body.hero-features .hero-built { display: block !important; position: relative; }
body.hero-features .hero-copy-col { flex: none !important; max-width: 560px; position: relative; z-index: 1; }
/* o clipe novo é o notebook em laço: o objeto ocupa 6,7%→93,2% na largura e 8%→89,7% na
   altura do quadro, então a caixa é praticamente o aparelho e a escala é outra */
body.hero-features .hero-photo-col { position: absolute !important; right: -230px; top: 50%; translate: 0 calc(-50% + 60px);
  width: 700px !important; flex: none !important; z-index: 2; pointer-events: none; overflow: visible; }
body.hero-features :is(video.hero-video, img.hero-photo) { width: 100% !important; max-width: none !important; margin: 0 !important; }
@media (max-width: 1240px) { body.hero-features .hero-photo-col { width: 660px !important; right: -170px; } }
/* o vídeo é largo por causa do travelling: se ele disputar espaço na fileira, a coluna de texto
   encolhe. A coluna de texto passa a ter medida própria e o vídeo transborda para a direita. */


/* ============================================================
   48. BARRA DE SEÇÕES DE /features/ — trilho de vidro, não faixa
   Ela: a barra estava colada no hero e "péssima". Ganha respiro e vira a mesma
   peça de chrome da navegação: uma pílula de vidro centrada.
   ============================================================ */
body.rules .fbar.fbar { background: none !important; border: 0 !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; margin-top: 56px; padding: 10px 0; top: 74px !important; }
body.rules .fbar .fbar-in {
  width: fit-content; max-width: min(1080px, 100% - 48px); margin-inline: auto !important;
  height: auto !important; padding: 7px 10px !important; gap: 2px !important;
  border-radius: 999px; overflow: visible !important;
  background: color-mix(in srgb, rgba(255,255,255,.92), rgba(20,23,34,.82) calc(var(--k) * 100%));
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.07), rgba(255,255,255,.1) calc(var(--k) * 100%));
  box-shadow: 0 18px 40px -26px rgba(14,17,22,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
/* o chip "New in v3.0" some do meio do trilho e vira um marcador discreto à esquerda */
body.rules .fbar .fbar-chip.fbar-chip {
  background: color-mix(in srgb, rgba(50,98,234,.1), rgba(77,116,255,.18) calc(var(--k) * 100%)) !important;
  border-color: transparent !important; color: #3262EA !important;
  font-size: 12px !important; padding: 6px 12px !important; margin-right: 6px !important; }
body.rules .fbar .fbar-chip:hover { background: rgba(50,98,234,.16) !important; color: #24408f !important; }
body.rules .fbar .fbar-in > span[aria-hidden] { background: color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.14) calc(var(--k) * 100%)) !important; height: 18px !important; margin-right: 6px !important; }
/* links: um só peso, e o da seção lida ganha a pastilha */
body.rules .fbar .fbar-link.fbar-link {
  font-size: 13.5px !important; padding: 7px 14px !important; border-radius: 999px !important;
  color: color-mix(in srgb, #6b7280, #9a9da8 calc(var(--k) * 100%)) !important;
  transition: color .25s, background-color .25s; }
body.rules .fbar .fbar-link:hover { color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)) !important;
  background: color-mix(in srgb, rgba(14,17,22,.05), rgba(255,255,255,.08) calc(var(--k) * 100%)) !important; }
body.rules .fbar .fbar-link.is-on {
  color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)) !important;
  background: color-mix(in srgb, rgba(14,17,22,.06), rgba(255,255,255,.1) calc(var(--k) * 100%)) !important; }
@media (max-width: 860px) {
  body.rules .fbar .fbar-in { max-width: calc(100% - 24px); overflow-x: auto !important; justify-content: flex-start; }
  body.rules .fbar { margin-top: 36px; }
}

/* ============================================================
   49. /features/ — cada grupo abre com a tela real do produto (Alloy)
   ============================================================ */
body.rules .sec-shot { margin: 0 0 96px !important; padding: 0; position: relative; }
body.rules .sec-shot img { display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 50px 90px -52px rgba(14,17,22,.5), 0 2px 0 rgba(255,255,255,.6) inset;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.07), rgba(255,255,255,.08) calc(var(--k) * 100%)); }
body.rules .r-plate-dark .sec-shot img { border-color: rgba(255,255,255,.08); }
@media (max-width: 760px) { body.rules .sec-shot { margin-bottom: 36px !important; } }

/* ============================================================
   50. DESFOQUE PROGRESSIVO ATRÁS DO HEADER (todas as páginas)
   Cinco camadas: cada uma desfoca mais, clareia um pouco mais e usa a MESMA máscara,
   então desfoque e material se dissipam juntos — sem faixa cinza e sem linha de corte.
   ============================================================ */
.hdr-blur { position: fixed; inset: 0 0 auto 0; height: 96px; z-index: 39; pointer-events: none;
  opacity: 0; transition: opacity .4s ease; }
body.scrolled .hdr-blur { opacity: 1; }
/* sobre seção escura o material é a própria tinta escura da página, não cinza */
.hdr-blur span { position: absolute; inset: 0; display: block; }
.hdr-blur span:nth-child(1) { -webkit-backdrop-filter: blur(7px) saturate(1.25); backdrop-filter: blur(7px) saturate(1.25);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 48%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 48%); }
.hdr-blur span:nth-child(2) { -webkit-backdrop-filter: blur(4.5px) saturate(1.15); backdrop-filter: blur(4.5px) saturate(1.15);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 64%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 64%); }
.hdr-blur span:nth-child(3) { -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 80%); }
.hdr-blur span:nth-child(4) { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 92%); }
.hdr-blur span:nth-child(5) { -webkit-backdrop-filter: blur(.7px); backdrop-filter: blur(.7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); }
/* 2026-09-29 (Maarten): o véu era SÓ desfoque. Em navegador que não desenha backdrop-filter
   com máscara, o texto da página passava nítido por trás do logo e do "Log in"; e mesmo com o
   desfoque, ficava legível demais. Agora o véu carrega um degradê de material (branco; escuro
   sobre bloco escuro) por baixo das camadas de desfoque — o texto some na altura do header
   em qualquer navegador, e o desfoque continua dissipando do mesmo jeito. */
.hdr-blur::before { content: ""; position: absolute; inset: 0; display: block;
  background: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.90) 58%, rgba(255,255,255,.5) 80%, rgba(255,255,255,0) 100%); }
body.veil-dark .hdr-blur::before {
  background: linear-gradient(to bottom, rgba(9,11,20,.55) 0%, rgba(9,11,20,.5) 58%, rgba(9,11,20,.22) 80%, rgba(9,11,20,0) 100%); }
/* sobre bloco escuro o véu escurece — só o véu; logo, links e pílula não mudam por isso */
body.veil-dark .hdr-blur span:nth-child(1) { background: rgba(9,11,20,.42); }
body.veil-dark .hdr-blur span:nth-child(2) { background: rgba(9,11,20,.26); }
body.veil-dark .hdr-blur span:nth-child(3) { background: rgba(9,11,20,.14); }
body.veil-dark .hdr-blur span:nth-child(4) { background: rgba(9,11,20,.06); }
@media (prefers-reduced-motion: reduce) { .hdr-blur { transition: none; } }
/* sobre seção escura o material precisa de mais corpo: senão o branco de cima entra no
   desfoque e vira uma faixa cinza no topo da placa */
/* a barra de seções NUNCA inverte: é sempre a pílula branca, em qualquer fundo */
body.hdr-dark .fbar .fbar-in, body.veil-dark .fbar .fbar-in {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(14,17,22,.07) !important;
  box-shadow: 0 18px 40px -26px rgba(14,17,22,.4), inset 0 1px 0 rgba(255,255,255,.7) !important; }

/* ============================================================
   51. HEADER SOBRE BLOCO ESCURO — o véu escurece, a PÍLULA NÃO INVERTE
   Pedido dela, literal: sobre bloco escuro o blur preto está certo; o que não pode é a
   fonte da pílula virar branca. Fica preta, como na home.
   ============================================================ */
body.hdr-dark .sh .mainnav .navlink, body.hdr-dark .sh .mainnav .navlink:hover { color: #0e1116 !important; }
body.hdr-dark .sh .mainnav .navlink .car { color: #0e1116 !important; }
/* e a pílula segue clara, como na home */
body.hdr-dark .sh .navpill, body.hdr-dark .sh nav > div:first-child {
  background: rgba(255,255,255,.82) !important; border-color: rgba(255,255,255,.5) !important; }
body.hdr-dark .sh .navlink:hover { background: rgba(14,17,22,.06) !important; }

/* ============================================================
   52. CARTÃO DE RECURSO: SEM HOVER
   A regra genérica de cartão (§13) vence por especificidade e devolvia sombra e borda no
   hover — num cartão sem caixa isso vira um painel branco atrás do texto. Ela já pediu
   para tirar. Fica só a mudança de cor do link.
   ============================================================ */
body.rules main a.r-feat.r-feat.r-feat:hover, body.rules main .r-feat.r-feat.r-feat:hover {
  box-shadow: none !important; border-color: transparent !important; background: none !important;
  transform: none !important; }
body.rules main .r-feat.r-feat.r-feat:hover .r-ph {
  transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important; }
/* o que sai é a SOMBRA; o objeto continua crescendo no hover */
body.rules main .r-feat.r-feat.r-feat .r-ph-art { transition: transform .45s cubic-bezier(.22,.7,.2,1); }
body.rules main .r-feat.r-feat.r-feat:hover .r-ph-art { transform: scale(1.14) !important; }

/* ============================================================
   53. TURBO STORE — os três picks no mesmo molde
   Reproduz o que o produto mostra em cada passo: pergunta com visto no topo e, embaixo,
   o conteúdo do pick. Um só frame para os três, para ficarem padronizados.
   ============================================================ */
body.rules .pick { margin: 0 0 8px !important; padding: 24px; border-radius: 20px;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, #f6f4ff, #15161f calc(var(--k) * 100%));
  border: 1px solid color-mix(in srgb, rgba(124,58,237,.12), rgba(255,255,255,.08) calc(var(--k) * 100%));
  box-shadow: 0 26px 60px -44px rgba(38,20,80,.45); }
body.rules .pick-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
body.rules .pick-head b { font: 600 17px/1.2 var(--font-poppins), system-ui; letter-spacing: -.01em;
  color: color-mix(in srgb, #14121c, #f5f5f7 calc(var(--k) * 100%)); }
body.rules .pick-head i { margin-left: auto; font-style: normal; font-size: 13.5px;
  color: color-mix(in srgb, #7b7690, #9a9da8 calc(var(--k) * 100%)); }
body.rules .pick-check { width: 26px; height: 26px; border-radius: 50%; background: #7C3AED; flex: none; position: relative; }
body.rules .pick-check::after { content: ""; position: absolute; left: 8px; top: 7px; width: 6px; height: 11px;
  border: 2px solid #fff; border-top: 0; border-left: 0; rotate: 45deg; }
/* passo 1: a linha escolhida */
body.rules .pick-row { display: flex; align-items: center; gap: 16px; padding: 22px 18px; border-radius: 14px;
  background: color-mix(in srgb, #f1f0f4, #1b1c26 calc(var(--k) * 100%));
  border: 1px solid color-mix(in srgb, rgba(20,18,28,.08), rgba(255,255,255,.08) calc(var(--k) * 100%)); }
body.rules .pick-ico { width: 44px; height: 44px; border-radius: 12px; background: #7C3AED; color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; }
body.rules .pick-ico svg { width: 24px; height: 24px; }
body.rules .pick-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.rules .pick-txt b { font: 600 16px/1.2 var(--font-poppins), system-ui;
  color: color-mix(in srgb, #14121c, #f5f5f7 calc(var(--k) * 100%)); }
body.rules .pick-txt i { font-style: normal; font-size: 14px; line-height: 1.35;
  color: color-mix(in srgb, #6b6880, #9a9da8 calc(var(--k) * 100%)); }
body.rules .pick-chev { margin-left: auto; width: 11px; height: 11px; flex: none; rotate: 45deg;
  border: 2px solid color-mix(in srgb, #6b6880, #9a9da8 calc(var(--k) * 100%)); border-top: 0; border-left: 0; }
/* passo 2: as três faixas de qualidade */
body.rules .pick-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1; }
body.rules .pick-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 16px 12px; border-radius: 14px;
  background: color-mix(in srgb, #f1f0f4, #1b1c26 calc(var(--k) * 100%));
  border: 1px solid color-mix(in srgb, rgba(20,18,28,.08), rgba(255,255,255,.08) calc(var(--k) * 100%)); }
body.rules .pick-opt b { font: 600 16px/1.2 var(--font-poppins), system-ui;
  color: color-mix(in srgb, #14121c, #f5f5f7 calc(var(--k) * 100%)); }
body.rules .pick-opt i { font-style: normal; font-size: 13.5px;
  color: color-mix(in srgb, #6b6880, #9a9da8 calc(var(--k) * 100%)); }
body.rules .pick-opt.is-on { border-color: #7C3AED; background: color-mix(in srgb, #f3edff, #241c38 calc(var(--k) * 100%)); }
body.rules .pick-opt.is-on b { color: #7C3AED; }
/* passo 3: o logo travado */
body.rules .pick-drop { position: relative; display: flex; align-items: center; justify-content: center;
  flex: 1; min-height: 108px; padding: 26px 18px 22px; border-radius: 14px;
  background: color-mix(in srgb, #fff, #16171f calc(var(--k) * 100%));
  border: 1px solid color-mix(in srgb, rgba(20,18,28,.12), rgba(255,255,255,.1) calc(var(--k) * 100%)); }
body.rules .pick-logo { width: 148px; height: auto; }
body.rules .pick-lock { position: absolute; left: 14px; bottom: 12px; padding: 7px 14px 7px 28px; border-radius: 999px;
  background: #7C3AED; color: #fff; font: 600 11.5px/1 var(--font-poppins), system-ui; letter-spacing: .1em; text-transform: uppercase; }
body.rules .pick-lock::before { content: ""; position: absolute; left: 13px; top: 8px; width: 5px; height: 9px;
  border: 2px solid #fff; border-top: 0; border-left: 0; rotate: 45deg; }
body.rules .pick-file { position: absolute; right: 14px; bottom: 12px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(20,18,28,.14), rgba(255,255,255,.12) calc(var(--k) * 100%));
  font: 500 13px/1 var(--font-poppins), system-ui;
  color: color-mix(in srgb, #4b4860, #c2c4cb calc(var(--k) * 100%)); }
@media (max-width: 640px) { body.rules .pick-opts { grid-template-columns: 1fr; } }

/* ============================================================
   54. TURBO STORE — o botão "Create my store" em movimento
   Estados tirados da gravação dela: ocioso em gradiente roxo; rodando em quase preto com
   a barra roxa crescendo, rótulo e porcentagem; e a legenda acompanhando embaixo.
   ============================================================ */
body.rules .tsb-wrap { margin: 34px 0 6px; }
body.rules .tsb { position: relative; display: flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 22px; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: #0f0b18; box-shadow: 0 22px 50px -30px rgba(76,29,149,.75); }
body.rules .tsb::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px); }
/* a barra que cresce */
body.rules .tsb-fill { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, #4c1d95 0%, #7c3aed 55%, #a855f7 100%); transition: width .12s linear; }
body.rules .tsb[data-on="idle"] .tsb-fill { width: 100% !important; transition: none; }
/* estado ocioso: rótulo centrado com raio e seta */
body.rules .tsb-idle { position: relative; z-index: 2; display: none; align-items: center; gap: 12px;
  font: 700 19px/1 var(--font-poppins), system-ui; color: #fff; letter-spacing: -.01em; }
body.rules .tsb[data-on="idle"] .tsb-idle { display: flex; }
body.rules .tsb-bolt, body.rules .tsb-arrow { width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
body.rules .tsb-bolt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E"); }
body.rules .tsb-arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
/* estado rodando: giro, rótulo à esquerda, porcentagem à direita */
body.rules .tsb-run { position: relative; z-index: 2; display: none; align-items: center; gap: 14px; width: 100%;
  font: 700 18px/1 var(--font-poppins), system-ui; color: #fff; letter-spacing: -.01em; }
body.rules .tsb[data-on="run"] .tsb-run { display: flex; }
body.rules .tsb-run em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
body.rules .tsb-spin { width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: tsb-spin .9s linear infinite; }
@keyframes tsb-spin { to { rotate: 360deg; } }
body.rules .tsb-cap { text-align: center; margin: 14px 0 0 !important; font-size: 15px !important;
  color: color-mix(in srgb, #6b6880, #9a9da8 calc(var(--k) * 100%)) !important; }
@media (prefers-reduced-motion: reduce) { body.rules .tsb-spin { animation: none; } }
/* fecho da animação: o estado de sucesso, senão ela termina em lugar nenhum */
body.rules .tsb-done { position: relative; z-index: 2; display: none; align-items: center; gap: 12px;
  font: 700 19px/1 var(--font-poppins), system-ui; color: #fff; letter-spacing: -.01em; }
body.rules .tsb[data-on="done"] .tsb-done { display: flex; animation: tsb-pop .45s cubic-bezier(.22,1,.36,1); }
body.rules .tsb[data-on="done"] .tsb-fill { background: linear-gradient(90deg, #15803d 0%, #16a34a 55%, #22c55e 100%); }
body.rules .tsb-tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(255,255,255,.18);
  position: relative; }
body.rules .tsb-tick::after { content: ""; position: absolute; left: 8px; top: 6px; width: 6px; height: 11px;
  border: 2.2px solid #fff; border-top: 0; border-left: 0; rotate: 45deg; }
@keyframes tsb-pop { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.rules .tsb[data-on="done"] .tsb-done { animation: none; } }

/* ============================================================
   55. TURBO STORE — os três picks deixam de ser uma massa só
   Placa lilás fora, conteúdo no fundo da página, e cada passo separado por fio fino,
   com o numeral fino na margem esquerda fazendo o papel de marcador.
   ============================================================ */
body.rules .picks-flat { background: transparent !important; }
/* cada passo é UMA unidade lida da esquerda para a direita: as palavras numa coluna,
   o painel do produto na outra, centrado. Antes era uma pilha de cinco blocos do mesmo
   peso ocupando a largura toda, e o painel boiava no meio do branco. */
body.rules .pick-step { padding: 52px 0 !important; position: relative;
  display: grid !important; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  column-gap: 60px; align-items: start; }
body.rules .pick-step > * { grid-column: 1; }
body.rules .pick-step > .pick { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0 !important; }
body.rules .pick-step-first { padding-top: 8px !important; }
body.rules .pick-step-next { border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.1) calc(var(--k) * 100%)); }
/* o numeral vira marcador fino, e o título ganha a linha inteira */
body.rules .pick-step > .flex:first-child { display: grid !important; grid-template-columns: 76px minmax(0, 1fr);
  align-items: center; gap: 0 !important; margin-bottom: 18px !important; }
body.rules .pick-step > .flex:first-child > div:first-child {
  width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important;
  font: 200 clamp(38px, 4vw, 52px)/1 var(--font-poppins), system-ui !important; letter-spacing: -.05em !important;
  /* o numeral já vinha com preenchimento transparente (recorte de gradiente da §29) e por
     isso a célula parecia vazia; aqui ele volta a ser tinta chapada */
  -webkit-text-fill-color: color-mix(in srgb, rgba(14,17,22,.26), rgba(255,255,255,.32) calc(var(--k) * 100%)) !important;
  color: color-mix(in srgb, rgba(14,17,22,.26), rgba(255,255,255,.32) calc(var(--k) * 100%)) !important;
  justify-content: flex-start !important; box-shadow: none !important; }
body.rules .pick-step > .flex:first-child h3 { font-size: clamp(21px, 2vw, 26px) !important; letter-spacing: -.02em; }
body.rules .pick-step > p { max-width: 54ch; }

@media (max-width: 900px) {
  body.rules .pick-step { grid-template-columns: 1fr !important; row-gap: 26px; padding: 38px 0 !important; }
  body.rules .pick-step > .pick { grid-column: 1; grid-row: auto; }
  body.rules .pick-step > .flex:first-child { grid-template-columns: 54px minmax(0, 1fr); }
}
/* o painel do pick dentro da linha do tempo: sem a moldura da placa de ilustração */
body.rules .tl-media-pick .pick { width: 100%; margin: 0 !important; }
/* a linha do tempo fora da seção .tl-sec: sem posição relativa no envoltório, o fio caía
   no centro da SEÇÃO (720px) em vez do centro do trilho (540px) */
body.rules .tl-wrap { position: relative; }
body.rules .tl-wrap::before { top: 34px; bottom: 34px; }
body.rules section.tl-sec > .tl-wrap::before { top: calc(88px + 34px); bottom: calc(88px + 34px); }
/* a dica dentro da coluna alinhada à direita: a régua azul acompanha o lado do texto */
body.rules .tl-row:not(.tl-flip) .tl-text :is(.r-note, .bn) {
  border-left: 0 !important; border-right: 2px solid #3262EA !important;
  border-radius: 8px 0 0 8px !important; padding-right: 14px !important; padding-left: 0 !important; }

/* ============================================================
   56. ORDER BUILDER — três seções saem da faixa de números e precisam pousar
   O detector de estatísticas engolia metade da página (ver o bloco OB no §16 do JS). Com elas de volta
   ao passe normal, sobraram três defeitos de geometria que a medição apontou.
   ============================================================ */

/* A · Colunas dentro de seção dividida: topo, nunca centro.
   A regra do split (texto + mídia) centraliza qualquer grid filho com !important, e pegava
   também a grade de colunas. Medido na placa grafite: títulos da 1ª fileira em 2147/2160 e
   da 2ª em 2513/2540 — 13px e 27px de degrau, e o fio de fileira partido em dois segmentos
   deslocados. `body.rules .r-cols { align-items: stretch }` já dizia a intenção; só perdia
   em especificidade. Vale para as duas páginas que têm o par (order-builder e design-tool). */
body.rules .r-split > div > div.r-cols.r-cols,
body.rules .r-split > div > div > div.r-cols.r-cols { align-items: start !important; }

/* B · Passos numerados dentro da placa: caixa dentro de caixa.
   A mesma anatomia aparece duas vezes nesta página — lista de passos ao lado de uma placa de
   ilustração. Na seção "Colorways" as linhas são `flex gap-4` limpas; na "On-demand pricing"
   elas carregam a moldura de cartão do markup original (`rounded-2xl border p-6`), que sobre a
   placa lilás vira retângulo branco sobre lilás. Medido: fundo `srgb 1 1 1`, borda 1px, 4 caixas
   de 512×171. Aqui o critério é o da seção já aprovada ao lado: a linha perde a caixa. */
body.ob :is(.r-plate, .r-plate-dark) div[class*="space-y"] > div[class*="rounded-2xl"] {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; box-shadow: none !important;
}
/* sem os 24px de padding interno as linhas encostam umas nas outras: o respiro volta como ritmo */
body.ob :is(.r-plate, .r-plate-dark) div[class*="space-y"] > div[class*="rounded-2xl"] + div[class*="rounded-2xl"] {
  margin-top: 30px !important;
}

/* C · Cartões-link fora da placa ("What it connects to"): a caixa branca sobre fundo branco.
   Com as três seções de volta ao rodízio, esta virou `r-plain` e os `<a>` voltaram a ser
   cartões (fundo `srgb 1 1 1`, borda 1px) no branco da página. O passe §34 do JS os converte
   em colunas de fio fino (janela de 2–6 filhos, e também em seção branca, só nesta página); aqui só se
   garante que o link de rodapé feche na mesma linha de base. */
body.ob .r-plain .r-cols > .r-col { display: flex !important; flex-direction: column; }
body.ob .r-plain .r-cols > .r-col > span:last-child { margin-top: auto; }

/* D · Índice da coluna: 10,5px transparentes não são um índice.
   A regra do sobrancelho no cabeçalho da coluna (`.r-col-head > :is(span, p)`, §30) força 10,5px em
   caixa alta; o índice desta seção é um `span.num`, que já vem com `color: transparent` + degradê em
   `background-clip: text`. Medido: 17×17px em 10,5px contra os 40px/48px das mesmas numerações nas
   seções irmãs — três algarismos invisíveis num cabeçalho de 64px. Aqui ele volta à escala do numeral. */
body.ob .r-plain .r-col-head > span.num {
  font-size: 40px !important; line-height: 1.2 !important; font-weight: 200 !important;
  letter-spacing: -.04em !important; text-transform: none !important;
}

/* ---- turbo-store: o objeto é alto e estreito (o telefone ocupa 20,7%→80,9% na largura e
   9,1%→91,4% na altura), então a escala é própria — o pé some atrás da faixa escura ---- */
body.hero-features-turbo-store video.hero-video, body.hero-featuresturbo-store video.hero-video {
  width: 740px !important; margin: -67px -170px -124px -190px !important; }

/* ============================================================
   57. HERO DA ORDER-BUILDER — o iMac à direita
   ============================================================
   Mesmo molde do hero da /features/: a coluna da mídia sai da fileira (`absolute`) em vez de
   disputar largura com o texto. Medido antes: com o vídeo na fileira, a coluna de texto caía de
   696px para 590px de borda direita e o título quebrava em duas linhas curtas.
   O objeto ocupa 17,0%→82,9% na largura e 17,2%→78,8% na altura do quadro — bem menor que a
   moldura, então a caixa vazia pode passar por trás do texto; o aparelho para antes dele. */
body.hero-featuresorder-builder .hero-photo-col { flex: 0 0 480px !important; width: 480px !important; overflow: visible; }
body.hero-featuresorder-builder video.hero-video { width: 760px !important; margin: -60px -180px -110px 0 !important; }
@media (max-width: 1240px) { body.hero-featuresorder-builder video.hero-video { width: 640px !important; margin-right: -90px !important; } }

/* ---- a placa escura da order-builder é uma seção de PROSA ----
   Medido: o lead saía tinta (#3b404b) dentro do preto. A regra do lead da prosa
   (`body.rules .r-prose.r-prose h2 + p`, 0,4,2) ganha da regra da placa escura (0,3,2), então
   subir a cor ali seria uma terceira camada de `!important`. Mas aquela cor já é uma mistura
   guiada por `--k` (0 = fundo claro, 1 = fundo escuro): a placa só precisa declarar que, ali
   dentro, o fundo é escuro — e o lead, os separadores e o resto seguem sozinhos. */
body.rules section.r-prose.r-plate-dark { --k: 1; }

/* ---- a barra de seções no formato de PÁGINAS (/suppliers/ e as cinco irmãs) ----
   Os itens vinham como aba: `border-b-2` com risco azul no ativo, `pt-4 pb-3` e a fileira
   alinhada pela base (`items-end`), dentro de uma tira com `overflow-x-auto` — a barra de
   rolagem aparecia numa fileira de 1152px que nem precisava rolar. No trilho de vidro o
   ativo é a pastilha, então o risco sai e a fileira centra. */
body.rules .fbar .fbar-in { align-items: center !important; }
body.rules .fbar a.fbar-link { border: 0 !important; margin-bottom: 0 !important; }

/* ---- destaque do menu Solutions: a reserva 16:9 vira foto sobre o lilás da casa ----
   O assunto é quase quadrado (3918×4096) numa caixa 16:9: em vez de `cover`, que cortaria
   os rostos, a foto entra pela largura e sangra na base, como nos heros. */
.promo-shot-box {
  aspect-ratio: 16 / 9; width: 100%; border: 0 !important; border-radius: 14px;
  overflow: hidden; position: relative; display: block; padding: 0 !important;
  background: color-mix(in srgb, #eef1fb, #0c1020 calc(var(--k) * 100%));
}
.promo-shot {
  /* o topo encosta em 0: medido, o cabelo do primeiro modelo começa a 2% do quadro, e com
     qualquer recuo negativo ele era cortado. O corte fica todo na base, nas pernas. */
  position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 72%; height: auto; display: block;
}

/* fileira de pastilhas da família /suppliers/: centrada sob o título, que já é centrado */
body.rules .sup-row-center { justify-content: center !important; }

/* ---- CARTÃO BRANCO DENTRO DE PLACA PRETA ----
   Medido nas seis páginas de /suppliers/ depois de trocar a placa lilás por preta: os cartões
   `rounded-2xl bg-white` continuavam brancos enquanto a regra da placa escura pintava o texto
   deles de branco — bloco branco vazio, conteúdo invisível. Na gramática da casa a placa escura
   não carrega caixa branca: a superfície vira um painel leitoso sobre o escuro. */
body.rules .r-plate-dark [class*="bg-white"]:not([class*="bg-white/"]) {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* A fileira de estados cabe em UMA linha. Medido em /suppliers/, onde ela vive numa coluna de
   592px: as cinco pastilhas pediam 648px e a última caía sozinha na segunda linha — a mesma
   quebra órfã que já foi reprovada em outra página. Folga de 4px no vão e 5px de cada lado da
   pastilha devolvem 66px, e as cinco entram. Onde já cabia, só fica um pouco mais compacta. */
body.rules .sup-row-center { gap: 4px !important; }
body.rules .sup-row-center [class*="rounded-full"] { padding-left: 9px !important; padding-right: 9px !important; }

/* ---- MENU: o item destacado é AZUL, nunca branco ----
   Medido reproduzindo o caso dela: com a página rolada até a faixa escura (`--k: 1`), o painel do
   menu continua CLARO (`rgba(255,255,255,.86)`), mas os títulos dos itens seguem o `--sh-ink`, que
   acompanha o `--k` — o item em destaque virava #f4f4f6 sobre painel claro e sumia. O painel é
   sempre claro, então a tinta dele também é: e o destaque passa a ser o azul da marca, que é o que
   marca seleção no resto do sistema. */
.sh .mega .item .t { color: #0e1116 !important; }
.sh .mega .item .d { color: #565c68 !important; }
.sh .mega .item:hover .t { color: #2f52d8 !important; }
/* O DESTAQUE MARCA A PÁGINA ATUAL, não um item fixo. O `.item-feature` é uma variante de estilo do
   próprio site — moldura azul clara permanente no "Why Brikl" — e lida como seleção: estando na
   Marketplace, o destaque continuava no Why Brikl. Ele perde a aparência de selecionado, e quem a
   recebe é o item cujo href bate com o caminho atual (`.is-here`, marcado no components.js). */
.sh .mega .item.item-feature { background: transparent !important; border-color: transparent !important; }
/* o hover vem DEPOIS de propósito: `.item-feature` e `.item:hover` têm a mesma especificidade, então
   quem vence é a ordem — e no CSS do próprio site o `item-feature` vinha depois, o que já fazia o
   primeiro item não acender no hover como os outros. Aqui o hover ganha, para todos. */
.sh .mega .item:hover { background: var(--sh-hover) !important; }
/* a página atual mantém a própria marca mesmo sob o cursor: vem por último */
.sh .mega .item.is-here, .sh .mega .item.is-here:hover {
  background: color-mix(in srgb, #2f52d8 8%, transparent) !important;
  border-color: color-mix(in srgb, #2f52d8 22%, transparent) !important; }
.sh .mega .item.is-here .t { color: #2f52d8 !important; }

/* ---- hero da drinkware ----
   A imagem trocou: era só a garrafa (2397×3682, alta e estreita, que pedia quadro de 432px e um
   empurrão para a esquerda) e passou a ser garrafa + caneca (4697×3682, deitada). Objeto deitado
   volta à âncora da família: quadro de 800px, sem deslocamento, sangrando à direita como as peças
   de roupa. Fica registrado o que a versão vertical ensinou: objeto alto e estreito pesa mais com
   menos altura, e a margem lateral aqui rende quase 3× porque também devolve largura ao texto. */
body.hero-print-on-demand-tumblers img.hero-photo { width: 800px !important; }

/* ---- hero da outerwear: o jaquetão é retrato e preenche o quadro inteiro ----
   Arquivo 2074×2868 com envelope de 0 a 1 nos dois eixos: no quadro padrão de 716px o objeto sairia
   com 988px de altura, o mesmo excesso que a garrafa vertical teve. Pela régua que ficou de lá
   (objeto alto pede menos altura), 520px de quadro entregam ~719px — a faixa das peças de roupa já
   aprovadas (polo 670, camiseta 736, moletom 754). */
body.hero-custom-outerwear img.hero-photo { width: 520px !important; }

/* ---- hero da bags: duas sacolas lado a lado, quadro bem deitado ----
   Arquivo 8400×5798 com objeto ocupando quase todo o quadro (0,8%→99% na largura). Aqui a régua da
   ALTURA não serve: para chegar aos ~620px das peças de roupa o quadro teria de ir a 908px e o
   objeto invadiria a coluna de texto, porque não há moldura vazia para passar por trás dela. Objeto
   muito deitado é limitado pela LARGURA disponível: 780px de quadro param a sacola pouco depois do
   texto. Fica com 540px de altura, na mesma faixa da drinkware deitada (585). */
body.hero-custom-bags img.hero-photo { width: 780px !important; }

/* ---- hero da /medical/: sem faixa preta, a foto não pode sangrar ----
   A regra genérica do hero de foto tem `margin-bottom: -150px`: o pé da peça entra por trás da
   faixa de números, que é o que ancora a imagem nas 18 páginas de categoria. A /medical/ não é do
   conjunto e não tem faixa — medido, a peça invadia exatamente 150px sobre o texto da seção
   seguinte. Sem âncora, não há sangramento: a margem vai a zero e o hero contém a foto. */
body.hero-medical img.hero-photo { margin-bottom: 0 !important; }

/* ---- hero da electronics: muita moldura vazia em volta do objeto ----
   Medido: alfa de só 22,3% do arquivo, com o objeto em 26,6%→84,2% na largura e 8,1%→88,5% na
   altura. No quadro padrão de 716px os aparelhos sairiam com 412×469 — pequenos ao lado das outras
   peças. O quadro cresce para 940px para o objeto chegar aos ~620px de altura da família; a moldura
   vazia passa por trás do texto, que é o comportamento previsto do componente. */
body.hero-electronics img.hero-photo { width: 940px !important; margin-left: -224px !important; }
/* Os 224px negativos à esquerda são a diferença entre 940 e os 716 do padrão: sem eles a caixa mais
   larga rouba medida da coluna de texto — medido, a borda do texto caía de 670 para 461 e o título
   quebrava em cinco linhas curtas. É o mesmo conserto do hero da order-builder: a caixa contribui
   com a largura de sempre no layout e transborda para a direita na pintura. */

/* hero da paper-print: no quadro padrão o objeto sai com 606px de altura, um pouco abaixo da faixa
   da família (620–754); 740px de quadro colocam em 623. Diferença pequena o bastante para não
   espremer a coluna de texto, por isso não precisa da margem negativa da electronics. */
body.hero-paper-print-products img.hero-photo { width: 620px !important; margin-bottom: -50px !important; }
/* E quase sem sangramento. Nas peças de roupa o corte da faixa pega barra e punho, que não têm
   informação; aqui ele comia o "brikl" impresso no pôster, que é o assunto. Medido: com os -150px
   do padrão a faixa subia 96px dentro do pôster. Com -50 ela encosta na base do quadro e o
   wordmark fica inteiro. */

/* ---- hero da signage: quadro deitado com 28,5% de alfa ----
   O objeto começa a 20,2% da largura do quadro, então crescer o quadro empurra o banner para a
   ESQUERDA, contra o texto: para chegar aos ~620px de altura o quadro iria a 985px e sobrariam 4px
   de folga. É o caso limitado pela largura (como a bags): 890px param o banner em 750, com 80px de
   folga, e os 174px negativos à esquerda evitam que a caixa larga roube medida do texto. */
body.hero-custom-signage img.hero-photo { width: 890px !important; margin-left: -174px !important; }

/* hero da pens: estojo deitado, limitado pela largura como a bags — para chegar aos 600px de altura
   o quadro iria a 920px e o estojo começaria em 613, atrás do texto. 754px param em 750. */
body.hero-custom-pens img.hero-photo { width: 754px !important; }

/* ---- hero da /pet-products/: o único assunto que não pode sangrar ----
   O envelope do cachorro é 813×1616 — proporção 0,50 contra os 0,72 da outerwear, o recorde
   anterior. Quem manda é a ALTURA: o objeto sai com 380×755, dentro da faixa da família (moletom
   754, sport 758). No quadro padrão de 716 ele iria a 1423 e este hero teria o dobro da altura de
   todos os irmãos.
   Os 351px de alfa vazio à direita do arquivo (813 de 1164) compram o sangramento de volta. A borda
   direita do quadro está presa em coluna-direita + 196 em todas as páginas, então entre 1101 e 1440
   o que passa da janela vai de 164px a 20px — medido na outerwear a 1150, um terço do casaco some.
   Numa peça de roupa isso lê como corte proposital; num animal, como erro. Com 164px de margem
   vazia o quadro vai a 380 + 164 = 544 e a borda direita do cachorro cai EXATAMENTE na margem do
   container em 1440, 1280 e 1101 — alinhado à grade em vez de pendurado fora dela.
   O sangramento na base cai de -150 para -60 pelo mesmo motivo da paper-print: nas roupas o corte
   pega barra e punho, que não dizem nada; aqui os 150px de baixo são as patas da frente, e um
   cachorro sentado sem elas parece afundando. */
body.hero-pet-products img.hero-photo { width: 544px !important; margin-bottom: -60px !important; }

/* ---- hero da /toys/: espremido pelos dois lados ----
   Os três ursos são 547×383 — proporção 1,43, a mesma forma da bags — então quem manda é a
   LARGURA. A primeira tentativa seguiu a faixa dos objetos deitados ao pé da letra (760, ao lado dos
   780 da bags) e o urso da esquerda pousou em cima da palavra "inventory": a foto pinta ACIMA da
   coluna de texto (z-index 1 contra auto) e, ao contrário da electronics e da signage, este arquivo
   não tem alfa vazio à esquerda para o texto passar por trás.
   São dois limites ao mesmo tempo. À direita, a regra da pet-products: um urso partido pela borda
   da janela lê como erro, então o arquivo carrega alfa vazio (89px de 636) e o grupo para antes do
   sangramento. À esquerda, o texto: medida a 1440, a borda direita da coluna é 696, então o objeto
   não pode começar antes de ~716. 640 é o que cabe entre os dois, com 20px de folga do texto e 24px
   dentro da janela; a altura sai em 448. Fica abaixo da faixa (714–780) de propósito: três ursos
   separados preenchem a caixa muito mais do que uma sacola. O que sobra de sangramento são 60px a
   1101 — a borda do braço do urso da direita, corte e não amputação. */
body.hero-toys img.hero-photo { width: 744px !important; margin-left: -28px !important; margin-bottom: -40px !important; }

/* ============================================================
   PAINÉIS DE HISTÓRIA nas internas (.story-x) — /our-partners "Featured partner",
   /branded-stores "Fundraising": o painel de vidro do Business Card com uma FOTO à direita
   ============================================================ */
body.rules .story-x .story-media-x { display: grid !important; place-items: center; min-height: 0 !important; position: static !important; overflow: visible !important; }
body.rules .story-x .story-media-x img.story-photo { position: static !important; width: 100% !important; height: auto !important; max-width: none !important;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block;
  box-shadow: 0 30px 60px -30px rgba(15,20,35,.35), 0 4px 10px rgba(15,20,35,.08); }
/* fundraising: enquanto a foto não chega, o ícone de linha fica grande e discreto no painel */
body.rules .story-x .story-media-x > svg { width: 128px; height: 128px; color: #3262EA; opacity: .5; }
body.rules .story-x .story-copy-x ul { margin: 0 0 22px !important; }
body.rules .story-x .story-copy-x ul li { color: color-mix(in srgb, #3b404b, #c9ccd6 calc(var(--k) * 100%)); font-size: 15px; }
body.rules .story-x .story-copy-x ul li > span:first-child { color: #3262EA; }
/* a caixinha branca do logo do parceiro vira uma marca solta, sem caixa */
body.rules .story-x .story-copy-x span.bg-white { background: none !important; padding: 0 !important; margin: 0 0 18px !important; display: block; }
body.rules .story-x .story-copy-x span.bg-white img { height: 30px !important; width: auto !important; }
/* declaração no lead da /sustainability: a declaração da camada é alinhada à esquerda e larga; o
   parágrafo que a segue acompanha (a regra de lead centrado o deixava centrado e estreito) */
body.rules main section.r-plain.r-plain.r-plain:has(> div > .lead-statement) > div > p {   /* só a declaração do lead: qualquer .r-statement dentro da seção (why-brikl) puxava o lead para a esquerda */ text-align: left !important; margin-inline: 0 !important; max-width: 68ch !important; }   /* classe repetida: empata e vence a regra do lead centrado (0,5,4) */
/* fundraising: o ícone de vidro que ocupa o lugar da foto fica com presença, não um selo */
body.rules .story-x .story-media-x img.gi { width: 168px !important; height: 168px !important; max-width: none !important; }

/* ============================================================
   CARTÃO DE VIDRO (.r-glass-card) — o material do painel de história aplicado a um card inteiro.
   Duas metades lado a lado (why-brikl): mesma altura, placa de imagem no pé.
   ============================================================ */
body.rules main .grid.r-glass-grid { align-items: stretch !important; }
body.rules main .r-glass-card.r-glass-card.r-glass-card {
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 28px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  padding: 40px 40px 0 !important; display: flex !important; flex-direction: column; overflow: hidden; }
body.rules main .r-glass-card > .r-ph { margin: auto -40px 0 !important; border-radius: 0 !important; width: calc(100% + 80px) !important; max-width: none !important; }
body.rules main .r-glass-card > .r-ph:not(:first-child) { margin-top: 28px !important; }
body.rules main .r-glass-card > *:not(.r-ph) + .r-ph { margin-top: auto !important; padding-top: 0; }

/* ============================================================
   BLOG (índice) — padrão Apple Newsroom (2026-09-29, pedido dela): chips de tópico no topo (sem
   coluna lateral), destaque no painel de vidro de história, grade de três tiles: placa 16:9 com o
   objeto de vidro escolhido pelo título (ou a foto de capa, se o post tiver `cover`), categoria em
   versalete, título de 20px em até três linhas, resumo em duas, data · autor.
   ============================================================ */
body.rules .blog-art { --bt1: #eef1fb; --bt2: #e3e9fa; }   /* os tons vivem na própria placa: no artigo não há .blog-index, e a placa ficava sem fundo */
body.rules .blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
body.rules .blog-chip { appearance: none; border: 1px solid var(--gl-border); background: var(--gl-bg); border-radius: 999px;
  padding: 9px 14px 9px 16px; font: 500 14px/1 var(--font-poppins), system-ui; color: #3b404b; display: inline-flex; gap: 8px;
  align-items: center; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
  -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
body.rules .blog-chip:hover { border-color: rgba(14,17,22,.22); }
body.rules .blog-chip[data-active] { background: #0e1116; color: #fff; border-color: #0e1116; }
body.rules .blog-chip-n { font-size: 12px; opacity: .55; }
body.rules a.blog-featured { display: grid; margin: 0 0 48px !important; text-decoration: none; color: inherit; }
body.rules .blog-featured .story-copy-x h2 { color: #0e1116 !important; }
body.rules .blog-featured .story-media-x { display: grid; place-items: center; min-height: 0 !important; }
body.rules .blog-art { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.9), transparent 60%), linear-gradient(160deg, var(--bt1) 0%, var(--bt2) 100%); }
body.rules .blog-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(52% 44% at 50% 52%, rgba(120,150,255,.26), transparent 70%); }
body.rules .blog-art img.gi { position: relative; width: 30%; max-width: 150px; height: auto; filter: drop-shadow(0 22px 34px rgba(24,32,84,.22));
  transition: transform .6s cubic-bezier(.22,1,.36,1); }
body.rules .blog-featured .blog-art img.gi { width: 36%; max-width: 200px; }
body.rules .blog-tile:hover .blog-art img.gi, body.rules .blog-featured:hover .blog-art img.gi { transform: translateY(-4px) scale(1.04); }
body.rules .blog-art.has-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* seis tons claros que se revezam pela grade — a mesma família das nuvens do site */
body.rules .blog-grid > :nth-child(6n+2) .blog-art { --bt1: #eaf3fb; --bt2: #dbeafb; }
body.rules .blog-grid > :nth-child(6n+3) .blog-art { --bt1: #eef7f2; --bt2: #dff0e7; }
body.rules .blog-grid > :nth-child(6n+4) .blog-art { --bt1: #f5eefb; --bt2: #ebe0fa; }
body.rules .blog-grid > :nth-child(6n+5) .blog-art { --bt1: #fbf1ea; --bt2: #f8e6d8; }
body.rules .blog-grid > :nth-child(6n+6) .blog-art { --bt1: #f2f3f7; --bt2: #e6e8ef; }
body.rules .blog-grid.blog-grid { gap: 44px 28px !important; }
body.rules a.blog-tile { display: block; text-decoration: none; color: inherit; }
body.rules .blog-kicker { font: 600 11px/1.3 var(--font-poppins), system-ui !important; letter-spacing: .12em !important; text-transform: uppercase;
  color: #3262EA !important; margin: 18px 0 8px !important; text-align: left !important; display: flex; gap: 8px; }
body.rules .blog-featured .blog-kicker { margin: 0 0 16px !important; }
body.rules .blog-kicker-sep { opacity: .5; }
body.rules .blog-title { font: 600 20px/1.3 var(--font-poppins), system-ui !important; letter-spacing: -.01em !important; color: #0e1116 !important;
  margin: 0 0 8px !important; text-align: left !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.rules .blog-tile:hover .blog-title { color: #3262EA !important; }
body.rules .blog-excerpt { font: 400 15px/1.55 var(--font-poppins), system-ui !important; color: #565c68 !important; margin: 0 0 10px !important;
  text-align: left !important; max-width: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.rules .blog-featured .blog-excerpt { font-size: 17px !important; line-height: 1.6 !important; -webkit-line-clamp: 3; margin: 0 0 14px !important; }
body.rules .blog-meta { font: 400 13px/1.4 var(--font-poppins), system-ui !important; color: #838a97 !important; margin: 0 !important; text-align: left !important; }
body.rules .blog-featured .blog-meta { margin: 0 0 20px !important; }
body.rules .blog-more { color: #3262EA; font-weight: 600; font-size: 15px; }
body.rules .blog-empty { color: #838a97; text-align: center; padding: 40px 0; }
@media (max-width: 640px) { body.rules .blog-grid.blog-grid { gap: 32px !important; } }
body.rules section.blog-sec.blog-sec { background: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.rules section.blog-sec > div { padding-top: 8px !important; }

/* ============================================================
   BLOG (artigo) — padrão Apple Newsroom: kicker (Blog · categoria · data), título, dek, arte,
   corpo em coluna única de 19px com subtítulos à esquerda, autor em linha, "More from the blog".
   ============================================================ */
body.rules .post section.post-head, body.rules .post section.post-body-sec, body.rules .post section.post-more {
  background: none !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
body.rules .post section > .r-cloud { display: none !important; }
body.rules .post .post-kicker { display: flex; gap: 10px; align-items: center; font: 600 12px/1.3 var(--font-poppins), system-ui !important;
  letter-spacing: .1em !important; text-transform: uppercase; color: #3262EA !important; margin: 0 0 22px !important; text-align: left !important; }
body.rules .post .post-kicker a { color: inherit; text-decoration: none; }
body.rules .post .post-kicker time { color: #838a97; letter-spacing: .06em; text-transform: none; font-weight: 500; }
body.rules .post h1.post-title { font: 600 clamp(32px, 3.6vw, 46px)/1.14 var(--font-poppins), system-ui !important; letter-spacing: -.02em !important;
  color: #0e1116 !important; margin: 0 0 18px !important; max-width: 20ch; text-align: left !important; }
body.rules .post .post-dek { font: 400 20px/1.5 var(--font-poppins), system-ui !important; color: #565c68 !important; margin: 0 0 22px !important;
  max-width: 62ch !important; text-align: left !important; }
body.rules .post .post-byline { display: flex; gap: 10px; align-items: baseline; font: 500 14px/1.4 var(--font-poppins), system-ui !important;
  color: #0e1116 !important; margin: 0 !important; text-align: left !important; }
body.rules .post .post-byline a { color: inherit; text-decoration: none; }
body.rules .post .post-byline-role { color: #838a97; font-weight: 400; }
body.rules .post .post-art { margin: 36px auto 0; aspect-ratio: 21 / 9; }
body.rules .post .post-art img.gi { width: 22%; max-width: 220px; }
body.rules .post .post-body-sec > div { padding-top: 48px !important; }
/* corpo: 19px, títulos à esquerda, nada do tratamento de "seção" (era centrado com barra azul) */
body.rules .post .post-body { max-width: none !important; }
body.rules .post .post-body :is(p, li) { font: 400 19px/1.65 var(--font-poppins), system-ui !important; color: #2b3038 !important; text-align: left !important;
  max-width: none !important; margin-inline: 0 !important; }
body.rules .post .post-body p { margin: 0 0 24px !important; }
body.rules .post .post-body h2 { font: 600 26px/1.25 var(--font-poppins), system-ui !important; letter-spacing: -.015em !important; color: #0e1116 !important;
  margin: 44px 0 12px !important; text-align: left !important; max-width: none !important; }
body.rules .post .post-body h3 { font: 600 20px/1.3 var(--font-poppins), system-ui !important; color: #0e1116 !important; margin: 32px 0 10px !important; text-align: left !important; }
body.rules .post .post-body :is(ul, ol) { margin: 0 0 24px !important; padding-left: 24px !important; }
body.rules .post .post-body li { margin: 0 0 8px !important; }
body.rules .post .post-body a { color: #2f52d8 !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(47,82,216,.35); }
body.rules .post .post-body strong { color: #0e1116 !important; font-weight: 600; }
/* citação no artigo: o cartão único .r-quote (ver 'CITAÇÃO = UM CARTÃO'); o fio azul à esquerda saiu */
body.rules .post .post-body img { border-radius: 18px; margin: 8px 0 28px; width: 100%; height: auto; }
body.rules .post .post-body table { font-size: 15px; }
/* autor: uma linha e uma bio curta, fechados por um fio — não um cartão */
body.rules .post .post-author { margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(14,17,22,.1); }
body.rules .post .post-author-name { font: 600 15px/1.4 var(--font-poppins), system-ui !important; color: #0e1116 !important; margin: 0 0 6px !important; display: flex; gap: 10px; align-items: baseline; text-align: left !important; }
body.rules .post .post-author-name a { color: inherit; text-decoration: none; }
body.rules .post .post-author-name span { color: #838a97; font-weight: 400; }
body.rules .post .post-author-bio { font: 400 15px/1.55 var(--font-poppins), system-ui !important; color: #565c68 !important; margin: 0 0 10px !important; max-width: none !important; text-align: left !important; }
body.rules .post .post-author-link { color: #2f52d8; font-size: 14px; font-weight: 600; text-decoration: none; }
/* mais do blog */
body.rules .post h2.post-more-title { font: 600 24px/1.2 var(--font-poppins), system-ui !important; color: #0e1116 !important; margin: 0 0 28px !important; text-align: left !important; }
body.rules .post .post-back { margin: 32px 0 0 !important; text-align: left !important; }
body.rules .post .post-back a { color: #2f52d8; font-weight: 600; font-size: 15px; text-decoration: none; }
/* artigo: o parágrafo depois de um subtítulo é corpo, não "lead" (a regra genérica o punha cinza com 52px embaixo);
   e a placa da arte do topo mantém o fundo — alguma regra de hero a zerava */
body.rules main .post .post-body.post-body.post-body.post-body h2 + p { color: #2b3038 !important; margin-bottom: 24px !important; font-size: 19px !important; line-height: 1.65 !important; }
body.rules main .post .post-art.post-art.post-art { background: radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.9), transparent 60%), linear-gradient(160deg, #eef1fb 0%, #e3e9fa 100%) !important; border-radius: 22px !important; }

/* artigo: "More from the blog" dentro de um painel de vidro (pedido dela, 2026-09-29) */
body.rules .post .post-more > div { border-top: 0 !important; padding: 44px 48px 40px !important;
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 28px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  width: min(1080px, 100% - 96px) !important; max-width: none !important; margin: 24px auto 64px !important; }
body.rules .post .post-more .blog-grid.blog-grid { gap: 36px 24px !important; }
body.rules .post .post-back { text-align: right !important; margin: 28px 0 0 !important; }
/* especificidade acima da regra genérica de respiro das seções (0,5,2): o painel de vidro não carrega os 88px */
body.rules main section.post-more.post-more.post-more.post-more > div { padding: 44px 48px 40px !important; }
body.rules main .post .post-more p.post-back.post-back.post-back { margin: 28px 0 0 !important; }
/* etiqueta "Coming soon" depois do título das páginas que o Maarten pediu (2026-09-29) */
body.rules main h1 .h1-tag { display: inline-block; vertical-align: middle; margin-left: 14px; font-size: 11px !important; line-height: 1.3 !important;
  letter-spacing: .1em !important; font-weight: 700 !important; padding: 4px 9px !important; border-radius: 6px; transform: translateY(-4px); }
/* footer: a etiqueta herdava o tamanho do link; fica igual à do Suppliers */
footer.sh a .tag, footer.sh a .tag.soon { font-size: 9.5px !important; line-height: 1.2 !important; padding: 2px 6px !important; letter-spacing: .09em !important; vertical-align: middle; margin-left: 4px; }
/* menu: a etiqueta dos itens (Soon) é o mesmo quadradinho verde do footer, não a pílula (pedido dela, 2026-09-29);
   a pílula fica só no cartão de promoção ("NEW") */
.mega .item .tag.tag, .mega .body .tag.tag { background: var(--sh-new-soft); color: var(--sh-new); border: 0; border-radius: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; padding: 2px 6px; }

/* ============================================================
   OUR STORY — linha do tempo limpa: ano em numeral fino à esquerda, fio entre as linhas
   ============================================================ */
body.rules .os-timeline { list-style: none; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(14,17,22,.1); }
body.rules .os-timeline li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(14,17,22,.1); }
body.rules .os-timeline .os-year { font: 200 clamp(30px, 2.6vw, 38px)/1 var(--font-poppins), system-ui; letter-spacing: -.04em; color: #3262EA; font-variant-numeric: tabular-nums; }
body.rules .os-timeline p { font: 400 17px/1.55 var(--font-poppins), system-ui !important; color: #2b3038 !important; margin: 0 !important; text-align: left !important; max-width: none !important; }
/* tabela de comparação (what-is-branded-merch) no vidro da casa */
body.rules .r-glass-table { background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 22px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
body.rules .r-glass-table table { border-collapse: separate; border-spacing: 0; }
body.rules .r-glass-table thead tr { background: none !important; }
body.rules .r-glass-table th, body.rules .r-glass-table td { background: none !important; border: 0 !important; border-bottom: 1px solid rgba(14,17,22,.08) !important; padding: 16px 22px !important; font-size: 15px !important; }
body.rules .r-glass-table tbody tr:last-child :is(th, td) { border-bottom: 0 !important; }
body.rules .r-glass-table thead th { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: #565c68 !important; }
body.rules .r-glass-table.r-compare thead th:last-child { color: #3262EA !important; }
body.rules .r-glass-table tbody th { color: #0e1116 !important; font-weight: 600 !important; }
/* Comparison tables read flat as plain rows. The Brikl column (always the last one) gets a soft
   blue wash and an accent bar on its header, rows breathe more, and the row label column is set
   apart by a hairline, so the eye lands on the comparison, not on a grid. */
body.rules .r-glass-table th, body.rules .r-glass-table td { padding: 20px 24px !important; font-size: 15.5px !important; line-height: 1.5; vertical-align: top; }
body.rules .r-glass-table thead th { padding-top: 22px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(14,17,22,.12) !important; }
body.rules .r-glass-table tbody th { width: 24%; border-right: 1px solid rgba(14,17,22,.06) !important; }
body.rules .r-glass-table.r-compare :is(th, td):last-child {
  background: linear-gradient(180deg, rgba(50,98,234,.085) 0%, rgba(50,98,234,.045) 100%) !important;
  color: #0e1116 !important; position: relative; }
body.rules .r-glass-table.r-compare thead th:last-child { color: #3262EA !important; }
body.rules .r-glass-table.r-compare thead th:last-child::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #3262ea, #7c9cff); border-radius: 0 0 3px 3px; }
body.rules .r-glass-table.r-compare tbody tr:last-child td:last-child { border-bottom-right-radius: 22px; }
body.rules .r-glass-table.r-compare thead th:last-child { border-top-right-radius: 22px; }
body.rules .r-glass-table.r-compare tbody td:not(:last-child) { color: #565c68 !important; }
body.rules .r-glass-table tbody tr { transition: background .2s ease; }
body.rules .r-glass-table.r-compare tbody tr:hover :is(th, td):not(:last-child) { background: rgba(14,17,22,.025) !important; }
@media (max-width: 720px) { body.rules .r-glass-table th, body.rules .r-glass-table td { padding: 14px 16px !important; font-size: 14px !important; } }
/* artigo: todos os parágrafos na mesma medida (o primeiro de cada bloco vinha em 62ch e os demais em 100%) */
body.rules .r-prose.r-article.r-article.r-article p { max-width: 68ch !important; }

/* ============================================================
   OUR STORY — LINHA DO TEMPO real (.os-rail): trilho horizontal que se desenha ao entrar na tela,
   um nó por ano, evento alternando acima e abaixo do trilho. Mesma tinta do trilho da launch offer.
   ============================================================ */
body.rules .os-rail { list-style: none; position: relative; margin: 24px 0 0 !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); min-height: 400px; }
body.rules .os-rail .os-rail-line { grid-column: 1 / -1; grid-row: 1; position: absolute; left: calc(100% / var(--n, 7) / 2); right: calc(100% / var(--n, 7) / 2);
  top: 50%; height: 1px; background: rgba(14,17,22,.14); }
body.rules .os-rail .os-rail-ink { position: absolute; inset: 0; background: #3262EA; transform-origin: 0 50%; scale: 0 1;
  animation: rail-grow linear both; animation-timeline: view(); animation-range: entry 25% cover 55%; }
body.rules .os-rail .os-rail-node { grid-row: 1; position: relative; min-height: 400px; padding: 0 10px; text-align: center; }
body.rules .os-rail .os-rail-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; border: 2px solid #3262EA; box-shadow: 0 0 0 6px rgba(50,98,234,.10); }
body.rules .os-rail .os-rail-year { position: absolute; left: 50%; transform: translateX(-50%);
  font: 200 clamp(28px, 2.4vw, 36px)/1 var(--font-poppins), system-ui; letter-spacing: -.04em; color: #0e1116; font-variant-numeric: tabular-nums; }
body.rules .os-rail .os-rail-event { position: absolute; left: 50%; transform: translateX(-50%); width: min(220px, 190%);
  font: 400 14px/1.5 var(--font-poppins), system-ui !important; color: #565c68 !important; margin: 0 !important; text-align: center !important; max-width: none !important; }
/* acima do trilho: evento em cima, ano colado no nó; abaixo: ano colado no nó, evento embaixo */
body.rules .os-rail .is-above .os-rail-year  { bottom: calc(50% + 22px); }
body.rules .os-rail .is-above .os-rail-event { bottom: calc(50% + 70px); }
body.rules .os-rail .is-below .os-rail-year  { top: calc(50% + 22px); }
body.rules .os-rail .is-below .os-rail-event { top: calc(50% + 70px); }
/* o conector do nó ao texto */
body.rules .os-rail .os-rail-node::before { content: ''; position: absolute; left: 50%; width: 1px; height: 14px; background: rgba(50,98,234,.45); }
body.rules .os-rail .is-above::before { bottom: calc(50% + 7px); }
body.rules .os-rail .is-below::before { top: calc(50% + 7px); }
/* cada nó entra na sua vez, seguindo o desenho do trilho */
body.rules .os-rail .os-rail-node > * { animation: os-node-in .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes os-node-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 900px) {
  body.rules .os-rail { display: block; min-height: 0; padding-left: 22px !important; border-left: 1px solid rgba(50,98,234,.35); }
  body.rules .os-rail .os-rail-line { display: none; }
  body.rules .os-rail .os-rail-node { min-height: 0; padding: 0 0 26px; text-align: left; }
  body.rules .os-rail .os-rail-dot { left: -22px; top: 8px; margin: 0 0 0 -7px; }
  body.rules .os-rail .os-rail-year, body.rules .os-rail .os-rail-event { position: static; transform: none; width: auto; text-align: left !important; display: block; }
  body.rules .os-rail .os-rail-event { margin-top: 6px !important; }
  body.rules .os-rail .os-rail-node::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.rules .os-rail .os-rail-ink { animation: none; scale: 1 1; } body.rules .os-rail .os-rail-node > * { animation: none; } }
/* our-story: pessoas em cartão de vidro (o material do painel de história), foto redonda sem aro */
body.rules main .r-glass-card.os-person.os-person.os-person { padding: 36px 28px 32px !important; overflow: visible; display: block !important; }
body.rules main .os-person img { border: 0 !important; box-shadow: 0 18px 40px -20px rgba(15,20,35,.35); }
body.rules main .os-person > div { padding: 0 !important; }
body.rules main .os-person h3 { margin-top: 20px !important; }


/* ============================================================
   SISTEMA DE COMPONENTES (2026-09-29, regra dela: "todos bloco glassy") — vale para o site inteiro.
   1. CARD = vidro da casa. 2. ETIQUETA = uma só, pequena, ao lado do título. 3. NOTA = vidro, sem barra.
   4. LINHA DE ÍCONES = bloco preto. 5. PAINEL DE HISTÓRIA = vidro com nuvem atrás (como o Vernon na home).
   ============================================================ */
/* 1. cards: todo card de grade vira o material de vidro; dentro de vidro (painel, cartão, faixa) fica plano */
body.rules main :is(div, a, article, li):is(.rounded-xl, .rounded-2xl):is(.bg-\[\#16161c\], .bg-\[\#101015\], .bg-\[\#0e0e13\], .bg-\[\#0e0e12\]):not(.r-col):not(.r-tile):not(.r-feat):not(.pr-plan):not(.pr-panel):not(.r-glyph):not(.glass-banner *):not(.r-glass-card *):not(.story-x *):not(.hw-stats *):not(.r-plate-dark *):not(.wf *):not(.faq-canon *):not(.blog-index *):not(.post *):not(.rounded-2xl *):not(.rounded-xl *) {
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 22px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; }
body.rules main :is(div, a, article, li):is(.rounded-xl, .rounded-2xl):is(.bg-\[\#16161c\], .bg-\[\#101015\]) > .bg-white { background: none !important; }
/* 2. etiqueta: pequena, uma linha, encostada no título */
body.rules main .r-tag.r-tag.r-tag { display: inline-block; font: 700 9.5px/1.2 var(--font-poppins), system-ui !important; letter-spacing: .09em !important; text-transform: uppercase;
  padding: 3px 7px !important; border-radius: 5px !important; background: rgba(50,98,234,.08) !important; color: #3262EA !important; border: 0 !important; box-shadow: none !important;
  white-space: nowrap; margin: 0 0 0 10px !important; align-self: center; vertical-align: middle; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules main .flex.justify-between:has(> .r-tag) { align-items: center !important; margin-bottom: 8px !important; }
/* 3. nota com título: vidro, sem barra azul */
body.rules main .bn.r-note-bar.r-note-bar.r-note-bar.r-note-bar, body.rules main .r-note:not(.r-tag):not(.bn) {
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-left: 1px solid var(--gl-border) !important; border-radius: 22px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; padding: 28px 32px !important; }
body.rules main .r-note:not(.r-tag):not(.bn) { padding: 20px 24px !important; }
/* 4. linha de ícones no bloco preto */
body.rules section.hw-stats.hw-icons > div { padding: 40px 0 !important; }
body.rules .hw-icons .hw-stats-in { display: grid !important; grid-template-columns: repeat(var(--hw-n, 4), 1fr) !important; gap: 0 !important; }
body.rules .hw-icons .hw-icon { display: flex !important; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 0 16px !important; background: none !important; border: 0 !important; box-shadow: none !important; }
body.rules .hw-icons .hw-icon + .hw-icon { border-left: 1px solid rgba(255,255,255,.1) !important; }
body.rules .hw-icons .hw-icon :is(img.gi, svg) { width: 60px !important; height: 60px !important; max-width: none !important; stroke: #fff; filter: drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
body.rules .hw-icons .hw-icon .r-glyph { background: none !important; width: auto !important; height: auto !important; }
body.rules .hw-icons .hw-icon :is(p, span, div) { color: rgba(255,255,255,.55) !important; font: 400 13px/1.4 var(--font-poppins), system-ui !important; margin: 0 !important; text-align: center !important; }
body.rules .hw-icons .hw-icon :is(p, span, div).font-bold, body.rules .hw-icons .hw-icon :is(p, span, div).font-semibold { color: #fff !important; font-weight: 600 !important; font-size: 15px !important; }
@media (max-width: 900px) { body.rules .hw-icons .hw-stats-in { grid-template-columns: repeat(2, 1fr) !important; row-gap: 28px; } body.rules .hw-icons .hw-icon + .hw-icon { border-left: 0 !important; } }
/* 5. painel de história: a seção hospeda a nuvem; o painel fica por cima */
body.rules section.story-sec { position: relative; isolation: isolate; overflow-x: clip; }
body.rules section.story-sec > div { position: relative; z-index: 1; }
body.rules section.story-sec > .r-cloud { opacity: .55; }
/* painel de história: dois parágrafos nunca colados (a regra de prosa zerava a margem) */
body.rules main .story-x .story-copy-x p + p { margin-top: 18px !important; }
/* /why-brikl: a vitrine do release — cabeçalho numa linha, nomes em caixa normal (são nomes de produto) */
body.rules .relwf .relwf-head { display: flex !important; align-items: baseline; justify-content: space-between; margin-bottom: 0 !important; }
body.rules .relwf .relwf-head h2 { text-align: left !important; margin: 0 !important; }
body.rules .relwf .wf-name { text-transform: none; font-size: 18px; letter-spacing: 0; }
/* HERO SEM MÍDIA (2026-09-29, regra dela): título e lead sozinhos não sustentam 480px — o hero encolhe
   e a seção seguinte encosta. Vale para todo índice (blog, guides, newsletters, glossary, compare…). */
body.rules main section.in-hero:not(.has-hero-photo):not(:has(img, video, .r-ph, .hero-photo, .cat-media)) { padding-bottom: 8px !important; }
body.rules main section.in-hero:not(.has-hero-photo):not(:has(img, video, .r-ph, .hero-photo, .cat-media)) > div { padding-top: 40px !important; padding-bottom: 24px !important; }
body.rules main section.in-hero:not(.has-hero-photo):not(:has(img, video, .r-ph, .hero-photo, .cat-media)) + section > div { padding-top: 40px !important; }
/* vitrine do release: o pôster do Turbo Store é um telefone em retrato — cabe inteiro no quadro, não é cortado */
body.rules .relwf .wf-photo { object-fit: contain; padding: 5%; box-sizing: border-box; background: linear-gradient(160deg, #eef1fb 0%, #e6ebf8 100%); }
/* PAINEL DE VIDRO — largura, margem interna e colunas: ver o bloco 'PAINEL DE HISTÓRIA = O VERNON DA HOME'
   (1408px, 56/72). As regras de 1216px que ficavam aqui perdiam para ele em todas as propriedades. */
body.rules main .glass-banner.story-like .story-media-x img.story-photo, body.rules main .blog-featured .blog-art { aspect-ratio: 16 / 10; }
/* (tamanho do título: ver o bloco 'PAINEL DE HISTÓRIA = O VERNON DA HOME' — 44px como na home) */
@media (max-width: 900px) { body.rules main .glass-banner.story-like.story-like.story-like.story-like, body.rules main a.blog-featured { padding: 28px !important; grid-template-columns: 1fr !important; } }
/* notas com título ocupam o mesmo trilho dos painéis e cards ao lado — nada de bloco mais estreito no meio da coluna */
body.rules main .bn.r-note-bar.r-note-bar.r-note-bar.r-note-bar.r-note-bar { max-width: none !important; width: 100% !important; margin-inline: 0 !important; }
/* índices: chips, destaque e grade no MESMO trilho de 1216px, bordas alinhadas */
body.rules main section.blog-sec.blog-sec.blog-sec.blog-sec > div { width: min(1216px, 100vw - 64px) !important; max-width: none !important; }   /* classe repetida: vence a regra de trilho (0,3,3) */
body.rules main .blog-index a.blog-featured { width: 100% !important; margin-left: 0 !important; translate: none; }
/* (PILHA DE CITAÇÃO de 760px: substituída pelo cartão único .r-quote — ver 'CITAÇÃO = UM CARTÃO') */
/* ============================================================
   PAINEL DE HISTÓRIA = O VERNON DA HOME, valor por valor (medido em /: 1408px, 56/72, vidro .58 com
   desfoque e sombra, título 44px, lead 19px, eyebrow 13px azul, foto solta sem moldura com sombra
   projetada, colunas iguais com 56px). A regra genérica de nota (.bn) vencia e deixava o painel
   branco sólido, sem desfoque e sem sombra — por isso ele não lia como o Vernon.
   ============================================================ */
body.rules main .story-x.story-x.story-x.story-x.story-x, body.rules main a.blog-featured.blog-featured.blog-featured.blog-featured.blog-featured {
  width: min(1408px, 100vw - 32px) !important; max-width: none !important; margin-left: 50% !important; margin-right: 0 !important; translate: -50% 0;
  padding: 56px 72px !important; gap: 56px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important;
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 28px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; }
body.rules main .blog-index a.blog-featured.blog-featured.blog-featured.blog-featured.blog-featured { width: 100% !important; margin-left: 0 !important; translate: none; }
body.rules main :is(.story-x, .blog-featured) .story-eyebrow-x.story-eyebrow-x { font: 600 13px/1.3 var(--font-poppins), system-ui !important; letter-spacing: .12em !important; text-transform: uppercase; color: #2f52d8 !important; margin: 0 0 18px !important; }
body.rules main :is(.story-x, .blog-featured) .story-copy-x h2.h2, body.rules main :is(.story-x, .blog-featured) .story-copy-x h2 { font: 600 clamp(32px, 3.6vw, 44px)/1.16 var(--font-poppins), system-ui !important; letter-spacing: -.02em !important; margin: 0 0 18px !important; color: #0e1116 !important; }
body.rules main :is(.story-x, .blog-featured) .story-copy-x p:not(.story-eyebrow-x):not(.blog-meta):not(.blog-kicker) { font-size: 19px !important; line-height: 1.6 !important; color: #565c68 !important; }
body.rules main .story-x .story-media-x img.story-photo { border-radius: 0 !important; box-shadow: none !important; aspect-ratio: auto !important; width: 100% !important; height: auto !important;
  filter: drop-shadow(0 30px 44px rgba(15,20,35,.18)) drop-shadow(0 4px 8px rgba(15,20,35,.10)); }
body.rules main .story-x .story-media-x img.story-photo.is-rect { border-radius: 22px !important; }   /* fotos retangulares mantêm o raio; a sombra é projetada, não de caixa */
@media (max-width: 900px) { body.rules main .story-x.story-x.story-x.story-x.story-x, body.rules main a.blog-featured.blog-featured.blog-featured.blog-featured.blog-featured { padding: 28px !important; grid-template-columns: 1fr !important; gap: 28px !important; } }

/* peça recortada no painel de história: flutua acima da placa, como o tablet do Vernon na home */
body.rules main .story-x .story-media-x img.story-photo[data-cutout] { width: 108% !important; max-width: none !important; margin: -12% -4% -6% -4% !important; border-radius: 0 !important; }

/* ============================================================
   VARREDURA VISUAL (2026-09-30) — correções medidas
   ============================================================ */
/* scroll lateral: a nuvem do hero mede 124% da tela; o hero corta na horizontal (a our-story já cortava por ser .r-hero) */
body.rules main { overflow-x: clip !important; overflow-y: visible !important; }   /* no <main>, não no hero: um hero estreito (FAQ) cortava a nuvem com aresta dura */
/* card numerado = cartão de vidro com padding de cartão (a regra dos passos zerava o padding, e o vidro ficava sem gordura) */
body.rules main .grid > div:has(.num):is(.bg-\[\#16161c\], .bg-\[\#101015\], .bg-\[\#0e0e13\], .bg-\[\#0e0e12\]):not(.r-col):not(.r-tile):not(.r-feat):not(.r-plate-dark *) { padding: 26px 28px !important; border-radius: 22px !important; }
body.rules main .grid > div:has(.num):not(.r-col):not(.r-tile):not(.r-feat) .num { position: static !important; }
/* título de seção centrado → o wrapper estreito (max-w-*) também centra; senão o título ficava no centro da metade esquerda */
body.rules main section:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) .r-lead-left { margin-left: auto !important; margin-right: auto !important; text-align: center; }
/* nota dentro de placa grafite: nunca caixa branca (texto branco sumia) — plana, fio à esquerda, texto claro */
body.rules main .r-plate-dark .bn.bn.bn.bn.bn { background: transparent !important; border: 0 !important; border-left: 2px solid #7c9cff !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: #eef0f6 !important; }
body.rules main .r-plate-dark .bn :is(p, li, span, h3, h4, a, strong) { color: #eef0f6 !important; }
/* logo como capa de tile de blog: nunca cortado */
body.rules .blog-art.is-logo img { object-fit: contain !important; padding: 0 !important; width: 46% !important; height: 36% !important; inset: auto !important; position: relative !important; margin: auto !important; background: transparent; filter: grayscale(1) opacity(.7); z-index: 1; mix-blend-mode: multiply; }   /* logo pequeno, centrado, sobre a MESMA placa tingida; multiply apaga o fundo branco dos JPG */
body.rules .blog-art.is-logo { display: grid !important; place-items: center !important; }
/* logos de clientes nos depoimentos: pequenos, centrados, grafite */
body.rules main .quote-logo { display: block; height: 22px; width: auto; max-width: 150px; margin: 0 0 18px; object-fit: contain; object-position: left center; filter: grayscale(1) opacity(.75); mix-blend-mode: multiply; }
/* depoimentos: alturas naturais (colunas, não grade esticada); citação curta em tipo maior */
body.rules main .quotes-masonry { columns: 3; column-gap: 20px; }
body.rules main .quotes-masonry-2 { columns: 2; }
body.rules main .quotes-masonry > * { break-inside: avoid; margin: 0 0 20px; display: block; }
@media (max-width: 1000px) { body.rules main .quotes-masonry { columns: 2; } }
@media (max-width: 640px) { body.rules main .quotes-masonry { columns: 1; } }
/* REGRA FIXA DE ALINHAMENTO (2026-10-01) — seção só de texto = UMA coluna de 760px centrada na página, tudo à
   esquerda dentro dela (citação, título, lead, parágrafos). A coluna é marcada pelo JS (.r-prose-col) na caixa da
   seção, nunca por seletor genérico. Seção com mídia ao lado = dividida (r-split). Prosa seguida de grade fica
   na largura normal, título e texto à esquerda (regra base .r-prose). */
body.rules main section.r-prose > div.r-prose-col.r-prose-col { max-width: 760px !important; margin-inline: auto !important; }   /* especificidade acima da regra geral `section > div { max-width: none }` */
/* o que foi escrito centrado fica centrado, também em seção de prosa */
body.rules main section.r-prose .text-center { text-align: center !important; margin-inline: auto !important; }
body.rules main section.r-prose .justify-center { justify-content: center !important; }
body.rules main .r-prose-col :is(h2, p, ul, ol, blockquote, [class*="uppercase"]) { text-align: left !important; margin-inline: 0 !important; }
body.rules main .r-prose-col [class*="max-w-"], body.rules main .r-prose-col .r-lead-left { margin-left: 0 !important; margin-right: auto !important; max-width: none !important; }
body.rules main .r-prose-col h2 { max-width: 26ch !important; }
body.rules main .r-prose-col :is(.border-l-2, .border-l-4) { margin-bottom: 28px !important; }

/* glossário: trilho A–Z (o texto herdava o branco do wrapper e sumia sobre o fundo claro) e letras sem placa, com respiro curto */
/* trilhos de categorias/letras: as MESMAS chips do blog, soltas, sem barra atrás (a barra branca em pílula ficou pesada) */
body.rules main nav:is([aria-label="Jump to letter"], [aria-label="Jump to category"]) { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; width: auto; margin: 0 auto 8px; position: static !important; gap: 8px !important; }
body.rules main nav:is([aria-label="Jump to letter"], [aria-label="Jump to category"]) :is(a, span) { color: #0e1116 !important; background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 999px !important; padding: 7px 14px !important; font: 500 13px/1.2 var(--font-poppins), system-ui !important; box-shadow: var(--gl-hi) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important; }
body.rules main nav:is([aria-label="Jump to letter"], [aria-label="Jump to category"]) a:hover { border-color: rgba(14,17,22,.22) !important; }
body.rules main section[id^="letter-"] { padding-block: 8px !important; }
body.rules main section[id^="letter-"] > div { padding-block: 24px !important; }
body.rules main section[id^="letter-"] h2 { text-align: left !important; margin: 0 0 18px !important; }
/* página de parceiro / documento (template): ficha fixa à esquerda, corpo à direita com títulos no trilho, não centrados */
body.rules main section:is(.partner-page, .doc-page) :is(.partner-body, .doc-body) :is(h2, h2 + p) { text-align: left !important; margin-inline: 0 !important; max-width: none !important; }
body.rules main section:is(.partner-page, .doc-page) :is(.partner-body, .doc-body) h2 { max-width: 24ch !important; }
body.rules main section:is(.partner-page, .doc-page) :is(.partner-sheet, .doc-sheet) dd { color: #0e1116 !important; }
body.rules main section:is(.partner-page, .doc-page) :is(.partner-sheet, .doc-sheet) dt { color: #6b7180 !important; }
body.rules main section:is(.partner-page, .doc-page) :is(.partner-body, .doc-body) ol.grid > li { list-style: none; }
/* logos de integrações em cinza, como o marquee de marcas e os logos de clientes */
body.rules main section.doc-page [data-cards] span > img { filter: grayscale(1) opacity(.75); mix-blend-mode: normal; }
body.rules main section.doc-page [data-cards] a:hover span > img { filter: grayscale(0) opacity(1); transition: filter .2s; }
/* cartão/banner com título centrado: a linha de botões também centra (merch-sellers "Moving is free") */
body.rules main section:not(.r-prose):not(.r-split) :is(.rounded-2xl, .rounded-xl, .bn) :is(.flex, .inline-flex).flex-wrap:has(> a) { justify-content: center !important; }
/* ============================================================
   CITAÇÃO = UM CARTÃO (2026-10-03, regra dela: UM tratamento por família, nas 176 páginas)
   O cânone é o depoimento de vidro de /merch-sellers e /our-clients, valor por valor (medido):
   vidro .58 + desfoque + fio de 1px + raio 22 + sombra macia, 24px de respiro, citação 16px itálica
   #2b3038, autoria numa linha 14px "**Nome**, cargo", logo do cliente 22px cinza em cima.
   O passe `CITAÇÃO = UM CARTÃO` (components.js) põe .r-quote em todo <blockquote> fora da home
   (case studies, blog, /security, hero de /our-clients). Substitui as regras antigas de citação
   em destaque (vidro centrado de 760px, fio azul à esquerda) — aquelas classes saem do elemento.
   ============================================================ */
body.rules main blockquote.r-quote.r-quote.r-quote {
  position: relative; display: block; box-sizing: border-box; text-align: left !important; font-style: normal !important;
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 22px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  padding: 24px !important; min-height: 0 !important; }
body.rules main blockquote.r-quote.r-quote.r-quote::before, body.rules main blockquote.r-quote.r-quote.r-quote::after { content: none !important; display: none !important; }
body.rules main blockquote.r-quote.r-quote .r-quote-text { font: italic 400 16px/26px var(--font-poppins), system-ui, sans-serif !important; color: #2b3038 !important;
  margin: 0 !important; max-width: none !important; text-align: left !important; letter-spacing: normal !important; }
body.rules main blockquote.r-quote.r-quote .r-quote-text + .r-quote-text { margin-top: 12px !important; }
body.rules main blockquote.r-quote.r-quote.r-quote-note .r-quote-text { font-size: 18px !important; line-height: 1.6 !important; }   /* nota do blog, sem autoria */
body.rules main blockquote.r-quote.r-quote .r-quote-by { display: block !important; margin: 16px 0 0 !important; padding: 0 !important; text-align: left !important;
  font: normal 400 14px/20px var(--font-poppins), system-ui, sans-serif !important; color: #0e1116 !important; }
body.rules main blockquote.r-quote.r-quote .r-quote-by b { font-weight: 700 !important; color: inherit !important; }
body.rules main blockquote.r-quote.r-quote img.quote-logo.quote-logo { display: block !important; height: 22px !important; width: auto !important; max-width: 150px !important;
  margin: 0 0 18px !important; border-radius: 0 !important; object-fit: contain; object-position: left center; filter: grayscale(1) opacity(.75); mix-blend-mode: multiply; }
/* no corpo do artigo o cartão mantém o respiro do bloco (28px), sem o recuo de 22px do fio antigo */
body.rules .post .post-body blockquote.r-quote.r-quote { margin: 28px 0 !important; }
/* nunca vidro sobre vidro: uma citação dentro de um cartão de vidro (o card SOC 2 na /security, qualquer [data-cards] glass) fica plana,
   só o texto e a autoria, com o mesmo tipo do cartão canônico */
body.rules main :is([data-cards] > *, .r-glass-card, .r-feat, .glass-banner) blockquote.r-quote.r-quote.r-quote { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; margin: 16px 0 0 !important; border-radius: 0 !important; }
/* hero de /our-clients: o cartão fica no eixo do título, o texto à esquerda */
body.rules main .in-hero blockquote.r-quote.r-quote { margin-inline: auto !important; }

/* ============================================================
   PASSO = CARTÃO (2026-10-03, mesma regra) — o card numerado de /features/* é o cânone (medido):
   vidro (tokens acima), raio 22, 26/28 de respiro, numeral Poppins 200 40px em degradê no topo,
   título 600 16px tinta, texto 14px #565c68; grade com 20px. O passe 12b (components.js) marca
   .r-steps / .r-step / .r-step-n; colunas por .r-steps-cN quando a página não traz grade própria.
   Especificidade alta de propósito: vence a regra das colunas com fio (.r-col, até 0,7,1) e a
   que zerava os cards de passo (`main .grid > div:has(.num)`).
   ============================================================ */
body.rules main .r-steps.r-steps { gap: 20px !important; list-style: none !important; padding: 0 !important; }
body.rules main .r-steps.r-steps-g { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body.rules main .r-steps.r-steps-c1 { grid-template-columns: minmax(0, 1fr) !important; }
body.rules main .r-steps.r-steps-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.rules main .r-steps.r-steps-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { body.rules main .r-steps.r-steps-g:is(.r-steps-c3, .r-steps-c4) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { body.rules main .r-steps.r-steps-g.r-steps-g { grid-template-columns: minmax(0, 1fr) !important; } }
body.rules main .r-steps.r-steps > .r-step.r-step.r-step.r-step.r-step {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
  position: relative !important; box-sizing: border-box; min-width: 0; margin: 0 !important; text-align: left !important; translate: none;
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 22px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important; -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  padding: 26px 28px !important; }
body.rules main .r-steps.r-steps > .r-step.r-step-dark.r-step.r-step.r-step {
  background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px -40px rgba(0,0,0,.6) !important; }
body.rules main .r-steps .r-step.r-step .num.r-step-n.r-step-n {
  display: block !important; position: static !important; inset: auto !important; width: auto !important; height: auto !important; align-self: stretch !important;
  margin: 0 0 12px -4px !important; padding: 3px 10px 3px 4px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important;
  font: 200 40px/1.05 var(--font-poppins), system-ui, sans-serif !important; letter-spacing: -.04em !important; text-transform: none !important; text-align: left !important;
  background: var(--grad-text, linear-gradient(90deg, #7c3aed, #0ea5e9)) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important; }
body.rules main .r-steps .r-step.r-step :is(h3, h4) { font: 600 16px/26px var(--font-poppins), system-ui, sans-serif !important; margin: 0 0 6px !important;
  min-height: 0 !important; letter-spacing: normal !important; text-align: left !important; max-width: none !important; }
body.rules main .r-steps .r-step.r-step :is(p, span, div, li):not(.num):not(.r-col-head):not(.r-glyph):not(:has(img)):not(:is(h3, h4) *) { font-size: 14px !important; line-height: 1.625 !important;
  text-align: left !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body.rules main .r-steps .r-step.r-step > p, body.rules main .r-steps .r-step.r-step > div > p { margin: 0 !important; }
body.rules main .r-steps .r-step.r-step > p:not(:last-child) { margin-bottom: 12px !important; }   /* texto seguido da chamada "Turbo Store →" */
body.rules main .r-steps .r-step.r-step :is(h3, h4) + p { margin-top: 0 !important; }
/* título escrito como <p class="font-bold"> (compare, guias): o mesmo título do cartão */
body.rules main .r-steps.r-steps .r-step.r-step.r-step.r-step > p.font-bold.font-bold:not(.num):not(:last-child) { font: 600 16px/26px var(--font-poppins), system-ui, sans-serif !important; margin: 0 0 6px !important; }
body.rules main .r-steps.r-steps .r-step.r-step.r-step.r-step:not(.r-step-dark) > p.font-bold.font-bold:not(.num):not(:last-child) { color: #0e1116 !important; }
body.rules main .r-steps.r-steps-g:not([class*="mb-"]):not(:last-child) { margin-bottom: 28px !important; }
body.rules main .r-steps .r-step.r-step:not(.r-step-dark) :is(h3, h4, strong, b) { color: #0e1116 !important; }
body.rules main .r-steps .r-step.r-step:not(.r-step-dark) :is(p, span, li):not(.num):not([class*="text-[#4d74ff]"]):not([class*="text-[#6a8bff]"]) { color: #565c68 !important; }
body.rules main .r-steps .r-step.r-step:not(.r-step-dark) :is(p, span, li):not(.num) :is(strong, b) { color: #0e1116 !important; font-weight: 600 !important; }
body.rules main .r-steps .r-step.r-step .r-col-head { height: auto !important; min-height: 0 !important; margin: 0 0 12px !important; }
body.rules main .r-steps .r-step.r-step > img.r-shot { margin: -8px 0 16px !important; }

/* captura de tela da plataforma no hero: janela, não peça recortada */
body.rules main .in-hero img.hero-photo.hero-shot { width: 100% !important; max-width: 100% !important; margin: 0 0 28px !important; border-radius: 14px !important; border: 1px solid rgba(14,17,22,.1) !important;
  box-shadow: 0 30px 70px -30px rgba(14,17,22,.45), 0 8px 24px -12px rgba(14,17,22,.25) !important; background: #fff; object-fit: cover !important; filter: none !important; }
@media (max-width: 900px) { body.rules main .in-hero img.hero-photo.hero-shot { width: 100% !important; } }
/* captura da plataforma no lugar de um placeholder de produto: janela com raio e sombra, proporção da captura */
body.rules main img.r-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; border: 1px solid rgba(14,17,22,.1);
  box-shadow: 0 24px 60px -30px rgba(14,17,22,.4), 0 6px 18px -10px rgba(14,17,22,.2); background: #fff; }
body.rules main .r-col img.r-shot, body.rules main [data-cards] img.r-shot { margin-bottom: 14px; }

/* LISTA NUMERADA NATIVA (2026-10-03): prosa é prosa — o <ol> do blog, dos case studies e dos guias continua lista,
   com UM marcador em todo o site: Poppins 500, azul da marca (antes: cinza 400, cada um num tom) */
body.rules main ol > li::marker { font-family: var(--font-poppins), system-ui, sans-serif; font-weight: 500; color: #3262EA; }


/* ───── parts/cards.css ───── */
/* parts/cards.css — family convergence */
/* ---------- CARD GRIDS → the glass card of /merch-sellers (2026-10-05) ----------
 * Marks come from parts/cards.js: .cg (grid, .cg-2 / .cg-3 / .cg-4), .cg-card (its cards), .cg-t (a card's title),
 * .cg-media (a card whose picture fills the top).
 * Every value below is the canon as measured on /merch-sellers (see INVENTORY.md).
 * `:not(#cg)` lends ID weight on purpose: the house glass rule in components.css carries a
 * dozen :not() exclusions, and these measures must win over it without touching it. */

/* grid: 3 columns, 2 for 2/4 cards or a narrow column (4 when written 4-across), gap 20; 2 under 1024, 1 at ≤720 */
body.rules main .cg:not(#cg) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important; column-gap: 20px !important; row-gap: 20px !important; align-items: stretch !important; }
body.rules main .cg.cg-2:not(#cg) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 1024px) {   /* 7 or 8 cards: the layer's centred last row (6 tracks, 2 each) */
  body.rules main .cg.cg-3.r-orphan-3:not(#cg) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
body.rules main .cg.cg-4:not(#cg) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1023px) { body.rules main .cg:is(.cg-3, .cg-4):not(#cg) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) { body.rules main .cg.cg:not(#cg) { grid-template-columns: minmax(0, 1fr) !important; } }

/* card: the house glass, radius 22, padding 24 */
body.rules main .cg > .cg-card:not(#cg) {
  background: var(--gl-bg) !important; border: 1px solid var(--gl-border) !important; border-radius: 22px !important;
  box-shadow: var(--gl-hi), var(--gl-shadow) !important;
  -webkit-backdrop-filter: var(--gl-blur) !important; backdrop-filter: var(--gl-blur) !important;
  padding: 24px !important; margin: 0 !important; min-width: 0; text-align: left !important;
  --ei-size: 64px; --ei-bleed: 0px; }

/* a picture that fills the top: full-bleed, the text below keeps the 24px */
body.rules main .cg > .cg-card.cg-media:not(#cg) { padding: 0 !important; overflow: hidden; }
body.rules main .cg > .cg-card.cg-media > :first-child { margin: 0 !important; border-radius: 0 !important; }
body.rules main .cg > .cg-card.cg-media > :not(:first-child) { padding: 24px !important; }

/* icon on top: 64, 14 below it */
body.rules main .cg > .cg-card > .r-col-head:not(#cg) { height: auto !important; min-height: 0 !important; margin: 0 0 14px !important; gap: 10px; }
body.rules main .cg > .cg-card > .r-col-head img.gi:not(#cg), body.rules main .cg > .cg-card > img.gi:first-child:not(#cg),
body.rules main .cg > .cg-card > .r-glyph:first-child img.gi:not(#cg) { width: 64px !important; height: 64px !important; }
body.rules main .cg > .cg-card > :is(img.gi, .r-glyph):first-child:not(#cg) { margin: 0 0 14px !important; }
body.rules main .cg > .cg-card > :is(span, div):has(> img.gi, > .ei-slot):first-child:not(#cg) { margin: 0 0 14px !important; }
body.rules main .cg > .cg-card > :has(> .ei-slot):first-child:not(#cg) { margin: 0 0 14px !important; line-height: 0; }
body.rules main .cg > .cg-card .ei-slot:not(#cg) { width: 64px; height: 64px; margin: 0 !important; }

/* type: title 18/28 600, body 14/20 (unitless, so an inline tag in the title keeps its own line box) — on a phone (≤820, where parts/mobile.css takes reading text to 17)
   the canon measures title 18/1.3 and body 17/1.5, so the same card reads the same there too */
body.rules main .cg > .cg-card .cg-t:not(#cg) {
  font-size: 18px !important; line-height: 1.5556 !important; font-weight: 600 !important;
  margin: 0 0 8px !important; min-height: 0 !important; text-align: left !important; }
body.rules main .cg > .cg-card p:not(.cg-t):not([class*="uppercase"]):not([class*="tracking-"]):not(#cg) { font-size: 14px !important; line-height: 1.4286 !important; max-width: none !important; text-align: left !important; }
@media (max-width: 820px) {
  body.rules main .cg > .cg-card .cg-t:not(#cg) { line-height: 1.3 !important; }
  body.rules main .cg > .cg-card p:not(.cg-t):not([class*="uppercase"]):not([class*="tracking-"]):not(#cg) { font-size: 17px !important; line-height: 1.5 !important; }
}
body.rules main .cg > .cg-card p:not(.cg-t):not([class*="uppercase"]):not([class*="tracking-"]):not([class*="4d74ff"]):not([class*="2f52d8"]):not([class*="3a63f5"]):not(#cg) { color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k, 0) * 100%)) !important; }
body.rules main .cg > .cg-card > p[class*="uppercase"]:first-child:not(#cg) { text-align: left !important; margin: 0 0 10px !important; }


/* ───── parts/carousel.css ───── */
/* =============================================================================
   parts/carousel.css — grade de categorias → CARROSSEL horizontal com o
   COMPONENTE DE PRODUTO REAL da Brikl (Alloy `.pcard`).

   Origem do componente: ~/alloy-design-pull/main.css (bloco `.pcard`, linhas
   ~2340–2420) + tokens do DS em
   ~/alloy-design-pull/_ds/ion-design-system-brikl-…/colors.css e
   colors_and_type.css. Classes, medidas e nomes de token são os do original.
   (GOTCHA: nunca escrever o par asterisco-barra dentro de um comentário CSS —
   fecha o comentário no meio e o parser come a regra seguinte inteira. Foi o
   que derrubou o bloco de tokens na primeira rodada.)

   ANATOMIA: segue o print do Marketplace (alloy-shots/marketplace.png), que é
   mais novo que o main.css do pull de 31/08: lá as pílulas ficam SOBREPOSTAS à
   imagem; no print elas ficam ABAIXO, no corpo do cartão, e o nome vem antes da
   linha ID/preço. Adotei a ordem do print.

   ESCOPO: tudo pende de `.pc-sec`, que só existe onde o JS constrói. O JS sai
   fora na home. Nenhuma regra global, nenhum token no :root.
   ============================================================================= */

/* ---------- tokens do DS (escopados; NUNCA no :root) --------------------- */
.pc-sec {
  /* primitivos Carbon/Brikl — colors.css */
  --gray-10: rgb(243,243,243); --gray-20: rgb(224,224,224); --gray-30: rgb(199,199,199);
  --gray-40: rgb(149,149,149); --gray-50: rgb(141,141,141); --gray-60: rgb(111,111,111);
  --gray-70: rgb(87,87,87);    --gray-80: rgb(57,57,57);    --gray-90: rgb(38,38,38);
  --gray-100: rgb(22,22,22);   --white: rgb(255,255,255);
  --brand-20: rgb(204,218,255); --brand-30: rgb(156,181,252);
  --brand-60: rgb(50,98,234);   --brand-80: rgb(25,57,143);

  /* semânticos (tema claro — padrão do DS) */
  --layer-01: var(--white);
  --layer-02: var(--gray-10);
  --layer-hover: var(--gray-20);
  --border-subtle-00: var(--gray-20);
  --border-strong-01: var(--gray-50);
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-70);
  --text-placeholder: var(--gray-40);
  --icon-secondary: var(--gray-70);
  --background-inverse: var(--gray-100);
  --text-inverse: var(--white);
  --interactive-primary: var(--brand-60);

  /* tipografia e raios — colors_and_type.css */
  --brks-font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --brks-radius-pill: 9999px;

  /* chrome do cartão — main.css §Product Card (tema claro) */
  --pc-card-shadow: 0 4px 24px rgba(0,0,0,.06);
  --pc-card-shadow-hover: 0 8px 28px rgba(0,0,0,.10);
  --pc-rim: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.10));
  --pc-badge-brand-bg: var(--brand-20);
  --pc-badge-brand-fg: var(--brand-80);
  --pc-badge-brand-plus: var(--brand-60);

  /* do carrossel */
  /* largura do cartão. No print ele tem 202px porque a grade do Alloy põe 6 na
     largura do app (1600). Aqui a coluna de conteúdo da placa tem ~1080, e o
     componente é feito para adaptar a célula (container query): 240px dá 4
     cartões + uma espiada do quinto — na faixa do charter de responsivo da
     Brikl (ProductCard 224/280) e com fita que realmente rola. As medidas
     INTERNAS (raio 22, padding 10, poço 1:1, nome 13px) são as do print. */
  --pc-w: 240px;
  --pc-gap: 16px;         /* --dash-gutter (--brks-space-05) */
  --pc-bleed: 32px;       /* sangria até a borda da placa; o JS mede e reescreve */
}

/* Segunda fita da página: a seção "Popular X on Brikl" (11 páginas), que lista
   SKUs de verdade em vez de categorias. Diferenciada por DENSIDADE, não por
   outro componente: cartão de 200px — a largura exata do print do Alloy, e a
   densidade 5-up que o próprio componente assume numa coluna de ~1080. Sem
   parágrafo, o cartão também fica bem mais baixo. E o ritmo da página já
   separa as duas: a grade de categorias cai em `.r-plate` (placa lilás) e a
   Popular em `.r-plain` (fundo aberto) — medido, não suposto. */
.pc-sec--sku { --pc-w: 200px }

/* Numa célula estreita o próprio Alloy já manda empilhar as pílulas —
   `@container pcard (max-width:159px)`: `flex-direction: column-reverse`,
   alinhadas à esquerda, FORNECEDOR acima e decoração abaixo. Aqui a célula é
   200px, mas o corpo útil dá 168px e pares como "Embroidery" + "Fulfill Engine"
   (184px) não cabem numa tira só — parte dos cartões quebrava e parte não.
   Adoto a pilha do componente na fita inteira: arranjo consistente e é a
   decisão do próprio DS para pouco espaço. */
/* especificidade dobrada de propósito: o bloco base de `.pcard__badges` vem
   depois neste arquivo e ganharia no desempate por ordem */
.pc-sec.pc-sec--sku .pcard__badges {
  height: auto; flex-direction: column-reverse; align-items: flex-start; gap: 4px; flex-wrap: nowrap;
}
.pc-sec.pc-sec--sku .pcard__badges .badge { margin-left: 0; max-width: 100% }

/* tema escuro: a página inteira escurece por `--k` e o components.js marca
   body.is-dark. Os valores são os do bloco [data-theme="dark"] do DS. */
body.is-dark .pc-sec {
  --layer-01: var(--gray-90);
  --layer-02: var(--gray-80);
  --layer-hover: var(--gray-80);
  --border-subtle-00: var(--gray-80);
  --text-primary: var(--gray-10);
  --text-secondary: var(--gray-30);
  --text-placeholder: var(--gray-50);
  --icon-secondary: var(--gray-30);
  --background-inverse: var(--gray-10);
  --text-inverse: var(--gray-100);
  --pc-card-shadow: 0 4px 24px rgba(0,0,0,.45);
  --pc-card-shadow-hover: 0 10px 32px rgba(0,0,0,.60);
  --pc-rim: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  --pc-badge-brand-bg: var(--brand-80);
  --pc-badge-brand-fg: var(--brand-20);
  --pc-badge-brand-plus: var(--brand-30);
}

/* ---------- cabeçalho da seção: título CENTRADO, setas embaixo ----------
   O título ao centro devolve a seção ao mesmo eixo das outras da página (a regra
   geral já centra o h2 das seções que não são prosa nem split). Com ele ao centro
   a seta no canto superior direito fica desequilibrada, então ela desce para baixo
   da fita, centrada — no mesmo eixo do cartão-herói do arco. */
.pc-head {
  display: block; text-align: center; margin-bottom: 18px;
}
.pc-head > h2, .pc-head > .pc-headtx { margin: 0; min-width: 0 }
.pc-headtx > h2 { margin: 0 }
.pc-headtx > p { margin: 8px auto 0; max-width: 62ch }

.pc-nav { display: flex; gap: 12px; justify-content: center; margin-top: 16px }
.pc-nav[hidden] { display: none !important }
.pc-arrow {
  width: 36px; height: 36px; padding: 0; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: var(--brks-radius-pill);
  background: var(--layer-01); color: var(--icon-secondary);
  box-shadow: var(--pc-card-shadow), 0 0 0 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
  cursor: pointer; transition: color .12s, background .12s, opacity .16s, box-shadow .12s;
}
.pc-arrow:hover:not(:disabled) { color: var(--interactive-primary); background: var(--layer-hover) }
.pc-arrow:focus-visible { outline: 2px solid var(--interactive-primary); outline-offset: 2px }
.pc-arrow:disabled { opacity: .3; cursor: default }
.pc-arrow svg { width: 20px; height: 20px; display: block; fill: currentColor }

/* ---------- a fita ------------------------------------------------------ */
.pc-rail {
  display: flex; gap: var(--pc-gap);
  overflow-x: auto; overflow-y: hidden;
  /* sangra até a borda da placa e devolve o respiro por dentro: as sombras dos
     cartões não ficam cortadas e o cartão nasce alinhado com o título */
  margin-inline: calc(-1 * var(--pc-bleed));
  padding-inline: var(--pc-bleed);
  scroll-padding-inline: var(--pc-bleed);
  padding-block: 4px 14px;             /* espaço p/ a sombra respirar */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;      /* não empurra a navegação do browser */
  cursor: grab;
  /* névoa nas pontas: o cartão some contra a placa em vez de bater numa aresta */
  --pc-fade-l: 0px; --pc-fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pc-fade-l), #000 calc(100% - var(--pc-fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--pc-fade-l), #000 calc(100% - var(--pc-fade-r)), transparent 100%);
  transition: -webkit-mask-image .2s linear, mask-image .2s linear;
}
.pc-rail::-webkit-scrollbar { display: none }
.pc-rail:focus-visible { outline: 2px solid var(--interactive-primary); outline-offset: 4px; border-radius: 8px }
.pc-rail.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto }
.pc-rail.is-drag .pcard { pointer-events: none }
.pc-rail.can-l { --pc-fade-l: 28px }
.pc-rail.can-r { --pc-fade-r: 28px }

/* host da container query — classe do próprio Alloy */
.pc-rail .cardhost {
  container-type: inline-size; container-name: pcard;
  flex: 0 0 auto; width: var(--pc-w); min-width: 0;
  scroll-snap-align: start;
}

/* ---------- .pcard — portado de ~/alloy-design-pull/main.css ------------- */
/* chrome escala por um único conjunto de vars, como no original */
.pc-sec .pcard {
  --pc-r: 22px; --pc-pad: 10px; --pc-corner: 10px;
  --pc-badge-h: 24px; --pc-badge-px: 10px; --pc-badge-fs: 11px;
  position: relative; background: var(--layer-01);
  border-radius: var(--pc-r); box-shadow: var(--pc-card-shadow);
  padding: var(--pc-pad);
  display: flex; flex-direction: column; gap: 10px;
  isolation: isolate; transition: box-shadow .15s;
  height: 100%; box-sizing: border-box;
  font-family: var(--brks-font);
  /* o ladrilho de categoria do site NÃO é link nem abre nada: sem cursor de
     ponteiro e sem o lift do original — o cartão não promete o que não faz */
  cursor: default;
}
.pc-sec .pcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; background: var(--pc-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.pc-sec .pcard:hover { box-shadow: var(--pc-card-shadow-hover) }

/* poço da imagem: 1:1, raio concêntrico (raio do cartão − padding) */
.pc-sec .pcard__img {
  width: 100%; aspect-ratio: 1/1;
  border-radius: calc(var(--pc-r) - var(--pc-pad));
  background-repeat: no-repeat; background-position: center; background-size: cover;
  background-color: var(--layer-02);
  position: relative; border: 1px solid var(--border-subtle-00);
  overflow: hidden;
}

/* MEDIDO: as 66 fotos de /images/categories/thumbs/ são todas 360×289 e são
   recortes do PRÓPRIO cartão de produto da Brikl — trazem a pílula preta do
   fornecedor e a lilás de decoração assadas na base (9 delas) e o chip de
   região no canto superior direito (a maioria, a partir de x≈303). Mostrá-las
   inteiras seria cartão dentro de cartão. MEDIDO: a pílula preta começa em
   y≈267 e o chip em x≈303 — a janela abaixo recorta a fonte em x 43–303 /
   y 0–260, tira os dois e sobra só o produto (7px fora do centro, imperceptível).
   Fotos remotas (printify / fulfillengine) são limpas e NÃO levam esta regra. */
.pc-sec .pcard__img--thumb { background-size: 138.46% auto; background-position: 43% 0 }

/* estado SEM IMAGEM — o placeholder do próprio Alloy (main.html `phArt`):
   moldura tracejada com o nome no meio. Reproduzido em DOM (e não como SVG
   data-URI) para poder quebrar nomes longos e seguir o tema. */
.pc-sec .pcard__img--ph { background-color: var(--layer-02) }
.pc-sec .pcard__ph {
  position: absolute; inset: 6.5%;
  border: 1.4px dashed color-mix(in srgb, var(--text-placeholder) 70%, transparent);
  border-radius: 7.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 10px; text-align: center;
}
.pc-sec .pcard__ph-glyph { font-size: 30px; line-height: 1 }
.pc-sec .pcard__ph-label {
  font: 600 11px/1.35 var(--brks-font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-placeholder);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.pc-sec .pcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 4px 6px 6px }

/* nome — reserva SEMPRE duas linhas (2 × 1.35) para os rodapés alinharem
   entre cartões, como no original */
.pc-sec .pcard__name {
  font: 700 13px/1.35 var(--brks-font); color: var(--text-primary);
  margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
/* descrição — ACRÉSCIMO ao componente: o ladrilho do site traz um parágrafo
   real e jogá-lo fora seria perder conteúdo. Usa os tokens de texto do DS. */
.pc-sec .pcard__desc {
  font: 400 12px/1.45 var(--brks-font); color: var(--text-secondary);
  margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- slots que só aparecem no cartão que CASOU com o catálogo do Alloy ----
   Portados do mesmo bloco `.pcard` do main.css, na ordem do print: nome,
   linha "ID … / From $…", pílulas, rodapé "faixa de tamanhos + bolinhas".
   GOTCHA: `.sw` é a classe das palavras do h2 no passe de revelação do
   components.js, e o h2 vive DENTRO de `.pc-sec` — por isso a bolinha é
   sempre `.swatches .sw`, nunca `.sw` solto. */
.pc-sec .pcard__idrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; min-width: 0;
}
.pc-sec .pcard__id { font: 400 12px/1.3 var(--brks-font); color: var(--text-secondary); white-space: nowrap }
.pc-sec .pcard__price-row { display: flex; align-items: baseline; gap: 4px; white-space: nowrap }
.pc-sec .pcard__starting { font: 400 13px/1.3 var(--brks-font); color: var(--text-secondary) }
.pc-sec .pcard__price { font: 700 13px/1.3 var(--brks-font); color: var(--text-primary) }
.pc-sec .pcard__footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-block-start: auto; padding-top: 10px;
}
.pc-sec .pcard__size { font: 400 12px/1 var(--brks-font); color: var(--text-primary) }
.pc-sec .pcard__fright { display: flex; align-items: center; gap: 6px; min-width: 0 }
.pc-sec .swatches { display: flex; align-items: center; gap: 5px }
.pc-sec .swatches .sw { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong-01) }
.pc-sec .swatches .more { font: 400 12px/1 var(--brks-font); color: var(--text-secondary) }
/* com rodapé, quem gruda no fundo é o rodapé — não as pílulas */
.pc-sec .pcard--full .pcard__badges { margin-block-start: 0 }

/* pílulas — .badge do original; a faixa é anti-colisão: o nome comprido do
   fornecedor encolhe e reticencia em vez de sobrepor a decoração */
.pc-sec .pcard__badges {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  min-height: var(--pc-badge-h); margin-block-start: auto;
  /* o original é uma tira única com reticências; aqui o rótulo de decoração é
     uma palavra inteira ("Embroidery"), não o código de 3 letras do Alloy, e
     dois rótulos longos não cabem em 200px. Quebra em duas linhas em vez de
     cortar o nome do fornecedor — quando cabem, o arranjo é o do print. */
  flex-wrap: wrap; row-gap: 6px;
}
.pc-sec .badge {
  height: var(--pc-badge-h); padding: 0 var(--pc-badge-px);
  border-radius: var(--brks-radius-pill);
  display: inline-flex; align-items: center;
  font: 500 var(--pc-badge-fs)/1 var(--brks-font); letter-spacing: .01em;
}
.pc-sec .badge--brand { flex: 0 0 auto; background: var(--pc-badge-brand-bg); color: var(--pc-badge-brand-fg) }
/* LOGO no lugar do nome da marca. Caixa de ALTURA FIXA (20px) e largura
   automática: com proporções de 0,9 a 11,8 entre os 49 arquivos, é a altura
   que mantém a família coerente — e é a caixa, não a imagem, que define o
   espaço, então os cartões não dançam de altura. Os wordmarks muito largos
   encolhem por `contain` em vez de estourar a tira. */
.pc-sec .pcard__brand {
  margin-left: auto; height: 20px; min-width: 0;
  /* TETO DE LARGURA, não só de altura. Medido no cartão de 240px: só com altura fixa
     o `bella_canvas` (proporção 11,8) dava 208px = 87% da largura do cartão, contra
     14% do `under_armour` (proporção 1,7) — seis vezes mais peso visual para o mesmo
     papel. Com o teto, o wordmark largo encolhe por `contain` e as duas marcas ficam
     na mesma ordem de área. O teto é relativo para a tira de 200px acompanhar. */
  max-width: min(45%, 104px);
  display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 1 auto;
}
.pc-sec .pcard__brand img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block }
/* os PNGs são preto puro sobre transparente: no escuro precisam virar branco */
body.is-dark .pc-sec .pcard__brand img { filter: invert(1) }

.pc-sec .badge--neutral {
  margin-left: auto; min-width: 0; display: block;
  line-height: var(--pc-badge-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--background-inverse); color: var(--text-inverse);
}

/* ---------- densidade: a CÉLULA decide, não a janela (container query do
   próprio Alloy, ponto de corte 159px) ----------------------------------- */
@container pcard (max-width: 159px) {
  .pc-sec .pcard {
    --pc-r: 18px; --pc-pad: 8px; --pc-corner: 8px;
    --pc-badge-h: 20px; --pc-badge-px: 8px; --pc-badge-fs: 11px; gap: 8px;
  }
  .pc-sec .pcard__body { padding: 2px 4px 4px }
  .pc-sec .pcard__name { font-size: 12px; margin-bottom: 6px }
  .pc-sec .pcard__desc { font-size: 11px; -webkit-line-clamp: 3 }
  /* poço estreito: as pílulas viram pilha alinhada à esquerda */
  .pc-sec .pcard__badges { height: auto; flex-direction: column-reverse; align-items: flex-start; gap: 4px }
  .pc-sec .pcard__badges .badge { margin-left: 0 }
}

/* ---------- faixa sm (<672px): cartão maior, com espiada no próximo ------ */
@media (max-width: 671.98px) {
  .pc-sec { --pc-w: min(248px, 64vw); --pc-gap: 12px }
  .pc-nav { justify-content: center }
}

/* =============================================================================
   ÓRBITA — o arco vivo
   A fita continua sendo um contêiner de rolagem nativo (é o que garante
   inércia de trackpad, teclado, snap e a promessa de nunca rolar a página).
   O arco é PURAMENTE VISUAL: cada cartão recebe um transform em função da
   distância até o centro do palco, recalculado em `requestAnimationFrame`.
   Nada de layout por quadro — só `transform` e `opacity`.
   ============================================================================= */
.pc-rail--orbit {
  perspective: 1500px; perspective-origin: 50% 44%;
  /* GOTCHA MEDIDO: com `scroll-snap` nativo a área de snap é a caixa
     TRANSFORMADA do cartão. O arco desloca essa caixa, o browser reancora, o
     arco recalcula — e o conjunto estabiliza 57px fora do centro. Na órbita o
     snap é nosso, calculado por `offsetLeft` (layout puro, imune ao
     transform). A fita simples continua com o snap do browser. */
  scroll-snap-type: none;
  /* a névoa das pontas fica sempre acesa: a fita é infinita, não tem ponta */
  --pc-fade-l: 40px; --pc-fade-r: 40px;
  padding-block: 26px 30px;            /* folga para o mergulho e a sombra */
}
.pc-rail--orbit .cardhost {
  scroll-snap-align: none;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
/* o cartão em foco é o único que recebe a sombra de destaque do Alloy */
.pc-rail--orbit .cardhost.is-focus .pcard { box-shadow: var(--pc-card-shadow-hover) }

/* MEDIDO E CORTADO: cheguei a pôr uma mancha radial da marca atrás do arco,
   seguindo o cartão em foco. Testei a 20% e a 34% de `--brand-60` e nas duas a
   placa lilás e os próprios cartões a engoliam — capturei e não se via. Ficou
   fora: o foco já é carregado pela escala, pela profundidade, pela opacidade e
   pela sombra de destaque do Alloy. Peso que não se vê não entra. */
.pc-orbit-wrap { position: relative }
.pc-orbit-wrap > .pc-rail { position: relative; z-index: 1 }

/* ---------- movimento reduzido ------------------------------------------ */
/* cai numa fita simples: sem perspectiva, sem inércia, sem repetição — o
   próprio carrossel de antes, que continua inteiro no mesmo código */
@media (prefers-reduced-motion: reduce) {
  .pc-rail { scroll-behavior: auto; transition: none }
  .pc-sec .pcard, .pc-arrow { transition: none }
  .pc-rail--orbit { perspective: none }
  .pc-rail--orbit .cardhost { transform: none !important; opacity: 1 !important }
}


/* ───── parts/guide.css ───── */
/* parts/guide.css — tokens the guide needs (Ion DS, light), scoped to the host; then the original sheet verbatim */
.cgd-sec { --white: rgb(255,255,255); --gray-10: rgb(243,243,243); --gray-20: rgb(224,224,224); --gray-30: rgb(199,199,199); --gray-40: rgb(149,149,149); --gray-50: rgb(141,141,141); --gray-60: rgb(111,111,111); --gray-70: rgb(87,87,87); --gray-100: rgb(22,22,22);
  --brand-20: rgb(204,218,255); --brand-60: rgb(50,98,234); --blue-50: rgb(69,137,255); --blue-70: rgb(0,67,206); --green-50: rgb(66,190,101);
  --purple-50: rgb(165,110,255); --purple-60: rgb(138,63,252); --purple-70: rgb(128,0,128); --purple-90: rgb(49,28,92);
  --background-hover: var(--gray-20); --border-interactive: var(--brand-60); --border-strong-01: var(--gray-50); --border-subtle-00: var(--gray-20); --border-subtle-01: var(--gray-30);
  --field-01: var(--gray-10); --field-02: var(--white); --highlight-default: var(--brand-20); --icon-interactive: var(--brand-60); --icon-secondary: var(--gray-70); --interactive-primary: var(--brand-60);
  --layer-01: var(--white); --layer-02: var(--gray-10); --layer-active: var(--gray-30); --layer-selected: var(--gray-20); --link-primary: var(--brand-60); --support-success: var(--green-50);
  --text-helper: var(--gray-60); --text-on-brand: var(--white); --text-primary: var(--gray-100); --text-secondary: var(--gray-70);
  --brks-font: var(--font-poppins), "Poppins", system-ui, sans-serif; --brks-control-08: 80px; --brks-radius-lg: 8px; --brks-radius-pill: 9999px; --brks-radius-sm: 4px; --brks-radius-xs: 2px;
  --brks-space-01: 2px; --brks-space-02: 4px; --brks-space-03: 8px; --brks-space-04: 12px; --brks-space-05: 16px; --brks-space-06: 24px; --brks-space-07: 32px; --brks-space-08: 40px; --brks-space-13: 160px; }
/* inline SVG stands in for the icon font: the span keeps its font-size, the svg fills one em */
.cgd .cgd-ic { display: inline-grid; place-items: center; width: 1em; height: 1em; line-height: 1; }
.cgd .cgd-ic svg { width: 1em; height: 1em; display: block; }
/* the section: glass card under the graphite plate, same width as the story panels */
body.rules main section.cgd-sec { background: transparent !important; padding: 8px 0 24px !important; }
body.rules main section.cgd-sec .cgd-wrap { width: min(1408px, 100vw - 32px); margin: 0 auto; }
body.rules main section.cgd-sec .cgd-eyebrow { font: 600 13px/1.3 var(--font-poppins), system-ui; letter-spacing: .12em; text-transform: uppercase; color: #2f52d8; text-align: center; margin: 0 0 18px; }
body.rules main section.cgd-sec .cgd-glass { background: var(--gl-bg); border: 1px solid var(--gl-border); border-radius: 28px; box-shadow: var(--gl-hi), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); padding: 48px 56px; }
@media (max-width: 900px) { body.rules main section.cgd-sec .cgd-glass { padding: 28px 20px; } }
/* ───── original: assets/catalog-guide.css ───── */
/* assets/catalog-guide.css — empty-state guide for the Catalogs and Stores tables.
   Pairs with assets/catalog-guide.js (window.CatalogGuide, html(kind)). Scene
   rules key on the step's data-scene (new · sel · field · cta), timing on
   data-step; the root's data-n (3 | 4) sets the loop and the slice. Storyboard grammar
   from the order empty state (assets/pc/pc.css .pc-guide): a horizontal stepper
   on one loop, each step owning an equal slice — its scene brightens, its act
   plays, number and label light, and the number flips to a check when the act
   lands (the drawer's own markDone signal). Four steps → 25% each: the
   header's Create button, then miniatures of the drawer's tbs-dd /
   tbs-nm / tbs-cta. The store guide runs three slices on a shorter loop
   (the window stays 25% of it, so a beat of rest separates the steps).
   Owns no storage keys. */
/* the stepper scales with the band: gap and width breathe between tokens on
   the viewport, so three steps read as one line from a phone to a wide pane */
.cgd{width:100%;--cgd-loop:12s;display:flex;flex-direction:column;align-items:stretch;gap:var(--brks-space-05)}
/* one line says what this is: the table is empty, here is how it fills */
.cgd__intro{margin:0;align-self:center;width:min(100%,calc(var(--brks-space-13) * 2.5));text-align:center;text-wrap:pretty;font:400 13px/1.5 var(--brks-font);color:var(--text-secondary)}
.cgd__intro b{font-weight:600;color:var(--text-primary)}
/* the divider: hairline · glyph · hairline, the glyph nodding at the steps below */
.cgd__divider{display:flex;align-items:center;gap:var(--brks-space-03);width:min(100%,calc(var(--brks-space-13) * 2.5));align-self:center;color:var(--icon-secondary)}
.cgd__divider i{flex:1 1 auto;height:1px;background:var(--border-subtle-01)}
.cgd__divider .material-symbols-outlined{display:grid;place-items:center;height:var(--brks-space-06);font-size:18px;line-height:1;animation:cgd-nod 2.4s ease-in-out infinite}
@keyframes cgd-nod{0%,100%{transform:none}50%{transform:translateY(3px)}}
.cgd__steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(var(--brks-space-03),3vw,var(--brks-space-06));width:min(100%,calc(var(--brks-space-13) * 4.5));align-self:center}
.cgd__step{flex:1 1 128px;max-width:calc(var(--brks-space-13) + var(--brks-space-05));display:flex;flex-direction:column;align-items:center;gap:var(--brks-space-03);--cgd-d:0s}
.cgd__step[data-step="2"]{--cgd-d:calc(var(--cgd-loop) * .25)}
.cgd__step[data-step="3"]{--cgd-d:calc(var(--cgd-loop) * .5)}
.cgd__step[data-step="4"]{--cgd-d:calc(var(--cgd-loop) * .75)}
.cgd[data-n="3"]{--cgd-loop:11s}
.cgd[data-n="3"] .cgd__step[data-step="2"]{--cgd-d:calc(var(--cgd-loop) / 3)}
.cgd[data-n="3"] .cgd__step[data-step="3"]{--cgd-d:calc(var(--cgd-loop) / 3 * 2)}
/* scenes sit on the table's own white with a hairline; the active step's
   hairline turns to the field's focus stroke so it reads at full contrast */
.cgd__scene{position:relative;display:grid;place-items:center;overflow:hidden;width:100%;height:var(--brks-control-08);padding:var(--brks-space-03);box-sizing:border-box;border-radius:var(--brks-radius-lg);background:var(--layer-01);box-shadow:inset 0 0 0 1px var(--border-subtle-01);opacity:.55;animation:cgd-scene var(--cgd-loop) var(--cgd-d) infinite both}
/* scenes 1 and 2 hold a control AND its menu: the control sits at the top of
   the tile so the two-row panel fits inside the box (8 + 24 + 2 + 16 = 50 of 72px) */
.cgd__step[data-scene="sel"] .cgd__scene{align-content:start}
/* number → check, as the drawer's step markers do when a step is satisfied */
.cgd__num{order:2;position:relative;display:grid;place-items:center;width:var(--brks-space-05);height:var(--brks-space-05);border-radius:var(--brks-radius-pill);background:var(--layer-02);font:600 11px/1 var(--brks-font);color:var(--text-helper);animation:cgd-num var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__num b,.cgd__num .material-symbols-outlined{grid-area:1/1;font-weight:600}
.cgd__num .material-symbols-outlined{font-size:12px;opacity:0;animation:cgd-check var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__num b{animation:cgd-uncheck var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__lbl{order:3;width:100%;min-height:calc(2 * 1.35 * 12px);font:400 12px/1.35 var(--brks-font);color:var(--text-helper);text-align:center;text-wrap:pretty;animation:cgd-lbl var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__ln{display:block;height:var(--brks-space-01);width:58%;border-radius:var(--brks-radius-pill);background:var(--border-subtle-01)}
.cgd__ln--short{width:38%}
/* ── scene 1 — tbs-dd: chip · value/meta · chevron; popover, a row picked ── */
.cgd__sel{position:relative;display:flex;align-items:center;gap:var(--brks-space-02);width:100%;height:28px;padding:0 var(--brks-space-02);box-sizing:border-box;border-radius:var(--brks-radius-sm);background:var(--field-01);box-shadow:inset 0 0 0 1px var(--border-subtle-01);animation:cgd-sel var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__chip{display:grid;place-items:center;flex:0 0 auto;width:var(--brks-space-06);height:var(--brks-space-06);border-radius:var(--brks-radius-xs);background:var(--layer-02);color:var(--icon-secondary);animation:cgd-chip var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__chip .material-symbols-outlined{font-size:14px}
.cgd__txt{display:flex;flex-direction:column;gap:var(--brks-space-01);flex:1 1 auto;min-width:0}
.cgd__ln--val{width:70%;height:var(--brks-space-02);animation:cgd-val var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__ln--meta{width:46%;height:1px}
.cgd__chev{margin-left:auto;flex:0 0 auto;color:var(--icon-secondary);display:grid;place-items:center;animation:cgd-chev var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__chev .material-symbols-outlined{font-size:12px}
.cgd__pop{position:absolute;left:0;right:0;top:calc(100% + var(--brks-space-01));display:flex;flex-direction:column;border-radius:var(--brks-radius-sm);background:var(--layer-01);box-shadow:inset 0 0 0 1px var(--border-subtle-01);overflow:hidden;opacity:0;transform-origin:top;animation:cgd-pop var(--cgd-loop) var(--cgd-d) infinite both;z-index:1}
.cgd__opt{display:flex;align-items:center;gap:var(--brks-space-02);height:10px;padding:0 var(--brks-space-02)}
.cgd__opt .material-symbols-outlined{margin-left:auto;font-size:8px;color:var(--icon-interactive);opacity:0;animation:cgd-optck var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__opt.cgd__act{animation:cgd-opt var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__dot{display:block;flex:0 0 auto;width:var(--brks-space-02);height:var(--brks-space-02);border-radius:50%;background:var(--layer-02);box-shadow:inset 0 0 0 1px var(--border-subtle-01)}
/* ── scene pick — the wizard's two tbs-blank rows stacked, in miniature: 40→20px
   chip, title + meta line, check; dashed border reads "not picked", the first row
   turns solid brand + filled chip + check exactly as .tbs-blank.is-on does ── */
.cgd__pick{display:flex;flex-direction:column;gap:var(--brks-space-02);width:100%}
.cgd__tile{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:var(--brks-space-02);min-height:var(--brks-space-07);padding:var(--brks-space-01) var(--brks-space-02);box-sizing:border-box;border:1px dashed var(--border-strong-01);border-radius:var(--brks-radius-sm);background:var(--field-01);color:var(--text-primary);text-align:left}
.cgd__tchip{display:grid;place-items:center;width:20px;height:20px;border-radius:var(--brks-radius-sm);background:var(--background-hover);color:var(--icon-secondary)}
.cgd__tchip .material-symbols-outlined{font-size:12px}
.cgd__ttx{display:flex;flex-direction:column;gap:2px;min-width:0}
.cgd__tile .cgd__word{font:600 8px/1.1 var(--brks-font);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
.cgd__tile .cgd__ln--meta{width:70%}
.cgd__tile>.material-symbols-outlined{position:absolute;right:var(--brks-space-02);top:50%;transform:translateY(-50%);font-size:12px;font-variation-settings:'wght' 700;color:var(--icon-interactive);opacity:0}
.cgd__tile--on{animation:cgd-tile var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__tile--on .cgd__tchip{animation:cgd-tchip var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__tile--on>.material-symbols-outlined{animation:cgd-tck var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__step[data-scene="pick"] .cgd__tap{--cgd-tx:-50%;--cgd-ty:-55%}
/* a second lit tile (locker guide) follows the first by a beat: same keyframes, delay pushed 2% of the loop */
.cgd__tile--late,.cgd__tile--late .cgd__tchip,.cgd__tile--late>.material-symbols-outlined{animation-delay:calc(var(--cgd-d) + var(--cgd-loop) * .02)}
@keyframes cgd-tile{0%,7%{border-style:dashed;border-color:var(--border-strong-01);background:var(--field-01);box-shadow:none}9%,22%{border-style:solid;border-color:var(--border-interactive);background:var(--highlight-default);box-shadow:inset 0 0 0 1px var(--border-interactive)}25%,100%{border-style:dashed;border-color:var(--border-strong-01);background:var(--field-01);box-shadow:none}}
@keyframes cgd-tchip{0%,7%{background:var(--background-hover);color:var(--icon-secondary)}9%,22%{background:var(--interactive-primary);color:var(--text-on-brand,var(--white))}25%,100%{background:var(--background-hover);color:var(--icon-secondary)}}
@keyframes cgd-tck{0%,7%{opacity:0}9%,22%{opacity:1}25%,100%{opacity:0}}
/* ── scene 2 — tbs-nm: the field unlocks, the prefilled name lands ───────── */
.cgd__field{position:relative;display:flex;align-items:center;gap:var(--brks-space-01);width:92%;height:var(--brks-space-06);padding:0 var(--brks-space-02);box-sizing:border-box;border-radius:var(--brks-radius-sm);background:var(--field-01);box-shadow:inset 0 0 0 1px var(--border-subtle-01);opacity:.55;animation:cgd-field var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__typed{display:block;overflow:hidden;white-space:nowrap;width:0;font:500 10px/1 var(--brks-font);color:var(--text-primary);letter-spacing:.01em;animation:cgd-type var(--cgd-loop) var(--cgd-d) infinite both steps(15,end)}
/* one step per letter: "Falcons Fan Shop" is 16 */
.cgd[data-guide="store"] .cgd__typed{animation-timing-function:steps(16,end)}
.cgd[data-guide="order"] .cgd__typed{animation-timing-function:steps(15,end)}
.cgd[data-guide="suborg"] .cgd__typed{animation-timing-function:steps(15,end)}
.cgd__caret{display:block;flex:0 0 auto;width:1px;height:var(--brks-space-03);background:var(--interactive-primary);opacity:0;animation:cgd-caret var(--cgd-loop) var(--cgd-d) infinite both}
/* ── scene 3 — tbs-cta: bolt · label · arrow; pressed, the fill runs across ── */
.cgd__cta{position:relative;display:inline-flex;align-items:center;gap:var(--brks-space-02);width:100%;height:var(--brks-space-07);padding:0 var(--brks-space-03);box-sizing:border-box;border-radius:var(--brks-radius-lg);background:var(--interactive-primary);color:var(--text-on-brand,var(--white));overflow:hidden;animation:cgd-cta var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__cta .material-symbols-outlined{position:relative;font-size:16px;line-height:1}
.cgd__cta .cgd__word{flex:1 1 auto;text-align:left}
.cgd__ico{position:relative;display:grid;place-items:center;flex:0 0 auto;width:16px;height:16px}
.cgd__ico .material-symbols-outlined{grid-area:1/1}
.cgd__ico .material-symbols-outlined:nth-child(1){animation:cgd-ico-a var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__ico .material-symbols-outlined:nth-child(2){opacity:0;animation:cgd-ico-b var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__ico .material-symbols-outlined:nth-child(3){opacity:0;animation:cgd-ico-c var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__words{position:relative;display:grid;flex:1 1 auto;min-width:0;overflow:hidden}
.cgd__words .cgd__word{grid-area:1/1;text-align:left;font-size:10px;font-weight:800;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cgd__ico .material-symbols-outlined:nth-child(1){font-variation-settings:'FILL' 1}
.cgd__ico .material-symbols-outlined:nth-child(3){font-variation-settings:'wght' 700}
.cgd__word--b{opacity:0;animation:cgd-ico-c var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__word--a{animation:cgd-word-a var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__cta--run{animation-name:cgd-ctarun;gap:var(--brks-space-01);padding:0 var(--brks-space-02)}
/* room for the run word ("Creating your order" ~104px): the pill steps hold a
   wider tile than the others */
/* the cta scene: the run pill's words need room; the suborg guide's "Organization created" sits at the edge, so its tile gets the extra step */
.cgd__step[data-scene="cta"]{flex:1.6 1 160px;max-width:calc(var(--brks-space-13) + var(--brks-space-07))}
.cgd[data-guide="suborg"] .cgd__step[data-scene="cta"]{max-width:calc(var(--brks-space-13) + var(--brks-space-08))}
.cgd__word--run{opacity:0;font-weight:700;animation:cgd-word-run var(--cgd-loop) var(--cgd-d) infinite both}
/* the tail is the arrow at rest and the percentage while running; both are
   stacked in one cell whose width follows the wider (the 3-digit %), so the
   words never lose room to an empty slot */
.cgd__tail{position:relative;display:grid;place-items:center;flex:0 0 auto;min-width:16px}
.cgd__tail > *{grid-area:1/1}
.cgd__tail .material-symbols-outlined{animation:cgd-word-a var(--cgd-loop) var(--cgd-d) infinite both}
/* the percentage counts up the way the real tbcPct does: a CSS counter on an
   animated integer custom property */
@property --cgd-pct{syntax:'<number>';inherits:false;initial-value:0}
.cgd__pct{--cgd-pct:0;justify-self:end;white-space:nowrap;font:800 10px/1 var(--brks-font);font-variant-numeric:tabular-nums;opacity:0;counter-reset:pct calc(round(var(--cgd-pct)));animation:cgd-pct var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__pct::after{content:counter(pct) '%'}
.cgd__fill{position:absolute;top:0;left:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blue-70),var(--blue-50));box-shadow:1px 0 6px color-mix(in srgb,var(--blue-50) 55%,transparent);animation:cgd-fill var(--cgd-loop) var(--cgd-d) infinite both}
/* real words, tiny: the button labels the user will look for */
.cgd__word{position:relative;font:600 12px/1 var(--brks-font);white-space:nowrap;letter-spacing:.01em}
.cgd__word--sm{font-weight:500;color:var(--text-primary)}
/* ── scene 1 — the header's Create button (hdr-new__btn: plus · label, pill,
   right-aligned like the header) and its menu with Catalog picked ───────── */
.cgd__hdr{position:relative;display:flex;justify-content:center;width:100%}
.cgd__cta--new{width:auto;min-width:0;height:var(--brks-space-07);border-radius:var(--brks-radius-pill);padding:0 var(--brks-space-05) 0 var(--brks-space-04);gap:var(--brks-space-02);animation-name:cgd-ctanew}
.cgd__cta--new .material-symbols-outlined{font-size:16px;line-height:1}
.cgd__cta--new .cgd__word{font-size:12px}
/* the workbench's Brand product pill (pricing-workbench.css .pw-brandbtn) in
   miniature: 32px filled brand pill, sparkle, 600 label, count badge; pressed
   under the tap like the Create button (same cgd-ctanew beat) */
.cgd__cta--brand{width:auto;min-width:0;height:var(--brks-space-07);border-radius:var(--brks-radius-pill);padding:0 var(--brks-space-03) 0 var(--brks-space-03);gap:var(--brks-space-02);background:var(--interactive-primary);color:var(--text-on-brand,var(--white));box-shadow:0 1px 2px color-mix(in srgb,var(--interactive-primary) 18%,transparent),0 2px 8px color-mix(in srgb,var(--interactive-primary) 16%,transparent);animation-name:cgd-ctanew}
.cgd__cta--brand .material-symbols-outlined{font-size:14px;line-height:1}
.cgd__cta--brand .cgd__word{font:600 11px/1 var(--brks-font);letter-spacing:-.005em}
.cgd__bn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;border-radius:var(--brks-radius-pill);background:var(--white);color:var(--interactive-primary);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
/* ── pricing guide — three more controls exactly as main.html shows them ── */
/* a Catalogs table row (.ctbl-row): checkbox · name + meta line · status tag;
   the tap opens it — the row takes the selected wash on the beat */
.cgd__row{position:relative;display:flex;align-items:center;gap:var(--brks-space-03);width:100%;height:var(--brks-space-07);padding:0 var(--brks-space-03);box-sizing:border-box;border-radius:var(--brks-radius-xs);background:var(--layer-01);box-shadow:inset 0 -1px 0 var(--border-subtle-00);animation:cgd-row var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__cbx{display:block;flex:0 0 auto;width:12px;height:12px;box-sizing:border-box;border:1px solid var(--border-strong-01);border-radius:var(--brks-radius-xs)}
.cgd__rtx{display:flex;flex-direction:column;gap:var(--brks-space-01);flex:1 1 auto;min-width:0}
.cgd__rtx .cgd__word--sm{font-size:10px}
.cgd__rtag{display:inline-flex;align-items:center;flex:0 0 auto;height:14px;padding:0 5px;border-radius:var(--brks-radius-pill);background:var(--layer-02);color:var(--text-secondary);font:500 8px/1 var(--brks-font)}
@keyframes cgd-row{0%,6%{background:var(--layer-01)}7%,9%{background:var(--layer-active)}10%,22%{background:var(--layer-selected)}25%,100%{background:var(--layer-01)}}
/* the Pricing rules pill (.pw-rulepill): grey pill · label · chip; "No rule"
   gives way to "Markup 35 %" on the beat */
.cgd__rule{position:relative;display:inline-flex;align-items:center;gap:var(--brks-space-02);height:var(--brks-space-07);padding:0 var(--brks-space-02) 0 var(--brks-space-03);box-sizing:border-box;border-radius:var(--brks-radius-pill);background:var(--layer-02);box-shadow:inset 0 0 0 1px var(--border-subtle-01);animation:cgd-sel var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__rule .material-symbols-outlined{font-size:13px;color:var(--icon-secondary)}
.cgd__rule .cgd__word--sm{font-size:10px}
.cgd__rchip{display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:var(--brks-radius-pill);font:500 8.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
/* both chips share ONE in-flow slot (grid-area 1/1), so the pill is sized by the
   wider chip and the swap is an opacity crossfade, never an overlay */
.cgd__rslot{display:grid;flex:0 0 auto}
.cgd__rslot > .cgd__rchip{grid-area:1/1;justify-self:end}
.cgd__rchip--none{background:var(--layer-01);color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--border-subtle-01);animation:cgd-uncheck var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__rchip--on{background:var(--highlight-default);color:var(--link-primary);opacity:0;animation:cgd-check var(--cgd-loop) var(--cgd-d) infinite both}
/* the Active toggle (.pw-toggle): 32×18 track, 14px knob; grey → success green */
.cgd__tg{position:relative;display:inline-flex;align-items:center;gap:var(--brks-space-03)}
.cgd__tg .cgd__word--sm{font-size:10px}
.cgd__sw{position:relative;display:block;width:32px;height:18px;border-radius:var(--brks-radius-pill);background:var(--gray-40);animation:cgd-sw var(--cgd-loop) var(--cgd-d) infinite both}
.cgd__sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px rgba(0,0,0,.25);animation:cgd-knob var(--cgd-loop) var(--cgd-d) infinite both}
@keyframes cgd-sw{0%,8%{background:var(--gray-40)}10%,22%{background:var(--support-success)}25%,100%{background:var(--gray-40)}}
@keyframes cgd-knob{0%,8%{transform:none}10%,22%{transform:translateX(14px)}25%,100%{transform:none}}
/* the Turbo store row in miniature (main.css .dw-turbo--voltage): Voltage
   gradient, speed streaks, glowing filled bolt, 800 name, white ~10 s tag */
.cgd__cta--turbo{--tb-deep:var(--purple-90);--tb-mid:var(--purple-60);--tb-hot:var(--purple-50);width:auto;min-width:0;height:var(--brks-space-07);border-radius:var(--brks-radius-lg);padding:0 var(--brks-space-03) 0 var(--brks-space-02);gap:var(--brks-space-02);overflow:hidden;isolation:isolate;color:var(--white);background:linear-gradient(108deg,var(--tb-deep),var(--tb-mid) 62%,var(--tb-hot) 135%);box-shadow:0 2px 8px color-mix(in srgb,var(--tb-mid) 40%,transparent),inset 0 0 0 1px rgba(255,255,255,.16);animation-name:cgd-ctanew}
.cgd__cta--turbo::before{content:"";position:absolute;inset:-30% -12%;z-index:-1;background:repeating-linear-gradient(112deg,transparent 0 9px,rgba(255,255,255,.1) 9px 10px,transparent 10px 14px,rgba(255,255,255,.05) 14px 15px);pointer-events:none}
.cgd__cta--turbo .material-symbols-outlined{font-size:16px;line-height:1;font-variation-settings:'FILL' 1;filter:drop-shadow(0 0 3px rgba(255,255,255,.55))}
.cgd__cta--turbo .cgd__word{font:800 11px/1 var(--brks-font);letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.28)}
.cgd__ttag{position:relative;display:inline-flex;align-items:center;height:14px;padding:0 5px;border-radius:var(--brks-radius-pill);background:var(--white);color:var(--purple-70);font:800 8px/1 var(--brks-font);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (prefers-reduced-motion: no-preference){.cgd__cta--turbo .material-symbols-outlined{animation:cgd-bolt 2.6s ease-in-out infinite}}
@keyframes cgd-bolt{0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.35))}50%{filter:drop-shadow(0 0 7px rgba(255,255,255,.85))}}
/* the tap — the pointer the order guide uses: glides in, presses, leaves */
.cgd__tap{position:absolute;left:50%;top:50%;width:var(--brks-space-03);height:var(--brks-space-03);margin:calc(-1 * var(--brks-space-02)) 0 0 calc(-1 * var(--brks-space-02));border-radius:50%;background:var(--text-primary);box-shadow:0 0 0 2px var(--layer-01);opacity:0;pointer-events:none;animation:cgd-tap var(--cgd-loop) var(--cgd-d) infinite both;--cgd-tx:0%;--cgd-ty:0%;z-index:2}
.cgd__step[data-scene="new"] .cgd__tap{--cgd-tx:90%;--cgd-ty:40%}
.cgd__step[data-scene="sel"] .cgd__tap{--cgd-tx:-40%;--cgd-ty:90%}
.cgd__step[data-scene="field"] .cgd__tap{--cgd-tx:-60%;--cgd-ty:0%}
/* the locker guide explains rather than instructs: no pointer taps its scenes */
.cgd[data-guide="locker"] .cgd__tap{display:none}
/* windows: 0–25% active (3% in, 22–25% out); acts fire 6–14%, the check lands
   at 17% — the step reads as satisfied before the next one takes over */
@keyframes cgd-scene{0%{opacity:.55;transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--border-subtle-01)}3%{opacity:1;transform:none;box-shadow:inset 0 0 0 1px var(--border-strong-01)}22%{opacity:1;transform:none;box-shadow:inset 0 0 0 1px var(--border-strong-01)}25%,100%{opacity:.55;transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--border-subtle-01)}}
@keyframes cgd-num{0%{background:var(--layer-02);color:var(--text-helper)}2%,15%{background:var(--field-02,var(--layer-02));color:var(--text-primary)}17%,23%{background:var(--interactive-primary);color:var(--text-on-brand,var(--white))}26%,100%{background:var(--layer-02);color:var(--text-helper)}}
@keyframes cgd-check{0%,15%{opacity:0;transform:scale(.6)}17%,23%{opacity:1;transform:none}25%,100%{opacity:0;transform:scale(.6)}}
@keyframes cgd-uncheck{0%,15%{opacity:1}17%,23%{opacity:0}25%,100%{opacity:1}}
@keyframes cgd-lbl{0%{color:var(--text-helper)}2%,23%{color:var(--text-primary)}26%,100%{color:var(--text-helper)}}
/* scene 1: the tap presses Create at 7%, the menu drops 8–14%, Catalog takes
   the wash at 11% */
@keyframes cgd-ctanew{0%,5%{transform:none;filter:none}7%,9%{transform:scale(.96);filter:brightness(.78)}11%,100%{transform:none;filter:none}}
/* scene 1: tap lands 6% → popover 7–12% → pick 10% → field takes it 13% */
@keyframes cgd-sel{0%,5%{box-shadow:inset 0 0 0 1px var(--border-subtle-01)}7%,22%{box-shadow:inset 0 0 0 1px var(--border-interactive)}25%,100%{box-shadow:inset 0 0 0 1px var(--border-subtle-01)}}
@keyframes cgd-chev{0%,6%{transform:none}7%,11%{transform:rotate(180deg)}13%,100%{transform:none}}
@keyframes cgd-pop{0%,6%{opacity:0;transform:scaleY(.8) translateY(-2px)}7%{opacity:1;transform:none}11%{opacity:1;transform:none}13%,100%{opacity:0;transform:scaleY(.8) translateY(-2px)}}
@keyframes cgd-opt{0%,9%{background:transparent;box-shadow:none}10%,11%{background:var(--highlight-default);box-shadow:inset 3px 0 0 var(--interactive-primary)}13%,100%{background:transparent;box-shadow:none}}
@keyframes cgd-optck{0%,9%{opacity:0}10%,11%{opacity:1}13%,100%{opacity:0}}
@keyframes cgd-chip{0%,12%{background:var(--layer-02);color:var(--icon-secondary)}14%,22%{background:var(--highlight-default);color:var(--icon-interactive)}25%,100%{background:var(--layer-02);color:var(--icon-secondary)}}
@keyframes cgd-val{0%,12%{background:var(--border-subtle-01);width:70%}14%,22%{background:var(--text-helper);width:56%}25%,100%{background:var(--border-subtle-01);width:70%}}
/* scene 2: field unlocks 4% → name lands 7% → caret blinks → tap taps 9% */
@keyframes cgd-field{0%,3%{opacity:.55;box-shadow:inset 0 0 0 1px var(--border-subtle-01)}5%{opacity:1;box-shadow:inset 0 0 0 1px var(--border-subtle-01)}9%,22%{opacity:1;box-shadow:inset 0 0 0 1px var(--border-interactive)}25%,100%{opacity:.55;box-shadow:inset 0 0 0 1px var(--border-subtle-01)}}
@keyframes cgd-type{0%,8%{width:0}18%,22%{width:100%}25%,100%{width:0}}
@keyframes cgd-caret{0%,8%{opacity:0}9%{opacity:1}11%{opacity:0}13%{opacity:1}15%{opacity:0}17%{opacity:1}19%{opacity:0}21%{opacity:1}25%,100%{opacity:0}}
/* scene 3: tap presses 7% → fill runs 8–15% → done */
@keyframes cgd-cta{0%,5%{transform:none;opacity:.55}6%{opacity:1}7%{transform:translateY(1px)}9%,22%{transform:none;opacity:1}25%,100%{transform:none;opacity:.55}}
/* is-creating: the track goes near-black at 8% and stays through done */
@keyframes cgd-ctarun{0%,5%{transform:none;opacity:.55;background:var(--interactive-primary)}6%{opacity:1}7%{transform:translateY(1px)}8%,22%{transform:none;opacity:1;background:var(--gray-100)}25%,100%{transform:none;opacity:.55;background:var(--interactive-primary)}}
@keyframes cgd-fill{0%,8%{width:0}17%,22%{width:100%}25%,100%{width:0}}
@keyframes cgd-word-run{0%,7%{opacity:0}8%,17%{opacity:1}18%,100%{opacity:0}}
@keyframes cgd-pct{0%,7%{opacity:0;--cgd-pct:0}8%{opacity:1;--cgd-pct:0}17%{opacity:1;--cgd-pct:100}18%,100%{opacity:0;--cgd-pct:100}}
@keyframes cgd-ico-a{0%,7%{opacity:1}8%,22%{opacity:0}25%,100%{opacity:1}}
@keyframes cgd-ico-b{0%,7%{opacity:0;transform:none}8%{opacity:1;transform:none}17%{opacity:1;transform:rotate(1080deg)}18%,100%{opacity:0;transform:rotate(1080deg)}}
@keyframes cgd-ico-c{0%,17%{opacity:0;transform:scale(.6)}18%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:scale(.6)}}
@keyframes cgd-word-a{0%,7%{opacity:1}8%,22%{opacity:0}25%,100%{opacity:1}}
@keyframes cgd-tap{0%,2%{opacity:0;transform:translate(calc(var(--cgd-tx) + 120%),calc(var(--cgd-ty) + 160%))}5%{opacity:1;transform:translate(var(--cgd-tx),var(--cgd-ty)) scale(1)}7%{transform:translate(var(--cgd-tx),var(--cgd-ty)) scale(.7)}9%{transform:translate(var(--cgd-tx),var(--cgd-ty)) scale(1)}11%{opacity:1;transform:translate(var(--cgd-tx),var(--cgd-ty)) scale(1)}14%,100%{opacity:0;transform:translate(calc(var(--cgd-tx) + 80%),calc(var(--cgd-ty) + 140%))}}
/* multi-device: below the md band the storyboard reads as a vertical list —
   every step on its own row, its scene at a fixed width on the left, number
   and label stacked beside it. Same acts, same clock; nothing shrinks. */
@media (max-width:671.98px){
  .cgd__steps{flex-direction:column;align-items:stretch;gap:var(--brks-space-04);max-width:min(100%,calc(var(--brks-space-13) * 2.25))}
  .cgd__step{display:grid;grid-template-columns:calc(var(--brks-space-13) + var(--brks-space-07)) minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--brks-space-04);row-gap:var(--brks-space-01);align-items:center;flex:none;max-width:none}
  .cgd__scene{grid-row:1 / span 2;height:var(--brks-control-08);padding:var(--brks-space-03)}
  .cgd__num{order:0;grid-column:2;align-self:end;justify-self:start}
  .cgd__lbl{order:0;grid-column:2;align-self:start;text-align:left;min-height:0}
  /* the two-line label runs on one line here (labels carry a space before the break) */
  .cgd__lbl br{display:none}
  .cgd__step[data-scene="field"] .cgd__field,.cgd__step[data-scene="cta"] .cgd__cta{width:100%}
  /* the run pill's words need ~110px at 10px/800 ("Creating your store"):
     a 192px scene minus padding and icon leaves 144px; the arrow gives way */
  .cgd__cta--run .cgd__tail .material-symbols-outlined{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cgd *{animation:none}
  .cgd__divider .material-symbols-outlined{transform:none}
  .cgd__tap,.cgd__caret,.cgd__pop{display:none}
  .cgd__scene,.cgd__field,.cgd__cta{opacity:1}
  .cgd__scene{box-shadow:inset 0 0 0 1px var(--border-strong-01)}
  .cgd__num{background:var(--interactive-primary);color:var(--text-on-brand,var(--white))}
  .cgd__num b{opacity:0}.cgd__num .material-symbols-outlined{opacity:1;transform:none}
  .cgd__lbl{color:var(--text-primary)}
  .cgd__chip{background:var(--highlight-default);color:var(--icon-interactive)}
  .cgd__tile--on{border-style:solid;border-color:var(--border-interactive);background:var(--highlight-default);box-shadow:inset 0 0 0 1px var(--border-interactive)}
  .cgd__tile--on .cgd__tchip{background:var(--interactive-primary);color:var(--text-on-brand,var(--white))}
  .cgd__tile--on>.material-symbols-outlined{opacity:1}
  .cgd__ln--val{background:var(--text-helper);width:56%}
  .cgd__typed{width:100%}
  .cgd__ico .material-symbols-outlined:nth-child(1),.cgd__ico .material-symbols-outlined:nth-child(2),.cgd__word--a,.cgd__word--run,.cgd__tail .material-symbols-outlined,.cgd__pct{opacity:0}
  .cgd__cta--run{background:var(--gray-100)}
  .cgd__ico .material-symbols-outlined:nth-child(3),.cgd__word--b{opacity:1;transform:none}
  .cgd__fill{width:100%}
}


/* ───── parts/heroes.css ───── */
/* parts/heroes.css — family convergence */
/* ============================================================
   HEROES + CLOSING CTAS (2026-10-05). Marks come from parts/heroes.js; the values are the canon as
   measured at 1440 (bw3-recovery/components/heroes/INVENTORY.md):
     two-column  = /features/catalogs, /merch-sellers  · centred = /faq, /guides  · closing = /merch-sellers
   Specificity is doubled on purpose: these have to win over the generic hero rules of components.css
   (`… section:is(.r-hero, .in-hero, :has(h1)) :is(h2, p) { font-size: inherit !important }` and friends).
   ============================================================ */

/* ---- type, both hero variants ---- */
body.rules main section.in-hero.hz-hero .hz-eb.hz-eb {
  font: 600 16px/26px var(--font-poppins), system-ui, sans-serif !important; letter-spacing: .05em !important; text-transform: uppercase !important;
  color: #2f52d8 !important; margin: 0 0 12px !important; padding: 0 !important; background: none !important; border: 0 !important; max-width: none !important; }
body.rules main section.in-hero.hz-hero h1.hz-h1.hz-h1 {
  font-size: 48px !important; font-weight: 600 !important; line-height: 60px !important; letter-spacing: -.03em !important;
  color: #0e1116 !important; margin: 0 0 20px !important; max-width: none !important; }
body.rules main section.in-hero.hz-hero p.hz-lead.hz-lead {
  font-size: 16px !important; line-height: 26px !important; font-weight: 400 !important; color: #565c68 !important; margin: 0 0 16px !important; }
body.rules main section.in-hero.hz-hero p.hz-lead.hz-lead:last-child { margin-bottom: 0 !important; }
/* the CTA pair: "Start free" + the secondary, 46px pills, 16px apart */
/* lead → pills 32px; the lead keeps 16px to a second paragraph (/features: the numbers line). Block margins collapse, so 32 wins either way */
body.rules main section.in-hero.hz-hero .hz-ctas.hz-ctas { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 16px !important; margin-top: 32px !important; padding: 0 !important; }
body.rules main section.in-hero.hz-hero .hz-ctas .hz-btn.hz-btn {
  display: block !important; height: auto !important; min-height: 0 !important; padding: 12px 24px !important; border-radius: 999px !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; width: auto !important; text-align: center !important; }

/* the copy column reads left in every two-column hero (a built hero inherited text-center from its old centred box) */
body.rules main section.in-hero.hz-two .hz-copy.hz-copy, body.rules main section.in-hero.hz-two .hz-copy :is(h1, p) { text-align: left !important; }
body.rules main section.in-hero.hz-two .hz-copy .hz-ctas.hz-ctas { justify-content: flex-start !important; }

/* ---- two columns: window / panel / framed photo (bleeding product photos keep their per-page geometry) ---- */
/* every two-column hero starts its row 64px under the header, like the canon (the cut-out one sat at 80) */
body.rules main section.in-hero.hz-two > .hz-two-wrap.hz-two-wrap { padding-top: 64px !important; }
body.rules main section.in-hero.hz-two.hz-frame { padding-bottom: 0 !important; }
body.rules main section.in-hero.hz-two.hz-frame > .hz-two-wrap.hz-two-wrap {
  max-width: 1152px !important; width: 100% !important; margin-inline: auto !important; padding: 64px 32px 0 !important; box-sizing: border-box; }
body.rules main section.in-hero.hz-two.hz-frame .hz-two-in.hz-two-in {
  display: flex !important; align-items: center !important; gap: 48px !important; grid-template-columns: none !important; }
body.rules main section.in-hero.hz-two.hz-frame .hz-two-in > .hz-copy.hz-copy { flex: 1 1 0 !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; }
body.rules main section.in-hero.hz-two.hz-frame .hz-two-in > .hz-media.hz-media {
  flex: 0 0 520px !important; width: 520px !important; max-width: 520px !important; margin: 0 !important; display: block !important; }
body.rules main section.in-hero.hz-two.hz-frame .hz-media :is(img, .hz-panel):not(.gi):not([class*="logo"]) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
/* a placeholder panel takes the window's proportion (the screenshot is 1.6:1) */
body.rules main section.in-hero.hz-two.hz-frame .hz-panel.hz-panel { aspect-ratio: 16 / 10 !important; height: auto !important; }
/* a single-column hero split into the canon's two columns (the window shot was below the CTAs) */
body.rules main section.in-hero.hz-two.hz-frame .hz-split.hz-split .hz-media img.hero-shot { margin: 0 0 28px !important; }
@media (max-width: 900px) {
  body.rules main section.in-hero.hz-two.hz-frame > .hz-two-wrap.hz-two-wrap { padding: 48px 16px 0 !important; }
  body.rules main section.in-hero.hz-two.hz-frame .hz-two-in.hz-two-in { display: block !important; }
  body.rules main section.in-hero.hz-two.hz-frame .hz-two-in > .hz-media.hz-media { width: 100% !important; max-width: 100% !important; margin-top: 40px !important; }
}

/* ---- centred, text only (the /faq · /guides hero) ---- */
body.rules main section.in-hero.hz-centre { padding-bottom: 8px !important; }
body.rules main section.in-hero.hz-centre > .hz-centre-in.hz-centre-in {
  max-width: 896px !important; width: 100% !important; margin-inline: auto !important; padding: 40px 32px 24px !important; box-sizing: border-box; text-align: center !important; }
body.rules main section.in-hero.hz-centre .hz-centre-in :is(.hz-eb, h1.hz-h1, p.hz-lead) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 832px !important; }
body.rules main section.in-hero.hz-centre .hz-centre-in > p:not(.hz-lead):not(.hz-eb) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
body.rules main section.in-hero.hz-centre .hz-ctas.hz-ctas { justify-content: center !important; }
body.rules main section.in-hero.hz-centre h1.hz-h1.hz-h1 { text-wrap: balance; }
@media (max-width: 900px) { body.rules main section.in-hero.hz-centre > .hz-centre-in.hz-centre-in { padding: 32px 16px 16px !important; } }
@media (max-width: 640px) { body.rules main section.in-hero.hz-hero h1.hz-h1.hz-h1 { font-size: 36px !important; line-height: 44px !important; } }

/* ============================================================
   CLOSING CTA = /merch-sellers: plain (no plate), centred, title 600 40/44, one lead 18.5/28.7 #565c68,
   "Start free" + secondary as 56px pills (32px sides, 16px type), 88px above and below.
   ============================================================ */
body.rules main section.hz-close.hz-close { background: transparent !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.rules main section.hz-close.hz-close > .r-cloud { display: none !important; }
body.rules main section.hz-close .hz-close-in.hz-close-in {
  max-width: 1080px !important; width: 100% !important; margin-inline: auto !important; padding: 88px 0 !important; box-sizing: border-box; text-align: center !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
/* a closing section written without a wrapper (the /faq one): the section is its own box */
body.rules main section.hz-close.hz-close.hz-close-in { padding: 88px 0 !important; max-width: 1080px !important; margin-inline: auto !important; }
body.rules main section.hz-close.hz-close .hz-ct.hz-ct {
  font-size: 40px !important; font-weight: 600 !important; line-height: 44px !important; letter-spacing: -.028em !important; color: #0e1116 !important;
  max-width: 880px !important; margin: 0 auto 14px !important; text-align: center !important; }
body.rules main section.hz-close.hz-close-nolead .hz-ct.hz-ct { margin-bottom: 52px !important; }
body.rules main section.hz-close.hz-close p.hz-cl.hz-cl {
  font-size: 18.5px !important; line-height: 1.55 !important; font-weight: 400 !important; color: #565c68 !important;
  max-width: 720px !important; margin: 0 auto 52px !important; text-align: center !important; }
body.rules main section.hz-close.hz-close .hz-cb.hz-cb { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important; }
body.rules main section.hz-close.hz-close-lone.hz-close-lone .hz-close-in > .hz-btn.hz-btn { display: inline-block !important; }
body.rules main section.hz-close.hz-close :is(.hz-cb .hz-btn, .hz-close-in > .hz-btn).hz-btn {
  display: block !important; height: auto !important; min-height: 0 !important; width: auto !important; padding: 14px 32px !important; border-radius: 999px !important;
  font-size: 16px !important; font-weight: 500 !important; line-height: 26px !important; text-align: center !important; }
body.rules main section.hz-close.hz-close .hz-btn-1.hz-btn-1 { background: #3a63f5 !important; border: 1px solid #3a63f5 !important; color: #fff !important; }
body.rules main section.hz-close.hz-close .hz-btn-2.hz-btn-2 { background: transparent !important; border: 1px solid rgba(58, 99, 245, .3) !important; color: #0e1116 !important; }
body.rules main section.hz-close.hz-close .hz-cx.hz-cx { margin: 24px auto 0 !important; text-align: center !important; }
@media (max-width: 640px) {
  body.rules main section.hz-close .hz-close-in.hz-close-in { padding: 64px 16px !important; }
  body.rules main section.hz-close.hz-close .hz-ct.hz-ct { font-size: 30px !important; line-height: 36px !important; }
}


/* ───── parts/icons.css ───── */
/* ===================== parts/icons.css — tamanho e encaixe do ícone glass =====================
 * [DE] O emoji era uma glifa de texto: ocupava a caixa de linha do elemento e herdava
 *      font-size/line-height. O ícone tem de ocupar exatamente a mesma caixa, senão o
 *      cartão cresce e o ritmo vertical da grade quebra.
 * [PARA] no repo: regras do componente de cartão (o slot do ícone).
 * Medida: o compartimento típico é `div.text-3xl mb-3` — font-size 30px, line-height 36px.
 * O SVG hero traz respiro dentro do viewBox (o objeto ocupa ~76% da caixa, o resto é a
 * sombra de contato e a folga). Por isso o <img> é 1.6× o font-size (48px) e as margens
 * negativas (--ei-bleed) devolvem esse respiro: a caixa de layout continua com 36px.
 * ============================================================================================ */

/* MEDIDO: em /showcase/ o compartimento é filho de um <a class="flex">. Como item de flex ele
 * encolhe, e o `max-width:100%` do reset do Tailwind puxava o ícone de 38px para 25–35px,
 * cada cartão com um tamanho diferente. Por isso os dois travam encolhimento e max-width. */
.ei { display: inline-block; max-width: none; flex: 0 0 auto; }
.ei-host { flex: 0 0 auto; }

/* compartimento: o emoji estava sozinho numa linha própria */
.ei-slot {
  display: block;
  width: var(--ei-size, 48px);
  height: var(--ei-size, 48px);
  margin-top: calc(var(--ei-bleed, 6px) * -1);
  margin-bottom: calc(var(--ei-bleed, 6px) * -1);
  margin-left: calc(var(--ei-bleed, 6px) * -1.1);   /* o objeto também tem folga lateral no viewBox */
  /* o glass foi desenhado pra placa escura; sobre claro a sombra de contato garante o contraste */
  filter: drop-shadow(0 2px 6px rgba(20, 24, 60, .18));
}

/* dentro de um título ou de uma linha de texto: a versão frontal (-sm), sem sombra de contato */
.ei-inline {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -.26em;
  margin-right: .3em;
}

/* o cartão com ícone alinha o conteúdo ao mesmo eixo do ícone */
.ei-host { line-height: 0; }
.ei-host > *:not(.ei) { line-height: normal; }

@media (prefers-reduced-motion: no-preference) {
  .ei-slot { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
  a:hover > .ei-slot,
  a:hover .ei-slot,
  .group:hover .ei-slot { transform: translateY(-2px) scale(1.04); }
}

/* o ícone virou o objeto da placa de imagem (ver `settle` no parts/icons.js): centraliza
   e devolve o respiro que as margens negativas do compartimento tinham tirado */
.ei-media { margin: 0 auto !important; }


/* ───── parts/mobile.css ───── */
/* mobile.css — a camada de design no telefone.
 * =====================================================================
 * REGRA DE OURO DESTE ARQUIVO: nada aqui pode alcançar o desktop.
 * TODA regra vive dentro de uma media query de largura pequena. Não existe
 * neste arquivo uma única declaração fora de `@media`. Se você acrescentar
 * alguma coisa, acrescente DENTRO de um dos blocos abaixo.
 *
 * Os dois degraus:
 *   ≤ 820px  → "mobile". É o degrau do PRÓPRIO site: é em 820 que o CSS do
 *              repo esconde `.mainnav` e acende o `.burger`. Reaproveitar o
 *              degrau dele evita uma terceira gramática de breakpoints.
 *   ≤ 560px  → "telefone". Refino do que só aperta de verdade no aparelho.
 *
 * Especificidade: a camada de design já tem muitas regras `!important` com
 * seletores `body.hero-x …` (0,2,2). Onde precisei vencer, DUPLIQUEI a classe
 * (`.hero-photo.hero-photo`) — o mesmo recurso que o components.css já usa em
 * `.r-col.r-col.r-col.r-col`. Nada de empilhar `!important` sobre `!important`
 * sem medir quem estava ganhando: cada caso está anotado com o seletor vencido.
 *
 * [PARA] no repositório: isto vira o bloco responsivo dos componentes do shell
 * (header/announce/footer) e dos componentes de página (hero, placas, colunas).
 * ===================================================================== */

/* =====================================================================
   §1. TRANSBORDO — a causa, não o sintoma
   Nenhuma das 182 páginas fechava em 390. Como o `<meta viewport>` do site é
   `width=device-width, initial-scale=1`, o Chrome do telefone NÃO mostra uma
   barra lateral: ele ALARGA o viewport de layout até caber o conteúdo e
   diminui o zoom. Medido: a home renderizava a 437 CSS px e a /why-brikl a
   495 — ou seja, a página inteira encolhia para 89% e 79% do tamanho
   desenhado. É isso que fazia "tudo parecer quebrado": não é uma faixa vazia
   ao lado, é o site inteiro em miniatura.
   Por isso `overflow-x: hidden` no body não resolveria NADA aqui: esconder a
   barra não desfaz o alargamento do viewport. Tem de sumir a causa.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 1a. O MEGA MENU (o culpado universal: 437px em TODAS as páginas) ---
   * Medido: `#m-cat .sh-wrap` é um grid de 3 colunas com 340px de caixa e
   * 412px de conteúdo (colunas 85+131+83 + 2 calhas de 34 + 68 de padding).
   * Os painéis ficam `visibility:hidden` quando fechados — invisíveis, mas
   * ainda NO LAYOUT, e portanto contando para o scrollWidth do documento.
   * Em ≤820 o próprio site já esconde a `.mainnav` e acende o `.burger`, que
   * abre o `#mobile`: os megas são inalcançáveis aqui. Saem do layout. */
  .sh .mega { display: none !important; }

  /* --- 1b. A PÍLULA DE AVISO (announce) ---
   * Medido: caixa de 358px com 401px de conteúdo. A `.sh-wrap` é flex com
   * `justify-content:center` e a cópia é `white-space:nowrap` (289px), então
   * o chip "Brikl v3.0" era empurrado para left:-38 e a seta para right:418.
   * No telefone a pílula passa a ocupar a largura da tela com folga e o texto
   * pode quebrar. Continua sendo a mesma pílula de vidro — só deixa de ser
   * uma linha só. */
  .sh .announce {
    left: 12px; right: 12px;
    transform: none;
    width: auto; max-width: none;
    border-radius: 20px;
  }
  .sh .announce .sh-wrap {
    height: auto; min-height: 46px;
    padding: 7px 14px;
    gap: 8px;
    /* `nowrap` de propósito: com `wrap` a seta caía sozinha numa segunda linha
     * e a pílula passava a comer 90px de TODA tela. Sem quebra de fileira, a
     * cópia é que quebra dentro dela e a seta fica na linha, ao lado. */
    flex-wrap: nowrap;
    justify-content: center;
  }
  .sh .announce .announce-copy {
    white-space: normal;
    text-align: left;
    line-height: 1.3;
    min-width: 0;          /* item de flex não encolhe sem isto (ver §1f) */
  }
  .sh .announce .announce-arrow { flex: 0 0 auto; }

  /* --- 1c. HEROS COM VÍDEO / FOTO ---
   * Medido: `video.hero-video` chegava com largura FIXA por página, vinda das
   * regras de ≤1240 do components.css (§38 `body.hero-why-brikl` 520px, §45
   * `body.hero-how-it-works` 560px, §50 `body.hero-features` 660px,
   * turbo-store 740px, order-builder 640px, product-catalog 615px) somadas a
   * margens negativas de -70 a -185. Nenhuma delas tem versão para o telefone,
   * então o hero sozinho levava a página a 495, 510, 528, 543, 555 e 659.
   * As regras vencidas são `body.hero-X video.hero-video` (0,2,2) com
   * !important; aqui a classe é duplicada → (0,3,2), que ganha por
   * especificidade e não por ordem de arquivo. */
  body video.hero-photo.hero-video.hero-video,
  body img.hero-photo.hero-photo,
  body .hero-photo.hero-photo.hero-photo {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    right: auto !important;
    scale: none !important;
  }
  /* a coluna que hospeda a peça também vinha travada em 480/660px
   * (vencendo `body.hero-features .hero-photo-col`, (0,2,1) → aqui (0,3,1)) */
  body .hero-photo-col.hero-photo-col.hero-photo-col {
    width: auto !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    right: auto !important;
    justify-content: center !important;
  }
  /* o hero montado em duas colunas vira pilha */
  body .has-hero-photo .hero-built,
  body .has-hero-photo > div {
    display: block !important;
  }

  /* --- 1d. LAUNCH-OFFER: a caixa de seleção do palco ---
   * Medido: `.lo-sel` é absoluta com 300px fixos dentro de um palco de 326 e
   * saía em right=495 (as alças `.lo-h` em 499). O palco é uma cena desenhada
   * em px; no telefone ela é reduzida em bloco, mantendo a composição. */
  /* CORRIGIDO: `min-height: 0` matava o palco. Medido depois disso: o palco ficava com 308×17 e a
     camiseta (161px, de `min(380px, 42vw)` = 164 no telefone) pendurava PARA FORA da seção — o fim
     do hero em 868 e a peça em 822..983, caindo por baixo da placa preta seguinte. E a caixa do
     logo, que na animação aterrissa sobre a peça, sobrepunha tudo porque a cena não tinha caixa.
     O palco é uma cena desenhada em px: ele precisa de altura, e a peça de tamanho de telefone. */
  body .lo-stage.lo-stage {
    overflow-x: clip;
    min-height: 290px !important;
  }
  /* `flex: 0 0 auto` é o que resolve de verdade: `.lo-stage` é flex, e a peça estava sendo
     ENCOLHIDA de 250 para 187,188px pelo shrink — a largura declarada era ignorada em silêncio. */
  body .lo-stage .lo-tee.lo-tee {
    width: 250px !important; flex: 0 0 auto !important;
    /* E as margens do desenho de desktop saem. Elas são `0 -60px -168px 0`: a peça sangra para
       baixo e para a direita na composição de 1440. Num palco centrado de telefone, o -168 engana
       a centragem — o flex centra a caixa EXTERNA (250-168 = 82), a peça pinta 250 a partir dali,
       e o resultado eram 146px de vazio em cima e 16px estourando embaixo. */
    margin: 0 auto !important;
  }
  body .lo-stage .lo-sel.lo-sel { width: 124px !important; max-width: calc(100% - 24px); }

  /* --- 1e. rede fina: qualquer seção de hero recorta o que sangra no eixo X.
   * `clip` (e não `hidden`) de propósito: não cria contexto de rolagem, não
   * quebra `position:sticky` e não come o arrasto dos carrosséis internos —
   * que continuam com o `overflow-x:auto` deles, intacto.
   * E SÓ no eixo X: pela regra da cascata de `overflow`, `clip` ao lado de
   * `visible` não força nenhum dos dois a virar `auto` (a coerção só acontece
   * quando um é visible/clip e o outro NÃO é) — então o eixo Y continua
   * visível e o sangramento vertical do hero por baixo da faixa de números
   * (margin-bottom negativa) continua funcionando.
   *
   * Especificidade medida (CSS.getMatchedStylesForNode): três regras estavam
   * ganhando de `.in-hero { overflow-x: clip }` do components.css §32 —
   *   `main .in-hero { overflow: visible }`                     (0,1,1)
   *   `.has-hero-photo { overflow: visible !important }`         (0,1,0)!
   *   `body.lo-page main section:first-of-type { overflow: visible }` (0,2,3)
   * daí (0,3,2) com !important aqui: vence as três por especificidade. */
  body main section.in-hero.in-hero.in-hero,
  body main section.r-hero.r-hero.r-hero { overflow-x: clip !important; }

  /* --- 1f. O PISO DE LARGURA MÍNIMA ---
   * Item de flex e de grid nasce com `min-width: auto`, ou seja, NÃO encolhe
   * abaixo do min-content do que tem dentro. Em 360px isso reaparecia em
   * cartões do tipo "título ... etiqueta de versão" (`flex justify-between`):
   * medido em /suppliers/connections/, a fileira tinha 203px de min-content e
   * o cartão inteiro 325px dentro de um trilho de 264 — a página ia a 373.
   * Zerar o piso é remover um chão acidental, não inventar layout: os itens
   * voltam a caber e o texto quebra onde já quebraria. */
  body main :is(.flex, [class*="flex"], .grid, [class*="grid-cols"]) > * { min-width: 0; }
  body main :is(p, li, h1, h2, h3, h4, dt, dd, figcaption) { overflow-wrap: break-word; }
}

/* =====================================================================
   §2. COMPONENTES DA CAMADA NO TELEFONE
   Princípio: não inventar layout novo. O que no desktop é fileira vira pilha,
   o que sangra sangra menos, o que é trilho continua trilho com o arrasto
   funcionando. A régua é o desenho aprovado.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 2a. FAIXA DE NÚMEROS (hw-stats) ---
   * Já ia a 2 colunas em ≤900 (components.css §37). Três defeitos no telefone:
   * (1) a faixa que O JS CONSTRÓI (`.hw-stats > .hw-stats-in`) vai de borda a
   *     borda e os numerais encostavam na tela — ganha respiro próprio;
   * (2) a faixa que JÁ EXISTE na marcação (product-catalog: `.hw-stats-in`
   *     dentro de um `.max-w-5xl.px-8`) NÃO pode ganhar respiro de novo: com
   *     260px de caixa e colunas `1fr` (= minmax(auto,1fr), que não encolhe
   *     abaixo do min-content), "314,016" empurrava o grid para 285px e a
   *     página inteira para 402. As colunas passam a poder encolher;
   * (3) na product-catalog a faixa vinha ENCAIXOTADA DUAS VEZES pelo trilho de
   *     desktop (§30 A): seção 358 → `> div` 260 → grid 164, ou seja 97px de
   *     recuo de cada lado numa tela de 390. O trilho é uma decisão de
   *     desktop; no telefone o respiro é um só, de 16px. */
  body .hw-stats > .hw-stats-in {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* O TRILHO DUPLO, medido com CSS.getMatchedStylesForNode em /how-it-works/:
   *   section.hw-stats .................... 358px
   *   > div.max-w-5xl  (§30 A, `width: min(1080px, 100% - 96px)`) ... 260px
   *   > .hw-stats-in   (§37,  `width: min(1080px, 100% - 96px)`) ... 164px
   * 97px de recuo de cada lado numa tela de 390 — a faixa inteira cabia num
   * terço da linha. O trilho de 1080 é uma decisão de DESKTOP; aqui o recuo é
   * um só, de 16px, e a grade ocupa a faixa.
   * Especificidade: a regra vencida é
   * `body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div`
   * — os `:not()` contam o argumento, o que dá (0,3,5). Daí a classe repetida
   * quatro vezes abaixo: (0,4,4), que ganha em `b` antes de olhar `c`. */
  body main section.hw-stats.hw-stats.hw-stats.hw-stats > div {
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body .hw-stats .hw-stats-in.hw-stats-in {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  body .hw-stats .hw-stats-in {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
  }
  body .hw-stats .hw-stats-in.hw-stats-in { padding-left: 0 !important; padding-right: 0 !important; }
  body .hw-stat { min-width: 0; padding-left: 0 !important; padding-right: 0 !important; }
  body :is(.hw-stat b, .hw-stat-n, .hw-stats .hw-stat > p:first-child) { font-size: clamp(22px, 6.4vw, 30px) !important; }
  /* o rótulo reserva duas linhas: sem isso "WHOLESALE BRANDS" quebrava em duas
   * e "PRODUCTS" em uma, e a fileira de baixo nascia torta (visto na captura) */
  body :is(.hw-stat i, .hw-stat-l) { font-size: 13px !important; display: block; min-height: 2.5em; }
  body .hw-stats .hw-stats-in { align-items: start; }
  body .hw-stats .hw-stat { align-items: center; justify-content: flex-start; }

  /* --- 2b. TRILHO DE SEÇÕES (fbar) ---
   * O components.css §48 já o transforma em trilho com `overflow-x:auto` em
   * ≤860. Faltava o telefone: as pontas encostavam na borda e não havia como
   * saber que ainda havia item à direita. Mantém-se trilho — só ganha a
   * sangria e o embalo de toque. */
  body .fbar .fbar-in {
    padding-left: 16px !important;
    padding-right: 16px !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body .fbar .fbar-in::-webkit-scrollbar { display: none; }
  body .fbar .fbar-in > * { scroll-snap-align: start; }

  /* --- 2c. PLACAS (r-plate / r-plate-dark) ---
   * A placa clara é `margin: 24px 16px` e a escura `width: min(1240px, 100% -
   * 64px)`; no telefone 64px de recorte comem um terço da linha. A decisão de
   * desenho (placa arredondada, borda a borda com margem) é a mesma — só a
   * margem encolhe para a do telefone. */
  body.rules .r-plate { margin-left: 12px !important; margin-right: 12px !important; border-radius: 22px; }
  body.rules .r-plate-dark { width: calc(100% - 24px) !important; margin-left: 12px !important; margin-right: 12px !important; border-radius: 22px !important; }
  body.rules .r-plate > div { padding-top: 48px !important; padding-bottom: 48px !important; }
  body.rules .r-plate-dark .r-col.r-col.r-col { padding-left: 0 !important; padding-right: 0 !important; }

  /* --- 2d. COLUNAS DE LINHA FINA (r-cols) ---
   * O components.css §30 já empilha em ≤860 trocando a régua vertical por
   * horizontal. No telefone faltava tirar o padding lateral herdado do trilho
   * de desktop, que deixava a coluna com 40px de recuo de cada lado. */
  body.rules .r-cols > .r-col.r-col.r-col { padding-left: 0 !important; padding-right: 0 !important; }
  body.rules .r-col > :is(img.gi, .r-glyph):first-child,
  body.rules .r-col-head { height: auto !important; min-height: 0 !important; }

  /* --- 2e. LINHA DO TEMPO (tl-*) ---
   * O §42 já vira a linha do tempo de lados alternados em coluna única com o
   * fio à esquerda em ≤900. No telefone o fio ficava a 23px e o texto a 58px,
   * apertando a medida; o nó encolhe e a calha diminui junto. */
  body.rules section.tl-sec > .tl-wrap { width: calc(100% - 32px) !important; padding: 40px 0 !important; }
  body.rules .tl-wrap::before { left: 19px; }
  body.rules .tl-row, body.rules .tl-row.tl-flip { grid-template-columns: 38px 1fr; }
  body.rules .tl-node { width: 38px; height: 38px; font-size: 12px; box-shadow: 0 0 0 6px var(--bg-l, #f7f8fc), 0 8px 20px -12px rgba(14,17,22,.4); }
  body.rules .tl-text, body.rules .tl-row.tl-flip .tl-text,
  body.rules .tl-media, body.rules .tl-row.tl-flip .tl-media { padding-left: 10px !important; }
  body.rules .tl-row + .tl-row { margin-top: 44px; }
  body.rules .tl-text h2 { font-size: 22px !important; }
  /* DEFEITO MEDIDO: a mídia caía EM CIMA do texto (captura de /how-it-works/,
   * tela 3: "Brikl is Merchant of Record" atrás do cartão). Causa: o §42 do
   * components.css manda a mídia para `grid-row: 2` dentro de `@media 900`
   * com (0,2,0), mas logo depois, FORA da media query, vem
   * `body.rules .tl-row > * { grid-row: 1 }` com (0,2,1) — escrita para
   * consertar o auto-placement do desktop — e ganha. Aqui (0,3,1) devolve as
   * duas fileiras no telefone sem desfazer nada do desktop. */
  body.rules .tl-row.tl-row > .tl-text { grid-row: 1 !important; }
  body.rules .tl-row.tl-row > .tl-node { grid-row: 1 !important; }
  body.rules .tl-row.tl-row > .tl-media { grid-row: 2 !important; margin-top: 18px; }

  /* --- 2f. VITRINE DE SEGMENTOS (wf) ---
   * Já cai para coluna única em ≤900 (components.css §5). No telefone a mídia
   * 4:3 ocupava meia tela de altura antes de a lista aparecer. */
  body :is(.rbx .who, .catwf) .wf-media { aspect-ratio: 16 / 10; }
  body :is(.rbx .who, .catwf) .wf { gap: 18px !important; }
  /* O §5 do components.css troca a mídia de `position: sticky` para `static` em
   * ≤900 — certo para desligar a aderência no telefone, mas com um efeito
   * colateral medido: `static` deixa de ser bloco contentor, e os `.wf-slide`
   * (absolutos, com `transform: scale(1.06)` enquanto inativos) escapam do
   * `overflow: hidden` da mídia. Numa mídia de 390px o 1,06 vira 414 e a
   * página inteira ia a 402. `relative` desliga a aderência do mesmo jeito e
   * devolve o recorte. Era o último transbordo da varredura. */
  body :is(.rbx .who, .catwf) .wf-media { position: relative; }

  /* --- 2g. PILHA DE DEPOIMENTOS (tstack) ---
   * A caixa da pilha tem 60px de folga de cada lado para os cards de trás
   * aparecerem; em 390 isso sobra e o card útil fica com 270px. */
  body .tstack { width: calc(100% - 16px) !important; margin-inline: auto !important; }
  body .tcard-inner { padding: 24px 22px !important; }
  body .tstack blockquote { font-size: 16px !important; line-height: 1.5 !important; }

  /* --- 2h. CARROSSEL DE PRODUTOS (pc-*, de parts/carousel.css — arquivo de
   * outro par de mãos, não editado aqui).
   * Medido: o trilho já é `overflow-x:auto` e já tem um bloco próprio em
   * ≤671.98. O que faltava no telefone era só a sangria: o primeiro cartão
   * nascia colado na borda esquerda. Resolvido DO LADO DE CÁ, com scroll-
   * padding, sem tocar no arquivo dele. */
  body .pc-rail { scroll-padding-left: 16px; }
  body .pc-sec .pc-head { padding-left: 16px; padding-right: 16px; }

  /* --- 2i. o palco da launch-offer e o editor: uma cena desenhada em px.
   * Não se reinventa a composição: ela é reduzida em bloco. */
  body .lo-editor { grid-template-columns: 1fr !important; }
  /* a redução em bloco saiu junto: com o palco de volta ao tamanho certo ela só empurrava a cena
     para fora da seção de novo */
}

/* =====================================================================
   §3. TIPOGRAFIA — a escala legível
   Medido antes: até 233 elementos abaixo de 13px numa página; a média era 28.
   Os campeões eram sempre os mesmos e quase todos do RODAPÉ (h4 de coluna a
   10,5px; links a 11,5 / 12,5 / 13,8px; `.tm` a 11,5; `.flegal` a 12,5) mais
   a classe `text-xs` do Tailwind (12px) e as células de tabela (12px).
   O que NÃO é subido: as etiquetas que são etiquetas por desenho (`.badge`,
   `.tag`, o chip do announce) — esse texto é rótulo, não leitura. Ficam em
   11,5–12px e estão contados no relatório.
   ===================================================================== */

@media (max-width: 820px) {
  /* --- 3.0 O CORPO DE TEXTO É 17pt (terceiro passe, régua da HIG) ---------
   * A HIG chama de Body 17pt o tamanho de leitura no telefone, e a escala
   * inteira pendura nele: Large Title 34 · Title1 28 · Title2 22 · Title3 20 ·
   * Headline 17 semibold · Body 17 · Callout 16 · Subhead 15 · Footnote 13 ·
   * Caption 12/11. O passe anterior tinha parado em 15px (Subhead) porque a
   * meta dele era "sair do miúdo"; a meta desta vez é a régua.
   *
   * MEDIDO antes deste passe, 45 páginas a 390: 635 blocos de LEITURA (texto
   * com mais de 40 caracteres dentro de p/li/blockquote/dd/td/figcaption)
   * abaixo de 17px. Os donos, lidos com CSS.getMatchedStylesForNode:
   *     83 `body main .text-sm` (era 15px, deste arquivo)
   *     32 `body main table :is(td,th)` (13,5px, deste arquivo)
   *     28 `.promo p` (13,5)          27+23 `body.rules .r-feat p (+ p)` (15)
   *     14 `.text-[13px]` (13)         9 `.rbx .faq-body p` (15)
   *      6 `…:is(h2,p) { font-size: inherit }` (herdava 16 do body)
   *      4+4+2 `.muted` de v3-card / step / event-card (14,5)
   *      3 `.tstack blockquote` (16, deste arquivo)
   * O `inherit` é o motivo de a base do `main` subir junto: sem isso a cópia
   * do hero fica presa nos 16px que herda do `<body>`. */
  body main { font-size: 17px; }

  /* rodapé: era o pior bolso de tipografia miúda do site (26 links + 6 títulos
   * por página, todos abaixo de 14px). `h4` de coluna é rótulo em caixa alta
   * (Footnote 13), os links são navegação densa (Callout 16). */
  body .site-footer .fcol h4 { font-size: 13px; letter-spacing: .12em; }
  body .site-footer .fcol a { font-size: 16px; }
  body .site-footer .fbrand p { font-size: 16px; line-height: 1.5; }
  body .site-footer .fbadges a { font-size: 13px; }
  body .site-footer .flegal { font-size: 13px; }
  body .site-footer .social a { font-size: 13px; }
  body .site-footer .tm { font-size: 13px; line-height: 1.5; }

  /* menu do telefone: o painel do `#mobile` é a navegação inteira aqui */
  body .mobile .macc > button { font-size: 17px; }
  body .mobile .macc .body h3 { font-size: 12px; letter-spacing: .12em; }
  body .mobile .macc .body a { font-size: 15.5px; }

  /* texto corrido das páginas internas: `text-xs` (12px) é a classe que o site
   * usa para legenda, e no telefone ela some. Onde ela veste um parágrafo ou um
   * item de lista é LEITURA e vai a 17; nos outros usos é rótulo e para em 13
   * (Footnote). Mesma lógica para `text-[13px]` e `text-[11px]`. */
  body main .text-xs,
  body main span.text-xs { font-size: 13px !important; line-height: 1.5 !important; }
  body main .text-\[11px\] { font-size: 13px !important; }
  body main :is(p, li, dd, blockquote):is(.text-xs, .text-\[13px\], .text-\[11px\]) {
    font-size: 17px !important; line-height: 1.5 !important;
  }
  body main .text-\[13px\] { font-size: 15px !important; }
  body main .text-sm { font-size: 17px !important; }

  /* os donos restantes do texto de leitura abaixo de 17, um a um (medidos) */
  body.rules .r-feat p, body.rules .r-feat p + p,
  body .promo p,
  body .rbx .faq-body p,
  body.rules main section > div > p.text-center:last-child,
  body .rbx :is(.v3-card, .step, .event-card, .r-col) .muted,
  body .pcard__desc { font-size: 17px !important; line-height: 1.5 !important; }

  /* DESVIO ASSUMIDO DA RÉGUA: célula de tabela fica em 15px (Subhead), não 17.
   * São grades comparativas de 3 a 5 colunas; a 17px a tabela deixa de caber
   * numa tela de 360 e vira trilho horizontal — trocar leitura por gesto é
   * pior que 15px. 12px (o original) era ilegível; 15 é o degrau da HIG logo
   * abaixo do corpo e continua confortável. Está no relatório. */
  body main table :is(td, th) { font-size: 15px !important; }

  /* a pílula de aviso (composição no §7c) */
  body .sh .announce { font-size: 15px; }
  body .sh .announce .pill { font-size: 11.5px; }

  /* etiquetas "New" / "Coming soon" dos cartões de recurso: 9,5px era o menor
   * texto do site inteiro. Continuam etiquetas (caixa alta, tracking), só que
   * legíveis. */
  body main :is(.tag, .tag.soon) { font-size: 11.5px !important; }
  /* a mesma etiqueta existe no RODAPÉ, ao lado de um link de coluna, a 9,5px */
  body .site-footer .tag { font-size: 11.5px !important; }
  /* a etiqueta que vive INLINE dentro de um eyebrow (`MCP  COMING SOON`) encostava
   * no texto depois de crescer de 9,5 para 11,5px — o respiro vem junto */
  body main :is(.v3-kicker, .eyebrow) .tag { margin-left: 8px; }

  /* botões de trilho horizontal dentro das páginas (rótulo de controle, não
   * leitura: Footnote 13 é o uso previsto pela HIG) */
  body main .sticky button[class*="shrink-0"] { font-size: 13px !important; }

  /* --- TÍTULOS: A ESCALA DA HIG, E O PISO DO h2 REVISTO ------------------
   * A escala de desktop tem PISO alto — `body.rules main section h2` é
   * `clamp(30px, 3vw, 40px) !important` (§30 C), ou seja nunca desce de 30px.
   * Num vão de 200px (o que sobra numa fileira `flex` com ícone) uma palavra
   * como "Enterprise" não cabe a 30px, e foi por isso que o passe anterior
   * baixou o piso para 25px — um número que ela não aprovou e que não é degrau
   * de escala nenhuma.
   *
   * REVISTO AQUI PELA HIG, e a revisão separa dois casos que o passe anterior
   * tratava como um só:
   *   · h2 de SEÇÃO (o normal, largura da tela): **Title1, 28px**. É o degrau
   *     da HIG logo abaixo de Large Title, é 2px mais perto do desenho dela
   *     (30px no desktop) do que os 25px de antes, e cabe: medido, nenhuma
   *     página transborda por causa dele.
   *   · h2 que é ITEM DE FLEX numa fileira estreita: **Title2, 22px**. É o
   *     único lugar onde 28px não cabia; em vez de baixar o piso do site
   *     inteiro por causa de um punhado de fileiras, o piso menor vive só nelas.
   * h1 continua em Large Title (34px a 390 — o `clamp` já entregava isso).
   * h3 ganha piso de Title3 (20px), que antes não tinha nenhum.
   * Especificidade: a regra vencida é `body.rules main section h2` (0,1,3),
   * também `!important`; o `[class]` abaixo leva esta para (0,1,4). */
  body main h1[class], body main section h1[class],
  body main h1 { font-size: clamp(30px, 8.6vw, 40px) !important; line-height: 1.1 !important; }
  body main h2[class], body main section h2[class],
  body main h2 { font-size: clamp(28px, 7.2vw, 34px) !important; line-height: 1.18 !important; }
  body main h3 { line-height: 1.3 !important; }
  body main :is(h1, h2, h3) { overflow-wrap: break-word; }
  /* o piso menor, SÓ na fileira estreita (ver acima). (0,2,4) vence a de cima. */
  body main :is(.flex, [class*="flex"]) > h2[class],
  body main :is(.flex, [class*="flex"]) > h2 { font-size: clamp(22px, 6vw, 28px) !important; }

  /* título que é ITEM DE FLEX (fileira "chip + título", "ícone + título") não
   * pode herdar o `margin-inline: auto` da regra de título de seção: em flex,
   * margem auto come o espaço livre e o título fica com metade da caixa —
   * medido em /partners/printful-enterprise/, h2 de 111px com 168px de palavra */
  body main :is(.flex, [class*="flex"]) > :is(h1, h2, h3, h4) {
    margin-inline: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  /* no aparelho estreito o chip "Brikl v3.0" rouba a linha da chamada */
  body .sh .announce .pill { display: none; }
  body .sh .announce .announce-copy { font-size: 13px; }
}

/* =====================================================================
   §4. ALVOS DE TOQUE
   Medido antes: 39 a 88 controles por página com menos de 36px de altura ou
   largura. O grosso eram os 26 links do rodapé (152×31), os 5 ícones sociais
   (34×34), as etiquetas de `.fbadges` (29px de alto), os links de `.flegal`
   (19px) e as chamadas de cartão do tipo "See catalog →" (20px de alto).
   ALVO DESTE PASSE: **44×44pt em tudo**, que é o mínimo da HIG. O passe
   anterior tinha parado em 40px para link solto (44 só para botão e ícone);
   medido, isso deixava 1.697 alvos abaixo de 44 nas 45 páginas — 1.144 deles
   eram os links de coluna do rodapé, todos em 160×40,5.
   E mais um número da HIG que faltava: **≥8pt entre alvos adjacentes**, para o
   dedo não errar a fileira. Onde os alvos crescem e passam a encostar, o vão
   cresce junto (rodapé, chips, pontinhos do carrossel).
   O que NÃO recebe altura: link DENTRO de prosa — ali o alvo é a linha de
   texto e engordar o <a> quebraria o ritmo do parágrafo.
   ===================================================================== */

@media (max-width: 820px) {
  body .site-footer .fcol a { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  body .site-footer .fcol ul, body .site-footer .fcol nav { row-gap: 0; }
  body .site-footer .social a { width: 44px; height: 44px; }
  body .site-footer .fbadges a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; }
  body .site-footer .flegal a { display: inline-flex; align-items: center; min-height: 44px; }
  body .site-footer .flegal .r { gap: 18px; flex-wrap: wrap; row-gap: 0; }

  /* o burger já tinha 45px de altura (3 barras de 1,6 + margens + 8 de padding);
   * faltavam 1px de largura. Só o padding horizontal muda — NÃO se troca o
   * `display:block` por grid/flex: as três barras viram X por
   * `translateY(±5,6px) rotate(±45°)`, que só fecha com elas empilhadas no
   * fluxo de bloco. (Tentei grid antes e o X virou um ">"; medido na captura.) */
  body .sh .burger { padding: 8px 12px; }
  body .sh .brand { min-height: 44px; }
  body .mobile .macc > button { min-height: 52px; }
  body .mobile .macc .body a {
    min-height: 44px; display: flex; align-items: center;
    flex-wrap: wrap; gap: 8px;      /* a etiqueta "Coming soon" montava em cima do texto */
  }

  /* chamadas de cartão: são o CTA do bloco, não link de prosa */
  body main :is(a.link-arrow, a.seeall, a.go, .fbar-chip, .fbar-link) {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  body main a[class*="text-sm"][class*="font-bold"],
  body main a[class*="text-sm"][class*="font-semibold"],
  body main a[class*="text-sm"][class*="font-medium"],
  body main a[class*="inline-block"][class*="mt-"],
  body main a[class*="inline-flex"] {
    min-height: 44px; display: inline-flex !important; align-items: center;
  }
  /* fileiras de chips-link (`flex flex-wrap gap-2 > a`): medidos a 32px de alto
   * nas páginas de guia e de recurso */
  body main :is(.flex, [class*="flex-wrap"]) > a[class*="rounded"],
  body main [class*="flex-wrap"] > a[class*="text-xs"],
  body main nav[class*="flex-wrap"] > a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  /* índice alfabético do glossário: 17 links de UMA letra, 32px de largura.
   * A altura já vinha de 40 pela regra acima; faltava a largura. */
  body main nav[class*="flex-wrap"] > a { min-width: 44px; justify-content: center; }
  /* `:not(.tdot):not(.lo-dot)`: pontinho de carrossel é DESENHO (barra de 3px,
   * bolinha de 6px). Dar 44px de altura a eles não faz alvo — faz barra cinza
   * de 44px no lugar do fio. O alvo deles vem do `::before` invisível, logo
   * abaixo. Medido: sem a exceção, a barra da pilha de depoimentos da home
   * virava um bloco de 188×44. */
  body main :is(button, [role="button"]):not(.macc > button):not(.tdot):not(.lo-dot) { min-height: 44px; }
  /* ≥8pt entre alvos: as fileiras de chips e o índice do glossário nasciam com
   * `gap: 6px` / `gap-2` (8px) na horizontal mas ZERO na vertical — com os
   * alvos em 44px as duas fileiras encostavam. */
  body main :is([class*="flex-wrap"], nav[class*="flex-wrap"]) { gap: 8px; }
  /* controles de faixa (calculadora de arrecadação): a área de toque do polegar
   * vem da altura do <input>, não do desenho da trilha */
  body main input[type="range"] { min-height: 44px; }

  /* setas do carrossel de produtos (parts/carousel.css, de outro par de mãos):
   * só o alvo, sem tocar no desenho delas */
  body .pc-arrow { min-width: 44px; min-height: 44px; }

  /* pontinhos do carrossel de depoimentos (`.tdot`, 56×3 de DESENHO): a barra
   * continua com 3px — quem cresce é a área de toque, por um `::before`
   * invisível. `overflow: visible` é obrigatório (o `.tdot` tem
   * `overflow: hidden` para arredondar a barra de preenchimento) e o raio
   * volta no próprio `::after`, então o desenho fica igual. */
  /* MEDIDO: quem punha 44px de altura no `.tdot` não era este arquivo — é o
   * PRÓPRIO SITE, com `nav a, button, a[class*="rounded-full"], … { min-height:
   * 44px }` dentro de `@media (max-width: 768px)`. O `.tdot` é `button`, então
   * entrava. Tirá-lo da regra daqui não bastava: a do site continuava ganhando
   * (a barra de 3px virava um bloco cinza de 56×44, visto na captura). Por isso
   * o `min-height: 0` explícito. */
  body .tdots { gap: 10px; }
  body .tdot { overflow: visible; min-height: 0 !important; height: 3px; }
  body .tdot::after { border-radius: 2px; }
  body .tdot::before { content: ""; position: absolute; left: 0; right: 0; top: -21px; bottom: -21px; }
  /* mesmo recurso para as bolinhas do palco da /launch-offer/ (6×6 de desenho) */
  body .lo-dot { overflow: visible; position: relative; min-height: 0 !important; }
  body .lo-dot::before { content: ""; position: absolute; left: -12px; right: -12px; top: -19px; bottom: -19px; }
  body .lo-dots { gap: 12px; }
}

/* =====================================================================
   §5. CABEÇALHO E MENU DO TELEFONE
   O `#mobile` é o painel do próprio site. Dois defeitos medidos:
   (1) `--sh-announce-h: 39px` continuava reservando a altura de um aviso que
       a camada de design já tirou do fluxo (virou pílula `position:fixed` no
       rodapé da tela em components.css §1c), então o painel começava 39px
       abaixo do cabeçalho, com uma fresta;
   (2) `--sh-header-h: 67px` não acompanhou o cabeçalho de 76px da camada, e o
       painel cobria os últimos 9px do cabeçalho ao rolar.
   ===================================================================== */

@media (max-width: 820px) {
  body .sh { --sh-announce-h: 0px; --sh-header-h: 76px; }
  body .sh .mobile { padding-bottom: 96px; overscroll-behavior: contain; }
  body .sh-wrap { padding-left: 20px; padding-right: 20px; }

  /* --- com o painel ABERTO ---
   * O painel do site é uma superfície CLARA (`--sh-bg`, medido: branco em
   * todas as páginas, cinza claro só no fim da home, quando `--k` sobe).
   * Três defeitos medidos na captura:
   *
   * (1) o cabeçalho é transparente por decisão da camada (§1), então com o
   *     painel aberto ele ficava por cima da seção que estava atrás — muitas
   *     vezes escura — enquanto o painel embaixo era branco. O wordmark em
   *     tinta e as barras do burger sumiam nessa faixa. Com o painel aberto o
   *     cabeçalho passa a usar a MESMA superfície do painel; aí a tinta do
   *     site volta a ser a cor certa e não é preciso forçar logo nenhum. */
  body:has(.mobile.open) .sh .site-header { background: var(--sh-bg); }

  /* (2) `body.hdr-dark` (components.css §27/§51) pinta o texto do `.sh` de branco
   *     quando o cabeçalho está sobre bloco escuro. O `#mobile` mora DENTRO do
   *     `.sh`, então herdava o branco e a lista inteira ficava branco no
   *     branco (medido em /why-brikl/ rolada: `color: rgb(255,255,255)` sobre
   *     painel `srgb 1 1 1`). Dentro do painel valem os tokens do painel. */
  body:has(.mobile.open) .mobile .macc > button { color: var(--sh-ink) !important; }
  /* `:not(.seeall-cta)`: o link "Everything new in v3.0 →" é o acento da lista
   * (`--sh-acc-ink`); sem a exceção ele perdia o azul e virava mais um item */
  body:has(.mobile.open) .mobile .macc .body a:not(.seeall-cta) { color: var(--sh-mut) !important; }
  body:has(.mobile.open) .mobile .macc .body h3 { color: var(--sh-dim) !important; }
  body:has(.mobile.open) .sh .burger span { background: var(--sh-ink) !important; }
  /* mesmo motivo para o wordmark: o §27 do components.css ("header sobre placa
   * escura") troca o logo em tinta pelo branco sob `body.hdr-dark`. Com o
   * cabeçalho na superfície clara do painel, o branco some — volta a tinta. */
  body.hdr-dark:has(.mobile.open) .sh .brand-logo-light { display: block; }
  body.hdr-dark:has(.mobile.open) .sh .brand-logo-dark { display: none; }

  /* (3) a pílula de aviso (z-index 130) flutuava POR CIMA do menu (z-index 99)
   *     e cobria um item da lista. Com o menu aberto ela sai. */
  body:has(.mobile.open) .sh .announce { display: none; }

  /* (4) O CABEÇALHO SUMIA COM O MENU ABERTO — e com ele o botão de fechar.
   * Medido em /why-brikl/ a 390px, rolado até Y=2500: ao abrir o menu o
   * cabeçalho ia para top=-2500 e o burger para y=-2484, fora da tela.
   * Causa (lida no computed style, não adivinhada): o JS do PRÓPRIO site põe
   * `style="overflow:hidden"` no <body> ao abrir. Isso transforma o body num
   * contêiner de rolagem de 15.877px com scrollTop 0, e o `.sh`, que é
   * `position: sticky`, passa a grudar no scrollport do BODY em vez do da
   * página — ou seja, na posição estática dele, lá em cima do documento.
   * `!important` de folha vence estilo inline sem important, então basta
   * devolver o overflow. Quem trava a rolagem de fundo agora é o parts/
   * mobile.js, no nível do evento, sem mexer em layout nenhum. */
  body:has(.mobile.open) { overflow: visible !important; }

  /* o painel aberto não pode deixar a página rolar por baixo */
  body .sh:has(.mobile.open) { touch-action: none; }
}

/* =====================================================================
   §6. SEGUNDO PASSE — O QUE SÓ SE VÊ OLHANDO
   O primeiro passe consertou o que era MENSURÁVEL (transbordo, tipografia
   miúda, alvo de toque). Esta seção é o resultado de abrir 42 páginas em
   390×844 e LER as capturas tela a tela: sobreposição, texto cortado,
   cartão espremido, faixa torta. Cada item abaixo tem a página onde foi
   visto, a causa medida e o que foi feito.

   Continua valendo a regra de ouro: tudo dentro de `@media (max-width: 820px)`.
   E uma regra a mais, desta vez: NADA AQUI ALCANÇA A HOME. Os seletores foram
   verificados um a um contra `/` — o que quebrou lá está no relatório, com o
   remendo pronto, esperando a decisão dela.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 6a. HERÓIS DE CATEGORIA: a régua do desktop não chegava no telefone ---
   *
   * MEDIDO. No desktop cada foto de hero tem uma LARGURA DE QUADRO própria,
   * calculada a partir do envelope do objeto dentro do arquivo (components.css
   * §"hero da …"): `electronics` 940px porque só 21,5% do arquivo é objeto,
   * `signage` 890px com 27,4%, `bags` 780px porque o objeto é deitado e quem
   * limita é a largura. O quadro cresce para o OBJETO chegar na faixa de
   * ~620px de altura da família.
   *
   * No telefone, a regra `@media (max-width: 860px) { img.hero-photo
   * { width: 100% } }` jogava TODAS para 282px e o cálculo sumia. Resultado
   * medido (altura renderizada a 390px):
   *     outerwear 390 · bottoms 336 · paper-print 300 · sport 299 ·
   *     hoodies 297 · t-shirts 290 · baby-kids 272 · polos 264 ·
   *     home-goods 253 · medical 247 · electronics 230 ·
   *     tumblers 221 · pens 210 · bags 195 · signage 189
   * Nas últimas o OBJETO ficava minúsculo: electronics 157×185 e signage
   * 202×176 numa tela de 390 — postal ao lado do jaquetão da outerwear, que
   * saía 281×390. Confirmado na captura: nas duas o objeto lê como miniatura.
   *
   * A CORREÇÃO É A MESMA RÉGUA, EM ESCALA DE TELEFONE. Medi o envelope alfa
   * dos 16 arquivos (canvas + getImageData, limiar α>24) e resolvi, por
   * página:
   *     quadro = min( 272 / largura_do_objeto ,  330 / altura_do_objeto )
   * ou seja: o objeto ocupa 272px de largura útil (o mesmo que as peças de
   * roupa já ocupavam naturalmente) OU para em 330px de altura, o que vier
   * primeiro — exatamente o "limitado pela largura / limitado pela altura"
   * que o componente já usa no desktop.
   *
   * O quadro vira PORCENTAGEM da coluna (funciona igual em 360 e 430) e as
   * duas margens laterais, também em %, recentram o OBJETO na coluna quando
   * ele não está no meio do arquivo (electronics tem centro em 54,4%, signage
   * em 55,9%). As margens somam sempre `esq + largura + dir = 100%`, de
   * propósito: assim a caixa EXTERNA do quadro mede exatamente a coluna, o
   * espaço livre do flex é zero e a posição não depende do `justify-content`.
   * ISSO FOI MEDIDO, não suposto: com `justify-content: center` e um item mais
   * largo que o contêiner, o Chrome NÃO centraliza — ele ancora a borda
   * inicial e joga todo o excesso para a direita (a proteção de overflow do
   * flexbox). Na primeira tentativa, só com `translate`, o iPhone da
   * electronics saía cortado na borda direita; a captura mostrou, a medida
   * confirmou (objeto em 163→435 numa coluna 54→336).
   * A folga que sobra é sempre (282 − 272)/2 = 5px de cada lado.
   * O que sangra do QUADRO (moldura vazia) é recortado pelo `overflow-x: clip`
   * da seção de hero (§1e) — que é o comportamento previsto: no desktop essa
   * moldura passa por trás da coluna de texto.
   *
   * Depois: 189→330px de altura de objeto, contra 176→390 antes. A faixa da
   * família fica no telefone como está no desktop.
   *
   * `flex: 0 0 auto` é obrigatório: a `.hero-photo-col` é flex (§"hero da
   * foto"), e sem isso um quadro de 173% encolheria de volta para 100%. */
  body .has-hero-photo img.hero-photo.hero-photo { flex: 0 0 auto !important; max-width: none !important; }

  body.hero-custom-t-shirts                     img.hero-photo.hero-photo { width: 103.80% !important; margin-left:   1.733% !important; margin-right:  -5.533% !important; }
  body.hero-custom-hoodies                      img.hero-photo.hero-photo { width: 102.50% !important; margin-left:  -1.045% !important; margin-right:  -1.455% !important; }
  body.hero-custom-polos                        img.hero-photo.hero-photo { width:  96.50% !important; margin-left:   1.750% !important; margin-right:   1.750% !important; }
  body.hero-custom-bottoms                      img.hero-photo.hero-photo { width: 102.90% !important; margin-left:   1.225% !important; margin-right:  -4.125% !important; }
  body.hero-custom-outerwear                    img.hero-photo.hero-photo { width:  84.80% !important; margin-left:   7.600% !important; margin-right:   7.600% !important; }
  body.hero-custom-headwear                     img.hero-photo.hero-photo { width:  96.50% !important; margin-left:   1.750% !important; margin-right:   1.750% !important; }
  body.hero-sport-apparel                       img.hero-photo.hero-photo { width:  99.60% !important; margin-left:   1.495% !important; margin-right:  -1.095% !important; }
  body.hero-custom-baby-kids                    img.hero-photo.hero-photo { width:  97.90% !important; margin-left:   1.833% !important; margin-right:   0.267% !important; }
  body.hero-custom-bags                         img.hero-photo.hero-photo { width:  98.70% !important; margin-left:   1.045% !important; margin-right:   0.255% !important; }
  body.hero-print-on-demand-tumblers            img.hero-photo.hero-photo { width: 117.20% !important; margin-left:  -1.568% !important; margin-right: -15.632% !important; }
  body.hero-home-goods                          img.hero-photo.hero-photo { width: 100.30% !important; margin-left:   1.756% !important; margin-right:  -2.056% !important; }
  body.hero-electronics                         img.hero-photo.hero-photo { width: 173.50% !important; margin-left: -44.384% !important; margin-right: -29.116% !important; }
  body.hero-custom-pens                         img.hero-photo.hero-photo { width: 106.60% !important; margin-left:  -5.219% !important; margin-right:  -1.381% !important; }
  body.hero-custom-signage                      img.hero-photo.hero-photo { width: 134.90% !important; margin-left: -25.409% !important; margin-right:  -9.491% !important; }
  body.hero-paper-print-products                img.hero-photo.hero-photo { width: 113.90% !important; margin-left: -12.076% !important; margin-right:  -1.825% !important; }
  body.hero-medical                             img.hero-photo.hero-photo { width: 100.20% !important; margin-left:   0.501% !important; margin-right:  -0.701% !important; }
  body.hero-pet-products                        img.hero-photo.hero-photo { width:  86.23% !important; margin-left:  19.890% !important; margin-right:  -6.120% !important; }
  /* A /pet-products/ é a única que também mexe no mergulho. No desktop ele é -60 de 755px (8%); a
   * régua do telefone é -80 fixo, e aqui o objeto tem 390px — 80px seriam 20%, exatamente as patas
   * da frente. 32px é a mesma fração do desktop, e as patas ficam à vista. */
  body.hero-pet-products                        img.hero-photo.hero-photo { margin-bottom: -32px !important; }
  body.hero-toys                                img.hero-photo.hero-photo { width: 117.70% !important; margin-left:  -0.610% !important; margin-right: -17.090% !important; }
  body.hero-toys                                img.hero-photo.hero-photo { margin-bottom: -21px !important; }

  /* --- 6b. LEGENDA DA PLACA DE IMAGEM (.r-ph) CORTADA AO MEIO ---
   * VISTO em /features/order-builder/, /why-brikl/, /how-it-works/,
   * /features/design-tool/, /suppliers/, /branded-stores/ e /pricing/:
   * "Order Builder — sizes across, colorways down, row totals **in units and
   * revenue**" com a última linha partida no meio da altura das letras.
   * MEDIDO: `.r-ph` tem `aspect-ratio: 16/9` + `min-height: 0` + `overflow:
   * hidden` (components.css §30). Numa coluna de 282px isso trava a caixa em
   * 152–165px, e o conteúdo (ícone de vidro + 2 a 3 linhas de legenda) pede
   * 183–196px. No desktop a mesma proporção dá 608px e sobra espaço — por
   * isso o defeito só existe aqui (conferido: no desktop 608 de caixa para
   * 606 de conteúdo, nada cortado).
   * O comentário do próprio componente diz "legenda menor, NADA CORTADO": a
   * correção devolve a intenção. A proporção 16/9 deixa de ser trava e vira
   * piso — a caixa volta a abraçar o conteúdo, com os mesmos 240px mínimos
   * que a regra original do componente já usava.
   * Especificidade: a regra vencida é `body.rules .r-ph` (0,2,1), sem
   * `!important`; classe duplicada leva esta a (0,3,1). */
  body.rules .r-ph.r-ph { aspect-ratio: auto !important; min-height: 240px !important; }

  /* --- 6c. /launch-offer/: TÍTULO E PARÁGRAFO CORTADOS NA DIREITA ---
   * VISTO: a placa "The fastest way to see what the platform is" com o título
   * partido em "…see wha" e todas as linhas do parágrafo comidas na borda
   * direita ("pressing a butt", "arrive at your", "artwork in, fi").
   * MEDIDO: `.lo-press` é `display: grid` com UMA coluna `auto`. Coluna auto
   * nunca encolhe abaixo do min-content do item, e o min-content do
   * `.lo-press-art` é 455px — `.lo-big-n` ("48h") é `clamp(150px, 15vw,
   * 224px)`, ou seja 150px fixos no telefone, o que dá 327px de glifo, mais
   * os 64px de `padding` de cada lado (components.css linha 1856, que vem
   * DEPOIS dos blocos ≤900 e os desfaz). A trilha ia a 455 dentro de uma
   * caixa de 358 com `overflow-x: hidden` — e o texto, que mora na mesma
   * trilha, era cortado junto.
   * Três medidas, nenhuma inventada: a trilha pode encolher, o respiro do
   * bloco do relógio vira o do telefone (o mesmo 8/24/44 que o ≤900 já usava
   * antes de ser sobrescrito) e o numeral ganha um chão proporcional à tela
   * em vez de 150px fixos. A 390px "48h" passa a medir ~220px. */
  body .lo-press.lo-press { grid-template-columns: minmax(0, 1fr) !important; }
  body .lo-press > * { min-width: 0 !important; }
  body .lo-press-art.lo-press-art { padding: 8px 20px 44px !important; }
  body .lo-big-n { font-size: clamp(84px, 26vw, 150px) !important; }

  /* --- 6d. /faq/: a coluna de texto 44px mais estreita, encostada à esquerda ---
   * VISTO: na /faq/ o H1 e a cópia do hero vão de 32 a 358, mas cada pergunta
   * e cada resposta vão de 32 a 314 — 44px de sobra só do lado direito. A
   * página inteira lê torta.
   * MEDIDO: é O MESMO TRILHO DUPLO do §2a. A página vem embrulhada num
   * `div.max-w-4xl.mx-auto.p-8` (32px de recuo), e por cima disso o
   * components.css aplica, dentro de `@media (max-width: 900px)`,
   * `body.rules main section > div { width: min(1080px, 100% - 44px) }` —
   * tirando mais 44. O `margin-inline: auto` que centralizaria vem da regra
   * §30 A, que exclui `:not(.r-hero)` — e as seções da /faq/ SÃO `.r-hero`.
   * Resultado: 282px de largura sem margem automática, tudo à esquerda.
   * A regra que corta é de telefone (mora dentro de `@media 900`), então
   * consertar aqui não alcança o desktop — conferido: no desktop a seção e a
   * div medem as duas 304→1136, alinhadas.
   * Escopo medido: `main div[class*="max-w-"] section > div` casa 56 vezes na
   * /faq/ e ZERO em /, /glossary/, /why-brikl/, /pricing/, /blog/, /contact/,
   * /compare/, /integrations/, /case-studies/ e /guides/. É o recorte exato
   * do caso "seção já recuada pelo embrulho". */
  body.rules main div[class*="max-w-"] section > div { width: 100% !important; }

  /* --- 6e. /glossary/: o índice alfabético grudado empilhava em cima do texto ---
   * VISTO (a pior sobreposição da varredura): rolando a lista, as letras
   * A B C D E F / H L M O P R / S T U V W ficam ancoradas no topo SEM FUNDO,
   * e a definição passa por baixo delas — "hosts industry trade shows. ASI
   * membership numbers are used to identify verified distributors…" sai
   * ilegível, com letra azul por cima de cada linha.
   * MEDIDO: `section.sticky.top-0` com `background-color: rgba(0,0,0,0)` e
   * `backdrop-filter: none`. No desktop a barra tem 196px; no telefone o
   * índice quebra em três fileiras e ela vai a 312px — 37% da tela presa no
   * topo, sem fundo. Duas coisas erradas ao mesmo tempo.
   * No telefone a barra desgruda: o índice continua lá, no topo da lista, e
   * nada mais empilha. (Barra opaca e compacta seria a outra saída — é
   * desenho, está no relatório para ela escolher.)
   * Escopo medido: `main section.sticky` existe em 1 elemento na /glossary/ e
   * em ZERO em /, /faq/, /features/ e /suppliers/ — os trilhos grudados
   * dessas páginas são `div.sticky`, e continuam grudados. */
  body main section.sticky { position: static !important; }

  /* --- 6f. FAIXA DE NÚMEROS: o quinto número ficava órfão na coluna esquerda ---
   * VISTO em /product-catalog/, /custom-bags/, /custom-signage/ e nas outras
   * de categoria: a faixa tem 5 números e vira 2 colunas no telefone, então
   * "12+ DECORATION METHODS" (ou "0 INVENTORY UPFRONT") sobra sozinho na
   * coluna da esquerda, com a direita vazia. A faixa inteira lê torta.
   * MEDIDO: `grid-template-columns: 155px 155px`, item 5 em `x 33→188` com
   * `202→357` vazio ao lado.
   * O último de uma grade ímpar ocupa a linha inteira e centraliza — é o que
   * o próprio componente faz no desktop, onde os 5 cabem numa linha só.
   * `:nth-last-child(1)` garante que só o ÚLTIMO de uma contagem ímpar entra
   * nisso; faixas com 4 ou 6 números não mudam. */
  body .hw-stats .hw-stats-in > :nth-child(odd):nth-last-child(1) {
    grid-column: 1 / -1;
    border-left: 0 !important;
  }

  /* --- 6g. /pricing/ e /why-brikl/: o parágrafo de destaque com piso de 24px ---
   * VISTO na /pricing/: "No subscription, no setup fee, no per-connection
   * charge…" numa coluna de 248px, a 24px — três a quatro palavras por linha,
   * "per-connection" sozinha numa linha, o parágrafo virando uma torre de
   * 500px que não cabe na tela.
   * MEDIDO: `body.rules main .bn.r-statement p` é
   * `clamp(24px, 1.95vw, 28px) !important` — PISO de 24px, igual ao caso dos
   * títulos do §3. No desktop o mesmo parágrafo sai a 21,6px numa coluna de
   * 680px, que é o desenho; o telefone herdava um tamanho MAIOR que o do
   * desktop numa coluna três vezes menor.
   * O piso vira proporcional à tela: 19,5px a 390, 18px a 320, e o teto de
   * 24px continua lá para o degrau de cima.
   * Especificidade: a regra vencida é `body.rules main .bn.r-statement p`,
   * (0,3,3) e `!important`. Na primeira tentativa escrevi `body main …`,
   * (0,2,3), e MEDI que continuava 24px — a classe `.r-statement` repetida
   * leva esta a (0,4,3), que ganha. */
  body.rules main .bn.r-statement.r-statement p { font-size: clamp(18px, 5vw, 24px) !important; }

  /* --- 6h. MENU ABERTO: o botão "Log in" sumia (branco no branco) ---
   * VISTO: com a página rolada sobre um bloco escuro e o menu aberto, o botão
   * secundário do rodapé do painel aparece VAZIO — só a moldura.
   * MEDIDO em /why-brikl/ a Y=2500: `#mobile .mcta .a1` com
   * `color: rgb(255,255,255)` sobre painel `srgb 1 1 1`. Em Y=0 o mesmo botão
   * é `#565c68`. Causa: a mesma de §5(2) — `body.hdr-dark .sh
   * a:not([class*="bg-"])` força `#fff !important`, e o `.mcta .a1` não tem
   * classe `bg-`, então entra na regra. O §5 tinha coberto a lista (`.macc`)
   * e esqueceu o par de botões do pé do painel.
   * O `.a2` ("Start free") não precisa: é botão de fundo azul, o branco está
   * certo nele. */
  body:has(.mobile.open) .mobile .mcta .a1 { color: var(--sh-mut) !important; }
}

/* =====================================================================
   §7. TERCEIRO PASSE — A RÉGUA DA APPLE (HIG), E A HOME ENTRA
   =====================================================================
   Os dois passes acima consertaram o que estava QUEBRADO. Este passe mede o
   telefone contra as Human Interface Guidelines e fecha a distância, com
   quatro números como critério de aceite:
     · alvo de toque ≥ 44×44pt, com ≥ 8pt entre alvos adjacentes;
     · corpo de texto 17pt, nada abaixo de 11pt;
     · margem lateral de 16pt, consistente, e `env(safe-area-inset-*)` em tudo
       que é fixo;
     · nada depende de `:hover`, e `prefers-reduced-motion` é respeitado.
   Os três primeiros entraram nos §3 e §4, que foram reescritos no lugar em vez
   de recebidos por cima — empilhar override sobre override é como este arquivo
   fica ilegível. O que sobra é este §7.

   MUDANÇA DE PERÍMETRO: **a home entra**. Ela liberou explicitamente ("em
   todas as paginas inclusive na home") e o §7a é a peça que estava parada
   esperando essa autorização — a pilha de depoimentos. O limite que continua
   valendo é o outro: NADA daqui alcança o desktop. Tudo dentro da media query.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 7a. A PILHA DE DEPOIMENTOS DA HOME -------------------------------
   * O defeito estava medido desde o segundo passe e documentado como "decisão
   * dela" porque fechar mexe na COMPOSIÇÃO da peça, e a home era proibida.
   *
   * MEDIDO antes (390 × 844):
   *     .tstack ............ 374 × 440, `overflow: hidden`, conteúdo 977
   *     .tcard ............. 234 × 300, conteúdo 906
   *     <blockquote> ....... **84px de medida**, 624 de altura
   *     .tdots ............. y 1462→1502, POR CIMA do texto (y 1484)
   * Ou seja: 84px de medida é uma a duas palavras por linha, a caixa de 440
   * cortava mais da metade do depoimento, e os pontinhos de navegação
   * montavam em cima do que sobrava. No desktop a mesma peça tem 656px de
   * medida e cabe inteira — é defeito só de telefone.
   *
   * A CAUSA É SOMA DE RECUOS, não uma linha só. Medido, na horizontal:
   *     .tstack `padding: 70px`  ....................... 140
   *     .tcard  `padding: 40px 52px 0` ................. 104
   *     .tcard-inner `padding: 24px 22px` (do §2g!) ....  44
   *                                                     ----
   *                                              288 de 374
   * Sobravam 86px. E o §2g deste arquivo era parte do problema: ele deu
   * respiro ao `.tcard-inner` sem ver que o `.tcard` ao redor já tinha o
   * dele — os dois recuos SOMAM. Foi por isso que o remendo de respiro
   * testado no passe anterior levou a medida só de 106 para 167px.
   *
   * O CONSERTO, item a item (é recomposição, não respiro):
   * (1) o respiro da CAIXA (70px, que existe para os cards de trás
   *     aparecerem) cai para 22px nas laterais e o dos cards de trás encolhe
   *     junto, em (4) — o efeito de profundidade fica, o custo de medida sai;
   * (2) o respiro do CARD vira 26px e o do `.tcard-inner` volta a ZERO: um
   *     respiro só, não dois;
   * (3) a caixa deixa de ter altura de desktop (440) e passa a 480, que é o
   *     que o depoimento mais longo pede a 360px de tela (medido: conteúdo
   *     390 numa caixa de 400 — o `scrollHeight` da pilha passou a ser
   *     EXATAMENTE a altura dela, ou seja, zero corte);
   * (4) os cards de trás giravam −6°/+4° e andavam ±18/20px, dimensionados
   *     para uma folga de 60px. Com 22px de folga eles sangrariam; giram
   *     −3,5°/+2,6° e andam ±8/9px. A profundidade continua legível (é o
   *     terceiro princípio da HIG) e nada é recortado;
   * (5) o conteúdo passa a ficar CENTRADO na vertical do card. Os três
   *     depoimentos têm comprimentos diferentes e a caixa é fixa; sem isto o
   *     card curto fica com o texto grudado no topo e um vão embaixo;
   * (6) os pontinhos saem de `bottom: 104px` — que no telefone caía DENTRO do
   *     card — para 26px, abaixo dele. (26 e não menos porque a área de toque
   *     de 44px do §4 se estende 21px para baixo do fio de 3px, e a pilha
   *     recorta: a 14px o alvo era cortado.)
   * DEPOIS: medida 84 → **284px**, conteúdo 977 → cabe, pontinhos abaixo do
   * card. O blockquote sobe para os 17pt de corpo da HIG (era 16). */
  body .tstack {
    width: calc(100% - 16px) !important;
    height: 480px !important;
    padding: 22px 22px 58px !important;
    margin-inline: auto !important;
  }
  body .tcard {
    inset: 22px 22px 58px !important;
    padding: 26px 22px !important;
    display: flex; flex-direction: column; justify-content: center;   /* (5) */
  }
  body .tcard-inner { padding: 0 !important; width: 100%; }
  body .tstack blockquote { font-size: 17px !important; line-height: 1.5 !important; }
  body .tcard figcaption { font-size: 15px !important; line-height: 1.45 !important; }
  body .tcard.is-2 { transform: rotate(-3.5deg) translate(-8px, 3px) !important; }
  body .tcard.is-3 { transform: rotate(2.6deg)  translate(9px, 2px)  !important; }
  body .tdots { bottom: 26px !important; }
  /* a entrada "de baixo pra cima" era calibrada para a caixa de 440 do desktop
   * (420/440/460 de deslocamento); na caixa do telefone os cards ficavam
   * pendurados fora dela antes de entrar */
  body .rbx .logos:not(.is-in) .tcard.is-front { transform: translateY(460px) rotate(2deg) !important; }
  body .rbx .logos:not(.is-in) .tcard.is-2     { transform: translateY(480px) rotate(-8deg) translate(-8px, 3px) !important; }
  body .rbx .logos:not(.is-in) .tcard.is-3     { transform: translateY(500px) rotate(7deg)  translate(9px, 2px)  !important; }

  /* --- 7b. A FAIXA DE MARCAS DA HOME (`.mq`) ----------------------------
   * DOIS defeitos, e o segundo só aparece depois de consertar o §7a.
   *
   * (i) VÃO DE 96px ENTRE LOGOS. É o valor do desktop, onde a faixa tem
   *     1240px e o vão é ritmo. Numa tela de 390 ele deixa DOIS logos na linha
   *     e lê como buraco, não como respiro. Vai a 44px — que continua sendo
   *     vão generoso (um logo mede ~134px) e põe três a quatro marcas na
   *     linha, que é o que faz a faixa parecer uma faixa.
   *     O `components.js` calcula quantas repetições do bloco precisa com
   *     `logos × 230` (134 + 96); com o vão menor o bloco fica MAIOR que a
   *     conta, nunca menor, então o laço infinito continua sem costura. A
   *     duração da animação é medida da largura real, então a velocidade não
   *     muda. Conferido: nenhuma emenda visível.
   *
   * (ii) AS TRÊS LINHAS SUMIAM ATRÁS DO CARD. Medido depois do §7a: com o
   *     card em 400px de altura e quase a largura da tela, as linhas 2 e 3 da
   *     faixa (que no desktop passam ao LADO do card de 900px numa faixa de
   *     1240) ficavam inteiramente cobertas — sobrava uma linha de logos em
   *     cima e nada embaixo, com um vão vazio de 240px no lugar.
   *     O vão entre linhas passa de 118 para 210px, que é o número que põe a
   *     linha 1 acima do card (9px de folga) e a linha 3 abaixo (45px):
   *         faixa = 3×34 + 2×210 + 68 de respiro = 590
   *         centro 295 → card 77→477 · linhas 34→68, 278→312, 522→556
   *     A composição do telefone fica: rio de logos, card, rio de logos.
   *     `:not(:last-child)` é obrigatório — o `components.css` zera a margem
   *     da última linha e um `!important` sem a exceção ressuscitava 244px de
   *     vazio no pé da faixa (medido: faixa de 800 em vez de 590). */
  body .mq-block { gap: 44px !important; padding-right: 44px !important; }
  body .mq-row:not(:last-child) { margin-bottom: 210px !important; }

  /* --- 7c. WORDMARK E BURGER SOBRE FAIXA ESCURA -------------------------
   * VISTO na home (Y≈5000) e em /suppliers/connections/ (Y≈1500): com o
   * cabeçalho sobre um bloco escuro, a marca e as três barras do burger
   * somem — tinta escura sobre fundo escuro.
   *
   * MEDIDO, e são DUAS causas diferentes:
   *
   * (i) O BURGER. `.burger span { background: var(--sh-ink) }`, e o
   *     `--sh-ink` é derivado do `--k` da home (`color-mix(#0e1116, #f4f4f6,
   *     var(--k))`, components.css linha 597). Quando o escuro vem do `--k`
   *     (`body.is-dark`, que é o caso da home) a tinta vira clara sozinha e
   *     está tudo certo. Quando vem de uma PLACA escura — que é o que
   *     `hdr-dark`/`veil-dark` detectam — o `--k` não mexe e a tinta fica
   *     escura. O §27 do components.css cobriu `color` (`…a:not([class*=bg-])
   *     { color: #fff }`) e não cobriu `background`, que é o que o burger usa.
   *     Medido em /suppliers/connections/ Y=1500: `hdr-dark` ativo,
   *     `.burger span` em `rgb(14,17,22)`.
   *
   * (ii) O WORDMARK. O §27 TEM a regra certa
   *      (`body.hdr-dark .sh .brand-logo-light { display: none }`), mas ela
   *      PERDE. Lido com CSS.getMatchedStylesForNode, quem ganha é uma regra
   *      do próprio espelho:
   *          `:root[data-theme="light"] .sh .brand-logo-light { display:block }`
   *      que é (0,4,0) contra os (0,3,1) do §27 — `b` é comparado antes de
   *      `c`, então quatro classes/atributos ganham de três classes + um
   *      elemento. É por isso que o defeito aparece em /suppliers/connections/
   *      e NÃO em /why-brikl/: as duas têm `hdr-dark`, só uma tem o
   *      `data-theme="light"` no `<html>`.
   *
   * O gêmeo do desktop FICA — ela pediu o conserto no telefone e o desktop é
   * outra frente; está no relatório.
   * `:not(:has(.mobile.open))`: com o menu aberto o cabeçalho passa a viver
   * sobre a superfície CLARA do painel (§5), e aí a tinta certa é a escura —
   * quem manda ali é o §5, que tem (0,3,2) contra os (0,2,2) daqui. */
  body:is(.hdr-dark, .veil-dark):not(:has(.mobile.open)) .sh .burger span {
    background: #f5f5f7 !important;
  }
  body:is(.hdr-dark, .veil-dark):not(:has(.mobile.open)) .sh .brand-logo-light.brand-logo-light { display: none !important; }
  body:is(.hdr-dark, .veil-dark):not(:has(.mobile.open)) .sh .brand-logo-dark.brand-logo-dark  { display: block !important; }

  /* --- 7d. A PÍLULA DE AVISO: SAFE AREA, ALVO E UMA SAÍDA ---------------
   * Ela apareceu cobrindo conteúdo em praticamente toda captura das duas
   * varreduras anteriores (o terceiro cartão da home, o "FOLLOW US" da
   * /contact/, a última linha do /guides/, a linha de baixo da faixa de
   * marcas da home). Três medidas, todas de HIG:
   *
   * (1) SAFE AREA. `bottom: 20px` é distância da borda do VIEWPORT; num
   *     iPhone com indicador de gestos a pílula encosta nele. Passa a somar
   *     `env(safe-area-inset-bottom)`, que é 0 em telefone sem recorte e não
   *     muda nada lá.
   * (2) ALVO. O link inteiro da pílula passa a ter 44px de altura, e o texto
   *     sobe de 13 para 15px (Subhead — é linha única de aviso, não leitura
   *     corrida; a 17px ela vira duas linhas e ocupa mais tela ainda).
   * (3) UMA SAÍDA. Um aviso fixo que não se pode dispensar é um aviso que
   *     cobre a tela para sempre. Ganha um "×" de 44×44 (o `parts/mobile.js`
   *     monta o botão; aqui só o desenho dele), e a pílula dispensada fica
   *     dispensada pela sessão. É a resposta à pergunta que ficou em aberto
   *     no relatório do primeiro passe ("vale ter um fechar?") — vale, e é o
   *     que a HIG pede: conteúdo em primeiro lugar, o aviso sai do caminho. */
  body .sh .announce {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }
  /* o "×" NÃO pode morar dentro do `.announce-link`: o `.sh-wrap` da pílula É
   * o `<a>` (medido na marcação: `<div class="announce"><a class="sh-wrap
   * announce-link">…</a></div>`), e botão dentro de link é controle dentro de
   * controle. Ele entra como IRMÃO, e a pílula vira a fileira dos dois. */
  body .sh .announce { display: flex; align-items: center; }
  body .sh .announce .announce-link { flex: 1 1 auto; min-width: 0; min-height: 44px; }
  body .sh .announce .sh-wrap { padding-right: 6px; }
  body .mb-x {
    flex: 0 0 auto; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; padding: 0; margin: 0;
    color: #565c68; font-size: 19px; line-height: 1; cursor: pointer;
    border-radius: 999px;
  }
  body .mb-x::before { content: "×"; }
  body .sh .announce.mb-gone { display: none !important; }
  /* o rodapé reservava 96px para a pílula; com ela dispensável e com safe
   * area, o número passa a ser o da tela real */
  body .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* --- 7e. SAFE AREAS DO QUE É FIXO OU GRUDADO -------------------------
   * O cabeçalho é `sticky` no topo e o painel do menu cobre a tela inteira:
   * os dois precisam do recorte de cima (ilha/notch) e o painel também do de
   * baixo. Sem isto, num iPhone com recorte, o burger nasce por baixo da
   * ilha. Em aparelho sem recorte o `env()` é 0 e nada muda — foi assim que
   * conferi as 45 páginas. */
  /* --- 7e-1. O BURGER ESTAVA NO MEIO DA BARRA -------------------------
   * VISTO por ela, no aparelho: "o menu hamburguer ta num lugar bizarro" —
   * colado no logo, no meio da barra, em vez de na borda direita.
   * MEDIDO em 390×844 (idêntico na `/` e na `/custom-hoodies/`):
   *     .burger  [173..217]  44×44
   *     .actions [173..217]  44×44   ← o contêiner tem o tamanho do botão
   *     viewport 390
   * A pista está no pai, e a causa é do PRÓPRIO ESPELHO, não deste passe
   * (conferi na captura do estado anterior: o burger já estava em x≈195):
   *     `.site-header .hdr { grid-template-columns: 1fr auto 1fr }`
   * Três colunas para três filhos — marca, `.mainnav`, `.actions`. Só que no
   * telefone a `.mainnav` é `display: none`, e elemento com `display:none`
   * NÃO é item de grade: some do posicionamento automático. Sobram dois
   * filhos para três colunas, e o auto-placement põe `.actions` na SEGUNDA,
   * a `auto` do meio — daí os 173..217, centrados exatamente em 195, que é a
   * metade de 390. Não é o botão que saiu do lugar: é o contêiner que caiu
   * numa coluna que não é a dele.
   * O conserto ancora cada um na sua coluna por LINHA de grade, e não por
   * contagem: `-2 / -1` é sempre a última coluna, exista a `.mainnav` ou não.
   * Pela HIG o burger fica na borda de saída, com a margem lateral de 16pt
   * (§7f) e os 44×44 do §4; a marca fica na borda de entrada. `align-self:
   * center` alinha os dois no eixo da barra — o logo tem 44px de altura e o
   * burger também, mas a grade os esticava. */
  body .sh .site-header .hdr > .brand   { grid-column: 1;       justify-self: start; align-self: center; }
  body .sh .site-header .hdr > .actions { grid-column: -2 / -1; justify-self: end;   align-self: center; gap: 8px; }

  body .sh .site-header { padding-top: env(safe-area-inset-top, 0px); }
  /* o painel do menu se posiciona por `--sh-header-h`; com o recorte da ilha
   * somado ao cabeçalho, a variável tem de somar também, senão o painel abre
   * por baixo dele a distância do recorte */
  body .sh { --sh-header-h: calc(76px + env(safe-area-inset-top, 0px)); }
  body .sh .mobile {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  body .fbar .fbar-in {
    scroll-padding-left: max(16px, env(safe-area-inset-left, 0px));
    scroll-padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  /* --- 7f. A MARGEM LATERAL DE 16pt, CONSISTENTE ------------------------
   * MEDIDO antes, o x da primeira letra do texto de leitura, por página:
   *     /  45 · /why-brikl/ 48 · /how-it-works/ 61 · /features/ 48 ·
   *     /order-builder/ 60 · /pricing/ 48 · /launch-offer/ 32 · /blog/ 73 ·
   *     /faq/ 92 e 80 · /glossary/ 60 · /compare/ 85 · /showcase/ 81 ·
   *     /store-types/ 85 · /connections/ 69
   * Doze margens diferentes entre 32 e 96px numa tela de 390. A HIG pede uma
   * só, de 16pt — e o custo aqui não é estético: a 92px de recuo sobram
   * 206px de medida, que é o que produz a coluna de três palavras por linha.
   *
   * A CAUSA é sempre a mesma e já tem nome neste arquivo: TRILHO DUPLO. O
   * `components.css` §30 A dá ao `> div` da seção `width: min(1080px, 100% -
   * 44px)` (22px de cada lado) e a marcação do espelho já embrulhou a seção
   * num `.p-8`/`.px-8` (32px) — os dois somam, e às vezes um cartão soma um
   * terceiro. O trilho de 1080px é decisão de DESKTOP; no telefone o recuo
   * externo é um só, de 16px, e o que os cartões tiverem de respiro é
   * respiro DELES, que é o que a HIG chama de conteúdo.
   *
   * Especificidade medida: a regra vencida é
   * `body.rules main section > div { width: min(1080px, 100% - 44px)
   * !important }` dentro de `@media (max-width: 900px)` — (0,2,3) com
   * `!important`. Esta aqui é (0,2,3) também e `!important` também, e o
   * `parts/mobile.css` é carregado DEPOIS do `components.css` pelo serve.py
   * (tokens → overrides → components → parts), então ganha por ordem, que é
   * o critério certo quando a especificidade empata. */
  body.rules main section > div { width: calc(100% - 32px) !important; }
  /* o embrulho `.p-8`/`.px-8` do espelho (32px) vira o mesmo 16 */
  body main :is(.p-8, .px-8, .p-10, .px-10) { padding-left: 16px !important; padding-right: 16px !important; }
  /* o cabeçalho usava 20px enquanto o conteúdo usava 22; um só número */
  body .sh-wrap { padding-left: 16px; padding-right: 16px; }
  /* e as placas, que estavam em 12 (§2c) */
  body.rules .r-plate { margin-left: 16px !important; margin-right: 16px !important; }
  body.rules .r-plate-dark { width: calc(100% - 32px) !important; margin-left: 16px !important; margin-right: 16px !important; }

  /* --- 7f-1. O BRILHO DA /launch-offer/ DEPOIS DA MARGEM DE 16pt --------
   * MEDIDO: com a margem de 16pt (§7f), a `/launch-offer/` passou a renderizar
   * num viewport de 407 em vez de 390 — ou seja, voltou a encolher a página.
   * Bissecção (5 variantes, uma regra desligada de cada vez): o `scrollWidth`
   * só volta a 390 desligando o `.px-8 → 16px`. Sem as OUTRAS regras deste
   * passe ele vai a 409, isto é, elas ajudam.
   * A causa não é a margem: é `.lo-cta-art::before { inset: -18% -10% }`, uma
   * nuvem decorativa que sangra 10% para cada lado por desenho. Com o recuo de
   * 32px o elemento media 326 e a nuvem fechava em 391 (dentro da tolerância
   * de 1px); com o recuo de 16 ele mede 358 e a nuvem vai a 430. A decoração
   * não mudou — a caixa dela é que cresceu junto com o conteúdo.
   * O conserto é o do §1e, o mesmo que o arquivo já usa para seção de hero:
   * a seção recorta o que sangra NO EIXO X. `clip` e não `hidden`: não cria
   * contexto de rolagem e não come arrasto. A nuvem continua inteira onde há
   * espaço; onde não há, ela para na borda em vez de encolher a página. */
  body main section.lo-cta { overflow-x: clip; }

  /* --- 7g. NADA DEPENDE DE `:hover` ------------------------------------
   * No telefone não existe cursor: o que só aparece no hover não existe. Dois
   * casos medidos na camada — a seta do cartão de produto e o realce do link
   * da pílula de aviso — já nascem visíveis; o que faltava era garantir que o
   * estado de hover não fosse o ÚNICO jeito de ver o foco. O `:focus-visible`
   * passa a ter anel próprio (e ele serve ao teclado externo, que no iPad é
   * caso real). 2px de anel + 2px de folga = o mínimo que se enxerga. */
  body :is(a, button, [role="button"], input, summary):focus-visible {
    outline: 2px solid #3a63f5 !important;
    outline-offset: 2px !important;
  }

  /* --- 7h. LINHA DO TEMPO: TÍTULO E PARÁGRAFO COLADOS ------------------
   * VISTO em /features/turbo-store/: "Tell it what the company does" encosta
   * em "Pick the profile that fits" — vão de 0px.
   * MEDIDO: o componente tem `body.rules .tl-text h2 { margin: 0 0 12px }`, e
   * repete a regra mais abaixo com (0,5,4) para vencer o auto-placement. Só
   * que nessas páginas o título do nó é `h3`, não `h2` — e nenhuma das duas
   * regras cita `h3`. O `preflight` do Tailwind zera a margem de heading, e
   * sobra zero.
   * O gêmeo do desktop tem o mesmo vão; ela pediu o conserto no telefone.
   * 12px é o número que o próprio componente já usa para o `h2`, não um
   * número novo. */
  body.rules .tl-text :is(h3, h4) { margin: 0 0 12px !important; }

  /* --- 7i. `prefers-reduced-motion` ------------------------------------
   * O `components.css` já respeita a preferência na faixa de marcas e no
   * preenchimento dos pontinhos. Faltava a peça com mais movimento da home —
   * a pilha, que gira, escala e desliza três cards a cada 7 segundos — e a
   * revelação em cascata das seções. Com a preferência ligada, o estado final
   * continua sendo o mesmo: o que sai é a travessia, não o resultado. */
  @media (prefers-reduced-motion: reduce) {
    body .tcard, body .tcard-inner, body .tdots { transition: none !important; }
    body .rbx .logos:not(.is-in) .tcard.is-front,
    body .rbx .logos:not(.is-in) .tcard.is-2,
    body .rbx .logos:not(.is-in) .tcard.is-3 { transform: none !important; }
    body .rbx .logos:not(.is-in) .tdots { transform: translate(-50%, 0) !important; }
    body main .rv { transition: none !important; }
  }
}

/* =====================================================================
   §8. O QUE ELA VIU NO APARELHO
   =====================================================================
   Esta seção não saiu de medidor: saiu de ela abrir o telefone e dizer o que
   estava feio. Dois recados, sete defeitos. Cada um está aqui com o que foi
   VISTO, o que foi MEDIDO e o que mudou — e dois deles eram meus.
   Tudo continua dentro da media query; nada alcança o desktop.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 8a. O CABEÇALHO PASSANDO POR CIMA DO CONTEÚDO -------------------
   * VISTO por ela na `/launch-offer/`: "o cabeçalho passa por cima do conteúdo
   * em toda rolagem" — a marca e o burger flutuando sem fundo, e o texto
   * correndo por baixo deles (a camiseta do hero atrás do logo, a placa preta
   * passando por baixo na tela seguinte).
   * MEDIDO: o véu EXISTE e está ligado — `.hdr-blur`, 390×96, `opacity: 1`,
   * cinco camadas de `backdrop-filter` de 7 a 0,7px com máscara em degradê
   * (components.css §50). O que ele NÃO tem, fora do `veil-dark`, é TINTA:
   * as cinco `span` têm `background: rgba(0,0,0,0)`. Desfoque sozinho embaralha
   * a forma das letras mas não baixa o contraste delas — o texto continua
   * competindo com o wordmark. No desktop isso passa porque a barra tem 1440px
   * e o conteúdo raramente cruza os 96px do topo com texto; numa tela de 390
   * cruza o tempo todo.
   * A HIG é direta aqui: a barra de navegação ganha material quando o conteúdo
   * rola por baixo. O material já existe — o que entra é a tinta dele, no MESMO
   * degrau de opacidade que a versão escura já usa (.42/.26/.14/.06 → aqui
   * .62/.38/.20/.08, um degrau acima porque a tela é menor e o conteúdo passa
   * mais perto). O véu continua translúcido: é material, não barra sólida. */
  body.scrolled .hdr-blur span:nth-child(1) { background: rgba(255,255,255,.62); }
  body.scrolled .hdr-blur span:nth-child(2) { background: rgba(255,255,255,.38); }
  body.scrolled .hdr-blur span:nth-child(3) { background: rgba(255,255,255,.20); }
  body.scrolled .hdr-blur span:nth-child(4) { background: rgba(255,255,255,.08); }
  body.scrolled.veil-dark .hdr-blur span:nth-child(1) { background: rgba(9,11,20,.66); }
  body.scrolled.veil-dark .hdr-blur span:nth-child(2) { background: rgba(9,11,20,.44); }
  body.scrolled.veil-dark .hdr-blur span:nth-child(3) { background: rgba(9,11,20,.24); }
  body.scrolled.veil-dark .hdr-blur span:nth-child(4) { background: rgba(9,11,20,.10); }

  /* --- 8b. TÍTULO "CEIFADO NA ALTURA DAS LETRAS" -----------------------
   * VISTO: "The first T-shirt made to" e a segunda linha cortada no meio das
   * letras, com um "be" pela metade aparecendo por baixo.
   * MEDIDO: não é corte, é a ENTRADA TIPOGRÁFICA no meio do caminho. O
   * `components.js` quebra `h1`/`h2` em palavras (`.sw` com `overflow:hidden`
   * + `.swi` que sobe de `translateY(105%)`) e escalona a entrada em
   * **70ms por palavra**. Num título de 9 palavras a última só COMEÇA aos
   * 560ms e leva 820ms: o título só fica inteiro 1,38s depois de entrar na
   * tela. No desktop o título tem uma linha e você rola devagar; no telefone
   * ele tem duas e você está lendo enquanto ele ainda sobe — o que se vê é
   * exatamente a máscara pela metade que ela descreveu.
   * Medido também, e é o mesmo mecanismo: títulos que ainda não entraram ficam
   * em `opacity: 0` com o espaço reservado. Se o observador não disparar, o
   * título não existe.
   * A escada SAI no telefone: todas as palavras entram JUNTAS, em 0,42s. A
   * máscara e o movimento continuam — some só a espera. Legibilidade antes de
   * travessia é HIG; a gramática de movimento dela fica. */
  body main :is(h1, h2)[data-split] .swi {
    transition-delay: 0ms !important;
    transition-duration: .42s, .34s !important;
  }

  /* --- 8c. O SOBRANCELHO E A PASTILHA DE DATA BRIGANDO PELA LINHA ------
   * VISTO: "OCT 1 – DEC 31, 2026" encostada na borda direita, dividindo a
   * linha com "BRIKL V3.0 LAUNCH OFFER", que quebrava em duas linhas.
   * MEDIDO: a fileira é `flex items-center gap-2.5` com 358px. O sobrancelho
   * media 213×**49** (duas linhas) e a pastilha 135, terminando em x=374 — o
   * limite exato da margem. E a causa das duas linhas fui EU: o sobrancelho é
   * `.text-sm`, que o §3 deste passe subiu de 15 para 17px. Só que sobrancelho
   * em caixa alta com tracking é RÓTULO, não leitura — pela HIG ele pertence
   * ao degrau Subhead (15), não ao Body (17). Volta para 15.
   * E a fileira passa a poder quebrar: uma coluna, como a HIG pede para o
   * telefone. Sobrancelho em cima, pastilha embaixo, cada um na largura que
   * precisa, os dois com a margem de 16pt. */
  body main p[class*="uppercase"][class*="text-sm"] { font-size: 15px !important; }
  body main .in-hero div.flex.items-center:has(> .tag) { flex-wrap: wrap; row-gap: 10px; }

  /* --- 8d. A CAMISETA 3D CORTADA NOS DOIS LADOS ------------------------
   * VISTO: as mangas da Beefy-T saindo pelas duas bordas da tela.
   * MEDIDO, e a causa é de câmera, não de CSS: o `components.js` monta um
   * `THREE.PerspectiveCamera(30, 1, .1, 1000)` em `z = 4.2` e faz
   * `camera.aspect = w / h` a cada `resize`. Numa perspectiva, o fov de 30° é
   * VERTICAL: o campo horizontal é o vertical multiplicado pela proporção. O
   * `canvas` media **358 × 620** (proporção 0,58), então o campo horizontal
   * encolhia para 58% do vertical. Contas, com o modelo normalizado para 2
   * unidades na maior dimensão:
   *     altura visível = 2 × 4,2 × tan(15°) = 2,25 unidades
   *     largura visível = 2,25 × 358/620 = **1,30** — e a camiseta mede ~1,6
   * Ou seja, faltavam 0,3 unidade de campo: exatamente as duas mangas.
   * Não dá para mexer na câmera daqui (é `components.js`, arquivo de outro par
   * de mãos), mas a câmera obedece à CAIXA — e a caixa é minha. Com 440px de
   * altura a largura visível vai a 2,25 × 358/440 = **1,83**, que cabe a
   * camiseta inteira com folga. A moldura fica mais quadrada, que é o
   * enquadramento de telefone de qualquer jeito. */
  body .lo-canvas2 .lo-tee-live.has-3d { height: 440px !important; aspect-ratio: auto; }

  /* --- 8e. A FILEIRA DE CORES: DUAS COISAS, UMA DELAS MINHA ------------
   * VISTO: "a fileira de cores embaixo é cortada nas duas pontas — a primeira
   * e a última bolinha aparecem pela metade".
   * MEDIDO: `.lo-sw` é `width: 20px; height: 20px` no desenho dela, e estava
   * renderizando **44×44**. O culpado é o alvo de toque: o §4 (e uma regra do
   * PRÓPRIO ESPELHO, `nav a, button, … { min-height: 44px }` em ≤768) inflou a
   * bolinha inteira em vez de inflar só a área de toque. Com 44px cada, 14
   * cores davam 556px de trilho numa caixa de 358 — daí a sensação de corte.
   * É o mesmo erro que o §4 já tinha corrigido no `.tdot` da home; aqui faltou.
   * O conserto é o mesmo padrão: a bolinha volta aos 20px DESENHADOS e o alvo
   * de 44×44 vem de um `::before` invisível, centrado nela. O vão sobe de 9
   * para 32px — não por estética, por aritmética: com 20px de bolinha o passo
   * fica em 52px, que são os 44 do alvo mais os **8pt de separação** que a HIG
   * pede entre alvos vizinhos. Com o vão de 9px as áreas de toque se
   * sobrepunham e o dedo escolhia a cor errada.
   * O trilho continua trilho (é o desenho dela, e 14 cores não cabem numa tela
   * de 390 de jeito nenhum), mas ganha o que faltava para LER como trilho:
   * encaixe por bolinha, respiro nas pontas e o degradê de borda que diz "tem
   * mais para o lado" — o mesmo `mask-image` que o componente já usava antes
   * de ser desligado no desktop. */
  body .lo-sw {
    width: 20px !important; height: 20px !important;
    min-width: 0 !important; min-height: 0 !important;
    scroll-snap-align: center;
  }
  body .lo-sw::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; translate: -50% -50%; }
  body .lo-swatches {
    gap: 32px !important;
    padding-inline: 6px !important;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }

  /* --- 8f. "O CONTROLE DE PAUSA SOLTO NO MEIO" — era eu de novo --------
   * VISTO: "a pílula branca com as duas barras, na placa preta, fica solta no
   * meio, sem rótulo".
   * MEDIDO: não é controle de pausa nenhum — são os PONTINHOS do carrossel do
   * relógio. `.lo-dots button` é `width: 6px; height: 6px`, e o selecionado
   * `width: 28px`. Com o `min-height: 44px` (mesma origem do §8e) eles viraram
   * uma barra branca de 28×44 e duas cinzas de 6×44 — que é exatamente "uma
   * pílula e duas barrinhas". O desenho voltou; o alvo de 44 vem do `::before`,
   * e o vão de 22px dá os 8pt de separação entre as áreas de toque. */
  body .lo-dots button { min-width: 0 !important; min-height: 0 !important; overflow: visible; }
  body .lo-dots button::after { border-radius: 999px; }
  body .lo-dots button::before { content: ""; position: absolute; left: -9px; right: -9px; top: -19px; bottom: -19px; }
  body .lo-dots { gap: 22px !important; }
}

/* =====================================================================
   §9. O QUE SÓ APARECE NO APARELHO DE VERDADE
   =====================================================================
   Ela abriu a `/launch-offer/` num iPhone (não no emulador) e trouxe o que o
   emulador NÃO mostra: o recorte da ilha em cima e o indicador de home
   embaixo. `env(safe-area-inset-*)` é 0 no headless e nas 45 páginas medidas,
   então nada aqui muda um pixel do que já foi conferido — e num aparelho com
   recorte é a diferença entre o controle no lugar e o controle debaixo da
   barrinha branca.
   O §7e já tinha coberto o cabeçalho, o painel do menu e a pílula de aviso.
   Este §9 é o INVENTÁRIO COMPLETO: varri as 8 páginas de famílias diferentes
   procurando TUDO que é `position: fixed` ou `sticky`, em vez de consertar um
   de cada vez conforme aparece. Achei seis, e três ainda estavam de fora.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 9a. O VÉU DO CABEÇALHO tem de crescer com o recorte --------------
   * `.hdr-blur` é `position: fixed; inset: 0 0 auto 0; height: 96px` — 20px a
   * mais que os 76 do cabeçalho, que é a folga onde o degradê termina. Com o
   * recorte da ilha o cabeçalho passa a medir 76 + inset e o véu continuava em
   * 96: a faixa de baixo do cabeçalho ficava FORA do material. Cresce junto. */
  body .hdr-blur { height: calc(96px + env(safe-area-inset-top, 0px)); }

  /* --- 9b. A BARRA DE PROGRESSO DE ROLAGEM ------------------------------
   * `position: fixed; top: 0`, 2px de altura. Sob a ilha ela some inteira. */
  body .design-progress, body .scroll-progress { top: env(safe-area-inset-top, 0px); }

  /* --- 9c. OS TRILHOS GRUDADOS DAS PÁGINAS INTERNAS ---------------------
   * Medido: `div.sticky.top-[66px]` gruda em `top: 74px` — 66 da classe mais 8
   * do deslocamento do cabeçalho. Com a ilha, 74px do topo do VIEWPORT cai
   * debaixo dela. O valor medido continua sendo 74; o que entra é o recorte. */
  body main div[class*="sticky"][class*="top-"] { top: calc(74px + env(safe-area-inset-top, 0px)) !important; }

  /* --- 9d. O RODAPÉ DA PLACA DO RELÓGIO (/launch-offer/) ----------------
   * VISTO por ela no aparelho: "a placa preta vai até a borda de baixo da tela
   * e os controles ficam em cima do indicador de home".
   * Os pontinhos do carrossel moram a 44px do pé da placa (§6c). Quando a
   * placa termina exatamente no fim da tela — que numa placa de 700px numa
   * tela de 844 acontece o tempo todo — esses 44px caem dentro dos ~34 do
   * indicador. O respiro passa a contar o indicador.
   * RESSALVA HONESTA, para não prometer o que não dá: conteúdo que ROLA passa
   * por baixo do indicador no iOS por desenho do sistema, e não existe CSS que
   * impeça isso — o indicador é translúcido justamente por causa disso. O que
   * dá para garantir, e é o que está aqui, é que nenhum CONTROLE nasça dentro
   * dessa faixa quando o bloco dele termina no pé da tela. */
  body .lo-press-art { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)) !important; }
  body .lo-dots-row { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* --- 9e. E o fim do documento ----------------------------------------
   * O `.site-footer` já reservava 96px para a pílula de aviso (§7d). O último
   * bloco de conteúdo antes dele também precisa sair de baixo do indicador. */
  body main > *:last-child { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* =====================================================================
   §10. A VARREDURA FINAL — o que sobrou depois de tudo
   =====================================================================
   Os §7–§9 fecharam os defeitos grandes. Este §10 é o resto da conta: rodei o
   medidor nas 45 páginas outra vez e fui atrás, um por um, de CADA alvo abaixo
   de 44, CADA bloco de leitura abaixo de 17pt e CADA rótulo abaixo de 11pt que
   sobrou, lendo com CSS.getMatchedStylesForNode quem estava ganhando em cada
   caso. Nada aqui é regra preventiva: cada linha tem um número atrás.
   ===================================================================== */

@media (max-width: 820px) {

  /* --- 10a. OS ÚLTIMOS ALVOS ABAIXO DE 44 ------------------------------
   * Sobraram 22 nas 45 páginas, em quatro formas:
   *   · /guides/decoration-methods/ — o nome do método é um link DENTRO da
   *     célula da tabela comparativa (`td.p-3 > a`), 31×21. É o rótulo da
   *     linha inteira, não link de prosa: vira alvo;
   *   · /contact/ — os dois e-mails (`div > a[href^=mailto]`, 146×25) e a
   *     fileira de redes (`div.flex.gap-4 > a`, 70×28). São links soltos numa
   *     caixa, não frases;
   *   · /suppliers/ e /suppliers/connections/ — a aba estreita do trilho de
   *     seções ("All", 41px de largura, altura já certa);
   *   · /case-studies/ — "Read client testimonials →" (233×27,6): é
   *     `inline-block` sem `mt-`, e a regra do §4 só pegava com `mt-`. */
  body main td > a { min-height: 44px; min-width: 44px; display: inline-flex !important; align-items: center; }
  body main a[href^="mailto:"], body main a[href^="tel:"],
  body main div[class*="flex"][class*="gap-"] > a,
  body main a[class*="inline-block"] {
    min-height: 44px; display: inline-flex !important; align-items: center;
  }
  body main nav a[class*="shrink-0"] { min-width: 44px; justify-content: center; }

  /* os pontinhos do relógio da /launch-offer/ (§8f): o `::before` estava com
   * `left/right: -9px` sobre uma bolinha de 6px, o que dá 24 de alvo, não 44.
   * Vira caixa de 44 centrada — o mesmo recurso do `.lo-sw` — e o vão sobe
   * para 46px, que com 6px de bolinha dá um passo de 52 = 44 de alvo + os 8pt
   * de separação da HIG. */
  body .lo-dots button::before {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: 44px; height: 44px; translate: -50% -50%;
  }
  body .lo-dots { gap: 46px !important; }

  /* --- 10b. OS ÚLTIMOS BLOCOS DE LEITURA ABAIXO DE 17pt -----------------
   * Sobraram 105, e são sete donos, todos lidos no navegador:
   *     `:is(body.rules, body.lo-page) .faq-canon .faq-item > :not(summary)` 15
   *     `body.rules .tl-text p` 16          `.lo-head .lo-story p` 16
   *     `body.rules .tl-media-cards .r-col p` 14,5   `.lo-band .bn p` 14,5
   *     `body.rules .tsb-cap` 15            `body .site-footer .fbrand p` 16 (meu)
   * Todos são parágrafo de leitura; todos vão para o corpo de 17pt. */
  /* GOTCHA que custou uma rodada: escrevi `body :is(body.rules, body.lo-page)
   * …` e MEDI que continuava 15px. O seletor é impossível — pede um
   * `body.rules` que seja DESCENDENTE de um `body`. A regra vencida é
   * `:is(body.rules, body.lo-page) .faq-canon .faq-item > :not(summary)`,
   * (0,3,2) com !important; a forma certa é `body:is(…)` com a classe
   * repetida, que dá (0,4,2). */
  body:is(.rules, .lo-page) .faq-canon.faq-canon .faq-item > :not(summary),
  body.rules .tl-text p,
  body .lo-head .lo-story p,
  body.rules .tl-media-cards .r-col p,
  body .lo-band .bn p,
  body.rules .tsb-cap,
  body main p.text-sm, body main li.text-sm,
  body .site-footer .fbrand p { font-size: 17px !important; line-height: 1.5 !important; }

  /* --- 10c. OS ÚLTIMOS RÓTULOS ABAIXO DE 11pt ---------------------------
   * A HIG não deixa NADA abaixo de 11pt, nem rótulo. Sobraram estes, todos
   * micro-etiquetas em caixa alta de 2 a 3 palavras, entre 9,5 e 10,5px:
   *     `.lo-trip-node b` · `.lo-trip-file i` · `.lo-rail em` ·
   *     `.lo-colorname` · `.lo-kv-tag` · `.lo-cta-size` ·
   *     `.r-col-head :is(p, span).text-xs` · `span.text-[10px]` ·
   *     `span.inline-block.shrink-0.rounded-*` (as pílulas "Launch offer" e
   *     "Brikl v3.0" que abrem as placas de /why-brikl/ e /pricing/)
   * Vão todas para 11,5px — o piso da HIG com meio pixel de folga. Continuam
   * etiquetas: caixa alta, tracking largo, peso alto. */
  body main :is(.lo-trip-node b, .lo-trip-file i, .lo-rail em,
                .lo-colorname, .lo-kv-tag, .lo-cta-size,
                .r-col-head p[class*="text-xs"], .r-col-head span[class*="text-xs"],
                span[class*="text-\[10px\]"],
                span[class*="inline-block"][class*="rounded-"]) {
    font-size: 11.5px !important;
  }
  /* o "days" do numeral gigante é `font-size: .34em` — proporcional, e portanto
   * miúdo quando o numeral encolhe no telefone (medido: 10,92px). `max()` é a
   * forma certa de dar piso a um tamanho proporcional sem congelá-lo. */
  body :is(.lo-big-n, .lo-rail .rail-node b) small { font-size: max(11.5px, .34em) !important; }
  /* a lista de marcadores herda o tamanho da <ul>, não do <li>: quando a <ul>
   * carrega `text-sm`, o `li.text-sm` do §10b não casa (a classe está no pai).
   * Medido em /suppliers/: 3 itens de leitura a 15px dentro de
   * `ul.space-y-3.text-slate-600.text-sm`. */
  /* e a classe é `text-[15px]`, não `text-sm` — o site usa as duas formas para
   * o mesmo degrau. A lista carrega a classe e o `<li>` só herda, então a
   * regra tem de pegar o CONTÊINER também. */
  body main :is(ul, ol, p, li, dd, blockquote):is(
      .text-sm, .text-\[15px\], .text-\[14px\], .text-\[13px\], .text-\[12px\], .text-\[11px\], .text-xs
    ) { font-size: 17px !important; line-height: 1.5 !important; }

  /* --- 10d. DESVIOS ASSUMIDOS, para constar ----------------------------
   * Duas coisas continuam abaixo da régua DE PROPÓSITO, e estão no relatório:
   * (1) célula de tabela em 15px (Subhead) — ver §3;
   * (2) a MAQUETE de tela da /launch-offer/ (`.sm-auth`, `.sm-turbo`: os
   *     blocos `.sm-t`, `.sm-sub`, `.sm-lab`, `.sm-field`, `.sm-btn`,
   *     `.sm-legal`, entre 3,4 e 7,5px). Não é texto: é o DESENHO de uma tela
   *     em miniatura, do mesmo jeito que um ícone de "documento" tem linhas
   *     que parecem texto. Subir para 11pt transformaria a maquete num
   *     formulário de verdade dentro da placa e destruiria a peça. Fica como
   *     está — é ilustração, e a HIG não governa ilustração. */
}


/* ───── parts/pricing.css ───── */
/* =============================================================================
   parts/pricing.css — /pricing/: hero = componente da home; blocos de preço = vidro.
   §1 só age em `body.pr-page` (posta pelo parts/pricing.js em /pricing). §2 age em
   `body:is(.pr-page, .pr-cards)`: .pr-cards é posta em /book-your-demo, que
   reusa o cartão de vidro (2026-09-29). A HOME NÃO É ALCANÇADA POR NENHUMA REGRA
   DESTE ARQUIVO.

   §1 defende o hero portado das regras genéricas de `body.rules` (elas existem
      para as páginas internas e achatam o componente da home). Todo valor aqui é
      o valor MEDIDO na home, não um valor novo.
   §2 vidro da casa (receita de `.fbar .fbar-in` do components.css §48).
   ============================================================================= */

/* =============================================================================
   §1. HERO — restaurar, sobre `body.rules`, as medidas exatas da home
   `body.rules` redefine section/h1/p de TODA página interna; o hero da home é um
   componente fechado. Cada regra abaixo repõe o valor medido em http://localhost:4180/
   ============================================================================= */

/* a seção: 80vh, flex centrado, 228px de topo (o -76 do header já entra no cálculo) */
body.pr-page .pr-rbx section.pr-hero {
  display: flex !important; align-items: center !important;
  min-height: 80vh !important;
  margin: -76px 0 0 !important;
  padding: 228px 0 56px !important;
  background: none !important;
  position: relative; isolation: isolate; overflow: visible; overflow-x: clip;
}
/* o invólucro é uma <section> (ver parts/pricing.js): ele existe só para dar o
   escopo `.rbx` ao componente e para continuar sendo a PRIMEIRA seção do main.
   Não pinta nada e não carrega margem — quem tem geometria é o hero de dentro. */
body.pr-page section.pr-rbx.pr-rbx {
  background: none !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; min-height: 0 !important; display: block !important;
}
body.pr-page .pr-rbx section.pr-hero > :not(.cl) { position: relative; z-index: 1; }

/* o trilho: 1120 / 32 (var(--container) do chunk da home) */
body.pr-page .pr-rbx .pr-hero .container.hero-inner {
  max-width: 1120px !important; width: 100% !important;
  margin-inline: auto !important; padding: 0 32px !important;
  text-align: center !important;
  display: flex !important; flex-direction: column; align-items: center;
}

/* tipografia: clamp(44,6vw,76) / 600 / 1.1 / -.03em / 28 */
body.pr-page .pr-rbx .pr-hero h1.hero-title {
  font-size: clamp(44px, 6vw, 76px) !important; font-weight: 600 !important;
  line-height: 1.1 !important; letter-spacing: -.03em !important;
  margin: 0 0 28px !important; max-width: none !important; text-align: center !important;
  color: var(--text) !important; text-wrap: balance;
}
body.pr-page .pr-rbx .pr-hero h1.hero-title .line { display: block; }

/* lead: clamp(20,1.5vw,23) / 1.5 / --muted / 680 / 36 */
body.pr-page .pr-rbx .pr-hero p.hero-sub {
  font-size: clamp(20px, 1.5vw, 23px) !important; line-height: 1.5 !important;
  color: var(--muted) !important; max-width: 680px !important;
  margin: 0 auto 36px !important; text-align: center !important; text-wrap: pretty;
}

/* botões: a fileira da home (gap 14, centro, 26 embaixo) */
body.pr-page .pr-rbx .pr-hero .hero-ctas {
  display: flex !important; flex-wrap: wrap; justify-content: center !important;
  gap: 14px !important; margin: 0 0 26px !important;
}
body.pr-page .pr-rbx .pr-hero .hero-ctas .btn { padding: 14px 28px !important; font-size: 15px !important; }
body.pr-page .pr-rbx .pr-hero .hero-ctas .btn span[aria-hidden] { opacity: .7; }

/* a revelação genérica (`.rv`) não pode segurar o hero invisível: aqui a entrada
   é a da home (split + reveal), e ela roda no parts/pricing.js */
body.pr-page .pr-rbx .pr-hero .rv { opacity: 1; transform: none; }

@media (max-width: 760px) {
  body.pr-page .pr-rbx section.pr-hero { padding: 188px 0 40px !important; min-height: 0 !important; }
  body.pr-page .pr-rbx .pr-hero .container.hero-inner { padding: 0 20px !important; }
  body.pr-page .pr-rbx .pr-hero .hero-ctas .btn { width: 100%; }
}

/* =============================================================================
   §2. VIDRO — a mesma receita do trilho de `.fbar .fbar-in` (components.css §48),
   com o corpo do material aberto (.62 em vez de .92): num painel grande, opaco
   demais não deixa ver o desfoque. Muda com --k como todo o resto da camada.
   ============================================================================= */
body:is(.pr-page, .pr-cards) {
  --pr-glass:      color-mix(in srgb, rgba(255,255,255,.62), rgba(20,23,34,.72) calc(var(--k) * 100%));
  --pr-glass-hi:   color-mix(in srgb, rgba(255,255,255,.76), rgba(28,33,50,.80) calc(var(--k) * 100%));
  --pr-line:       color-mix(in srgb, rgba(14,17,22,.07), rgba(255,255,255,.10) calc(var(--k) * 100%));
  --pr-line-brand: color-mix(in srgb, rgba(50,98,234,.34), rgba(124,156,255,.42) calc(var(--k) * 100%));
  --pr-shadow:     0 18px 40px -26px rgba(14,17,22,.4), inset 0 1px 0 rgba(255,255,255,.7);
  --pr-shadow-hi:  0 34px 68px -34px rgba(20,30,90,.46), inset 0 1px 0 rgba(255,255,255,.85);
}

/* PEDIDO DELA: a seção do distribuidor sai da placa lilás e fica no fundo da
   página. O `parts/pricing.js` tira `r-plate` e a `.r-cloud` (mesmo padrão do
   `noPlate` do components.js); aqui a regra é o cinto de segurança para quando
   um passe posterior devolver a classe. */
body:is(.pr-page, .pr-cards) .pr-noplate.pr-noplate.pr-noplate {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  margin-inline: 0 !important; margin-block: 0 !important;
  position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible;
}
body:is(.pr-page, .pr-cards) .pr-noplate > .r-cloud { display: none !important; }

/* =============================================================================
   §1b. FAIXA GRAFITE logo abaixo do hero (pedido dela)
   Geometria MEDIDA na faixa `.hw-stats` de /custom-headwear/: margem 24px 16px,
   raio 28, z-index 2 (a nuvem do hero passa por trás), conteúdo no trilho de
   1080 com 44px em cima e embaixo. O degradê é o mesmo dos dois componentes.
   No lugar antigo a margem era `40px 0 0` — zero embaixo: era daí o "colado".
   ============================================================================= */
body:is(.pr-page, .pr-cards) main .bn.r-promo.pr-band {
  position: relative; z-index: 2;
  margin: 24px 16px !important; border-radius: 28px !important;
  padding: 44px max(48px, calc((100% - 1080px) / 2)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 110px -60px rgba(7,9,26,.8) !important;
  gap: 40px !important;
}
@media (max-width: 860px) {
  body:is(.pr-page, .pr-cards) main .bn.r-promo.pr-band { margin: 16px 16px !important; padding: 30px 24px !important; gap: 18px !important; }
  /* em uma coluna, a pílula da grade esticava de ponta a ponta */
  body:is(.pr-page, .pr-cards) main .bn.r-promo.pr-band > :first-child { justify-self: start; }
}

/* a grade volta a ter respiro: `.r-cols` zera o gap para as colunas com régua */
body:is(.pr-page, .pr-cards) .pr-grid.pr-grid.pr-grid { gap: 24px !important; }

/* CARTÃO DE VIDRO. A contra-especificidade é de propósito: as regras de coluna
   do components.css (`body.rules .r-col.r-col.r-col.r-col + .r-col`) carregam
   !important e seis classes — aqui empatamos e ganhamos pela ordem do arquivo. */
body:is(.pr-page, .pr-cards) .pr-plan.pr-plan.pr-plan.pr-plan.pr-plan.pr-plan,
body:is(.pr-page, .pr-cards) .pr-panel.pr-panel.pr-panel.pr-panel.pr-panel.pr-panel {
  position: relative;
  background: var(--pr-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--pr-shadow) !important;
  padding: 34px 32px !important;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
/* o plano em destaque NÃO troca de material: sobe de elevação, ganha a borda da
   marca e o brilho embaixo (vidro sobre vidro vira lama) */
body:is(.pr-page, .pr-cards) .pr-plan.pr-hi.pr-hi.pr-hi.pr-hi.pr-hi {
  background: var(--pr-glass-hi) !important;
  border-color: var(--pr-line-brand) !important;
  box-shadow: var(--pr-shadow-hi), 0 0 0 4px color-mix(in srgb, rgba(50,98,234,.09), rgba(124,156,255,.14) calc(var(--k) * 100%)) !important;
}
/* o realce é luz, não um segundo material: um lustro da marca na quina superior */
body:is(.pr-page, .pr-cards) .pr-plan.pr-hi::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none; z-index: 0;
  background: linear-gradient(152deg, rgba(50,98,234,.14) 0%, rgba(50,98,234,.04) 34%, rgba(50,98,234,0) 58%);
}
/* rótulo em versalete devolvido ao corpo do cartão (ver parts/pricing.js) */
body:is(.pr-page, .pr-cards) .pr-plan .pr-eyebrow {
  display: block; margin: 0 0 12px !important; font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .1em !important; text-transform: uppercase;
}
body:is(.pr-page, .pr-cards) .pr-plan > * { position: relative; z-index: 1; }
/* /book-your-demo: o rótulo de duração vinha como pílula ("15 MINUTES" com fundo);
   no cartão de vidro é o mesmo versalete dos planos, sem pílula */
/* o passe de seções vê os h2 dentro das colunas e marca a seção como "layout dividido"
   (r-split), cujo `align-items: center !important` centra as colunas na vertical —
   dois cartões de altura diferente ficavam desalinhados no topo. Aqui a fileira estica. */
body.pr-cards.rules .r-split > div > div.pr-grid.pr-grid { align-items: stretch !important; }
body.pr-cards .pr-plan .pr-eyebrow.pr-eyebrow { background: none !important; padding: 0 !important; border-radius: 0 !important;
  color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)) !important; }

/* dentro do cartão é superfície NEUTRA — nada de vidro sobre vidro */
body:is(.pr-page, .pr-cards) .pr-plan :is(div, ul, li, p, span, a):not(.pr-badge):not([class*="bg-[#3a63f5]"]) {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* etiqueta "Recommended": chapada (não é um segundo vidro) e montada na borda
   do cartão, como no markup original (`-top-3.5 left-8`) — assim os dois planos
   começam o título na MESMA linha; em fluxo, a etiqueta empurrava o "Launch"
   83px abaixo do "Enterprise". É o único ponto de cor saturada do bloco. */
body:is(.pr-page, .pr-cards) .pr-plan .pr-badge.pr-badge.pr-badge {
  position: absolute !important; top: -13px !important; left: 28px !important; z-index: 2;
  background: #3262EA !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 8px 18px -10px rgba(50,98,234,.7) !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important;
  padding: 6px 14px !important; border-radius: 999px !important; margin: 0 !important;
}

/* a CIFRA volta a ser a cifra: `body.rules .r-col p` derrubava tudo para 16,5px
   (3.5% aparecia do tamanho de um rótulo dentro do cartão de preço) */
body:is(.pr-page, .pr-cards) .pr-plan p.pr-fig {
  font-size: clamp(38px, 3.4vw, 50px) !important; font-weight: 200 !important;
  line-height: 1.05 !important; letter-spacing: -.045em !important;
  margin: 6px 0 2px !important; color: var(--text, #0e1116);
}
/* a unidade ("per transaction") vinha em --muted-2: sobre o vidro medi 4,29:1,
   abaixo de AA. Passa para --muted (o token vizinho da casa): 5,96:1. */
body:is(.pr-page, .pr-cards) .pr-plan p.pr-fig-unit {
  font-size: 14px !important; margin: 0 0 26px !important;
  color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k) * 100%)) !important;
}

/* BRILHO ATRÁS DO VIDRO — mesma massa/animação das nuvens da camada (`.r-cloud`).
   Com a placa lilás fora, é ELE o fundo que o vidro desfoca: sem isto, cartão de
   vidro sobre branco chapado é cartão branco com borda. A faixa vertical é
   medida no JS a partir da própria fileira de cartões. */
/* o brilho sangra 10% para cada lado: o hospedeiro TEM de cortar no eixo x,
   senão a página ganha rolagem horizontal (medido: scrollWidth 1440 → 1582) */
body:is(.pr-page, .pr-cards) .pr-bloom-host { position: relative; isolation: isolate; overflow-x: clip; overflow-y: visible; }
body:is(.pr-page, .pr-cards) .pr-bloom.pr-bloom {
  position: absolute !important; z-index: 0 !important; pointer-events: none;
  left: -10%; right: -10%; top: 0; height: 100%;
  background: radial-gradient(52% 46% at 32% 42%, var(--cl-stops-a)),
              radial-gradient(46% 42% at 76% 62%, var(--cl-stops-c));
  filter: blur(18px);
  animation: cloud-drift-2 46s ease-in-out infinite alternate;
  opacity: .9;
}
body:is(.pr-page, .pr-cards) .pr-bloom-panel {
  background: radial-gradient(48% 46% at 74% 40%, var(--cl-stops-c)),
              radial-gradient(44% 40% at 26% 66%, var(--cl-stops-b));
  animation-name: cloud-drift-3; opacity: .8;
}
body:is(.pr-page, .pr-cards) .pr-bloom-host > *:not(.pr-bloom) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { body:is(.pr-page, .pr-cards) .pr-bloom.pr-bloom { animation: none; } }

@media (max-width: 860px) {
  body:is(.pr-page, .pr-cards) .pr-plan.pr-plan.pr-plan.pr-plan.pr-plan.pr-plan,
  body:is(.pr-page, .pr-cards) .pr-panel.pr-panel.pr-panel.pr-panel.pr-panel.pr-panel {
    padding: 26px 22px !important; border-radius: 18px !important; border-top-width: 1px !important;
  }
}

/* o hero original e a tira de âncoras não são removidos — o React é dono deles.
   Ficam escondidos; `hidden` sozinho perde para as utilitárias de display. */
.pr-replaced { display: none !important; }


/* ───── parts/tables.css ───── */
/* parts/tables.css — family convergence: TABLES · FAQ · NUMBER BANDS
 * Canon references (measured 2026-10-05, 1440w):
 *   tables → .r-glass-table on /what-is-branded-merch (components.css "tabela de comparação")
 *   faq    → the accordion on /faq (.faq-canon, item 72px tall, no hairline above the answer)
 *   bands  → .hw-stats graphite band on /branded-stores and /what-is-branded-merch
 * Everything here keys on classes that parts/tables.js adds, so the home (never touched by
 * the script) and the canon pages themselves render exactly as before. */

/* ============================================================
   1. TABLES — every table gets the canon glass frame (.r-glass-table + .r-gt)
   ============================================================ */
/* the frame we add (or the old rounded wrapper we adopt) scrolls the table inside itself on a
   narrow screen: the page never scrolls sideways */
/* (div.r-gt ×3 beats the section rhythm rule `main section:not(…) > div { padding: 88px 0 }` that hit
   the wrappers sitting directly in a section — the compare tables had 88px of empty glass above and below) */
body.rules main div.r-glass-table.r-gt.r-gt.r-gt { display: block; overflow-x: auto !important; overflow-y: hidden; max-width: 100%; min-width: 0;
  -webkit-overflow-scrolling: touch; margin-block: 28px !important; padding: 0 !important; }
body.rules .r-glass-table.r-gt > table { width: 100% !important; margin: 0 !important; border: 0 !important; background: none !important; }
/* long URLs in a cell (privacy-policy links on /security/subprocessors) may break, so the table fits its frame */
body.rules .r-glass-table.r-gt td a { overflow-wrap: anywhere; }
/* row labels wrap like the canon's (a `whitespace-nowrap` label column pushed /security/subprocessors past its frame) */
body.rules .r-glass-table.r-gt tbody :is(th, td).r-gt-lab { white-space: normal !important; }
/* the canon reads as flat rows: zebra fills that came with the markup (bg on <tr>) go */
body.rules .r-glass-table.r-gt :is(thead, tbody, tr) { background: none !important; }
/* WIDE tables (6+ columns: decoration-method matrices) take the canon's own narrow-screen density
   (14px 16px, 14px type) so they still fit the 1080 column instead of scrolling on a desktop */
body.rules .r-glass-table.r-gt.r-gt-wide :is(th, td) { padding: 14px 16px !important; font-size: 14px !important; }
body.rules .r-glass-table.r-gt.r-gt-wide thead th { padding-top: 18px !important; padding-bottom: 12px !important; font-size: 11px !important; }
/* tables without a head row still lose the grid look: the label column is the canon's row header */
body.rules .r-glass-table.r-gt tbody td.r-gt-lab { color: #0e1116 !important; font-weight: 600 !important; border-right: 1px solid rgba(14,17,22,.06) !important; }
body.rules .r-glass-table.r-gt.r-gt-narrow tbody :is(th, td).r-gt-lab { width: 24%; }
body.rules .r-glass-table.r-gt:not(.r-gt-narrow) tbody th { width: auto; }
/* a header cell that is the row-label column header stays grey like the rest of the head row */
body.rules .r-glass-table.r-gt thead th { white-space: normal; vertical-align: bottom; text-align: left !important; }
body.rules .r-glass-table.r-gt :is(th, td) { text-align: left !important; }
body.rules .r-glass-table.r-gt :is(th, td) p { margin: 0 !important; font: inherit !important; color: inherit !important; }

/* blue column: only .r-compare (Brikl is the last header), set by tables.js — the canon rules in components.css */

/* narrow screens: wide tables keep their columns and scroll inside the frame */
@media (max-width: 900px) {
  body.rules .r-glass-table.r-gt > table { min-width: var(--gt-min, 0px) !important; }
}

/* ============================================================
   2. FAQ — every converted accordion matches /faq
   ============================================================ */
/* /faq rows are 72px: the .r-faq rule gives each item 4px 2px of padding, and the old
   "has-faq-canon" reset zeroed it on every other page (64px rows) */
:is(body.rules, body.lo-page) .faq-canon.r-faq-cv .faq-item { padding: 4px 2px !important; }
/* /faq has no hairline between the question and the answer: the answer opens straight under it */
:is(body.rules, body.lo-page) .faq-canon.r-faq-cv .faq-item > :not(summary) { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
:is(body.rules, body.lo-page) .faq-canon.r-faq-cv .faq-item > :not(summary) p { margin: 0 0 8px !important; }
:is(body.rules, body.lo-page) .faq-canon.r-faq-cv .faq-item > :not(summary) p:last-child { margin-bottom: 0 !important; }

/* ============================================================
   3. NUMBER BANDS — canon geometry for nested bands; in-column bands for converted card rows
   ============================================================ */
/* (a) section > div > .hw-stats-in (case studies): 0 section padding, 44px/1080px row, 10px gap */
body.rules main section.hw-stats.r-band-cv.r-band-cv.r-band-cv { padding: 0 !important; }
body.rules main section.hw-stats.r-band-cv.r-band-cv.r-band-cv > div:not(.hw-stats-in) { width: min(1080px, 100% - 96px) !important; margin-inline: auto !important; padding: 44px 0 !important; }
body.rules main section.hw-stats.r-band-cv .hw-stats-in.hw-stats-in { width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.rules main section.hw-stats.r-band-cv :is(p, span, div).hw-stat-l { margin: 0 !important; }
body.rules main section.hw-stats.r-band-cv :is(p, span, div, b).hw-stat-n { margin: 0 !important; }
/* (b) a card row turned into the band inside a text column: same band, sits in the column */
body.rules main section.hw-stats.r-band-inline.r-band-inline { margin: 8px 0 28px !important; padding: 0 !important; }   /* it is the first <section> of its parent: `section:first-of-type` gave it 76px on top */
/* a text column is ~780px, not 1080: the numerals keep the band's weight and tracking one step smaller so "1-2 days" stays on one line */
@media (min-width: 821px) { body.rules main section.hw-stats.r-band-inline .hw-stat b { font-size: clamp(30px, 3vw, 40px) !important; white-space: nowrap; } }
body.rules main section.hw-stats.r-band-inline.r-band-inline > .hw-stats-in { width: calc(100% - 48px) !important; }
@media (max-width: 900px) {
  /* phone: the same single 16px gutter and 44px rhythm as the canon band (parts/mobile.css 2a) */
  body.rules main section.hw-stats.r-band-cv.r-band-cv.r-band-cv > div:not(.hw-stats-in) { width: auto !important; margin-inline: 0 !important; padding: 44px 16px !important; }
}
@media (max-width: 820px) {
  /* the canon's phone label (parts/mobile.css 2a: 13px, two lines reserved) — the <p> labels stayed 11px and the rows touched */
  body.rules main section.hw-stats.r-band-cv :is(p, span, div).hw-stat-l.hw-stat-l { font-size: 13px !important; min-height: 2.5em; }
}