/* 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%)); }

/* ============================================================
   4b. FECHAMENTO ESCURO (2026-10-13 — pedido do Maarten, via Luana)
   O CTA final e o footer voltam a ser escuros com o mesmo tratamento --k=1 de antes
   (fundo #08080b, tinta clara, pílula secundária clara), mas SEM a animação por scroll
   que escurecia a página aos poucos — foi a transição que ele não gostou. O tom troca
   na borda da seção: --k vale 1 no CTA final (e no que vier depois dele), no .cta da home
   e no footer; no resto da página continua 0. Os tokens calculados num ancestral (.rbx,
   body) são redeclarados dentro do escopo escuro para seguirem o --k local; os do .sh
   já são calculados no próprio <footer class="sh">.
   ============================================================ */
body.rules main section.wf-cta, body.rules main section.wf-cta ~ section, .rbx .cta, footer.site-footer { --k: 1; }
body.rules main section.wf-cta, body.rules main section.wf-cta ~ section, .rbx .cta, footer.site-footer { --gl-bg: color-mix(in srgb, rgba(255,255,255,.58), rgba(255,255,255,.06) calc(var(--k) * 100%)); }
.rbx .cta {
  --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%));
}
/* home: o .cta não tem fundo próprio (era o body que escurecia) e herda a COR já calculada do .rbx — os dois voltam a ler os tokens locais */
.rbx .cta { background: var(--bg); color: var(--text);
  /* as nuvens do CTA leem os tons escuros (índigo/azul/petróleo): os tokens de cor moram no body e são recalculados aqui com --k = 1 */
  --cl-a: color-mix(in srgb, #cdd0ff, #3b2fd6 calc(var(--k) * 100%)); --cl-b: color-mix(in srgb, #a9c4ff, #1f49c9 calc(var(--k) * 100%)); --cl-c: color-mix(in srgb, #bfe9ff, #1a6fa8 calc(var(--k) * 100%));
  --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%; }
/* o CTA canônico (hz-close) pintava transparente e lia a tinta do claro: aqui ele é a placa escura da página */
body.rules main section.wf-cta.hz-close.hz-close.hz-close { background: var(--bg-d) !important; }
body.rules main section.wf-cta.hz-close.hz-close.hz-close .hz-ct.hz-ct { color: #f5f5f7 !important; }
body.rules main section.wf-cta.hz-close.hz-close.hz-close p.hz-cl.hz-cl { color: #9a9da8 !important; }
body.rules main section.wf-cta.hz-close.hz-close.hz-close .hz-btn-2.hz-btn-2 { color: #f5f5f7 !important; border-color: rgba(255,255,255,.22) !important; }
/* footer escuro: wordmark branco (antes vinha de body.is-dark, que não liga mais) */
footer.site-footer .brand { background-image: url(/images/brikl-logo-white.svg); }

/* 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:not(.uppercase), 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; }
/* MEDIDO 2026-10-06 (/branded-stores/, /careers/): o lead acima ganhava do texto claro da placa escura e saía #565c68 sobre navy */
body.rules main section.r-plate-dark:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) > div > p:first-of-type, body.rules main section.r-plate-dark:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) h2 + p { color: rgba(255,255,255,.66) !important; }
body.rules main section h2 + p + p { text-align: left; margin-inline: 0 !important; }
body.rules .r-plain > div > p:not(.uppercase), body.rules .r-col p:not(.uppercase), body.rules .r-plate p:not(:first-of-type):not(.uppercase) { 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:not(.uppercase) { 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; }
/* /product-catalog mosaic tile with the category photo on top (2026-10-14): photo 4:3 full-bleed, text below with the card inset */
body.rules main .has-cat-photo.has-cat-photo.has-cat-photo { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
body.rules main .has-cat-photo > .cat-photo { aspect-ratio: 4 / 3; width: 100%; margin: 0; background: #f3f4f7; flex: 0 0 auto; }
body.rules main .has-cat-photo > .cat-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.rules main .has-cat-photo > :not(.cat-photo) { padding: 20px 24px 24px !important; }
body.rules main .has-cat-photo .flex.items-start { gap: 0; }

/* ============================================================
   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; }
/* MEDIDO 2026-10-07: no cartão de 282px os dois selos absolutos caíam em cima do logo. O logo fica no alto e os selos numa linha embaixo dele. */
body.rules .pick-drop.pick-drop { padding-bottom: 64px; min-height: 140px; }
body.rules .pick-drop .pick-lock, body.rules .pick-drop .pick-file { white-space: nowrap; }
@media (max-width: 480px) { body.rules .pick-drop.pick-drop { padding-bottom: 100px; } body.rules .pick-drop .pick-file { right: auto; left: 14px; bottom: 46px; } }
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 */
/* MEDIDO 2026-10-07 (/features/turbo-store, pedido dela "ficaram quebrados"): a régua do lado direito deixava a dica
   sem respiro à esquerda e com o texto encostado na borda. A dica é o mesmo cartão dos dois lados da linha do tempo. */
body.rules .tl-row:not(.tl-flip) .tl-text :is(.r-note, .bn) { text-align: left; }

/* ============================================================
   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; } }
/* ---- hero da design-tool: o MacBook dela (vídeo sem fundo), mesmo molde da order-builder.
   O objeto ocupa 9,3%→90,7% na largura e 21%→72% na altura do quadro aberto ---- */
body:is(.hero-featuresdesign-tool, .hero-featurespersonalization) .hero-photo-col { flex: 0 0 480px !important; width: 480px !important; overflow: visible; }
body:is(.hero-featuresdesign-tool, .hero-featurespersonalization) video.hero-video { width: 640px !important; margin: -43px -108px -130px -52px !important; }
@media (max-width: 1240px) { body:is(.hero-featuresdesign-tool, .hero-featurespersonalization) video.hero-video { width: 560px !important; margin: -30px -56px -120px -24px !important; } }
/* personalization: a coluna da foto vinha com 440px e justify-end; o vídeo segue o molde do design-tool */
body.hero-featurespersonalization .hero-photo-col { justify-content: flex-start !important; max-width: none !important; }
body.hero-featurespersonalization video.hero-video { border-radius: 0 !important; box-shadow: none !important; max-width: none !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; }
/* MEDIDO 2026-10-07 (/why-brikl, pedido dela: "see stores tá grudado no final do componente"): o pé sem respiro só vale
   quando o cartão termina na placa de imagem sangrada; terminando em link ou texto, o pé tem os mesmos 40px dos lados */
body.rules main .r-glass-card.r-glass-card.r-glass-card:not(:has(> .r-ph:last-child)) { padding-bottom: 40px !important; }
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 */
/* MEDIDO 2026-10-13 (/our-clients): um único tile sobrando debaixo do destaque ficava encostado à esquerda numa grade de três */
body.rules .blog-grid:has(> :only-child) { grid-template-columns: minmax(0, 360px) !important; justify-content: center; }
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 */
/* MEDIDO 2026-10-06: o prose do Tailwind desenha crases em volta de <code> (`swag.yourcompany.com`); nos posts é um endereço no meio da frase */
body.rules .post .post-body code::before, body.rules .post .post-body code::after { content: none !important; }
body.rules .post .post-body code { font: inherit !important; font-weight: 600 !important; color: #0e1116 !important; background: none !important; padding: 0 !important; }
body.rules .post .post-body img:not(.ei) { 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 */
/* 2026-10-14: the photos are full compositions (treatment-D tiles, 4:3) — they fill the panel; the gradient stays only as the fallback while loading */
body.rules .relwf .wf-photo { object-fit: cover; object-position: center; padding: 0; 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; }
/* MEDIDO 2026-10-13 (/branded-stores "It costs nothing…", /pricing "Already have a storefront?"): a regra de corpo da
   prosa (`.r-prose.r-prose > div > p:not(.uppercase)`, 0,4,3) passou por cima desta (0,3,3) na varredura de 2026-10-07
   e empurrou para a esquerda parágrafos escritos centrados debaixo de título centrado. A mesma regra, com peso acima. */
body.rules main section.r-prose.r-prose.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; }
/* MEDIDO 2026-10-06: nos posts o blockquote vem do markdown, sem not-prose, e o Typography punha “ ” no 1º/último <p>
   (aspas duplas em /blog/ai-as-the-new-interface, aspas em notas editoriais). O cânone não tem aspas desenhadas. */
body.rules main blockquote.r-quote.r-quote p::before, body.rules main blockquote.r-quote.r-quote p::after { content: none !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; }

/* ============================================================
   VERNON MAIOR (pedido dela, 2026-10-07: "make Vernon's bigger across the site")
   O logo é compacto (V + "vernon", 2,2:1); na mesma altura dos outros ele lia 40–60% mais estreito.
   Sobe ~1,4× em cada contexto onde aparece, home incluída (ela pediu o site todo).
   ============================================================ */
html body main .mq-block img[src*="vernon.png"] { height: 48px !important; max-height: none !important; }
html body main .rbx .story-eyebrow img[src*="vernon.png"], html body main .thead img[src*="vernon.png"] { height: 44px !important; }
html.lg-on body.rules main .lg-row.lg-row .lg-logo.lg-logo[src*="vernon.png"] { height: 84px !important; max-height: none !important; }
html body main .lg-row img[src*="vernon.png"] { height: 84px !important; max-height: none !important; }
body.rules main blockquote.r-quote.r-quote img.quote-logo.quote-logo[src*="vernon.png"] { height: 32px !important; }
body.rules main .post-kicker img[src*="vernon.png"] { height: 26px !important; max-width: none !important; }

/* ============================================================
   PLACA PRETA COM ÍCONES (2026-10-07) — itens soltos sobre o grafite, separados por fio, como os passos da home
   ============================================================ */
body.rules main section.dkp .dkp-grid.dkp-grid { display: grid !important; grid-template-columns: repeat(var(--dkp-cols, 3), minmax(0, 1fr)) !important; gap: 36px 0 !important; }
body.rules main section.dkp .dkp-grid > * {
  background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-radius: 0 !important; padding: 4px 28px !important; min-height: 0 !important; }
body.rules main section.dkp .dkp-grid > *:not(.dkp-start) { border-left: 1px solid rgba(255,255,255,.12) !important; }
body.rules main section.dkp .dkp-grid > .dkp-start { padding-left: 0 !important; }
body.rules main section.dkp .dkp-grid :is(h3, h4, .cg-t, b, strong) { color: #fff !important; }
body.rules main section.dkp .dkp-grid :is(p, li, span:not(.ei-host)) { color: rgba(255,255,255,.66) !important; }
/* grades .r-cols (categorias): as regras de 2 colunas descem o 3º/4º item com fio em cima; aqui é uma fileira só */
body.rules main section.dkp .dkp-grid.dkp-grid > .r-col { border-top: 0 !important; margin-top: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; align-self: start; }
body.rules main section.dkp .dkp-grid .r-col-head { height: auto !important; min-height: 0 !important; margin: 0 0 14px !important; }
body.rules main section.dkp .dkp-grid > * > :is(img.gi, .r-glyph):first-child, body.rules main section.dkp .dkp-grid .r-col-head img.gi { width: 56px !important; height: 56px !important; margin: 0 0 14px !important; }
body.rules main section.dkp .dkp-grid :is(h3, h4) { margin: 0 0 8px !important; }
body.rules main section.dkp .dkp-grid img.gi, body.rules main section.dkp .dkp-grid .ei-slot { filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)) !important; }
@media (max-width: 760px) {
  body.rules main section.dkp .dkp-grid.dkp-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  body.rules main section.dkp .dkp-grid > * { padding: 22px 0 !important; border-left: 0 !important; }
  body.rules main section.dkp .dkp-grid > * + * { border-top: 1px solid rgba(255,255,255,.12) !important; }
}
/* placa preta: a grade .r-col traz regras de 4 classes que zeravam o fio e os ícones-emoji (.ei-slot) ficavam com 32px */
body.rules main section.dkp .dkp-grid.dkp-grid > .r-col.r-col.r-col.r-col.r-col:not(.dkp-start) { border-left: 1px solid rgba(255,255,255,.12) !important; padding-left: 28px !important; }
body.rules main section.dkp .dkp-grid.dkp-grid > .r-col.r-col.r-col.r-col.r-col { padding-right: 28px !important; }
body.rules main section.dkp .dkp-grid .ei-slot.ei-slot { width: 56px !important; height: 56px !important; }
body.rules main section.dkp h2 + .dkp-grid, body.rules main section.dkp > div > .dkp-grid:first-of-type { margin-top: 40px !important; }
@media (max-width: 760px) {
  body.rules main section.dkp .dkp-grid.dkp-grid > .r-col.r-col.r-col.r-col.r-col { border-left: 0 !important; padding: 22px 0 !important; }
  body.rules main section.dkp .dkp-grid.dkp-grid > .r-col.r-col.r-col.r-col.r-col + * { border-top: 1px solid rgba(255,255,255,.12) !important; }
}

/* cartão de recurso COM captura (/features, 2026-10-07): o mesmo componente da placa — a imagem é o objeto */
body.rules main .r-feat.r-feat-shot > img.r-shot {
  width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; object-position: left top !important;
  margin: 0 0 20px !important; border-radius: 18px !important; display: block;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%)) !important;
  box-shadow: 0 24px 50px -34px rgba(8,10,26,.45) !important;
  transition: transform .5s cubic-bezier(.22,.7,.2,1), box-shadow .5s cubic-bezier(.22,.7,.2,1); }
body.rules main .r-feat.r-feat-shot:hover > img.r-shot { transform: translateY(-3px); box-shadow: 0 30px 60px -34px rgba(8,10,26,.6) !important; }
body.rules main .r-feat .r-feat-more { color: #2f52d8 !important; }
/* "Get paid" (/features) vinha como colunas .r-col com fio e padding lateral: o cartão de recurso não tem nada disso */
body.rules main .grid > .r-col.r-feat.r-feat.r-feat.r-feat { padding: 0 !important; border: 0 !important; margin: 0 !important; }
body.rules main .r-feat.r-feat-shot > :not(img) img.r-shot, body.rules main .r-feat.r-feat-shot img.r-shot {
  width: 100% !important; max-width: none !important; aspect-ratio: 16 / 9 !important; height: auto !important; object-fit: cover !important; object-position: left top !important;
  margin: 0 0 20px !important; border-radius: 18px !important; }
/* cartão de vidro (/why-brikl): o compartimento do ícone vinha `flex justify-center` com a largura do cartão — um ícone
   centrado e o outro à esquerda (só um recebia .gi-tile). O ícone abre na mesma borda do eyebrow e do título nos dois. */
body.rules main .r-glass-card > :first-child:has(> img.gi) { justify-content: flex-start !important; width: auto !important; align-self: flex-start !important; margin: 0 0 14px !important; }
body.rules main .r-glass-card > :first-child > img.gi { margin: 0 !important; }

/* ============================================================
   ANATOMIA DA TELA (2026-10-07) — tela com pontos numerados + cartões com o mesmo número
   ============================================================ */
body.rules main section.anat-sec > div { max-width: none !important; }
body.rules .anat { margin: 48px auto 0 !important; width: min(1240px, 100% - 48px); }
body.rules .anat-side { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 28px; align-items: center; }
body.rules .anat-cols { display: grid; gap: 40px; }
body.rules .anat-shot { position: relative; margin: 0; border-radius: 18px; background: #fff;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%)); box-shadow: 0 40px 80px -42px rgba(14,17,40,.38); }
body.rules .anat-shot img { display: block; width: 100%; height: auto; border-radius: 18px; }
body.rules .anat-pin { position: absolute; translate: -50% -50%; width: 30px; height: 30px; border-radius: 50%; background: #2f52d8; color: #fff;
  font: 600 14px/30px var(--font-poppins), system-ui; text-align: center; box-shadow: 0 0 0 6px rgba(47,82,216,.18), 0 8px 18px rgba(47,82,216,.35); }
body.rules .anat-cards { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 14px; }
body.rules .anat-grid { grid-template-columns: repeat(var(--anat-cols, 3), minmax(0, 1fr)); gap: 16px; }
body.rules .anat-cards li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 6px; align-content: start;
  background: color-mix(in srgb, #fff, #16181f calc(var(--k) * 100%)); border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%));
  border-radius: 18px; padding: 18px 20px; box-shadow: 0 18px 40px -32px rgba(14,17,40,.35); text-align: left; }
body.rules .anat-cards li i { grid-row: 1; width: 28px; height: 28px; border-radius: 50%; background: #2f52d8; color: #fff; font: 600 13px/28px var(--font-poppins), system-ui; font-style: normal; text-align: center; }
body.rules .anat-cards li b { grid-row: 1; align-self: center; font: 600 15.5px/1.3 var(--font-poppins), system-ui; color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
body.rules .anat-cards li span { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, #5b6170, #9a9da6 calc(var(--k) * 100%)); }
@media (max-width: 1100px) { body.rules .anat-side { grid-template-columns: 1fr; } body.rules .anat-side .anat-shot { order: -1; } body.rules .anat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body.rules .anat-grid { grid-template-columns: 1fr; } body.rules .anat-pin { width: 22px; height: 22px; font-size: 11px; line-height: 22px; box-shadow: 0 0 0 4px rgba(47,82,216,.18); } }
/* a anatomia usa a largura da página, não a coluna de texto da seção (o arranjo 'side' espremia a tela a ~150px) */
body.rules main .anat.anat { width: min(1240px, calc(100vw - 48px)) !important; max-width: none !important; position: relative; left: 50%; translate: -50% 0; margin-left: 0 !important; margin-right: 0 !important; }
/* seção em duas colunas (texto | cards, /features/marketplace): com a anatomia no lugar dos cards, empilha — texto em cima,
   centrado como nas outras seções da anatomia, e a tela embaixo na largura da página */
body.rules main section.anat-sec div:has(> .anat) { display: block !important; }
body.rules main section.anat-sec div:has(> .anat) > :not(.anat) { width: auto !important; max-width: 62ch !important; margin-inline: auto !important; text-align: center !important; flex: none !important; }

/* order-builder cap. 1 — linha do tempo de uma linha: tela + passos sem número */
body.rules .tl-one::before { display: none; }
body.rules .tl-media-ob .tl-plain { list-style: none; margin: 22px 0 0 !important; padding: 0 !important; display: grid; text-align: left; }
body.rules .tl-media-ob .tl-plain li { padding: 16px 0; border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%)); display: grid; gap: 4px; }
body.rules .tl-media-ob .tl-plain li:first-child { border-top: 0; padding-top: 0; }
body.rules .tl-media-ob .tl-plain b { font: 600 16px/1.35 var(--font-poppins), system-ui; color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
body.rules .tl-media-ob .tl-plain span { font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, #5b6170, #9a9da6 calc(var(--k) * 100%)); }
body.rules .tl-media-ob img.r-shot { width: 100% !important; height: auto !important; border-radius: 18px !important; display: block; box-shadow: 0 40px 80px -42px rgba(14,17,40,.38); border: 1px solid rgba(14,17,22,.08); }
/* order-builder cap. 2 — placa preta com os números do pedido */
body.rules section.ob-pricing .ob-head { text-align: center; }
body.rules section.ob-pricing .ob-head p { margin-inline: auto !important; }
body.rules section.ob-pricing .ob-nums { display: grid; grid-template-columns: repeat(5, 1fr); margin: 52px 0 0; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); text-align: center; }
body.rules section.ob-pricing .ob-nums div { display: grid; gap: 10px; }
body.rules section.ob-pricing .ob-nums div + div { border-left: 1px solid rgba(255,255,255,.12); }
body.rules section.ob-pricing .ob-nums b { font: 200 44px/1 var(--font-poppins), system-ui; letter-spacing: -.03em; color: #fff; }
body.rules section.ob-pricing .ob-nums span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
body.rules section.ob-pricing .ob-cols { list-style: none; margin: 40px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); }
body.rules section.ob-pricing .ob-cols li { padding: 0 26px; display: grid; gap: 8px; align-content: start; }
body.rules section.ob-pricing .ob-cols li + li { border-left: 1px solid rgba(255,255,255,.12); }
body.rules section.ob-pricing .ob-cols li:first-child { padding-left: 0; }
body.rules section.ob-pricing .ob-cols b { font: 600 15.5px/1.35 var(--font-poppins), system-ui; color: #fff !important; }
body.rules section.ob-pricing .ob-cols span { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.64) !important; }
@media (max-width: 900px) {
  body.rules section.ob-pricing .ob-nums { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  body.rules section.ob-pricing .ob-nums div:nth-child(odd) { border-left: 0; }
  body.rules section.ob-pricing .ob-nums div:last-child { grid-column: 1 / -1; }
  body.rules section.ob-pricing .ob-cols { grid-template-columns: 1fr; }
  body.rules section.ob-pricing .ob-cols li { padding: 20px 0; border-left: 0 !important; }
  body.rules section.ob-pricing .ob-cols li + li { border-top: 1px solid rgba(255,255,255,.12); }
}

/* ============================================================
   /features/design-tool — cinco capítulos (2026-10-07)
   ============================================================ */
body.rules main .dt-head { text-align: center; max-width: 760px; margin: 0 auto; }
body.rules main .dt-head p { margin-inline: auto !important; text-align: center !important; }
body.rules main .dt-shot { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(14,17,22,.08); box-shadow: 0 40px 80px -42px rgba(14,17,40,.38); }
body.rules main .dt-shot img { display: block; width: 100%; height: auto; }
/* 1 · tour */
body.rules main .dt-tour { width: min(1180px, calc(100vw - 48px)); position: relative; left: 50%; translate: -50% 0; margin-top: 44px; }
body.rules main .dt-tabs { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 32px; padding: 6px; border-radius: 999px;
  background: color-mix(in srgb, #fff, #16181f calc(var(--k) * 100%)); border: 1px solid rgba(14,17,22,.08); box-shadow: 0 10px 30px -20px rgba(14,17,40,.3); }
body.rules main .dt-tabs button { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 10px 22px; border-radius: 999px;
  font: 500 15px/1 var(--font-poppins), system-ui; color: #5b6170; transition: background .2s, color .2s; }
body.rules main .dt-tabs button i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(14,17,22,.15); font-size: 12px; display: grid; place-items: center; }
body.rules main .dt-tabs button[aria-selected="true"] { background: #0e1116; color: #fff; }
body.rules main .dt-tabs button[aria-selected="true"] i { background: #2f52d8; border-color: #2f52d8; color: #fff; }
body.rules main .dt-tabs button:focus-visible { outline: 3px solid #2f52d8; outline-offset: 2px; }
body.rules main .dt-panel { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 44px; align-items: start; }   /* MEDIDO 2026-10-13: centrado na vertical, o texto de 4 linhas caía 280px abaixo do topo da captura (/features/coupons "Used in", /features/reports "Pick a source") — um buraco acima dele */
body.rules main .dt-panel > :first-child:not(img):not(picture):not(.dt-shot) { padding-top: 28px; }
body.rules main .dt-lead { font: 500 19px/1.4 var(--font-poppins), system-ui !important; color: #0e1116 !important; margin: 0 0 8px !important; text-align: left !important; }
body.rules main .dt-moves ul, body.rules main .dt-types ul, body.rules main .dt-cols, body.rules main .dt-flow, body.rules main .dt-journey { list-style: none; margin: 0 !important; padding: 0 !important; }
body.rules main .dt-moves li, body.rules main .dt-types li { display: grid; gap: 5px; padding: 18px 0; border-top: 1px solid rgba(14,17,22,.08); text-align: left; }
body.rules main .dt-moves li:first-child, body.rules main .dt-types li:first-child { border-top: 0; }
body.rules main :is(.dt-moves, .dt-types, .dt-flow, .dt-journey) b { font: 600 16.5px/1.35 var(--font-poppins), system-ui; color: #0e1116; }
body.rules main :is(.dt-moves, .dt-types, .dt-flow, .dt-journey) span { font-size: 14.5px; line-height: 1.55; color: #5b6170; }
/* 3 · estúdio */
body.rules main section.dt-studio .dt-head h2 { color: #fff !important; }
body.rules main section.dt-studio .dt-shot-dark { max-width: 980px; margin: 48px auto 0; border-color: rgba(255,255,255,.12); background: #111; }
body.rules main section.dt-studio .dt-cols { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 34px; margin-top: 52px !important; text-align: left; }
body.rules main section.dt-studio .dt-cols li { padding: 0 26px; display: grid; gap: 6px; align-content: start; }
body.rules main section.dt-studio .dt-cols li:nth-child(3n+1) { padding-left: 0; }
body.rules main section.dt-studio .dt-cols li:not(:nth-child(3n+1)) { border-left: 1px solid rgba(255,255,255,.12); }
body.rules main section.dt-studio .dt-cols b { font: 600 16px/1.35 var(--font-poppins), system-ui; color: #fff; }
body.rules main section.dt-studio .dt-cols span { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.64) !important; }
/* 4 · personalização */
body.rules main .dt-vs { display: grid; grid-template-columns: 1fr 1fr; margin: 48px auto 0; max-width: 1080px; border: 1px solid rgba(14,17,22,.08); border-radius: 22px; overflow: hidden; background: #fff; }
body.rules main .dt-vs > div { padding: 34px 36px; display: grid; gap: 10px; text-align: left; }
body.rules main .dt-vs > div + div { border-left: 1px solid rgba(14,17,22,.08); background: #f2f5ff; }
body.rules main .dt-vs small { font: 700 11px var(--font-poppins), system-ui; letter-spacing: .12em; text-transform: uppercase; color: #8a90a0; }
body.rules main .dt-vs h3 { margin: 0 !important; font: 600 23px/1.25 var(--font-poppins), system-ui !important; color: #0e1116 !important; text-align: left !important; }
body.rules main .dt-vs p { margin: 0 !important; color: #5b6170 !important; font-size: 15.5px !important; text-align: left !important; }
body.rules main .dt-jerseys { margin: 48px auto 0; max-width: 1180px; text-align: center; }
body.rules main .dt-jerseys img { width: 100%; height: auto; display: block; }
body.rules main .dt-jerseys figcaption { margin: 18px auto 0; max-width: 72ch; font-size: 15px; line-height: 1.6; color: #5b6170; }
body.rules main .dt-jerseys figcaption b { color: #0e1116; }
body.rules main .dt-flow { display: grid; grid-template-columns: repeat(4, 1fr); margin: 64px auto 0 !important; max-width: 1080px; position: relative; }
body.rules main .dt-flow::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgba(14,17,22,.14); }
body.rules main .dt-flow li { position: relative; padding: 30px 24px 0 0; display: grid; gap: 6px; align-content: start; text-align: left; }
body.rules main .dt-flow li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #2f52d8; box-shadow: 0 0 0 5px rgba(47,82,216,.15); }
body.rules main .dt-types { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; margin: 72px auto 0; max-width: 1080px; }
body.rules main .dt-note { margin: 40px auto 0 !important; text-align: center !important; }
/* 5 · jornada */
body.rules main .dt-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin: 48px auto 0 !important; max-width: 1080px; position: relative; }
body.rules main .dt-journey li { display: grid; gap: 10px; align-content: start; text-align: left; position: relative; }
body.rules main .dt-journey li + li::before { content: ""; position: absolute; left: -46px; top: 23%; width: 36px; height: 1px; background: rgba(14,17,22,.25); }
body.rules main .dt-journey .dt-shot { border-radius: 14px; margin-bottom: 8px; }
body.rules main .dt-journey .dt-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
@media (max-width: 900px) {
  body.rules main .dt-panel, body.rules main .dt-types { grid-template-columns: 1fr; gap: 28px; }
  body.rules main .dt-panel .dt-shot { order: -1; }
  body.rules main .dt-tabs button { padding: 9px 14px; font-size: 14px; }
  body.rules main section.dt-studio .dt-cols { grid-template-columns: 1fr; row-gap: 0; }
  body.rules main section.dt-studio .dt-cols li { padding: 18px 0 !important; border-left: 0 !important; }
  body.rules main section.dt-studio .dt-cols li + li { border-top: 1px solid rgba(255,255,255,.12); }
  body.rules main .dt-vs { grid-template-columns: 1fr; } body.rules main .dt-vs > div + div { border-left: 0; border-top: 1px solid rgba(14,17,22,.08); }
  body.rules main .dt-jerseys img { width: 180%; max-width: none; margin-left: -40%; }
  body.rules main .dt-jerseys { overflow: hidden; }
  body.rules main .dt-flow { grid-template-columns: 1fr; row-gap: 26px; } body.rules main .dt-flow::before { display: none; }
  body.rules main .dt-journey { grid-template-columns: 1fr; gap: 32px; } body.rules main .dt-journey li + li::before { display: none; }
}
/* cabeçalho de capítulo: título, olho e texto no mesmo eixo central */
body.rules main section .dt-head > :is(h2, p, small, span, div):not(#dt) { margin-inline: auto !important; text-align: center !important; }
body.rules main section .dt-head > h2 { max-width: 22ch; }
body.rules main section.dt-pers p.dt-note:not(#dt) { max-width: 62ch; margin-inline: auto !important; text-align: center !important; }
@media (max-width: 600px) {
  body.rules main .dt-tabs { width: 100%; box-sizing: border-box; gap: 2px; padding: 4px; }
  body.rules main .dt-tabs button { flex: 1 1 0; justify-content: center; gap: 6px; padding: 9px 4px; font-size: 13px; }
  body.rules main .dt-tabs button i { width: 20px; height: 20px; font-size: 11px; }
}

/* ============================================================
   /features/coupons — um formato por capítulo (2026-10-08)
   ============================================================ */
/* 1 · anatomia com a tela em pé (o registro é um painel lateral): a tela não passa de 440px */
body.rules .anat-side.cp-anat { grid-template-columns: minmax(0, 1fr) 440px minmax(0, 1fr); gap: 36px; max-width: 1180px; }
body.rules .cp-anat .anat-shot { justify-self: center; width: 100%; max-width: 440px; }
body.rules main .cp-warn { max-width: 760px; margin: 36px auto 0; display: grid; gap: 6px; padding: 20px 24px; border-radius: 16px; text-align: left;
  background: color-mix(in srgb, #fff8eb, #2a1f14 calc(var(--k) * 100%)); border: 1px solid color-mix(in srgb, #f3d9a8, #6b4a1e calc(var(--k) * 100%)); }
body.rules main .cp-warn b { font: 600 16px/1.35 var(--font-poppins), system-ui; color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
body.rules main .cp-warn span { font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, #5b6170, #c2c4cb calc(var(--k) * 100%)); }
/* 2 · a conta: captura em pé, sem o recorte 16:9 das capturas de lista */
body.rules main img.cp-portrait.cp-portrait { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; max-width: 400px !important; width: 100% !important; margin-inline: auto !important; display: block;
  border-radius: 18px !important; border: 1px solid rgba(14,17,22,.08); box-shadow: 0 40px 80px -42px rgba(14,17,40,.38); }
/* 3 · regras na placa preta: o painel à esquerda, as seis regras em duas colunas com fio */
body.rules main section.cp-rules-sec .dt-head h2 { color: #fff !important; }
body.rules main .cp-rules { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1080px; margin: 48px auto 0; }
body.rules main .cp-shot { border-color: rgba(255,255,255,.12); }
body.rules main .cp-rules ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; text-align: left; }
body.rules main .cp-rules li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); align-content: start; }
body.rules main .cp-rules li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
body.rules main .cp-rules b { font: 600 16px/1.35 var(--font-poppins), system-ui; color: #fff; }
body.rules main .cp-rules span { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.64) !important; }
/* 4 · um código × mil: dois cartões com a tela de cada um */
body.rules main .cp-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1080px; margin: 44px auto 0; }
body.rules main .cp-vs > div { display: grid; gap: 10px; align-content: start; text-align: left; padding: 20px 20px 28px; border-radius: 22px;
  background: color-mix(in srgb, #fff, #16181f calc(var(--k) * 100%)); border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%)); }
body.rules main .cp-vs > div + div { background: color-mix(in srgb, #f2f5ff, #161a2a calc(var(--k) * 100%)); }
body.rules main .cp-vs figure { margin: 0 0 10px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(14,17,22,.08); background: #fff; aspect-ratio: 4 / 3; }
body.rules main .cp-vs figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
body.rules main .cp-vs small { font: 700 11px var(--font-poppins), system-ui; letter-spacing: .12em; text-transform: uppercase; color: #2f52d8; padding-inline: 4px; }
body.rules main .cp-vs p { margin: 0 !important; padding-inline: 4px; font-size: 15.5px !important; line-height: 1.6 !important; text-align: left !important; max-width: none !important; color: color-mix(in srgb, #3b404b, #c2c4cb calc(var(--k) * 100%)) !important; }
body.rules main .cp-notes { list-style: none; margin: 40px auto 0 !important; padding: 0 !important; max-width: 1080px; display: grid; grid-template-columns: repeat(3, 1fr); text-align: left; }
body.rules main .cp-notes li { display: grid; gap: 6px; align-content: start; padding: 0 26px; }
body.rules main .cp-notes li:first-child { padding-left: 0; }
body.rules main .cp-notes li + li { border-left: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)); }
body.rules main :is(.cp-notes, .cp-extra) b { font: 600 16px/1.35 var(--font-poppins), system-ui; color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)); }
body.rules main :is(.cp-notes, .cp-extra) span { font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, #5b6170, #9a9da6 calc(var(--k) * 100%)); }
/* 5 · o registro: abas com a tela em pé à direita */
body.rules main .cp-tour .dt-panel { grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; max-width: 980px; margin-inline: auto; }
body.rules main .cp-tour .dt-tabs button { padding: 10px 20px; }
body.rules main .cp-desc { margin: 0 !important; text-align: left !important; font-size: 16px !important; line-height: 1.65 !important; color: color-mix(in srgb, #3b404b, #c2c4cb calc(var(--k) * 100%)) !important; max-width: 46ch !important; }
body.rules main .cp-tour .dt-lead { font-size: 24px !important; margin-bottom: 12px !important; }
body.rules main .cp-extra { max-width: 980px; margin: 44px auto 0; display: grid; gap: 6px; padding: 22px 26px; border-radius: 16px; text-align: left;
  border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%)); }
body.rules main p.cp-note:not(#cp) { max-width: 70ch; margin: 28px auto 0 !important; text-align: center !important; }
@media (max-width: 900px) {
  body.rules .anat-side.cp-anat { grid-template-columns: 1fr; } body.rules .cp-anat .anat-shot { max-width: 400px; }
  body.rules main .cp-rules, body.rules main .cp-vs, body.rules main .cp-tour .dt-panel { grid-template-columns: 1fr; gap: 28px; }
  body.rules main .cp-rules .cp-shot, body.rules main .cp-tour .dt-shot { max-width: 400px; width: 100%; margin-inline: auto; }
  body.rules main .cp-rules ul { grid-template-columns: 1fr; } body.rules main .cp-rules li:nth-child(2) { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; }
  body.rules main .cp-notes { grid-template-columns: 1fr; row-gap: 0; } body.rules main .cp-notes li { padding: 18px 0 !important; border-left: 0 !important; }
  body.rules main .cp-notes li + li { border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)); }
}
@media (max-width: 600px) { body.rules main .cp-tour .dt-tabs { flex-wrap: wrap; border-radius: 22px; } body.rules main .cp-tour .dt-tabs button { flex: 1 1 40%; padding: 9px 8px; } }
/* a seção dos códigos era uma linha (texto | captura): com os capítulos no lugar, empilha */
body.rules main section.cp-codes > div:not(.r-cloud) { display: block !important; }
body.rules main section.cp-codes .dt-head h2 { max-width: 22ch; }

/* ============================================================
   FECHO DE SEÇÃO CENTRADA (2026-10-13) — "alinhamentos à esquerda, do nada"
   Numa seção de título centrado, a linha solta que vem DEPOIS da grade/lista/imagem (a nota "Want the
   honest breakdown…", o link "How Order Builder works →", a etiqueta "Related categories" e a sua fila
   de links) ficava encostada à esquerda enquanto tudo acima estava centrado. O JS (components.js, passe
   "fecho") marca essas linhas com .r-tail / .r-tail-row; aqui elas entram no eixo da seção.
   Parágrafos de corpo (longos) e listas não entram — continuam à esquerda.
   ============================================================ */
body.rules main .r-tail.r-tail.r-tail { text-align: center !important; margin-inline: auto !important; max-width: 68ch; text-wrap: balance; }
body.rules main .r-tail-row.r-tail-row.r-tail-row { justify-content: center !important; }
body.rules main a.r-tail.r-tail.r-tail { display: block; width: fit-content; }   /* um link solto (inline-flex) não obedece ao text-align: centra como caixa */
body.rules main .r-tail-list.r-tail-list.r-tail-list { width: fit-content; max-width: 68ch; margin-inline: auto !important; }   /* lista curta: bloco centrado, itens à esquerda */


/* nó do React substituído pela camada: fica no DOM, escondido (hideNode em components.js) — removê-lo fazia o
   React lançar NotFoundError na navegação seguinte */
.dl-gone { display: none !important; }


/* ───── 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; }

/* a partner logo in its tile (.cg-logo, marked by parts/cards.js): not a photo. The card keeps the 24px inset, the logo
   sits on it and 16px above the title, as on the stacked logo cards (the lg-stack 24/24/16 assumed a flush card) */
body.rules main .cg > .cg-card.cg-logo:not(#cg) { gap: 0 !important; }
body.rules main .cg > .cg-card.cg-logo > :first-child:not(#cg) { margin: 0 0 16px !important; }
body.rules main .cg > .cg-card.cg-logo > :first-child + *:not(#cg) { padding: 0 !important; margin: 0 !important; }
/* the logo slot above a title (logo image or the partner's name as a wordmark): the logo canon, 44 tall and 16 below */
body.rules main .cg > .cg-card > .cg-slot:not(#cg) { height: 44px !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 16px !important;
  display: flex !important; align-items: center !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; }

/* ---------- numbered groups that are lists, not steps (components.js marks .cg-from-steps; 2026-10-09) ----------
 * The numeral is hidden and the group reads as the house glass card. A `space-y` list gets the grid it lacks. */
body.rules main .cg-from-steps:not(#cg) { display: grid !important; }
body.rules main .cg-from-steps .cg-num-off:not(#cg) { display: none !important; }
/* the numeral's row (.r-col-head) is empty once the numeral is off: no reserved height above the title */
body.rules main .cg-from-steps .r-col-head:not(:has(img, svg, .ei-slot)):not(#cg) { display: none !important; }
body.rules main .cg-from-steps:not(.cg) { gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* before cards.js runs (one frame) */
/* MEDIDO 2026-10-13 (/corporate-merchandise, /teamwear-spiritwear): quatro itens em três colunas deixavam o quarto sozinho à esquerda — quatro vira 2×2 */
body.rules main .cg-from-steps:not(.cg):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { body.rules main .cg-from-steps:not(#cg) { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- hairline columns: ONE treatment (2026-10-09) ----------
 * Measured before: .r-col 8/32 with title 17 or 18; the dark-plate grid (.dkp) 4/28 with title 17 or 18 and body 14, 15.5 or 16.5.
 * Canon = the approved hairline columns of /features: padding 8/32 (first 8 left), title 18/28 600, body 16.5/1.65. */
body.rules main :is(.r-col, .dkp-grid > *) :is(h3, h4):not(#cg) { font-size: 18px !important; line-height: 28px !important; font-weight: 600 !important; margin: 0 0 6px !important; }
body.rules main .dkp-grid > *:not(#cg) { padding: 8px 32px !important; }
body.rules main .dkp-grid > .dkp-start:not(#cg) { padding-left: 8px !important; }
body.rules main .dkp-grid > * p:not([class*="uppercase"]):not(#cg) { font-size: 16.5px !important; line-height: 1.65 !important; }
@media (max-width: 860px) { body.rules main .dkp-grid > *:not(#cg) { padding: 24px 8px 8px !important; } }

/* ---------- painted cards that still carry the hairline-column mark (2026-10-14) ----------
 * MEASURED at 1440: parts/rhythm.css puts the outer hairline columns on the rail (first column padding-left 0, last
 * padding-right 0). Two card families keep .r-col and got the trim too: the timeline's stacked cards on /how-it-works
 * ("Place an order" text at 1px from the card edge, "Launch a store" at 23px) and the pricing plans (first plan's text
 * at 1px, the others at 33px). A card keeps its own inset on both sides: the timeline card the note inset (20/24),
 * the plan its 34/32 (parts/pricing.css). */
body.rules .tl-media-cards .r-col.r-col.r-col.r-col:not(#cg) { padding: 20px 24px !important; }
body:is(.pr-page, .pr-cards) .r-col:is(.pr-plan, .pr-panel):not(#cg) { padding-left: 32px !important; padding-right: 32px !important; }

/* ---------- a note or tip written as one card of a grid or stack of cards (.cg-note, parts/cards.js; 2026-10-14) ----------
 * It takes its siblings' inset (24) and type: eyebrow 12/16 caps, reading text 14 (the markup's text-sm; leading-relaxed
 * kept where written; the cards' body colour), a title no larger than the cards' 18. Content starts top-left, as in every sibling. */
body.rules main .cg-note:not(#cg) { padding: 24px !important; text-align: left !important; }
body.rules main .cg-note.flex:not(#cg) { align-items: flex-start !important; justify-content: flex-start !important; }
body.rules main .cg-note :is(p, span)[class*="uppercase"]:not(#cg) { font-size: 12px !important; line-height: 16px !important; letter-spacing: .1em !important; margin: 0 0 12px !important; }
body.rules main .cg-note p:not([class*="uppercase"]):not(#cg) { font-size: 14px !important; line-height: 1.4286 !important; }
body.rules main .cg-note p.leading-relaxed:not([class*="uppercase"]):not(#cg) { line-height: 1.625 !important; }
body.rules main .cg-note p:not([class*="uppercase"]):not(#cg) { color: color-mix(in srgb, #565c68, #9a9da8 calc(var(--k, 0) * 100%)) !important; }   /* the cards' body colour (the .cg canon) */
body.rules main .cg-note :is(h3, h4).text-xl:not(#cg) { font-size: 18px !important; line-height: 28px !important; }
/* the catalog's lead tile had its icon beside the text: the icon goes on top (14 below it), the text on the card inset */
body.rules main .cg-note > .flex.items-start:first-child:has(img.gi):not(#cg) { flex-direction: column !important; gap: 14px !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/controls.css ───── */
/* parts/controls.css — family convergence; every rule is scoped off the home (html.ctl is set by
   parts/controls.js only when the path is not "/"). Marks come from controls.js; values are the canon
   as measured at 1440 (bw3-recovery/components/{buttons,links,eyebrows,forms}/INVENTORY.md). */

/* ============================================================
   BUTTONS = the /merch-sellers hero pair (46px pill), every button the heroes part did not set.
   primary   #3a63f5 fill + 1px #3a63f5, white, hover #2f52d8
   secondary transparent + 1px rgba(14,17,22,.16), #0e1116, hover border #0e1116
   12px 24px · r999 · 500 14/20 Poppins. (The 56px pill is the closing CTA's own, set in heroes.css.)
   ============================================================ */
html.ctl body.rules main :is(a, button).ctl-b.ctl-b {
  height: auto !important; min-height: 0 !important; padding: 12px 24px !important; border-radius: 999px !important;
  border-width: 1px !important; border-style: solid !important; box-sizing: border-box !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 20px !important; letter-spacing: normal !important;
  text-align: center !important; text-decoration: none !important; box-shadow: none !important; gap: 0 !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; }
html.ctl body.rules main :is(a, button).ctl-b.ctl-b-ib { display: inline-block !important; }
/* the arrow glyph written as its own span sits one space after the label, as in "Book a store build session →" */
html.ctl body.rules main .ctl-b.ctl-b > span[aria-hidden="true"]:last-child { margin-left: .28em !important; }
html.ctl body.rules main .ctl-b1.ctl-b1 { background: #3a63f5 !important; border-color: #3a63f5 !important; color: #fff !important; }
html.ctl body.rules main .ctl-b1.ctl-b1:is(:hover, :focus-visible) { background: #2f52d8 !important; border-color: #2f52d8 !important; color: #fff !important; }
html.ctl body.rules main .ctl-b2.ctl-b2 { background: transparent !important; border-color: rgba(14, 17, 22, .16) !important; color: #0e1116 !important; }
html.ctl body.rules main .ctl-b2.ctl-b2:is(:hover, :focus-visible) { border-color: #0e1116 !important; color: #0e1116 !important; }

/* ============================================================
   TEXT LINKS = /features/*
   arrow  "See what product settings does →"  700 14/20 #2f52d8, no underline, underline on hover
   inline "product settings" in body copy       #2f52d8, the text's own size and weight, underline on hover
   ============================================================ */
html.ctl body.rules main a.ctl-arrow.ctl-arrow {
  font-size: 14px !important; line-height: 20px !important; font-weight: 700 !important; letter-spacing: normal !important;
  color: #2f52d8 !important; text-decoration: none !important; }
html.ctl body.rules main a.ctl-arrow.ctl-arrow:is(:hover, :focus-visible) { text-decoration: underline !important; color: #2f52d8 !important; }
html.ctl body.rules main a.ctl-arrow.ctl-arrow > span[aria-hidden="true"]:last-child { margin-left: .28em !important; }
html.ctl body.rules main a.ctl-arrow.ctl-arrow:is(.inline-flex, .flex) { gap: 0 !important; }
html.ctl body.rules main a.ctl-in.ctl-in {
  font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important;
  color: #2f52d8 !important; text-decoration: none !important; }
html.ctl body.rules main a.ctl-in.ctl-in:is(:hover, :focus-visible) { text-decoration: underline !important; color: #2f52d8 !important; }

/* ============================================================
   EYEBROWS
   section (above an h2/h3) = /features/* "The record": 700 12/16, .1em, caps, #2f52d8, 12px to the title
   hero (above an h1 the heroes part did not mark) = its hz-eb: 600 16/26, .05em, caps, #2f52d8, 12px
   ============================================================ */
html.ctl body.rules main .ctl-eb.ctl-eb {
  font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: #2f52d8 !important; margin-bottom: 12px !important; }
html.ctl body.rules main .ctl-eb-hero.ctl-eb-hero {
  font-size: 16px !important; line-height: 26px !important; font-weight: 600 !important; letter-spacing: .05em !important;
  text-transform: uppercase !important; color: #2f52d8 !important; margin-bottom: 12px !important; }

/* the closing CTA pair (heroes.css) sets its colours with !important and so lost its hover: it gets the
   pair's measured hover (primary → #2f52d8, secondary border → #0e1116), nothing else changes */
html.ctl body.rules main section.hz-close.hz-close .hz-btn-1.hz-btn-1:is(:hover, :focus-visible) { background: #2f52d8 !important; border-color: #2f52d8 !important; }
html.ctl body.rules main section.hz-close.hz-close .hz-btn-2.hz-btn-2:is(:hover, :focus-visible) { border-color: #0e1116 !important; }


/* ───── parts/drawer.css ───── */
/* parts/drawer.css — PERSONALIZED DRAWER + SONAR PINS (2026-10-14). One treatment for every anatomy block (.anat): the pins pulse
 * like a sonar, hover/focus lights a pin and its card and opens a callout. The drawer itself is a transparent capture with its own
 * rounded corners — no box around it, only a soft shadow that follows its edge. Behaviour: parts/drawer.js. */

/* ── the drawer ── */
body.rules main .anat-shot.dw-shot { background: none; border: 0; box-shadow: none; border-radius: 0; aspect-ratio: var(--dw-ar); }
body.rules main .anat-shot.dw-shot picture { display: block; }
body.rules main .anat-shot.dw-shot img { width: 100%; height: auto; border-radius: 0;
  filter: drop-shadow(0 34px 44px rgba(14, 17, 40, .16)) drop-shadow(0 3px 8px rgba(14, 17, 40, .06)); }
body.rules main .anat-side .anat-cards { grid-auto-rows: 1fr; }      /* equal card heights in a column */

/* ── pins: buttons, white rim so they read on blue UI too ── */
body.rules main .anat.sonar .anat-pin { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; min-width: 0 !important; min-height: 0 !important; cursor: pointer; z-index: 2;
  border: 2px solid #fff; line-height: 26px; box-shadow: 0 6px 16px rgba(47, 82, 216, .35);
  transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease, background-color .22s ease; }
body.rules main .anat.sonar .anat-pin::before,
body.rules main .anat.sonar .anat-pin::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(50, 98, 234, .55); opacity: 0;
  animation: anat-sonar 2.8s cubic-bezier(.22, .61, .36, 1) infinite; animation-delay: calc(var(--i, 0) * .35s); }
body.rules main .anat.sonar .anat-pin::after { animation-delay: calc(var(--i, 0) * .35s + 1.4s); }
@keyframes anat-sonar { 0% { transform: scale(1); opacity: .75; } 80%, 100% { transform: scale(2.5); opacity: 0; } }
body.rules main .anat.sonar .anat-pin:focus-visible { outline: 2px solid #3262EA; outline-offset: 3px; }
body.rules main .anat.sonar .anat-pin.is-on { background: #3262EA; transform: scale(1.14); box-shadow: 0 0 0 6px rgba(50, 98, 234, .2), 0 10px 22px rgba(47, 82, 216, .45); }
body.rules main .anat.sonar .anat-pin.is-on::before, body.rules main .anat.sonar .anat-pin.is-on::after { animation-duration: 1.6s; }
body.rules main .anat.sonar.is-focus .anat-pin:not(.is-on) { opacity: .5; }
body.rules main .anat.dw-dense .anat-pin { width: 24px; height: 24px; font-size: 12px; line-height: 20px; }

/* ── cards: the site's glass lift on the lit one, the others step back ── */
body.rules main .anat.sonar .anat-cards li { transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
body.rules main .anat.sonar .anat-cards li.is-on { transform: translateY(-3px);
  border-color: color-mix(in srgb, rgba(50, 98, 234, .35), rgba(120, 150, 255, .45) calc(var(--k) * 100%));
  box-shadow: var(--gl-hi), 0 26px 50px -30px rgba(47, 82, 216, .5); }
body.rules main .anat.sonar.is-focus .anat-cards li:not(.is-on) { opacity: .5; }

/* ── callout beside the lit pin — opens outward, so the figure must not clip it ── */
body.rules main .anat.sonar .anat-shot { overflow: visible; }
body.rules main .anat-tip { position: absolute; z-index: 3; width: min(264px, 72%); display: grid; gap: 4px; padding: 14px 16px; text-align: left;
  border-radius: 14px; background: rgba(255, 255, 255, .9); border: 1px solid var(--gl-border);
  box-shadow: var(--gl-hi), 0 22px 44px -22px rgba(14, 17, 22, .45); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
  translate: 24px -50%; opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .2s ease; }
body.rules main .anat-tip.to-left { translate: calc(-100% - 24px) -50%; }
body.rules main .anat-tip.to-down { translate: 24px -14px; } body.rules main .anat-tip.to-left.to-down { translate: calc(-100% - 24px) -14px; }
body.rules main .anat-tip.to-up { translate: 24px calc(-100% + 14px); } body.rules main .anat-tip.to-left.to-up { translate: calc(-100% - 24px) calc(-100% + 14px); }
body.rules main .anat-tip.is-on { opacity: 1; }
body.rules main .anat-tip b { font: 600 14.5px/1.3 var(--font-poppins), system-ui; color: #0e1116; }
body.rules main .anat-tip span { font-size: 13px; line-height: 1.5; color: #5b6170; }

@media (max-width: 820px) { body.rules main .anat-tip { display: none; } }
@media (max-width: 640px) {
  body.rules main .anat.sonar .anat-pin { width: 20px; height: 20px; font-size: 10.5px; line-height: 16px; border-width: 1.5px; box-shadow: 0 3px 8px rgba(47, 82, 216, .35); }
  body.rules main .anat.dw-dense .anat-pin { width: 18px; height: 18px; font-size: 10px; line-height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.rules main .anat.sonar .anat-pin::before, body.rules main .anat.sonar .anat-pin::after { animation: none; opacity: 0; }
  body.rules main .anat.sonar .anat-pin, body.rules main .anat.sonar .anat-cards li, body.rules main .anat-tip { transition: none; }
}

/* Luana, 2026-10-14: "não é pra repetir a msg, é pra ser só quando passa o mouse" — where hover exists (>820px) the cards are
 * hidden and the text lives only in the callout; the figure takes the row, centred. On phones (no hover) the cards stay. */
@media (min-width: 821px) {
  body.rules main .anat.sonar .anat-cards, body.rules main .anat.sonar .anat-grid { display: none !important; }
  body.rules main .anat-side.sonar { grid-template-columns: minmax(0, 1fr) !important; }
  body.rules main .anat-side.sonar .anat-shot { justify-self: center; }
  /* without the side cards the figure keeps the width it had between them (Luana: "isso ficou muito grande agora") */
  body.rules main .anat-side.sonar:not(.cp-anat) .anat-shot { width: 100%; max-width: 640px; }
}


/* ───── 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%}
}
/* MEASURED 2026-10-06 (/features/order-builder at 390): the 192px scene column left the label 48px
   ("Tap Create the order" one letter per line). The scene shares the row with the label instead. */
@media (max-width:671.98px){
  body.rules main .cgd .cgd__step.cgd__step{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}


/* ───── 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; }
}

/* ---- stores hero (2026-10-07): the stacked-stores cut-out is nearly square; at column width it ran
   taller than the hero and was clipped at the bottom. It sits whole, centred in its column. ---- */
body.rules main section.in-hero img.hero-photo[src*="stores-hero-stack"] {
  width: min(100%, 540px) !important; max-width: 540px !important; height: auto !important; margin: 0 auto !important;
  object-fit: contain !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !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/logos.css ───── */
/* parts/logos.css — family convergence; every rule is scoped off the home (html.lg-on is set by
 * parts/logos.js only when location.pathname !== '/'). Measurements: ~/bw3-recovery/components/{logos,placeholders}/ */

/* ---------- 1a. LOGO ROWS → the client wall of /our-clients ---------- */
html.lg-on body.rules main .lg-row.lg-row.lg-row {
  display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
  gap: 56px !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; }
html.lg-on body.rules main .lg-row.lg-row > .lg-cell.lg-cell { height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; }
html.lg-on body.rules main .lg-row.lg-row .lg-logo.lg-logo { height: 44px !important; width: auto !important; max-width: 260px !important; object-fit: contain !important; margin: 0 !important; }

/* phone: the canon page's own markup values (gap-x-10 gap-y-6 on /our-clients); the 56px desktop gap put one logo per line */
@media (max-width: 700px) { html.lg-on body.rules main .lg-row.lg-row.lg-row { column-gap: 40px !important; row-gap: 24px !important; } }

/* ---------- 1b. CARD LOGOS → the decorator card of /custom-* ---------- */
html.lg-on body.rules main .lg-card.lg-card.lg-stack { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
html.lg-on body.rules main .lg-card.lg-card > .lg-tile {
  width: auto !important; height: 44px !important; min-height: 0 !important; padding: 0 !important; margin: 0 0 16px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important; overflow: visible !important; }
/* cards whose body is its own padded block (the /our-partners card, the /integrations card that the cards part
   made flush): the logo takes the body's 24px inset and sits 16px above the title, as in the decorator card */
html.lg-on body.rules main .lg-card.lg-card:is(.lg-stack, :has(> .lg-tile + .p-6)) { gap: 0 !important; }
html.lg-on body.rules main .lg-card.lg-card:is(.lg-stack, :has(> .lg-tile + .p-6)) > .lg-tile.lg-tile { margin: 24px 24px 16px !important; }
html.lg-on body.rules main .lg-card.lg-card:is(.lg-stack, :has(> .lg-tile + .p-6)) > .lg-tile + div { padding-top: 0 !important; margin-top: 0 !important; }
html.lg-on body.rules main .lg-card.lg-card .lg-card-logo.lg-card-logo { height: 44px !important; max-height: 44px !important; width: auto !important; max-width: min(100%, 200px) !important;
  object-fit: contain !important; object-position: left center !important; margin: 0 !important; }

/* ---------- 1c. GREY TREATMENT (rows + card logos), as on /our-clients ---------- */
html.lg-on body.rules:not(.is-dark) main .lg-logo { filter: grayscale(1) !important; opacity: .7 !important; mix-blend-mode: multiply !important; }
html.lg-on body.rules.is-dark main .lg-logo { filter: grayscale(1) invert(1) !important; opacity: .7 !important; mix-blend-mode: screen !important; }

/* ---------- 2. IMAGE PLACEHOLDERS → the graphite panel of /careers ---------- */
html.lg-on body.rules main .lg-ph { border-radius: 18px !important; }
/* caption: one style everywhere (the .bn rule turned it ink on graphite on /careers and /our-story) */
html.lg-on body.rules main .lg-ph > b { color: rgba(255,255,255,.88) !important; font-weight: 400 !important; text-align: center; }
/* /features explorer tiles: 16:10 + radius 20 → the canon 16:9 + 18 (the graphite-plate tiles, which have no panel, stay as they are) */
html.lg-on body.rules main .r-feat:not(.r-plate-dark .r-feat) .lg-ph { border-radius: 18px !important; }
@media (min-width: 701px) { html.lg-on body.rules main .r-feat:not(.r-plate-dark .r-feat) .lg-ph { aspect-ratio: 16 / 9 !important; } }

/* ---------- 1d. LETTER TILES (/integrations "Previously integrated", "Data layers", ERP) ----------
 * MEASURED 2026-10-06: the cards with a letter tile instead of a logo stayed a row; in the 3-column
 * grid the text column was 63px (one word per line, "Microsoft Dynamics" ran past the card).
 * They stack like the logo cards beside them; the tile keeps its own box. */
html.lg-on body.rules main .cg > a.flex:has(> span.shrink-0.rounded-xl:first-child) { flex-direction: column !important; align-items: flex-start !important; }

/* ---------- 1e. /showcase vitrine: a logo on white is not a photo ----------
 * MEASURED 2026-10-06: the AlbieAware slide is a 3.8:1 logo on pure white; `cover` in the 4:3 media cut it to
 * "LBIE AWAI". It sits whole on its own white. The other slides are photos and keep `cover`. */
html.lg-on body.rules main .wf-slide img[src*="albieaware"] { object-fit: contain !important; object-position: center !important; padding: 0 28px; box-sizing: border-box; background: #fff; }


/* ───── 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; }
  /* MEDIDO 2026-10-06 (/branded-stores/, /showcase/ a 390): `relative` manteve o `top: 108px`
   * da versão sticky e a mídia descia 108px sobre o primeiro item da lista. Só nas internas
   * (.catwf) — a home não se toca sem pedido dela. */
  body .catwf.catwf .wf-media { top: auto; }

  /* --- 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. */
}

/* --- 3. VARREDURA FINAL 2026-10-06 (medido a 390) ---
 * Faixa de números: o `gap: 0 !important` do §37 apagava o `row-gap: 28px` do ≤900, e em duas
 * colunas os rótulos da 1ª linha encostavam nos números da 2ª. Com número ímpar (5 cifras) a última
 * ficava sozinha à esquerda, cortada pelo fio da coluna: ocupa a linha inteira, sem fio.
 * Só fora da home (html.ctl). */
@media (max-width: 900px) {
  html.ctl body .hw-stats .hw-stats-in.hw-stats-in { row-gap: 28px !important; }
  html.ctl body .hw-stats .hw-stats-in > .hw-stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0 !important; }
  /* Tabela de comparação (/compare/*): o frame é filho direto da seção e levava o recuo de bloco
   * de texto (100% − 96px) → 262px a 390, a coluna Brikl ficava fora. O frame rola por dentro. */
  html.ctl body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div.r-glass-table.r-glass-table { width: 100% !important; margin-inline: 0 !important; }
  /* Heros de /features/ e /features/turbo-store: no desktop a mídia é uma camada sobre o hero
   * (absolute / margens negativas); no telefone ela caía sobre o parágrafo. Aqui ela vem abaixo do texto. */
  body.hero-features .hero-photo-col.hero-photo-col { position: relative !important; right: auto !important; top: auto !important; translate: none !important;
    width: 100% !important; margin-top: 28px; }
  body.hero-features-turbo-store video.hero-video.hero-video, body.hero-featuresturbo-store video.hero-video.hero-video { width: 100% !important; margin: 8px 0 -40px !important; }
  /* "More from the blog" (o painel de vidro que ela pediu em 29/09): 96px de recuo + 48px de respiro
   * deixavam os cards com ~200px a 390. No telefone o painel encosta no gutter e o respiro cai. */
  body.rules main section.post-more.post-more.post-more.post-more > div { width: calc(100% - 24px) !important; padding: 28px 20px 24px !important; }
  /* linha de rótulo do case study ("Case study · logo · Cliente"): flex sem quebra espremia cada item
   * numa coluna de duas linhas a 390. Os itens mantêm a palavra inteira e a linha quebra entre eles. */
  body.rules main .post-kicker.post-kicker { flex-wrap: wrap !important; row-gap: 6px !important; }
  body.rules main .post-kicker.post-kicker > * { white-space: nowrap; flex: 0 0 auto; }
}


/* ───── 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/rhythm.css ───── */
/* parts/rhythm.css — PRECISION (2026-10-13). Pairs with parts/rhythm.js, which measures each section and
 * puts its content exactly 88px (56px ≤ 900) from the section edges. This file holds the static half:
 * one rail, one reading column, one card height per grid, one gap between cards. Inner pages (body.rules) and,
 * since 2026-10-13, the home too (.rbx — see the HOME block below; rhythm.js settles the home's vertical rhythm). */

/* sections the pass corrects become their own formatting context: a corrected margin never collapses out */
body.rules main section.r-bfc, .rbx section.r-bfc, main section .r-bfc { display: flow-root; }

/* ---------- HORIZONTAL: the outer edges of column layouts sit on the rail ----------
 * Measured: hairline columns (.r-cols) started their text 8px inside the 1080 rail on both sides (1064 wide);
 * the dark-plate columns (.dkp) started 8px in on the left and ended 32px in on the right (188 / 212). */
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), body.rules .r-col.r-col.r-col.r-col:first-child { padding-left: 0 !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), body.rules .r-col.r-col.r-col.r-col:last-child { padding-right: 0 !important; }
body.rules main .dkp-grid > .dkp-start:not(#cg):not(#rh) { padding-left: 0 !important; }
body.rules main .dkp-grid > :is(:has(+ .dkp-start), :last-child):not(#cg):not(#rh) { padding-right: 0 !important; }
@media (max-width: 860px) { body.rules main .dkp-grid > *:not(#cg):not(#rh) { padding-left: 0 !important; padding-right: 0 !important; } }

/* ---------- HORIZONTAL: one reading column ----------
 * Articles written as a narrow container holding a stack of sections (compare pages 832px, store-build policy
 * 704px) read in the same 760px column as every prose section (components.css, REGRA FIXA 2026-10-01). */
body.rules main div:is(.max-w-3xl, .max-w-4xl):has(> section ~ section) {
  max-width: none !important; width: min(760px, 100% - 44px) !important; margin-inline: auto !important; padding: 0 !important; }   /* no padding of its own: the sections inside carry the rhythm */

/* ---------- CARDS: every card in a grid is as tall as the tallest, and one gap between cards ----------
 * Measured: 45 grids had rows of different heights (a two-line title made its row 20px taller); gaps were
 * 20 on the card canon, 16 on the anatomy cards, 24 on the glass grids and the comparison pairs. */
body.rules main :is(.cg, .anat-grid, .cg-from-steps, .r-glass-grid, .r-steps-g, .r-cols, .cp-vs, .dkp-grid):not(.quotes-masonry) { grid-auto-rows: 1fr; }
body.rules main .anat-grid.anat-grid, body.rules main .r-glass-grid.r-glass-grid, body.rules main .cp-vs.cp-vs { gap: 20px !important; }
body.rules main .grid.r-eqrows { grid-auto-rows: 1fr; }
/* card grids written with their own gap (partners 24, roles 16, the pricing plans 32) take the card canon's 20.
   Kept on their own rhythm, consistently everywhere: rows of buttons (16), link tiles (12), chips (8). */
body.rules main .grid.r-eqrows:not(.r-cols):not([class*="gap-3"]), body.rules main .pr-grid.pr-grid:not(.r-cols) { gap: 20px !important; }

/* MEDIDO 2026-10-13: /features/roles-access — a coluna flex (md:flex-1) e a anatomia lado a lado tinham 1240px dentro
   do trilho de 1080: os cartões da direita saíam 160px para fora. Nada passa da largura da caixa da seção. */
/* a 400px side column left empty when its placeholder image came out (roles-access). Only when it is really empty: the old
   :not(:has(img, video, … table)) also hid a column holding just a button, a form, an input or plain text (review of PR #62) */
body.rules main section > div > [class*="flex-shrink-0"]:empty { display: none !important; }
body.rules main section > div > [class*="flex-1"] { min-width: 0; }
body.rules main section > div > [class*="flex-1"] > .anat-side.anat-side { width: auto !important; max-width: 100% !important; margin-inline: 0 !important; }
/* /sustainability: a declaração ocupa o trilho e o parágrafo seguinte ficava numa coluna centrada de 790 (recuo de 145px
   à esquerda, do nada). O parágrafo que segue uma declaração começa na mesma borda. */
body.rules main section > div > :is(.lead-statement, .r-statement) + p:first-of-type:not(#rh) { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; max-width: 68ch !important; }
/* a short list that is really a grid of cards keeps the grid's full width (the tail pass runs before some grids get their class) */
body.rules main .r-tail-list.r-tail-list.r-tail-list:is(.grid, .cg, .cg-from-steps, .r-steps) { width: auto !important; max-width: none !important; margin-inline: 0 !important; }
/* the article column is 760: a table inside it fills the column (the compare tables stopped at 664) */
body.rules main div:is(.max-w-3xl, .max-w-4xl):has(> section ~ section) section > div.overflow-x-auto:not(#rh) { width: 100% !important; max-width: none !important; }

/* ---------- TITLE → CONTENT: one distance ----------
 * A centred section title with a lead: title 14 · lead 52 · content. Without a lead the title sat 14px over the cards
 * (/store-types/*, "Why Companies Choose…"). Without a lead it now keeps the same 52 the lead would have left. */
body.rules main section:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) > div > h2:not(:has(+ p)):not(:has(+ span)):not(:last-child):not(#rh),
body.rules main section:not(:first-of-type):not(:has(h1)):not(.r-prose):not(.r-split) > div > :is(.pc-head, .dt-head) > h2:only-child:not(#rh) { margin-bottom: 52px !important; }

/* ============================================================
   HOME (2026-10-13, pedido dela: "pode colocar a home tb, o site precisa ser consistente")
   The home ran on its own numbers: a 1056 rail (192) against 1080 (180) everywhere else, an 816 FAQ column
   against 860, buttons 14 apart against 16, chips 10 against 8, cards padded 26/24 against 24, the pricing plate
   24 from its neighbours against 12. parts/rhythm.js now settles the home's vertical rhythm too.
   ============================================================ */
.rbx .container:not(.narrow) { max-width: 1136px; padding-left: 28px; padding-right: 28px; }   /* 1080 of content + the shell's 28 gutter */
.rbx .faq .container.narrow { max-width: 924px; }                         /* 860, the FAQ column of every page */
.rbx .hero-ctas.hero-ctas { gap: 16px; }
.rbx .chips.chips, .rbx .perks.perks { gap: 8px; }
.rbx .v3-grid > * { padding: 24px !important; }
.rbx section.home-plate { margin-block: 12px !important; }
/* the /faq article: each category's accordion sat 48px in from its own title (664 inside the 760 column; 250 inside
   346 on a phone). Accordions in an article column fill the column, flush with their title. */
body.rules main div:is(.max-w-3xl, .max-w-4xl):has(> section ~ section) .faq-canon:not(#rh) { max-width: none !important; width: auto !important; margin-inline: 0 !important; }
/* home titles on the site's distances: title 14 · lead 52 · content; without a lead, title 52 · content.
   (measured on the home: 24 / 26–48 / 40–64) */
.rbx :is(.section, .cta) .container h2:is(.center, [class*="display"]):has(+ .lead):not(#rh) { margin-bottom: 14px !important; }
.rbx :is(.section, .cta) .container h2:is(.center, [class*="display"]):not(:has(+ .lead)):not(#rh) { margin-bottom: 52px !important; }
.rbx :is(.section, .cta) .container h2:is(.center, [class*="display"]) + .lead:not(#rh) { margin-top: 0 !important; margin-bottom: 52px !important; }
.rbx :is(.section, .cta) .container h2:is(.center, [class*="display"]) + :not(.lead):not(#rh),
.rbx :is(.section, .cta) .container h2:is(.center, [class*="display"]) + .lead + *:not(#rh) { margin-top: 0 !important; }

/* ---------- SIDE GUTTER = THE SHELL'S, at every width ----------
 * Measured at 390: header logo, burger and footer sit 16px from the edge; the page body sat 48px in (the 1080-rail
 * rule, 100% − 96px, outranked the phone rule) and the home 20px in. Below the 1080 rail the body now uses the
 * shell's gutter: 16 up to 820, 28 above it. */
@media (min-width: 821px) {
  body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div:not(#rh) { width: min(1080px, 100% - 56px) !important; }
}
@media (max-width: 820px) {
  body.rules main section:not(.r-hero):not(:first-of-type):not(:has(h1)) > div:not(#rh),
  body.rules main div:is(.max-w-3xl, .max-w-4xl):has(> section ~ section):not(#rh) { width: calc(100% - 32px) !important; }
  .rbx .container.container { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 820px) {
  /* heroes too: the category heroes kept a 16 margin AND 16 padding (title at 32, the header logo at 16) */
  body.rules main section.r-hero > div:is([class*="max-w-"], .hz-in):not(.cl):not(#rh) { width: calc(100% - 32px) !important; max-width: none !important; margin-inline: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- ONE PLATE (2026-10-13, Luana: "dois banners um em cima do outro com tamanhos diferentes") ----------
 * Measured, every page: plates are 1408 wide (16 from each edge), radius 28 — 93 of them, the dark ones with the
 * title inside. The home's "On demand, end to end." was the only dark plate drawn as a 1080 box UNDER its title,
 * right above the 1408 customer-story plate. It becomes the same plate as everywhere: the section is the plate,
 * the title sits inside it in white, the steps sit on it directly. */
.rbx section.how {
  margin: 12px 16px !important; border-radius: 28px; overflow: hidden;
  background: linear-gradient(168deg, #1b1f2e 0%, #0d1120 58%, #07091a 100%) !important;
  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); }
.rbx section.how .steps.steps { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; }
.rbx section.how :is(h2, .display) { color: #fff !important; }
.rbx section.how :is(.lead, p.center:not(:has(a))) { color: rgba(255,255,255,.66) !important; }
.rbx section.how .eyebrow { color: #9fb4ff !important; }
.rbx section.how .link-arrow { color: #9fb4ff !important; }
/* a 1080 box set inside a page's content that is not a plate keeps the rail: the 1088 notes and quote boxes (4px
   over each side) and the /events featured banner (1216) go to 1080 */
body.rules main :is(.blog-featured):not(#rh) { max-width: 1080px !important; margin-inline: auto !important; }
/* the /faq closing CTA sat inside the 760 article column: a closing band runs edge to edge on every page */
body.rules main div:is(.max-w-3xl, .max-w-4xl) > section.wf-cta:not(#rh) { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; }

/* every closing CTA is the dark band, also one the canon pass could not reshape */
body.rules main section.wf-cta.wf-cta:not(#rh) { background: var(--bg-d) !important; }



/* ---------- ONE AXIS PER PAGE (2026-10-14, Luana: "pq essa ta alinhada à esquerda quando todo o resto tá ao meio?") ----------
 * Measured: 17 statements (.bn.r-statement) set left inside sections whose title is centred, and 12 text sections
 * (r-prose with a grid below, so no 760 column) whose eyebrow, title and paragraphs ran left across the whole rail on
 * pages where every other title is centred. parts/rhythm.js marks those sections .r-axis; on article/documentation
 * pages (where most titles are left) nothing is marked. */
body.rules main section.r-axis .bn.r-statement:not(#rh) { margin-inline: auto !important; }
body.rules main section.r-axis .bn.r-statement p:not(#rh) { text-align: center !important; margin-inline: auto !important; }
body.rules main section.r-axis :is(.r-axis-head, .r-axis-p):not(#rh) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
body.rules main section.r-axis h2.r-axis-head:not(#rh) { max-width: 24ch !important; }
body.rules main section.r-axis p.r-axis-p:not(#rh) { max-width: 62ch !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; }
}


/* ───── pages/blog-visuals.css ───── */
/* blog-visuals — capturas no corpo de três posts (ver pages/blog-visuals.js). A captura entra na proporção natural
   (o 16:10 com cover recortava as bordas dos tiles 16:9), com a janela de captura do site: raio 14, fio, sombra. */
body.rules .post .post-body figure.bv-fig { margin: 12px 0 40px !important; padding: 0 !important; }
body.rules .post .post-body figure.bv-fig img.r-shot { aspect-ratio: var(--bv-ar, auto) !important; object-fit: contain !important; height: auto !important;
  width: 100% !important; margin: 0 !important; border-radius: 14px !important; }


/* ───── pages/branded-merch.css ───── */
/* /what-is-branded-merch — the answer cards carry their photo (pages/branded-merch.js). The card is the same .r-ph: its size,
   radius and shadow stay; the photo fills it edge to edge. The glass object, glow and caption leave the face. */
body.rules main .r-ph.bm-photo.bm-photo { padding: 0 !important; gap: 0 !important; border: 0 !important; background: #0b0e1c !important; }
/* (no 1px rim: the card's graphite border/gradient would draw a dark hairline around the photo) */
body.rules main .r-ph.bm-photo > :not(img.bm-img) { display: none !important; }
body.rules main .r-ph.bm-photo > img.bm-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; border-radius: inherit; }
/* the polo is a product photo on its own flat grey: shown whole, on that grey, so the card reads as one picture */
body.rules main .r-ph.bm-photo.bm-photo.bm-contain { background: #f3f4f8 !important; }


/* ───── pages/business-cards.css ───── */
/* ============================================================
   /features/business-cards — "You design it once. They fill it in." em dois cartões (.cp-vs)
   ============================================================ */
body.rules main section.bc-design .dt-head > h2 { max-width: none; }
body.rules main .bc-vs { align-items: start; }
body.rules main .bc-vs > div { padding: 26px 26px 28px; gap: 4px; }
body.rules main .bc-vs h3.bc-label:not(#bc) { margin: 0 0 6px !important; padding-inline: 4px; text-align: left !important;
  font: 700 11px var(--font-poppins), system-ui !important; letter-spacing: .12em; text-transform: uppercase; color: #2f52d8 !important; }
body.rules main .bc-steps:not(#bc) { list-style: none; margin: 0 !important; padding: 0 4px !important; display: grid; text-align: left; }
body.rules main .bc-steps li:not(#bc) { display: block; margin: 0 !important; padding: 14px 0; font-size: 15.5px; line-height: 1.6; text-align: left;
  color: color-mix(in srgb, #3b404b, #c2c4cb calc(var(--k) * 100%)); border-top: 1px solid color-mix(in srgb, rgba(14,17,22,.1), rgba(255,255,255,.12) calc(var(--k) * 100%)); }
body.rules main .bc-steps li:first-child:not(#bc) { border-top: 0; padding-top: 4px; }
/* os dois cartões com a mesma altura; a tela embaixo, na largura dos cartões */
body.rules main .bc-vs { align-items: stretch; }
body.rules main figure.bc-shot:not(#bc) { max-width: 680px; margin: 28px auto 0; }
body.rules main figure.bc-shot img { display: block; width: 100%; height: auto; }
body.rules main figure.bc-shot figcaption { padding: 12px 16px 14px; font-size: 13.5px; line-height: 1.5; text-align: center; color: color-mix(in srgb, #5b6170, #9a9da6 calc(var(--k) * 100%)); }
@media (max-width: 600px) {
  body.rules main .bc-vs > div { padding: 20px 14px 22px; }
  body.rules main .bc-steps li:not(#bc) { font-size: 15px; }
}


/* ───── pages/employee-swag.css ───── */
/* /employee-swag-multiple-locations — the /features template on a solutions page (pages/employee-swag.js, 2026-10-15).
   Spacing between sections stays with parts/rhythm.js; only the inside of the three chapters is set here. */

/* chapter heads: centred, as design-tool's (the h2 is the page's own; the lead under it keeps the canon lead) */
body.rules main section.xs-sec .xs-head.xs-head { max-width: 760px; margin: 0 auto !important; text-align: center; }
body.rules main section.xs-sec .xs-head > h2:not(#xs) { text-align: center !important; margin-inline: auto !important; max-width: 22ch !important; }
body.rules main section.xs-sec .xs-head > h2:last-child:not(#xs) { margin-bottom: 48px !important; }
body.rules main section.xs-sec .xs-head > h2 + p:not(#xs) { text-align: center !important; margin: 0 auto 52px !important; max-width: 62ch; }
body.rules main section.xs-sec .xs-head + .xs-types { margin-top: 0 !important; }

/* CH 1 · capture + hairline list: the list titles are the page's h2s, set as the list's titles (design-tool .dt-types b) */
body.rules main section.xs-sec .xs-types li > h2.xs-t:not(#xs) { font: 600 16.5px/1.35 var(--font-poppins), system-ui !important; letter-spacing: 0 !important;
  color: #0e1116 !important; text-align: left !important; margin: 0 !important; max-width: none !important; text-wrap: initial; }
body.rules main section.xs-sec .xs-types li > p:not(#xs) { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #5b6170 !important;
  text-align: left !important; max-width: none !important; }
body.rules main section.xs-sec .xs-types { align-items: center; }

/* CH 2 · CH 3 · text + capture, two columns (text 1fr · capture 1.1fr), mirrored on the second one */
body.rules main section.xs-sec .xs-tc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; }
body.rules main section.xs-sec .xs-tc-flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
body.rules main section.xs-sec .xs-tc-flip > .xs-tc-text { order: 2; }
body.rules main section.xs-sec .xs-tc-text > p:not(#xs) { font-size: 17px !important; line-height: 1.65 !important; color: #3b404b !important; text-align: left !important; margin: 0 !important; max-width: 46ch; }
body.rules main section.xs-sec .xs-tc-shot { margin: 0; }
body.rules main section.xs-sec .xs-tc-shot img.r-shot { box-shadow: 0 40px 80px -42px rgba(14,17,40,.38); }

@media (max-width: 900px) {
  body.rules main section.xs-sec .xs-tc, body.rules main section.xs-sec .xs-tc-flip { grid-template-columns: 1fr; gap: 28px; }
  body.rules main section.xs-sec .xs-tc-shot { order: -1; }
  body.rules main section.xs-sec .xs-tc-flip > .xs-tc-text { order: 2; }
  body.rules main section.xs-sec .xs-tc-text > p:not(#xs) { max-width: none; }
  body.rules main section.xs-sec .xs-head > h2:last-child:not(#xs) { margin-bottom: 32px !important; }
  body.rules main section.xs-sec .xs-head > h2 + p:not(#xs) { margin-bottom: 36px !important; }
}
/* the dark plate's columns stack on a phone: no vertical rule beside a stacked column (features-template.css keeps the
   `> *:not(.dkp-start)` rule above its own phone override, so it is undone here for this page's plate) */
@media (max-width: 760px) {
  body.rules main section.xs-links.ft-dark.dkp .dkp-grid.dkp-grid > *:not(.dkp-start):not(#xs) { border-left: 0 !important; padding-left: 0 !important; }
}


/* ───── pages/features-template.css ───── */
/* ============================================================
   /features/<module> — ONE TEMPLATE (2026-10-14) · pages/features-template.js holds the slots and the per-page lines.
   Reference: /features/design-tool. Only what the template unifies lives here; spacing stays with parts/rhythm.js.
   ============================================================ */

/* ---- NUMBERING: one style. A sequence's number is the anatomy badge (.anat-cards li i: blue circle 28px, 600 13px white),
   beside the title — on step cards, on a timeline's nodes, inside the dark plate. ---- */
body.rules main section.ft :is(h3, h4).ft-nh, body.rules main section.ft-dark :is(h3, h4).ft-nh { display: flex !important; align-items: center; gap: 12px; }
body.rules main section :is(h3, h4) > i.ft-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #2f52d8; color: #fff !important;
  font: 600 13px/28px var(--font-poppins), system-ui !important; font-style: normal; text-align: center; letter-spacing: 0; }
body.rules main section .ft-n-off.ft-n-off.ft-n-off,
body.rules main section .r-step .num.r-step-n.r-step-n.ft-n-off.ft-n-off.ft-n-off.ft-n-off { display: none !important; }

/* step cards: the anatomy card's surface (white, 18 radius, 18/20 inset, the same shadow) instead of the glass card with the
   thin 40px gradient numeral — so a numbered card reads the same on every page */
body.rules main section.ft .r-steps.r-steps > .r-step.r-step.r-step.r-step.r-step.ft-step {
  background: color-mix(in srgb, #fff, #16181f 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: 18px !important; padding: 18px 20px !important; box-shadow: 0 18px 40px -32px rgba(14,17,40,.35) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules main section.ft .r-steps .r-step.r-step.ft-step :is(h3, h4) { font: 600 15.5px/1.3 var(--font-poppins), system-ui !important; margin: 0 0 6px !important; }
body.rules main section.ft .r-steps .r-step.r-step.ft-step > p { font-size: 14px !important; line-height: 1.55 !important; }

/* timeline nodes (turbo-store "The three picks"): the same badge, sitting on the line */
body.rules main section.ft .tl-node.ft-node { width: 28px; height: 28px; background: #2f52d8; border: 0; color: #fff;
  font: 600 13px/28px var(--font-poppins), system-ui; letter-spacing: 0; box-shadow: 0 0 0 8px var(--bg-l, #f7f8fc), 0 8px 18px rgba(47,82,216,.35); }
/* a one-row timeline (order-builder "Colorways"): the number points at nothing — text | screen, no node */
body.rules main section.ft .tl-node.ft-node-off { visibility: hidden; }

/* ---- THE DARK PLATE: one component. design-tool's studio plate (graphite, centred head, ruled columns 16/600 + 14/1.55) is the
   measure; the glass-icon columns (.dkp-grid) take the same column type and rule, keeping their icon on top. ---- */
body.rules main section.ft-dark .ft-head-c.ft-head-c { margin-inline: auto !important; text-align: center !important; }
body.rules main section.ft-dark .ft-head-c :is(h2, p) { text-align: center !important; margin-inline: auto !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid :is(h3, h4) { font: 600 16px/1.35 var(--font-poppins), system-ui !important; color: #fff !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > * p { font-size: 14px !important; line-height: 1.55 !important; color: rgba(255,255,255,.64) !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > * { background: none !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > *.dkp-start { border-left: 0 !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > *:not(.dkp-start) { border-left: 1px solid rgba(255,255,255,.12) !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > * { padding: 0 26px !important; }
body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > *.dkp-start { padding-left: 0 !important; }
@media (max-width: 760px) {
  body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > * { padding: 22px 0 !important; border-left: 0 !important; }
  body.rules main section.ft-dark.dkp .dkp-grid.dkp-grid > * + * { border-top: 1px solid rgba(255,255,255,.12) !important; }
}

/* the dark plate's capture (the studio shape): on top of the columns, the page width of design-tool's studio shot */
body.rules main section.ft-dark .ft-shot { max-width: 980px; margin: 48px auto 52px !important; }
body.rules main section.ft-dark .ft-shot img { border: 1px solid rgba(255,255,255,.12) !important; border-radius: 18px !important; }
/* text links inside the dark plate ("Order Builder →"): the light blue the dark CTA uses, never the ink blue on graphite */
body.rules main section.ft-dark .dkp-grid :is(a, span)[class*="text-[#4d74ff]"] { color: #9db4ff !important; }
body.rules main section.ft-dark .dkp-grid > a:hover h3 { color: #fff !important; }
/* anything boxed inside the plate (a note, a card) takes the plate's own variant: no white card, never white on white */
body.rules main section.ft-dark .dkp-grid ~ :is(.rounded-2xl, .rounded-xl):not(.r-shot):not(.ft-shot) { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; }
body.rules main section.ft-dark .dkp-grid ~ :is(.rounded-2xl, .rounded-xl):not(.ft-shot) :is(h3, h4, b, strong) { color: #fff !important; }
body.rules main section.ft-dark .dkp-grid ~ :is(.rounded-2xl, .rounded-xl):not(.ft-shot) :is(p, li, span) { color: rgba(255,255,255,.74) !important; }

/* ---- LIGHT VARIANTS of the layouts that were written for a dark plate, where the plate is no longer the template's one ---- */
/* coupons "Six rules a shopper has to meet": the panel beside the six rules, on the page */
body.rules main section.ft-lite.cp-rules-sec .dt-head h2 { color: #0e1116 !important; }
body.rules main section.ft-lite .cp-rules b { color: #0e1116; }
body.rules main section.ft-lite .cp-rules span { color: #5b6170 !important; }
body.rules main section.ft-lite .cp-rules li { border-top-color: rgba(14,17,22,.1); }
/* order-builder "On-demand pricing, on a bulk order": the order's totals and the four columns, on the page */
body.rules main section.ft-lite.ob-pricing .ob-head h2 { color: #0e1116 !important; }
body.rules main section.ft-lite.ob-pricing .ob-nums { border-top-color: rgba(14,17,22,.1); border-bottom-color: rgba(14,17,22,.1); }
body.rules main section.ft-lite.ob-pricing .ob-nums div + div { border-left-color: rgba(14,17,22,.1); }
body.rules main section.ft-lite.ob-pricing .ob-nums b { color: #0e1116; }
body.rules main section.ft-lite.ob-pricing .ob-nums span { color: #5b6170; }
body.rules main section.ft-lite.ob-pricing .ob-cols li + li { border-left-color: rgba(14,17,22,.1); }
body.rules main section.ft-lite.ob-pricing .ob-cols b { color: #0e1116 !important; }
body.rules main section.ft-lite.ob-pricing .ob-cols span { color: #5b6170 !important; }
@media (max-width: 760px) { body.rules main section.ft-lite.ob-pricing .ob-cols li + li { border-top-color: rgba(14,17,22,.1); } }
/* order-builder "Most bulk orders are still built in a spreadsheet": the statement on the page (it was a dark prose plate) */
body.rules main section.ft-lite.r-prose { --k: 0; }

/* ---- capture + hairline list (.dt-types, design-tool): the capture keeps its own proportion and fills its column ---- */
body.rules main .ft-types { align-items: start; }
body.rules main .ft-types .ft-types-shot img.r-shot.r-shot { display: block; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.rules main .ft-types ul > li > :is(p, span:not(:first-child)) { margin: 0 !important; max-width: none !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #5b6170 !important; text-align: left !important; }
body.rules main .ft-types ul > li > p + p { margin-top: 4px !important; }
body.rules main .ft-types ul > li > p.font-semibold { color: #0e1116 !important; font-weight: 500 !important; }
body.rules main .ft-types ul > li > a { justify-self: start; margin: 4px 0 0 !important; }

/* ---- centred chapter heads (design-tool centres every chapter head); the prose body stays in its column ---- */
body.rules main section.ft .ft-hc.ft-hc.ft-hc.ft-hc, body.rules main section.ft .r-prose-col > .ft-hc.ft-hc.ft-hc.ft-hc { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
body.rules main section .ft-head.ft-head { margin-bottom: 48px !important; }
body.rules main section .ft-head > :is(p, a) { max-width: 62ch; }

/* ---- the timeline's steps (turbo-store "The three picks"): one treatment — title and text left-aligned in their column,
   text and panel top-aligned in the row, the badge on the centre line beside the title (never over either side) ---- */
body.rules main section.ft .tl-row { align-items: start !important; }
body.rules main section.ft .tl-row > .tl-side { align-self: start; }
body.rules main section.ft .tl-row .tl-text.tl-text { text-align: left !important; padding: 0 20px 0 0 !important; }
body.rules main section.ft .tl-row.tl-flip .tl-text.tl-text { padding: 0 0 0 20px !important; }
body.rules main section.ft .tl-row .tl-text.tl-text :is(h3, p) { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
body.rules main section.ft .tl-row .tl-text.tl-text > a { display: inline-flex; margin-left: 0 !important; }
body.rules main section.ft .tl-row .tl-media.tl-media { padding: 0 0 0 20px; }
body.rules main section.ft .tl-row.tl-flip .tl-media.tl-media { padding: 0 20px 0 0; }
body.rules main section.ft .tl-row > .tl-node.ft-node { align-self: start; margin-top: 4px; }

/* the numbers that moved up into the band (order-builder) */
body.rules main section.ob-pricing .ob-nums.ft-moved { display: none !important; }
/* a text|image row whose head was lifted: the head takes the whole first line, the two columns sit under it */
body.rules main section .ft-wrap.ft-wrap { flex-wrap: wrap !important; }
body.rules main section .ft-wrap > .ft-types { flex: 0 0 100% !important; grid-column: 1 / -1 !important; width: 100%; }
body.rules main section .ft-wrap > .ft-head.ft-head { flex: 0 0 100% !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; }
body.rules main section .ft-head + .ft-types { margin-top: 0 !important; }

/* ---- a text|capture row whose cards became the hairline list (product-settings "Three levels, one table"): the list under the
   paragraph(s) in design-tool's hairline type, the capture at its own proportion in its column ---- */
body.rules main ul.ft-list { list-style: none; margin: 24px 0 0 !important; padding: 0 !important; display: grid; }
body.rules main ul.ft-list > li { display: grid; gap: 5px; padding: 18px 0; border-top: 1px solid rgba(14,17,22,.08); text-align: left; }
body.rules main ul.ft-list > li:first-child { border-top: 0; padding-top: 0; }
body.rules main ul.ft-list > li > b { font: 600 16.5px/1.35 var(--font-poppins), system-ui; color: #0e1116; }
body.rules main ul.ft-list > li > :is(p, span) { margin: 0 !important; max-width: none !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #5b6170 !important; text-align: left !important; }
body.rules main .ft-capl { align-items: start !important; }
body.rules main .ft-capl img.r-shot.r-shot { width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; }


/* ───── pages/glossary.css ───── */
/* /glossary — pages/glossary.js. Spacing between letters stays with parts/rhythm.js. */
/* 1 · the A–Z index sticks under the header, as the header's glass pill (.mainnav's surface) */
body.rules main nav[aria-label="Jump to letter"].gl-az.gl-az.gl-az {
  position: sticky !important; top: 84px; z-index: 40; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 8px !important;
  display: flex; flex-wrap: nowrap !important; justify-content: flex-start; gap: 2px !important; padding: 6px !important; border-radius: 999px;
  background: rgba(255, 255, 255, .86) !important; border: 1px solid rgba(14, 17, 22, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 30px -16px rgba(14, 17, 22, .35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important; backdrop-filter: blur(22px) saturate(1.35) !important;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
body.rules main nav.gl-az.gl-az::-webkit-scrollbar { display: none; }
body.rules main nav.gl-az.gl-az.gl-az :is(a, span) {
  flex: none; width: 32px; height: 32px; padding: 0 !important; display: inline-grid; place-items: center; border-radius: 50% !important;
  background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font: 600 13px/1 var(--font-poppins), system-ui !important; color: #0e1116 !important; text-decoration: none; }
body.rules main nav.gl-az.gl-az.gl-az a:focus-visible { background: #2f52d8 !important; color: #fff !important; }
@media (hover: hover) { body.rules main nav.gl-az.gl-az.gl-az a:hover { background: #2f52d8 !important; color: #fff !important; } }
body.rules main nav.gl-az.gl-az.gl-az span { opacity: .3; }
/* 2 · a letter link lands with its letter ~20px under the pill. Measured: the letter sits ~88px into its section at 1440
   (56 at ≤900, rhythm's smaller P); the pill ends at 130 (142 on the phone, where mobile.css gives the letters 44px targets) */
body.rules main section[id^="letter-"] { scroll-margin-top: 62px; }
@media (max-width: 900px) { body.rules main section[id^="letter-"] { scroll-margin-top: 106px; } }
/* 3 · a Brikl term's capture, under its definition, at its own proportion */
body.rules main .gl-fig { margin: 16px 0 0; max-width: 440px; }   /* a small capture, not a second column */
body.rules main .gl-fig img.gl-shot { width: 100%; height: auto; object-fit: contain; }   /* proportion: inline, from the file (glossary.js) */
body.rules main .gl-fig.gl-fig-tall { max-width: 340px; }
/* the phone: letters keep mobile.css's 44px tap target — the greyed letters take the same box so the row stays on one line */
body.rules main nav.gl-az.gl-az.gl-az { align-items: center; }
@media (max-width: 900px) { body.rules main nav.gl-az.gl-az.gl-az span { width: 44px; height: 44px; } }
/* "See pricing →": on the phone mobile.css makes it an inline-flex 44px target, so it sat on the definition's last line and
   pushed that line down; it stays the block line under the definition it is everywhere else (still 44px tall to tap) */
@media (max-width: 900px) { body.rules main section[id^="letter-"] dd > a { display: flex !important; align-items: center; width: max-content; margin-top: 0 !important; } }


/* ───── pages/guide-on-demand.css ───── */
/* /guides/on-demand-promo — one format per chapter (pages/guide-on-demand.js, 2026-10-15).
   The guide's chapters live in its 760 reading column; the two-column rows step out of it to the site's 1080 trail.
   Spacing between sections stays with parts/rhythm.js. */

/* chapter heads centred, as the template's — chapter 1 was the left-set prose head */
body.rules main section.gd-ch1 > h2:not(#gd) { text-align: center !important; margin-inline: auto !important; max-width: 22ch !important; }

/* rows wider than the reading column: the 1080 trail, centred on it */
body.rules main section.gd-sec .gd-wide { width: min(1080px, calc(100vw - 96px)); position: relative; left: 50%; translate: -50% 0; }
/* (a row written straight into the section is also caught by the trail rule `section > div` — width, 88px padding, auto margins) */
body.rules main section.gd-sec > div.gd-wide.gd-wide:not(#gd) { width: min(1080px, calc(100vw - 96px)) !important; max-width: none !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
body.rules main section.gd-sec .gd-tc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin: 8px 0 48px; }
body.rules main section.gd-sec .gd-tc-flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
body.rules main section.gd-sec .gd-tc-text > p:not(#gd) { font-size: 17px !important; line-height: 1.65 !important; color: #3b404b !important; text-align: left !important;
  margin: 0 !important; max-width: 52ch; }
body.rules main section.gd-sec .gd-tc-text > p + p:not(#gd) { margin-top: 16px !important; color: #5b6170 !important; font-size: 16px !important; }
body.rules main section.gd-sec .gd-tc-shot { margin: 0; }
body.rules main section.gd-sec .gd-tc-shot img.r-shot:not(.r-shot-tall) { box-shadow: 0 40px 80px -42px rgba(14,17,40,.38); }
/* a row straight under the chapter's title: the title-to-content distance of the template (the lead's 52 elsewhere) */
body.rules main section.gd-sec > h2 + .gd-wide.gd-wide { margin-top: 44px !important; }
/* chapter 6: the criteria table is the text column, the switcher (a tall panel) the capture */
body.rules main section.gd-sec .gd-tc-table { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
body.rules main section.gd-sec .gd-tc-table .gd-tc-text > div { margin: 0 !important; }
/* chapter 7: the starting path as numbered cards, beside the Turbo Store panel */
body.rules main section.gd-sec .gd-tc-path { grid-template-columns: minmax(0, 1fr) 380px; }
body.rules main section.gd-sec .gd-path > h3:not(#gd) { font: 600 16.5px/1.35 var(--font-poppins), system-ui !important; color: #0e1116 !important; margin: 0 0 16px !important; text-align: left !important; }
body.rules main section.gd-sec ol.gd-steps { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
body.rules main section.gd-sec ol.gd-steps > li.gd-step { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 18px; list-style: none;
  background: #fff; border: 1px solid rgba(14,17,22,.08); border-radius: 18px; box-shadow: 0 18px 40px -32px rgba(14,17,40,.35);
  font-size: 15px; line-height: 1.5; color: #3b404b; }
body.rules main section.gd-sec ol.gd-steps > li.gd-step::marker { content: none; }
body.rules main section.gd-sec ol.gd-steps i.gd-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #2f52d8; color: #fff;
  font: 600 13px/28px var(--font-poppins), system-ui; font-style: normal; text-align: center; letter-spacing: 0; }

/* chapter 5: capture + hairline list (design-tool .dt-types); the store types' titles and links in the list */
body.rules main section.gd-sec .gd-types { margin: 8px 0 40px !important; align-items: center; }
body.rules main section.gd-sec .gd-types li > h3.gd-t:not(#gd) { font: 600 16.5px/1.35 var(--font-poppins), system-ui !important; color: #0e1116 !important; margin: 0 !important; text-align: left !important; }
body.rules main section.gd-sec .gd-types li > p:not(#gd) { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #5b6170 !important; text-align: left !important; max-width: none !important; }
body.rules main section.gd-sec .gd-types li { padding: 14px 0; }

/* chapter 2 · the studio shape on THE dark plate: full width (16px sides) although it is written inside the reading column */
body.rules main section.gd-studio.r-plate:not(#gd) { margin-left: calc((100% - 100vw) / 2 + 16px) !important; margin-right: calc((100% - 100vw) / 2 + 16px) !important; }
body.rules main section.gd-studio .gd-head > h2:not(#gd) { text-align: center !important; margin: 0 auto 14px !important; max-width: 22ch !important; color: #fff !important; }
body.rules main section.gd-studio .gd-head > p:not(#gd) { text-align: center !important; margin: 0 auto !important; max-width: 62ch; font-size: 18.5px !important; line-height: 1.55 !important; color: rgba(255,255,255,.66) !important; }
body.rules main section.gd-studio .gd-studio-shot { max-width: 980px; margin: 48px auto 52px; }
body.rules main section.gd-studio .gd-studio-shot img.r-shot:not(#gd) { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important;
  border: 1px solid rgba(255,255,255,.12) !important; border-radius: 18px !important; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6) !important; }
body.rules main section.gd-studio .gd-off { display: none !important; }
body.rules main section.gd-studio .gd-steps-cols { margin: 0 !important; grid-auto-rows: auto !important; }
body.rules main section.gd-studio .gd-steps-cols h3.ft-nh:not(#gd) { display: flex !important; align-items: center; gap: 12px; }
body.rules main section.gd-studio .gd-studio-note { max-width: 62ch; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
body.rules main section.gd-studio .gd-studio-note > p:not(#gd) { text-align: center !important; margin: 0 auto !important; max-width: none !important; font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(255,255,255,.66) !important; }
body.rules main section.gd-studio .gd-studio-note > p + p:not(#gd) { margin-top: 12px !important; }
body.rules main section.gd-studio .gd-studio-note a:not(#gd) { color: #9db4ff !important; }

@media (max-width: 900px) {
  body.rules main section.gd-sec .gd-wide { width: auto; left: 0; translate: none; }
  body.rules main section.gd-sec > div.gd-wide.gd-wide:not(#gd) { width: auto !important; }
  body.rules main section.gd-sec :is(.gd-tc, .gd-tc-flip, .gd-tc-table, .gd-tc-path) { grid-template-columns: 1fr; gap: 28px; }
  body.rules main section.gd-sec .gd-tc > .gd-tc-shot { order: -1; }
  body.rules main section.gd-sec .gd-tc-table > .gd-tc-shot, body.rules main section.gd-sec .gd-tc-path > .gd-tc-shot { max-width: 340px; width: 100%; margin-inline: auto; }
  body.rules main section.gd-studio .gd-studio-shot { margin: 32px 0 36px; }
  /* on a phone the reading column is already the page width (16px sides): the plate is the column */
  body.rules main section.gd-studio.r-plate.r-plate:not(#gd) { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; }
  body.rules main section.gd-sec > h2 + .gd-wide.gd-wide { margin-top: 28px !important; }
}
@media (max-width: 760px) {
  body.rules main section.gd-studio.ft-dark.dkp .dkp-grid.dkp-grid > *:not(.dkp-start):not(#gd) { border-left: 0 !important; padding-left: 0 !important; }
}


/* ───── pages/macbook-heroes.css ───── */
/* ---------- MacBook heroes (2026-10-14, Luana: "vc consegue aplicar isso nos mockups que temos de MacBook? todos os heros
 * que não estão em um MacBook, não precisa ser vídeo, um bom still num ângulo legal é suficiente") ----------
 * The flat window shots of PLATFORM_SHOT (components.js) now come laid into the MacBook of the /features video — the same
 * device, frame of rest of that clip, alpha kept (bw3-recovery/dash-shots/macbook.py → images/platform/mockups/*.webp).
 * `img.hero-device` is dressed like the video heroes: no radius, no border, no shadow, no window — the laptop floats on the
 * page gradient. Size: the laptop is ~97.5% of the file's width; at 600px it is ~585px wide, between the /features
 * notebook (~610) and the /features/design-tool one (~520), and it overhangs the 520 media column to the right the way the
 * videos do. Heroes.js counts it as bleeding media (not a window), so the column here is set in full.
 * The copy keeps the canon's place (eyebrow 64px under the header, as with the window shot): the row tops its columns
 * instead of centring them on the taller laptop, and the lid rises to the eyebrow line like the /features notebook. */
body.rules main section.in-hero div:has(> :is(.hz-media, .hero-photo-col) img.hero-device) { align-items: flex-start !important; }
/* the canon box of the framed heroes (heroes.css `hz-frame`), for the hero the layer split from one column (/promotional-products-platform):
   1152 row, 64px under the header, copy fills what the media column leaves */
body.rules main section.in-hero.hz-two > .hz-two-wrap.hz-two-wrap:has(img.hero-device) {
  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 div:has(> :is(.hz-media, .hero-photo-col) img.hero-device) { display: flex !important; gap: 48px !important; grid-template-columns: none !important; }
body.rules main section.in-hero div:has(> :is(.hz-media, .hero-photo-col) img.hero-device) > :first-child:not(:has(img.hero-device)) { 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 :is(.hz-media, .hero-photo-col):has(img.hero-device):has(img.hero-device) {
  flex: 0 0 520px !important; width: 520px !important; max-width: 520px !important; margin: 0 !important;
  display: flex !important; justify-content: flex-start !important; overflow: visible !important; }
body.rules main section.in-hero img.hero-photo.hero-device.hero-device {
  flex: 0 0 auto !important; width: 600px !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important;
  margin: -20px -80px 0 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important;
  background: none !important; filter: none !important; object-fit: contain !important; position: relative; z-index: 1; }
@media (max-width: 1240px) {
  body.rules main section.in-hero :is(.hz-media, .hero-photo-col):has(img.hero-device):has(img.hero-device) { flex-basis: 460px !important; width: 460px !important; max-width: 460px !important; }
  body.rules main section.in-hero img.hero-photo.hero-device.hero-device { width: 520px !important; margin-right: -60px !important; }
}
/* below 1100 the row has no room to overhang (the hero clips at the viewport): the laptop is the column */
@media (max-width: 1100px) {
  body.rules main section.in-hero img.hero-photo.hero-device.hero-device { width: 100% !important; margin-right: 0 !important; margin-top: -10px !important; }
}
/* phone and narrow tablet: the hero stacks (mobile.css), the laptop takes the column, centred, under the CTAs */
@media (max-width: 900px) {
  body.rules main section.in-hero :is(.hz-media, .hero-photo-col):has(img.hero-device):has(img.hero-device) {
    flex-basis: auto !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; margin-top: 40px !important; }
  body.rules main section.in-hero img.hero-photo.hero-device.hero-device { width: 100% !important; max-width: 560px !important; margin: 0 auto !important; }
  body.rules main section.in-hero div:has(> :is(.hz-media, .hero-photo-col) img.hero-device) { display: block !important; }
  body.rules main section.in-hero.hz-two > .hz-two-wrap.hz-two-wrap:has(img.hero-device) { padding: 48px 16px 0 !important; }
}


/* ───── pages/notifications.css ───── */
/* /features/notifications — anatomia da linha de alerta (2026-10-08)
   A linha do painel é densa (uma linha de texto a cada ~22px): pinos menores e halo curto, para caberem nos vãos sem cobrir texto. */
body.rules main .nt-anat .anat-pin { width: 24px; height: 24px; font-size: 12px; line-height: 24px; box-shadow: 0 0 0 3px rgba(47,82,216,.18), 0 6px 14px rgba(47,82,216,.32); }
@media (max-width: 640px) { body.rules main .nt-anat .anat-pin { width: 20px; height: 20px; font-size: 11px; line-height: 20px; box-shadow: 0 0 0 2px rgba(47,82,216,.2); } }
/* empilhada (≤1100px), as duas listas de cartões viram uma só: o vão entre o cartão 3 e o 4 igual ao dos outros */
@media (max-width: 1100px) { body.rules main .nt-anat ol.anat-cards[start] { margin-top: -22px !important; } }


/* ───── pages/odpf.css ───── */
/* /on-demand-promotional-fulfillment — pages/odpf.js. Spacing stays with parts/rhythm.js. */
/* the four steps: the anatomy badge beside the title (the badge itself is features-template.css's i.ft-n) */
body.rules main section :is(h3, h4).od-nh { display: flex !important; align-items: center; gap: 12px; }
/* the chapter head centred like the page's other chapters; its two paragraphs as the page's two prose columns */
body.rules main section.od-centre.od-centre h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 880px) !important; margin-bottom: 52px !important; }
body.rules main section.od-centre .od-prose2.od-prose2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 40px; max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
body.rules main section.od-centre .od-prose2 > p { margin: 0 !important; max-width: none !important; text-align: left !important; }
@media (max-width: 767px) { body.rules main section.od-centre .od-prose2.od-prose2 { grid-template-columns: 1fr; gap: 16px; } }
/* partner logos: the row itself is parts/logos.js's .lg-row canon; only its distance to the cards above is set here */
body.rules main .od-logos { margin-top: 48px; }
/* seven logos on one line (the canon's 56px gap wraps the seventh alone); Printify's file is cropped tight to a heavy wordmark,
   so at the row's 44px it read twice the weight of the others — it sits at the optical size of its neighbours */
html.lg-on body.rules main .od-logos.lg-row.lg-row.lg-row { column-gap: 40px !important; }
html.lg-on body.rules main .od-logos.lg-row.lg-row img.lg-logo.lg-logo[src*="Printify"] { height: 26px !important; }


/* ───── pages/personalization.css ───── */
/* /features/personalization — fluxo + camisetas; jornada do roster (telas do sdk-master) */
body.rules main section.ps-flow .dt-jerseys { margin-top: 72px; }
body.rules main section.ps-flow .dt-jerseys figcaption:not(#ps) { text-align: center !important; margin-inline: auto !important; }
body.rules main section.ps-roster .dt-journey .dt-shot img { object-position: center; }
body.rules main section.ps-roster p.ps-note:not(#ps) { max-width: 62ch; margin: 48px auto 0 !important; text-align: center !important; font-size: 15px !important; line-height: 1.6 !important; color: #5b6170; }


/* ───── pages/reports.css ───── */
/* ============================================================
   /features/reports — um formato por capítulo (2026-10-08)
   ============================================================ */
/* 2 · a seção da tabela era uma linha (texto | captura): na placa, empilha */
body.rules main section.rp-open > div:not(.r-cloud) { display: block !important; }
body.rules main section.rp-open .dt-head > p:not(#rp) { max-width: 62ch; }
body.rules main section.rp-open .dt-head > p + p:not(#rp) { margin-top: 12px !important; }
body.rules main section.rp-open .dt-head > h2 + p:not(#rp) { margin-bottom: 0 !important; }
/* as três colunas no mesmo eixo da tela (980) */
body.rules main section.rp-open .dt-cols { max-width: 980px; margin-inline: auto !important; }
/* 1 · os rótulos das decisões são longos: no celular quebram em duas linhas, centrados no botão */
@media (max-width: 600px) { body.rules main .rp-tour .dt-tabs button { text-align: center; line-height: 1.25; } }
/* 2 · no celular a tabela inteira ficaria ilegível: a tela vai até a borda da placa e rola de lado, como a tabela de verdade */
@media (max-width: 900px) {
  body.rules main section.rp-open .dt-shot-dark { margin: 36px -32px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 14px; }
  body.rules main section.rp-open .dt-shot-dark::-webkit-scrollbar { display: none; }
  body.rules main section.rp-open .dt-shot-dark img { width: 780px; max-width: none; }
  body.rules main section.rp-open .dt-cols { margin-top: 28px !important; }
}


/* ───── pages/stores.css ───── */
/* ============================================================
   /features/stores — fine-tuning pass (2026-10-14)
   ============================================================ */

/* ---- ANATOMY, 'cols' family (stores, catalogs, wallet, reports, fundraising, the orders list on /features/order-builder) ----
   The pins sat ON the header row of the list and hid the labels they explain (Status, URL, Products…). They now sit on the
   top edge of the screen, one per column, at the same x: the header row stays readable and the number still points down the
   column. The pins' x is unchanged (ANAT in components.js); only the y moves, for every list in the family. */
body.rules main .anat-cols .anat-shot .anat-pin.anat-pin { top: 0 !important; }

/* ---- the note under the anatomy cards (stores, catalogs, wallet: "Scope it to one account" / "Search, filter, sort, page") ----
   It took the 62ch text column of the section, centred, in a glass box of its own — a different component from the cards
   right above it. It now sits on the cards' grid: same width as the anatomy (1240), the cards' 20px gap, each item a card
   in the cards' language (white, 18px radius, 18/20 inset, 15.5/600 title, 14px text), two columns wide on the 4-column
   grid (2 × 295 + 20 = 610), one column on phones. Unnumbered: they are not parts of the screen. */
body.rules main section.anat-sec.anat-sec div:has(> .anat-cols) > div.rounded-2xl:not(.anat):not(#st) {
  width: min(1240px, calc(100vw - 48px)) !important; max-width: none !important; position: relative; left: 50%; translate: -50% 0;
  margin: 20px 0 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  text-align: left !important; }
body.rules main section.anat-sec.anat-sec div:has(> .anat-cols) > div.rounded-2xl:not(.anat):not(#st) > div {
  margin: 0 !important; min-width: 0; text-align: left !important;
  background: color-mix(in srgb, #fff, #16181f calc(var(--k) * 100%)); border: 1px solid color-mix(in srgb, rgba(14,17,22,.08), rgba(255,255,255,.1) calc(var(--k) * 100%));
  border-radius: 18px; padding: 18px 20px; box-shadow: 0 18px 40px -32px rgba(14,17,40,.35); }
body.rules main section.anat-sec.anat-sec div:has(> .anat-cols) > div.rounded-2xl:not(.anat):not(#st) > div h3 {
  margin: 0 0 6px !important; font: 600 15.5px/1.3 var(--font-poppins), system-ui !important; color: color-mix(in srgb, #0e1116, #f5f5f7 calc(var(--k) * 100%)) !important; text-align: left !important; }
body.rules main section.anat-sec.anat-sec div:has(> .anat-cols) > div.rounded-2xl:not(.anat):not(#st) > div p {
  margin: 0 !important; max-width: none !important; font-size: 14px !important; line-height: 1.55 !important; color: color-mix(in srgb, #5b6170, #9a9da6 calc(var(--k) * 100%)) !important; text-align: left !important; }
@media (max-width: 640px) {
  body.rules main section.anat-sec.anat-sec div:has(> .anat-cols) > div.rounded-2xl:not(.anat):not(#st) { grid-template-columns: 1fr; }
}

/* ---- /features/stores: the two record shots that sit beside a card keep their own proportion (not cut to 16:10) ----
   Domain: the three "Serve this store at" options, whole, beside "Good to know" — the row shares one height.
   Sign-in: the whole Sign-in tab (passwordless, social, SAML), as tall as the three method cards beside it. */
body.rules main img.r-shot:is([data-shot="stores-domain-tab"], [data-shot="stores-signin-tab"]) { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }
@media (min-width: 768px) {
  body.rules main .st-pair.st-pair-domain { align-items: stretch !important; }
  body.rules main .st-pair.st-pair-domain > :not(.st-shot-col) { margin-bottom: 0 !important; }
}
@media (max-width: 767px) {
  /* stacked under the cards, the tall sign-in tab would run a whole screen: it keeps a readable phone width, centred */
  body.rules main .st-pair-signin .st-shot-col { max-width: 340px; margin-inline: auto !important; }
}


/* ───── pages/tall-shots.css ───── */
/* capturas altas (drawers) no tamanho natural — ver pages/tall-shots.js. A imagem É o componente (cantos arredondados próprios,
   alfa fora deles): a camada não desenha moldura, raio nem fundo por cima — só a sombra suave. */
body.rules main img.r-shot-tall:not(#tall) { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; object-position: center top !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  filter: drop-shadow(0 24px 40px rgba(14, 17, 40, .16)) drop-shadow(0 2px 6px rgba(14, 17, 40, .06)); }
/* the figure around a tall shot drops its own frame too (dt-shot / cp-shot figures paint a window) */
body.rules main .has-tall-shot:not(#tall) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; height: auto !important; }
/* a tall capture inside a content card (two-column card grids) keeps the card's inset and stays inside it */
body.rules main .r-cols > * > img.r-shot-tall:not(#tall), body.rules main .grid > * > img.r-shot-tall:not(#tall) { max-height: 560px; width: auto; max-width: 100%; margin: 0 auto; display: block; }


/* ───── pages/ui-icons.css ───── */
/* ============================================================
   ícones do dashboard (pages/ui-icons.js, 2026-10-14) — o tile do Alloy (.dw-catintro-ic) vem pronto no SVG;
   aqui só tamanho e respiro, iguais em toda a família. 40px; 14 abaixo no cartão de vidro (o canon do ícone em .cg-card), 12 no link de módulo.
   ============================================================ */
body.rules main img.uii:not(#uii) {
  display: block !important; width: 40px !important; height: 40px !important; max-width: none !important;
  aspect-ratio: 1 / 1 !important; object-fit: contain !important; border: 0 !important;
  /* o raio do tile (6 em 36 → 6.67 em 40) e o fio do vidro da casa (--gl-border): o tile claro do Alloy precisa de borda sobre a placa azulada */
  border-radius: 6.667px !important; box-shadow: 0 0 0 1px var(--gl-border) !important; filter: none !important; background: none !important; padding: 0 !important; flex: none; }
body.rules main .uii-tab > img.uii:first-child:not(#uii) { margin: 0 0 14px !important; }
body.rules main .uii-mod > img.uii:first-child:not(#uii) { margin: 0 0 12px !important; }
/* ≤820 o link de módulo vira linha (inline-flex do alvo de toque 44px, mobile): o ícone fica na própria linha, acima do nome + "Learn more" de antes */
@media (max-width: 820px) {
  body.rules main a.uii-mod:not(#uii) { flex-wrap: wrap !important; align-content: flex-start !important; }
  body.rules main .uii-mod > img.uii:first-child:not(#uii) { margin: 0 calc(100% - 40px) 12px 0 !important; }
}

/* 3 · linha com ícone à esquerda (roles-access: a lista de seções) — o ícone fica no lugar da letra, 36px, sem margem embaixo */
body.rules main .uii-row > img.uii:not(#uii) { width: 36px !important; height: 36px !important; margin: 0 !important; flex: 0 0 36px; }
body.rules main .uii-plat > img.uii:not(#uii) { width: 44px !important; height: 44px !important; flex: 0 0 44px; border-radius: 8px; }


/* ───── pages/wallet.css ───── */
/* ============================================================
   /features/wallet — um formato por capítulo (2026-10-08)
   ============================================================ */
/* 1 · os seis campos: a seção era uma linha (passos | captura) — com a placa no lugar, empilha */
body.rules main section.wl-fields-sec > div:not(.r-cloud) { display: block !important; }
body.rules main section.wl-fields-sec .dt-head h2 { max-width: 22ch; }
/* o formulário inteiro é alto: a tela fica em 380px pra não passar muito da lista */
body.rules main .cp-rules.wl-fields { grid-template-columns: 380px minmax(0, 1fr); }
body.rules main .wl-fields .cp-shot img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }
/* 2 · os três estados: a captura do topo do registro, sem o recorte 16:10, e o fio entre as telas na altura do meio delas */
body.rules main .dt-journey.wl-states .dt-shot img { aspect-ratio: 880 / 800; object-fit: cover; object-position: center top; }
body.rules main .dt-journey.wl-states li + li::before { top: 146px; }
@media (max-width: 900px) {
  body.rules main .cp-rules.wl-fields { grid-template-columns: 1fr; }
  body.rules main .wl-fields .cp-shot { max-width: 360px; }
  body.rules main .dt-journey.wl-states .dt-shot { max-width: 400px; width: 100%; }
}