/* ==========================================================================
   VozAdv · conceito "Editorial Claro"
   SISTEMA DE DESIGN (decidido antes do código)

   Direção de arte
     Tela clara e fria, tinta navy, muito respiro. As superfícies escuras são
     "salas" navy de cantos bem arredondados, sempre afastadas das bordas da
     janela: a barra de navegação, a faixa de segurança, a faixa do cliente e
     o fechamento. O verde aparece só na ação principal e em sinais de estado.

   Elemento assinatura
     A chave-senha de cinco palavras em mono (farol canela ponte vento safira),
     em uma régua de cinco casas separadas por fios. Ela nasce no hero, volta
     nos passos, na aba do cliente e no fechamento. Em volta dela vive uma
     família de etiquetas de vidro que atravessam a borda das fotos, e todo
     rótulo de seção começa com o ponto duplo verde e azul da marca.

   Cor
     papel #F3F5F8 · papel fundo #E9EDF2 · superfície #FBFCFD
     tinta #0B1726 · texto #3A4757 · texto suave #5B6777
     navy #0B1726 · verde #10B981 (luz #19D3A2) · azul #155EEF (uso raro)

   Tipografia
     Títulos: Outfit 500 e 600, entrelinha 1.02 a 1.08, espaçamento negativo
     Texto: Inter 400 a 600, 17 a 19 px, entrelinha 1.6
     Rótulos: IBM Plex Mono 500, 11 a 12 px, maiúsculas, espaçados
     Escala: hero até 4.75rem · h2 até 3.375rem · h3 1.19 a 1.375rem

   Espaço e grade
     Base de 4 px: 4 8 12 16 24 32 48 64 96
     Seção: clamp(88px, 10vw, 168px) · largura máxima 1280 px · 12 colunas
     Margem lateral: clamp(20px, 4vw, 48px)

   Raio
     12 (campos) · 18 a 20 (etiquetas e cartões pequenos) · 24 a 32 (fotos)
     28 a 44 (salas) · 999 (botões)

   Sombra
     Sempre em camadas e tingida de navy: sombra 1 (repouso), sombra 2
     (cartões), sombra de etiqueta (flutuante). Fios de 1 px com transparência.
   ========================================================================== */

:root {
  --paper: #F3F5F8;
  --paper-2: #E9EDF2;
  --surface: #FBFCFD;
  --ink: #0B1726;
  --ink-2: #3A4757;
  --ink-3: #5B6777;
  --line: rgba(11, 23, 38, .10);
  --line-2: rgba(11, 23, 38, .18);

  --navy: #0B1726;
  --navy-2: #0F1E32;
  --navy-3: #182B44;
  --on-navy: #F2F5F9;
  --on-navy-2: #AAB7C7;
  --line-navy: rgba(255, 255, 255, .11);

  --green: #10B981;
  --green-hi: #19D3A2;
  --green-ink: #08714F;
  --blue: #155EEF;
  --blue-hi: #8DB2FF;

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-h2: clamp(2rem, 1.25rem + 2.7vw, 3.375rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + .32vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --section: clamp(88px, 10vw, 168px);
  --gutter: clamp(20px, 4vw, 48px);
  --maxw: 1280px;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-room: clamp(28px, 3.4vw, 44px);
  --r-pill: 999px;

  --shadow-1: 0 1px 1px rgba(11, 23, 38, .03), 0 3px 6px -2px rgba(11, 23, 38, .05), 0 12px 24px -12px rgba(11, 23, 38, .10);
  --shadow-2: 0 1px 2px rgba(11, 23, 38, .05), 0 6px 12px -4px rgba(11, 23, 38, .07), 0 20px 40px -14px rgba(11, 23, 38, .16), 0 44px 80px -36px rgba(11, 23, 38, .22);
  --shadow-chip: 0 1px 1px rgba(11, 23, 38, .06), 0 4px 8px -2px rgba(11, 23, 38, .10), 0 16px 32px -10px rgba(11, 23, 38, .24), 0 36px 64px -28px rgba(11, 23, 38, .34);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ring: var(--paper);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* barra do celular: 10 px de topo + 68 px de altura + respiro */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(1100px 620px at 8% -6%, rgba(21, 94, 239, .05), transparent 70%),
    radial-gradient(900px 520px at 96% 0%, rgba(16, 185, 129, .06), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink-2);
  font: 400 var(--fs-body)/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b { font-weight: 600; }
button, input { font: inherit; }
[hidden] { display: none !important; }

::selection { background: rgba(16, 185, 129, .28); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}
.navbar :focus-visible,
.room :focus-visible,
.client-banner :focus-visible,
.plan-featured :focus-visible { outline-color: var(--green-hi); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.032em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.h2-line { display: block; }
.h2-soft { color: var(--ink-3); }

.lead {
  max-width: 33rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  text-wrap: pretty;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nw { white-space: nowrap; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--ink);
  font: 600 .9375rem/1 var(--font-text);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* Ícones: um só desenho, traço de 1.5 a 1.65 px em qualquer tamanho */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 18px; height: 18px; stroke-width: 2; }

/* Rótulos em mono */
.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
.mono-label {
  font: 500 .6875rem/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font: 500 .6875rem/1.3 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx {
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--ink-3);
}

/* Ponto duplo da marca: verde (escritório) e azul (cliente) */
.duo { position: relative; flex: none; width: 19px; height: 10px; }
.duo::before, .duo::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.duo::before { left: 0; background: var(--green); }
.duo::after { left: 9px; background: var(--blue); box-shadow: 0 0 0 2px var(--ring); }

/* Ícone da marca em azulejo navy, como no ícone do aplicativo */
.app-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background:
    radial-gradient(90% 90% at 20% 0%, rgba(25, 211, 162, .22), transparent 60%),
    linear-gradient(160deg, #16294A, #0B1726);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 4px rgba(11, 23, 38, .12), 0 12px 24px -8px rgba(11, 23, 38, .4);
}
.app-tile img { width: 64%; height: auto; }

.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot-green { background: var(--green); }
.dot-blue { background: var(--blue); }

/* --------------------------------------------------------------------------
   Botões e links
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  font: 600 .9375rem/1 var(--font-text);
  letter-spacing: -.012em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.975); }
.btn-has-arrow { justify-content: space-between; padding-right: 7px; }
.btn-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform .35s var(--ease);
}
.btn-arrow .icon { width: 16px; height: 16px; stroke-width: 2; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-block { display: flex; width: 100%; }
.btn-compact { min-height: 44px; padding: 0 18px; font-size: .875rem; }

.btn-primary {
  background: var(--green);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 1px 2px rgba(8, 113, 79, .28), 0 10px 22px -10px rgba(16, 185, 129, .6);
}
.btn-primary .btn-arrow { background: var(--ink); color: var(--green-hi); }
.btn-primary:hover {
  background: #1BC897;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 4px rgba(8, 113, 79, .25), 0 16px 30px -12px rgba(16, 185, 129, .75);
}

.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-ghost:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-1); }
.btn-ghost .btn-arrow { background: var(--paper-2); color: var(--ink); }
.btn-ghost:hover .btn-arrow { background: var(--ink); color: var(--green-hi); }

/* Ícone do cliente dentro de botões e legendas: pessoa em traço, azul */
.icon-client { color: var(--blue); }
.btn-line .icon-client { color: var(--blue-hi); }
.btn .icon-sm { margin-left: -4px; }

.btn-dark { background: var(--ink); color: var(--on-navy); box-shadow: 0 10px 22px -12px rgba(11, 23, 38, .55); }
.btn-dark .btn-arrow { background: rgba(255, 255, 255, .1); color: var(--green-hi); }
.btn-dark:hover { background: var(--navy-3); }

.btn-light { background: var(--on-navy); color: var(--ink); }
.btn-light:hover { background: #FFFFFF; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .6); }

.btn-blue { background: var(--blue); color: #F6F9FF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -10px rgba(21, 94, 239, .6); }
.btn-blue .btn-arrow { background: rgba(255, 255, 255, .16); }
.btn-blue:hover { background: #0F4FD3; }

.btn-line { color: var(--on-navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn-line:hover { background: rgba(255, 255, 255, .08); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font: 600 .96875rem/1.2 var(--font-text);
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 100% 1px no-repeat;
}
.link-arrow .icon { transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(5px); }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Navegação: sala navy flutuante
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  z-index: 60;
  top: 10px;
  left: 0;
  right: 0;
  padding-inline: 10px;
  pointer-events: none;
}
.navbar {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(var(--maxw) + 40px);
  margin-inline: auto;
  /* 48 px de lockup + 10 px em cima e embaixo: barra de 68 px no celular */
  padding: 10px 10px 10px 14px;
  border-radius: 22px;
  color: var(--on-navy);
  background:
    radial-gradient(60% 220% at 0% 0%, rgba(25, 211, 162, .12), transparent 60%),
    radial-gradient(50% 220% at 100% 100%, rgba(21, 94, 239, .2), transparent 62%),
    linear-gradient(180deg, #13243C, #0B1726);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 2px 4px rgba(11, 23, 38, .10),
    0 12px 24px -8px rgba(11, 23, 38, .26),
    0 32px 56px -24px rgba(11, 23, 38, .36);
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease), padding .35s var(--ease);
}
.is-scrolled .navbar {
  background:
    radial-gradient(60% 220% at 0% 0%, rgba(25, 211, 162, .1), transparent 60%),
    radial-gradient(50% 220% at 100% 100%, rgba(21, 94, 239, .18), transparent 62%),
    linear-gradient(180deg, rgba(19, 36, 60, .9), rgba(11, 23, 38, .92));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 4px 8px rgba(11, 23, 38, .14),
    0 18px 32px -10px rgba(11, 23, 38, .36),
    0 40px 72px -28px rgba(11, 23, 38, .5);
}

.brand { display: block; flex: none; border-radius: 10px; }
.brand img { height: 48px; width: auto; max-width: none; transition: height .35s var(--ease); }

.nav-links { display: none; }
.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-login {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font: 600 .9375rem/1 var(--font-text);
  color: var(--on-navy);
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.nav-login:hover { background: rgba(255, 255, 255, .09); }
.nav-cta { display: none; }
.nav-cta-short { display: none; }

.nav-menu summary {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  list-style: none;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover { background: rgba(255, 255, 255, .14); }
.nav-menu .icon-shut, .nav-menu[open] .icon-open { display: none; }
.nav-menu:not([open]) .nav-sheet { display: none; }
.nav-menu[open] .icon-shut { display: block; }

.nav-sheet {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  /* em telas baixas (celular deitado) a folha rola por dentro, sem esconder os botões */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, #13243C, #0B1726);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 48px -12px rgba(11, 23, 38, .5), 0 48px 96px -32px rgba(11, 23, 38, .6);
}
.nav-sheet nav { padding: 0 12px; }
.nav-sheet nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font: 500 1.125rem/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--on-navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav-sheet nav a + a { border-top: 1px solid var(--line-navy); }
.nav-sheet nav a:hover { color: var(--green-hi); }
.nav-sheet-actions { display: grid; gap: 8px; margin-top: 12px; }

/* A partir de 375 px a ação principal entra na barra e "Entrar" vai para o menu */
@media (min-width: 375px) and (max-width: 767px) {
  .nav-login { display: none; }
  .nav-cta { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: .875rem; }
}
@media (min-width: 375px) and (max-width: 559px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}
/* entre 375 e 400 px a barra fecha o respiro e o lockup fica no mínimo da marca (46 px) */
@media (min-width: 375px) and (max-width: 400px) {
  .navbar { gap: 6px; padding-left: 12px; }
  .brand img { height: 46px; }
  .nav-actions { gap: 5px; }
  .nav-cta { padding: 0 12px; }
}
@media (min-width: 768px) {
  /* 64 px de lockup + 8 px em cima e embaixo: pílula de 80 px; ao rolar, 60 + 4 + 4 = 68 px */
  html { scroll-padding-top: 108px; }
  .site-header { top: 14px; padding-inline: clamp(12px, 2vw, 28px); }
  .navbar { gap: 20px; padding: 8px 10px 8px 20px; border-radius: 28px; }
  .is-scrolled .navbar { padding-block: 4px; }
  .brand img { height: 64px; }
  .is-scrolled .brand img { height: 60px; }
  .nav-actions { gap: 8px; }
  .nav-login { display: inline-flex; }
  .nav-cta { display: inline-flex; }
  .nav-sheet { left: auto; width: 340px; max-height: calc(100vh - 118px); max-height: calc(100dvh - 118px); }
}
@media (min-width: 1120px) {
  .nav-menu { display: none; }
  .nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
  .nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 15px;
    border-radius: var(--r-pill);
    font: 500 .9375rem/1 var(--font-text);
    color: var(--on-navy-2);
    text-decoration: none;
    transition: color .2s var(--ease), background-color .2s var(--ease);
  }
  .nav-links a:hover { color: var(--on-navy); background: rgba(255, 255, 255, .07); }
  .nav-links a[aria-current="true"] { color: var(--on-navy); }
  .nav-links a[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 14px;
    height: 2px;
    margin-left: -7px;
    border-radius: 2px;
    background: var(--green-hi);
  }
  .nav-actions { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Palco de foto e etiquetas de vidro (família da assinatura)
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--navy-2);
  isolation: isolate;
}
.stage picture { display: block; width: 100%; height: 100%; }
.stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  pointer-events: none;
}
.stage-chips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-pill);
  background: rgba(251, 252, 253, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1px rgba(11, 23, 38, .05), var(--shadow-chip);
  font: 600 .8125rem/1 var(--font-text);
  color: var(--ink);
  white-space: nowrap;
}
.chip .icon { color: var(--green-ink); }
.chip .mono { font-size: .75rem; font-weight: 400; color: var(--ink-3); }
.chip-dark {
  background: rgba(13, 27, 45, .74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-chip);
  color: var(--on-navy);
  font-weight: 500;
}
.chip-dark .icon { color: var(--green-hi); }
.chip-dark .mono { color: var(--green-hi); }
.chip-card {
  display: block;
  padding: 14px;
  border-radius: 20px;
  background: rgba(251, 252, 253, .93);
  font-weight: 400;
  white-space: normal;
}
.chip-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chip-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(16, 185, 129, .15);
}
.chip-icon-blue { background: rgba(21, 94, 239, .1); }
.chip .chip-icon-blue .icon { color: var(--blue); }
.chip-note { margin-left: auto; font: 500 .75rem/1 var(--font-text); color: var(--ink-3); }
.chip-note-green { color: var(--green-ink); }
.chip-foot { margin-top: 10px; font-size: .75rem; line-height: 1.4; color: var(--ink-3); }

/* A régua da chave-senha: cinco casas em mono */
.keywords {
  display: flex;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 500 .75rem/1 var(--font-mono);
  color: var(--ink);
}
.keywords li { flex: 1 1 auto; padding: 12px 8px; text-align: center; white-space: nowrap; }
.keywords li + li { box-shadow: inset 1px 0 0 var(--line); }
.keywords-sm { font-size: .6875rem; border-radius: 10px; }
.keywords-sm li { padding: 9px 5px; }
.keywords-ghost { max-width: 440px; margin-top: 24px; font-size: .8125rem; }
.keywords-ghost li { padding: 15px 6px; }

@media (min-width: 768px) {
  .keywords { font-size: .8125rem; }
  .keywords li { padding: 12px 10px; }
  .keywords-sm { font-size: .6875rem; }
  .keywords-sm li { padding: 9px 5px; }
  .keywords-ghost { font-size: .9375rem; }
  .keywords-ghost li { padding: 16px 10px; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-top: 92px; }
.hero-grid {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
}
.hero-head { grid-column: 2; container-type: inline-size; }
.hero-head .eyebrow { margin-bottom: 14px; }
.hero h1 {
  font-size: clamp(2.125rem, 10vw, 4.5rem);
  font-size: clamp(2.125rem, 12.2cqi, 4.75rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.036em;
}
.h1-line { display: block; }

.hero-stage {
  grid-column: 2;
  height: clamp(236px, 64vw, 460px);
  margin-top: 22px;
  border-radius: 24px;
  box-shadow: 0 40px 72px -44px rgba(11, 23, 38, .6);
}
/* no celular entra a foto larga, encostada à direita: o celular da foto fica
   inteiro, com o ar que o próprio arquivo tem depois dele (uns 9 a 10 px) */
.hero-stage .stage-img { object-position: 100% 50%; }

.hero-chip-lock { top: 12px; left: 12px; padding: 8px 13px 8px 10px; font-size: .75rem; }
.hero-chip-key { left: 12px; right: 20px; bottom: -74px; }
.hero-chip-key .chip-foot { display: none; }
.hero-chip-read { display: none; }

.hero-body { grid-column: 2; margin-top: 98px; }
.hero-body .cta-row { margin-top: 24px; }
.hero-body .btn { width: 100%; }
.support {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 20px;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.support span { display: inline-flex; align-items: center; gap: 8px; }
.support .dot { width: 6px; height: 6px; }

@media (max-width: 380px) {
  .hero-head .eyebrow { font-size: .65rem; letter-spacing: .08em; }
}
@media (max-width: 400px) {
  .hero-chip-key { padding: 12px; }
  .hero-chip-key .keywords { font-size: .6875rem; }
  .hero-chip-key .keywords li { padding: 11px 4px; }
}
@media (min-width: 560px) {
  .hero-body .btn { width: auto; }
}
@media (min-width: 768px) {
  .hero { padding-top: 132px; }
  .hero-head .eyebrow { margin-bottom: 22px; }
  .eyebrow { font-size: .75rem; letter-spacing: .14em; }
  .hero-stage { grid-column: 2 / 4; margin-top: 36px; border-radius: 32px 0 0 32px; }
  .hero-stage .stage-img { object-position: 60% 50%; }
  .hero-chip-lock { top: 22px; left: 22px; padding: 10px 16px 10px 12px; font-size: .8125rem; }
  .hero-chip-key { left: 28px; right: auto; bottom: -44px; width: 350px; padding: 16px; }
  .hero-chip-key .chip-foot { display: block; }
  .hero-chip-read { display: inline-flex; right: 16%; bottom: -19px; }
  .hero-body { margin-top: 84px; }
  .hero-body .cta-row { margin-top: 32px; }
}
@media (min-width: 1100px) {
  .hero { padding-top: 122px; }
  .hero-grid {
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 660px) minmax(0, 560px) minmax(var(--gutter), 1fr);
    grid-template-rows: auto auto;
  }
  .hero-head { grid-column: 2; grid-row: 1; align-self: end; padding-right: 40px; }
  /* de 1100 a 1279 px a coluna de texto tem uns 494 px: os botões fecham o
     respiro (uns 476 px no total) para ficarem em uma linha só */
  .hero-body { grid-column: 2; grid-row: 2; align-self: start; margin-top: 28px; padding-right: 12px; }
  .hero-body .cta-row { gap: 8px; }
  .hero-body .btn { gap: 10px; padding-inline: 16px; }
  .hero-body .btn-has-arrow { padding-right: 6px; }
  .hero-stage {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    height: clamp(480px, min(46vw, 100vh - 236px), 640px);
    height: clamp(480px, min(46vw, 100svh - 236px), 640px);
    margin-top: 0;
  }
  .hero-stage .stage-img { object-position: 100% 50%; }
  .hero-chip-lock { top: 30px; left: -24px; }
  .hero-chip-key { left: -28px; bottom: 56px; }
  .hero-chip-read { right: clamp(40px, 5vw, 76px); bottom: -19px; }
}
@media (min-width: 1280px) {
  .hero-grid { grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 600px) minmax(0, 680px) minmax(var(--gutter), 1fr); }
  .hero-head { padding-right: 48px; }
  .hero-body { padding-right: 40px; }
  .hero-chip-key { left: -52px; }
  .hero-body .cta-row { gap: 12px; }
  .hero-body .btn { gap: 12px; padding-inline: 20px; }
  .hero-body .btn-has-arrow { padding-right: 7px; }
}

/* --------------------------------------------------------------------------
   Quatro pilares: livro-razão com fios. Índice em mono, título, texto,
   ícone de linha em círculo à direita; os pilares 03 e 04 ganham uma vinheta
   desenhada na linguagem das etiquetas de vidro.
   -------------------------------------------------------------------------- */
.pillars { padding-top: clamp(56px, 7vw, 96px); }
.pillars .eyebrow { margin-bottom: 18px; }
.pillars-list { border-top: 1px solid var(--line); }
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px 16px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}
.pillar .idx { grid-column: 1; grid-row: 1; align-self: center; }
.pillar h3 { grid-column: 1; grid-row: 2; }
.pillar p { grid-column: 1; grid-row: 3; font-size: .96875rem; line-height: 1.6; }
.pillar-icon {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  align-self: start;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease);
}
.pillar-icon .icon { width: 20px; height: 20px; }
.pillar:hover .pillar-icon { background: var(--ink); color: var(--green-hi); box-shadow: none; transform: rotate(-8deg); }
.vignette { grid-column: 1 / -1; grid-row: 4; margin-top: 14px; }

/* Vinheta: lista de arquivos cifrados */
.file-list,
.channel-list {
  display: grid;
  /* trilha com mínimo zero: a linha aceita a largura da vinheta e o nome do
     arquivo ganha reticências em vez de estourar para fora */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(11, 23, 38, .04);
}
.file-list li,
.channel-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px 0 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1px 2px rgba(11, 23, 38, .05), 0 6px 14px -8px rgba(11, 23, 38, .18);
  font: 500 .8125rem/1.2 var(--font-text);
  color: var(--ink);
}
.file-list .icon,
.channel-list .icon { color: var(--ink-3); stroke-width: 1.75; }
.file-list span,
.channel-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-list span { white-space: normal; overflow: visible; padding-block: 8px; line-height: 1.3; }
.file-list em {
  flex: none;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(16, 185, 129, .12);
  font: 500 .625rem/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .06em;
  color: var(--green-ink);
}

/* Vinheta: o canal oficial ativo e o número pessoal fora do atendimento */
.channel-list .is-on .icon { color: var(--ink); }
.channel-list .is-on .dot { flex: none; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.channel-list .is-off {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-3);
  font-weight: 400;
}
.channel-list .is-off .icon { color: rgba(91, 103, 119, .6); }

@media (min-width: 768px) {
  .pillar {
    grid-template-columns: 56px minmax(0, 1fr) 52px;
    gap: 10px 24px;
    padding: 30px 0 32px;
  }
  .pillar .idx { grid-row: 1; margin-top: .35em; align-self: start; }
  .pillar h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .pillar p { grid-column: 2; grid-row: 2; max-width: 54ch; }
  .pillar-icon { grid-column: 3; grid-row: 1 / 3; width: 52px; height: 52px; justify-self: end; align-self: start; }
  .pillar-icon .icon { width: 22px; height: 22px; }
  .vignette { grid-column: 2; grid-row: 3; max-width: 420px; margin-top: 12px; }
}
@media (min-width: 1100px) {
  .pillar {
    grid-template-columns: 56px minmax(0, 3.2fr) minmax(0, 3.8fr) minmax(0, 4.1fr) 52px;
    align-items: center;
    gap: 0 clamp(20px, 2.4vw, 36px);
    padding: clamp(24px, 2.4vw, 34px) 0;
  }
  .pillar .idx { grid-row: 1; margin-top: 0; align-self: center; }
  .pillar h3 { grid-column: 2; grid-row: 1; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); }
  .pillar p { grid-column: 3 / 5; grid-row: 1; max-width: 46ch; }
  .pillar-vig p { grid-column: 3; }
  .pillar-icon { grid-column: 5; grid-row: 1; align-self: center; }
  .vignette { grid-column: 4; grid-row: 1; min-width: 0; max-width: none; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   O problema: sala clara rebaixada
   -------------------------------------------------------------------------- */
.problem { padding-top: var(--section); }
.problem-room {
  --ring: var(--paper-2);
  display: grid;
  gap: 32px;
  padding: 40px 22px 22px;
  border-radius: var(--r-room);
  background: var(--paper-2);
}
.problem-head h2 .h2-line { display: inline; }
.problem-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.problem-list p {
  font: 500 clamp(1.125rem, 1.02rem + .5vw, 1.4375rem)/1.32 var(--font-display);
  letter-spacing: -.014em;
  color: var(--ink);
  text-wrap: balance;
}
.problem-close {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  padding: 16px 20px 16px 14px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--shadow-2);
  font: 600 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.3 var(--font-display);
  letter-spacing: -.012em;
  color: var(--ink);
}
.problem-close .app-tile { width: 52px; height: 52px; border-radius: 16px; }

@media (min-width: 768px) {
  .problem-room { padding: clamp(40px, 6vw, 96px); gap: 48px; }
  .problem-list li { gap: 28px; padding: 26px 0; }
  .problem-close { margin-top: 12px; padding: 20px 28px 20px 20px; gap: 18px; }
  .problem-close .app-tile { width: 60px; height: 60px; border-radius: 18px; }
}
@media (min-width: 1100px) {
  .problem-room {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    gap: 40px clamp(48px, 6vw, 104px);
    align-items: start;
  }
  .problem-head { grid-column: 1; grid-row: 1; container-type: inline-size; }
  /* três linhas garantidas: a linha mais longa ("não deveria se misturar") cabe na coluna */
  .problem-head h2 { font-size: clamp(2rem, 9.4cqi, 3.375rem); }
  .problem-head h2 .h2-line { display: block; }
  .problem-body { display: contents; }
  .problem-list {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
  }
  .problem-list li { align-content: center; padding: 26px 0; }
  .problem-close { grid-column: 1; grid-row: 2; align-self: end; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   O aplicativo: destaque de produto em três colunas
   -------------------------------------------------------------------------- */
.product { padding-top: var(--section); }
.product-grid { display: grid; gap: 44px; }
.product-copy .lead { margin-top: 22px; }
.product-copy .btn { margin-top: 30px; }

/* Palco: no celular, a foto dos dois aparelhos; a partir de 768 px, os dois
   celulares desenhados em HTML e CSS, com escala em unidades do contêiner */
.product-stage {
  container-type: inline-size;
  aspect-ratio: 14 / 15;
  background: #DDE2E8;
  box-shadow: 0 48px 80px -48px rgba(11, 23, 38, .45);
}
.product-stage::after { box-shadow: inset 0 0 0 1px rgba(11, 23, 38, .06); }
.product-photo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.product-photo .stage-img { object-position: 60% 50%; }
.phones { display: none; }
.product-chip-office, .product-chip-client { gap: 7px; padding: 8px 12px 8px 10px; font-size: .75rem; }
.product-chip-office { top: 40.4%; left: -12px; }
.product-chip-client { top: 45.8%; right: -12px; }

.phone {
  position: absolute;
  width: 27.4em;
  height: 54em;
  padding: .85em;
  border-radius: 4.6em;
  background: linear-gradient(155deg, #3A4D66 0%, #14233A 26%, #0B1726 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 .2em .5em rgba(11, 23, 38, .25),
    0 2.4em 4em -1.4em rgba(11, 23, 38, .5),
    0 5.5em 9em -3.4em rgba(11, 23, 38, .55);
}
/* o par ocupa 53.8em e fica centrado no palco, seja qual for a largura; o celular
   do cliente cobre só a moldura do outro (1em), e os avisos de não lida, as horas
   e o botão de novo cliente ficam inteiros à vista */
.phone-office { left: calc(50% - 27.4em); top: 9.5em; z-index: 1; }
.phone-client { left: calc(50% - 1em); top: 3em; z-index: 2; }
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 3.8em;
  overflow: hidden;
  font-family: var(--font-text);
  line-height: 1.35;
}
.phone-island { position: absolute; top: 1.1em; left: 50%; z-index: 2; width: 8.4em; height: 2.4em; margin-left: -4.2em; border-radius: 2em; background: #04080E; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 1.5em 2.4em .7em; font-weight: 600; }
.phone-status > span:first-child { font-size: 1.2em; }
.phone-bars { display: flex; align-items: flex-end; gap: .25em; }
.phone-bars i { width: .32em; border-radius: .1em; background: currentColor; }
.phone-bars i:nth-child(1) { height: .5em; }
.phone-bars i:nth-child(2) { height: .78em; }
.phone-bars i:nth-child(3) { height: 1.05em; }
.phone-bars b { position: relative; width: 2.1em; height: 1.05em; margin-left: .45em; border-radius: .32em; border: 1px solid currentColor; opacity: .9; }
.phone-bars b::after { content: ""; position: absolute; inset: 1px 28% 1px 1px; border-radius: .16em; background: currentColor; }

.ava {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.3em;
  height: 3.3em;
  border-radius: 50%;
  background: #22374F;
  color: #CFE0F2;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: .02em;
}
.ava-ink { background: var(--ink); color: var(--green-hi); }

/* Tela do escritório: lista de clientes em navy */
.phone-office .phone-screen { background: linear-gradient(180deg, #13243C 0%, #0D1B2D 100%); color: var(--on-navy); }
.ui-top { display: flex; align-items: center; justify-content: space-between; padding: 1.3em 1.8em .9em; }
.ui-top strong { font: 600 2.15em/1 var(--font-display); letter-spacing: -.03em; }
.ui-new { display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 1.05em; background: rgba(255, 255, 255, .1); color: var(--green-hi); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ui-new .icon { width: 1.7em; height: 1.7em; stroke-width: 1.75; }
.ui-search { display: flex; align-items: center; gap: .6em; margin: 0 1.35em .9em; padding: .72em 1em; border-radius: 1em; background: rgba(255, 255, 255, .07); color: var(--on-navy-2); font-size: 1.2em; }
.ui-search .icon { width: 1.3em; height: 1.3em; }
.ui-rows { padding: 0 .8em; }
.ui-rows li { display: flex; align-items: center; gap: 1em; padding: 1em .95em; border-radius: 1.5em; }
.ui-rows li:first-child { background: rgba(255, 255, 255, .065); }
.ui-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-row-text strong { font-size: 1.28em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row-text small { font-size: 1.12em; color: var(--on-navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-unread .ui-row-text small { color: #D8E1EA; }
.ui-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .4em; }
.ui-row-meta em { font-style: normal; font-size: 1em; color: var(--on-navy-2); }
.ui-row-meta b { display: grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .4em; border-radius: 1em; background: var(--green); color: var(--ink); font-size: 1em; font-weight: 600; }

/* Tela do cliente: conversa em papel */
.phone-client .phone-screen { background: #F1F3F6; color: var(--ink); }
.ui-head { display: flex; align-items: center; gap: 1em; padding: .9em 1.6em 1.15em; border-bottom: 1px solid var(--line); }
.ui-head-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-head-who strong { font-size: 1.32em; font-weight: 600; }
.ui-head-who small { font-size: 1.08em; color: var(--green-ink); }
.ui-head-lock { width: 1.9em; height: 1.9em; color: var(--ink-3); }
.ui-chat { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: .85em; padding: 1.3em 1.4em; }
.ui-day { align-self: center; font: 500 .95em/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bub { max-width: 86%; padding: .72em 1em; border-radius: 1.25em; font-size: 1.22em; line-height: 1.38; }
.bub-in { background: var(--surface); color: var(--ink); border-bottom-left-radius: .35em; box-shadow: 0 1px 0 rgba(11, 23, 38, .05), 0 .6em 1.3em -.8em rgba(11, 23, 38, .3); }
.bub-out { align-self: flex-end; background: #CDF3E5; color: #0A3A2B; border-bottom-right-radius: .35em; }
.bub-meta { display: flex; justify-content: flex-end; align-items: center; gap: .3em; margin-top: .25em; font-size: .8em; opacity: .8; }
.bub-meta .icon { width: 1.35em; height: 1.35em; stroke-width: 1.75; color: var(--green-ink); }
.bub-file { display: flex; align-items: center; gap: .8em; }
.bub-pdf { display: grid; place-items: center; flex: none; width: 3.3em; height: 3.8em; border-radius: .7em; background: var(--ink); color: var(--green-hi); font: 500 .7em/1 var(--font-mono); }
.bub-file-text { display: flex; flex-direction: column; }
.bub-file-text strong { font-weight: 600; }
.bub-file-text small { font-size: .82em; color: var(--ink-3); }
.ui-timer { align-self: center; display: inline-flex; align-items: center; gap: .5em; padding: .42em .95em; border-radius: 2em; border: 1px dashed var(--line-2); font: 500 .98em/1 var(--font-mono); color: var(--ink-3); }
.ui-timer .icon { width: 1.3em; height: 1.3em; }
.bub-typing { display: flex; gap: .36em; padding: .95em 1em; }
.bub-typing i { width: .5em; height: .5em; border-radius: 50%; background: var(--ink-3); opacity: .45; }
.ui-compose { display: flex; align-items: center; gap: .9em; margin: 0 1.2em 1.7em; padding: .7em .7em .7em 1.3em; border-radius: 2.4em; background: var(--surface); color: var(--ink-3); box-shadow: var(--shadow-1); }
.ui-compose > span:nth-child(2) { flex: 1; font-size: 1.2em; }
.ui-compose > .icon { width: 1.9em; height: 1.9em; }
.ui-send { display: grid; place-items: center; width: 3.3em; height: 3.3em; border-radius: 50%; background: var(--ink); color: var(--green-hi); }
.ui-send .icon { width: 1.55em; height: 1.55em; }

/* Lista de recursos: a etiqueta em mono é o marcador, no lugar do ícone fino */
.specs { border-bottom: 1px solid var(--line); }
.spec { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.spec h3 { margin-top: 14px; font-size: 1.125rem; }
.spec p { margin-top: 4px; font-size: .96875rem; line-height: 1.5; }
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .02em;
  color: var(--ink);
  white-space: nowrap;
}
.spec-chip .icon { width: 16px; height: 16px; stroke-width: 1.75; color: var(--green-ink); }
.spec-chip-pin { gap: 5px; padding-left: 12px; }
.spec-chip-pin i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.spec-chip-pin i.on { background: var(--ink); box-shadow: none; }
.spec-chip-pin i:last-of-type { margin-right: 5px; }

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
  .product-copy { grid-column: 1; grid-row: 1; }
  .specs { grid-column: 2; grid-row: 1; }
  .product-stage { grid-column: 1 / -1; grid-row: 2; width: min(100%, 640px); aspect-ratio: auto; margin-inline: auto; }
  .product-photo { display: none; }
  .phones {
    position: relative;
    display: block;
    height: 56em;
    font-size: 9px;
    font-size: clamp(7px, 1.75cqi, 9.6px);
    border-radius: inherit;
    overflow: hidden;
    background:
      radial-gradient(70% 60% at 100% 0%, rgba(25, 211, 162, .16), transparent 62%),
      radial-gradient(60% 70% at 0% 100%, rgba(21, 94, 239, .14), transparent 62%),
      #E2E7ED;
  }
  .product-chip-office, .product-chip-client { gap: 9px; padding: 10px 16px 10px 12px; font-size: .8125rem; }
  .product-chip-office { top: 38%; left: -18px; }
  /* cruza o canto do palco acima do celular do cliente (que começa 3em abaixo do topo) */
  .product-chip-client { top: -16px; right: -18px; }
}
@media (min-width: 1100px) {
  .product-grid {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.3fr) minmax(0, .84fr);
    gap: clamp(40px, 4.5vw, 72px);
    align-items: center;
  }
  .product-copy { grid-column: 1; grid-row: 1; }
  /* largura vem da coluna da grade: sem margem automática, que encolheria o contêiner a zero */
  .product-stage { grid-column: 2; grid-row: 1; width: auto; margin-inline: 0; }
  .specs { grid-column: 3; grid-row: 1; }
  .product-copy h2 { font-size: clamp(2.125rem, 3.1vw, 2.75rem); }
}

/* --------------------------------------------------------------------------
   Salas navy
   -------------------------------------------------------------------------- */
.room {
  --ring: var(--navy);
  margin: var(--section) 8px 0;
  padding-block: clamp(56px, 8vw, 128px);
  border-radius: var(--r-room);
  color: var(--on-navy-2);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(25, 211, 162, .11), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(21, 94, 239, .2), transparent 62%),
    var(--navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.room .wrap { width: min(100% - 36px, var(--maxw)); }
.room h2, .room h3 { color: var(--on-navy); }
.room .eyebrow, .room .mono-label { color: var(--on-navy-2); }

@media (min-width: 768px) {
  .room { margin-inline: clamp(10px, 1.4vw, 20px); }
  .room .wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); }
}

/* Segurança */
.security-top { display: grid; gap: 36px; }
.security h2 {
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.security-copy .lead { margin-top: 24px; max-width: 28rem; }

.cipher {
  position: relative;
  padding: 8px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px var(--line-navy), inset 0 1px 0 rgba(255, 255, 255, .12), 0 48px 80px -48px rgba(0, 0, 0, .7);
}
.cipher-radio {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 1px;
  height: 1px;
  margin: 0;
  clip-path: inset(50%);
  appearance: none;
  -webkit-appearance: none;
}
.cipher-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: 20px;
  background: rgba(4, 10, 18, .5);
  box-shadow: inset 0 0 0 1px var(--line-navy);
}
.cipher-switch::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 15px;
  background: var(--on-navy);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 18px -6px rgba(0, 0, 0, .55);
  transition: transform .45s var(--ease);
}
.cipher-switch label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 8px;
  border-radius: 15px;
  font: 600 .875rem/1.15 var(--font-text);
  color: var(--on-navy-2);
  text-align: center;
  cursor: pointer;
  transition: color .3s var(--ease);
}
.cipher-switch label .icon { display: none; }
.cipher-switch label:hover { color: var(--on-navy); }
/* em 360 px as duas metades ficam em uma linha só, na mesma altura */
@media (max-width: 400px) {
  .cipher-switch label { padding: 0 4px; font-size: .8125rem; letter-spacing: -.01em; }
}
#visao-chave:checked ~ .cipher-switch label[for="visao-chave"],
#visao-servidor:checked ~ .cipher-switch label[for="visao-servidor"] { color: var(--ink); }
#visao-servidor:checked ~ .cipher-switch::before { transform: translateX(100%); }
#visao-chave:focus-visible ~ .cipher-switch label[for="visao-chave"],
#visao-servidor:focus-visible ~ .cipher-switch label[for="visao-servidor"] {
  outline: 2px solid var(--green-hi);
  outline-offset: 3px;
}

.cipher-screen { padding: 26px 14px 16px; }
.route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 26px;
  font: 500 .75rem/1.3 var(--font-text);
  text-align: center;
}
.route::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 16.66%;
  right: 16.66%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 4px, transparent 4px 10px);
}
.route li { display: grid; justify-items: center; gap: 10px; transition: color .35s var(--ease); }
.route-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #172941;
  box-shadow: inset 0 0 0 1px var(--line-navy);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
#visao-chave:checked ~ .cipher-screen .route-end,
#visao-servidor:checked ~ .cipher-screen .route-mid { color: var(--on-navy); }
#visao-chave:checked ~ .cipher-screen .route-end .route-node {
  background: #123C42;
  box-shadow: inset 0 0 0 1px rgba(25, 211, 162, .6), 0 0 0 5px rgba(25, 211, 162, .08);
  color: var(--green-hi);
}
#visao-servidor:checked ~ .cipher-screen .route-mid .route-node {
  background: #2B3D55;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 5px rgba(255, 255, 255, .06);
  color: var(--on-navy);
}

.cipher-sender {
  margin-bottom: 10px;
  padding-left: 6px;
  font: 500 .6875rem/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-navy-2);
}
.cipher-stack { display: grid; }
.cipher-view { grid-area: 1 / 1; display: grid; align-content: start; justify-items: start; gap: 10px; }
.bubble {
  padding: 15px 18px;
  border-radius: 20px 20px 20px 6px;
  background: var(--on-navy);
  color: var(--ink);
  font: 500 clamp(1.0625rem, 1rem + .4vw, 1.25rem)/1.4 var(--font-text);
  letter-spacing: -.01em;
}
/* O balão cifrado é o único que embaralha: mono de largura fixa e altura
   mínima, então a troca de letras nunca muda o tamanho do cartão */
.bubble-code {
  min-height: 3.5em;
  background: rgba(4, 10, 18, .55);
  box-shadow: inset 0 0 0 1px var(--line-navy);
  color: var(--green-hi);
  font: 500 clamp(.9375rem, .85rem + .4vw, 1.125rem)/1.6 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  word-spacing: .15em;
}
.bubble-meta { display: flex; align-items: center; gap: 8px; padding-left: 6px; font-size: .8125rem; line-height: 1.2; }
.bubble-meta .icon { color: var(--green-hi); }
.bubble-meta .mono { font-size: .75rem; font-weight: 400; }

.cipher-caption {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line-navy);
  font-size: .875rem;
  line-height: 1.5;
}
#visao-chave:checked ~ .cipher-screen .cipher-view-code,
#visao-servidor:checked ~ .cipher-screen .cipher-view-plain { visibility: hidden; }
#visao-chave:checked ~ .cipher-screen .cipher-caption-code,
#visao-servidor:checked ~ .cipher-screen .cipher-caption-plain { display: none; }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(48px, 6vw, 96px);
  border-top: 1px solid var(--line-navy);
}
.fact { padding: 26px 12px 26px 0; }
.fact:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line-navy); }
.fact:nth-child(-n+2) { border-bottom: 1px solid var(--line-navy); }
.fact dt {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font: 500 clamp(3rem, 2rem + 4vw, 5rem)/1 var(--font-display);
  letter-spacing: -.045em;
  color: var(--on-navy);
}
.unit {
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-hi);
}
.unit-pre {
  align-self: flex-start;
  margin: .2em -2px 0 0;
  font: 500 .4em/1 var(--font-display);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--on-navy-2);
}
/* O zero vazado: só o contorno, para o "nada" ficar visível */
@supports (-webkit-text-stroke: 1px #000) {
  .num-hollow {
    color: transparent;
    -webkit-text-stroke: 2px var(--on-navy);
    paint-order: stroke fill;
  }
}
.fact dd { max-width: 15rem; margin-top: 12px; font-size: .9375rem; line-height: 1.5; }
.tech {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line-navy);
  font: 400 .6875rem/1.5 var(--font-mono);
  letter-spacing: .04em;
}
.tech .icon { color: var(--green-hi); }
/* as duas partes quebram como blocos, nunca no meio de uma frase */
.tech span { white-space: nowrap; }
.tech span + span::before { content: "·"; margin-right: 10px; }
@media (max-width: 479px) {
  .tech span + span { flex-basis: 100%; padding-left: 28px; }
  .tech span + span::before { display: none; }
}

@media (min-width: 480px) {
  .cipher-switch label { font-size: .9375rem; }
  .cipher-switch label .icon { display: block; }
  .cipher-screen { padding: 30px 22px 20px; }
}
@media (min-width: 768px) {
  .cipher { padding: 10px; }
  .fact dd { font-size: .96875rem; }
  .tech { font-size: .75rem; letter-spacing: .06em; }
}
@media (min-width: 1100px) {
  .security-top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
  }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fact, .fact:nth-child(even), .fact:nth-child(-n+2) { position: relative; padding: 40px 28px 36px; border: 0; }
  .fact:first-child { padding-left: 0; }
  .fact + .fact::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 36px;
    left: 0;
    width: 1px;
    background: var(--line-navy);
  }
  .tech { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Como funciona: três passos em degraus, com a interface desenhada
   -------------------------------------------------------------------------- */
.how { padding-top: var(--section); }
.sec-head h2 { max-width: 13em; }
.steps { display: grid; gap: 44px; margin-top: clamp(36px, 5vw, 64px); }
.step-ui {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 330px;
  padding: 26px 20px;
  border-radius: 28px;
  background: var(--paper-2);
  overflow: hidden;
}
.step-ui-dark {
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(25, 211, 162, .14), transparent 60%),
    radial-gradient(70% 80% at 0% 100%, rgba(21, 94, 239, .22), transparent 62%),
    var(--navy);
}
.step-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin-top: 24px; }
.step-num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 500 .75rem/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--ink);
}
.step-text h3 { align-self: center; }
.step-text p { grid-column: 2; font-size: .96875rem; line-height: 1.6; }

.ui-card {
  width: min(100%, 300px);
  padding: 18px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(11, 23, 38, .05), var(--shadow-2);
  font-size: .8125rem;
  line-height: 1.4;
}
.ui-title { margin-bottom: 12px; font: 600 .9375rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.ui-field { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.ui-field span { color: var(--ink-3); }
.ui-field b { font-weight: 500; color: var(--ink); }
.ui-key { padding-top: 14px; border-top: 1px solid var(--line); }
.ui-key .mono-label { display: block; margin-bottom: 9px; font-size: .625rem; }

.ui-sheet {
  width: min(74%, 228px);
  margin: -8px 18% 0 0;
  padding: 22px 20px 96px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
}
.sk { display: block; height: 6px; margin-top: 9px; border-radius: 3px; background: var(--paper-2); }
.sk-short { width: 58%; }
.sk-gap { margin-top: 22px; }
.ui-keycard {
  position: absolute;
  right: 9%;
  bottom: 9%;
  width: min(60%, 200px);
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 2px 4px rgba(0, 0, 0, .2), 0 20px 40px -12px rgba(0, 0, 0, .6);
}
.ui-keycard .mono-label { display: block; font-size: .625rem; white-space: nowrap; }
.ui-clip { position: absolute; top: -13px; right: 18px; color: var(--ink-3); }
@media (max-width: 400px) {
  .ui-keycard { width: min(68%, 220px); padding: 14px 16px; }
  .ui-keycard .mono-label { font-size: .5625rem; letter-spacing: .1em; }
}
.keylist { display: grid; gap: 7px; margin-top: 12px; counter-reset: palavra; font: 500 .8125rem/1 var(--font-mono); color: var(--ink); }
.keylist li { display: flex; gap: 12px; counter-increment: palavra; }
.keylist li::before { content: counter(palavra); width: 1ch; color: var(--ink-3); }

.ui-chat { display: grid; gap: 8px; }
.ui-chat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ui-chat-head p { display: grid; gap: 4px; }
.ui-chat-head b { font: 600 .875rem/1.1 var(--font-display); color: var(--ink); }
.ui-chat-head p span { display: flex; align-items: center; gap: 5px; font-size: .6875rem; line-height: 1; color: var(--green-ink); }
.ui-chat-head .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-navy);
  font: 600 .6875rem/1 var(--font-text);
  letter-spacing: .02em;
}
.avatar-b { background: var(--navy-3); }
.avatar-c { background: var(--green-ink); }
.msg { max-width: 88%; padding: 9px 12px; border-radius: 15px; }
.msg-out { justify-self: end; border-bottom-right-radius: 5px; background: #CDF3E5; color: #0A3A2B; }
.msg-in { justify-self: start; border-bottom-left-radius: 5px; background: var(--paper-2); color: var(--ink); }
.msg-meta { justify-self: end; display: flex; align-items: center; gap: 5px; margin-top: -3px; font-size: .6875rem; line-height: 1; color: var(--ink-3); }
.msg-meta .icon { width: 14px; height: 14px; stroke-width: 2.4; color: var(--green-ink); }
.msg-meta .mono { font-size: .625rem; font-weight: 400; }
.msg-typing { display: inline-flex; gap: 4px; padding: 12px 13px; }
.msg-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  /* o terceiro passo ocupa a linha inteira: interface à esquerda, texto à direita */
  .step:nth-child(3) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 32px;
    align-items: center;
  }
  .step:nth-child(3) .step-text { margin-top: 0; }
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .step:nth-child(2) { margin-top: 56px; }
  .step:nth-child(3) { grid-column: auto; display: block; margin-top: 112px; }
  .step:nth-child(3) .step-text { margin-top: 24px; }
  .step-ui { min-height: 360px; }
}

/* --------------------------------------------------------------------------
   Para o escritório: foto sangrando à esquerda, colagem e etiqueta
   -------------------------------------------------------------------------- */
.office { padding-top: var(--section); }
.office-grid { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); }
.office-media { position: relative; grid-column: 1 / 3; padding-bottom: 118px; }
.office-stage {
  aspect-ratio: 3 / 2;
  border-radius: 0 24px 24px 0;
  background: #D9DEE5;
  box-shadow: 0 48px 80px -48px rgba(11, 23, 38, .5);
}
/* sangria à esquerda: o enquadramento guarda o rosto da advogada e o monitor */
.office-stage .stage-img { object-position: 42% 50%; }
.office-inset {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 26px;
  width: 112px;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  box-shadow: 0 0 0 6px var(--paper), var(--shadow-2);
}
.office-inset img { width: 100%; height: 100%; object-fit: cover; object-position: 69% 50%; border-radius: inherit; }
.office-chip { left: var(--gutter); bottom: 0; width: 204px; }
.mini-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .8125rem; line-height: 1.2; }
.mini-list li + li { border-top: 1px solid var(--line); }
.mini-list b { font-weight: 500; color: var(--ink); }
.mini-list .avatar { width: 28px; height: 28px; font-size: .625rem; }
.count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--green);
  color: var(--ink);
  font: 600 .6875rem/1 var(--font-text);
}
.seen { display: grid; margin-left: auto; }
.chip .seen .icon { color: var(--ink-3); }

.office-copy { grid-column: 2; margin-top: 36px; }
.office-copy .lead { margin-top: 22px; }
.devices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 28px 0 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 500 .9375rem/1 var(--font-text);
  color: var(--ink);
}
.devices li { display: inline-flex; align-items: center; gap: 10px; }

@media (min-width: 768px) {
  .office-media { padding-bottom: 60px; }
  .office-stage { aspect-ratio: 16 / 10; border-radius: 0 32px 32px 0; }
  .office-stage .stage-img { object-position: 50% 50%; }
  .office-inset { right: 32px; bottom: 0; width: 180px; border-radius: 24px; box-shadow: 0 0 0 8px var(--paper), var(--shadow-2); }
  .office-chip { bottom: 6px; width: 240px; padding: 16px; }
  .office-copy { margin-top: 48px; }
}
@media (min-width: 1100px) {
  .office-grid {
    grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 700px) minmax(0, 580px) minmax(var(--gutter), 1fr);
    align-items: center;
  }
  .office-stage { aspect-ratio: auto; height: clamp(440px, 37vw, 540px); }
  .office-stage .stage-img { object-position: 70% 50%; }
  .office-inset { right: -44px; width: clamp(160px, 14.5vw, 208px); }
  .office-chip { left: max(var(--gutter), calc(100% - 700px)); bottom: 14px; }
  .office-copy { grid-column: 3; margin-top: 0; padding: 0 0 60px clamp(72px, 8vw, 116px); }
}

/* --------------------------------------------------------------------------
   Para o cliente: faixa navy arredondada com foto
   -------------------------------------------------------------------------- */
.client { padding-top: var(--section); }
.client-banner {
  --ring: var(--navy);
  display: grid;
  padding: 10px;
  border-radius: var(--r-room);
  color: var(--on-navy-2);
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(21, 94, 239, .26), transparent 62%),
    radial-gradient(50% 60% at 40% 0%, rgba(25, 211, 162, .08), transparent 60%),
    var(--navy);
  box-shadow: 0 60px 96px -60px rgba(11, 23, 38, .7);
}
.client-banner h2 { color: var(--on-navy); }
.client-banner .eyebrow { color: var(--on-navy-2); }
.client-photo {
  position: relative;
  order: -1;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--r-room) - 10px);
}
.client-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 40%;
  border-radius: inherit;
}
.client-chip { left: 14px; bottom: -30px; width: 226px; }
.code-digits { display: flex; align-items: center; gap: 5px; font: 500 1.0625rem/1 var(--font-mono); color: var(--ink); }
.code-digits span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 38px;
  border-radius: 9px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}
.code-digits i { width: 7px; height: 2px; border-radius: 1px; background: var(--line-2); }

/* "Meus advogados": o cliente pode ter mais de um advogado no mesmo aplicativo */
.client-chip-lawyers {
  display: flex;
  align-items: center;
  gap: 12px;
  top: -10px;
  right: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--r-pill);
}
.ava-pair { display: flex; flex: none; }
.ava-pair .avatar { width: 30px; height: 30px; font-size: .625rem; box-shadow: 0 0 0 2px var(--surface); }
.ava-pair .avatar:first-child { position: relative; z-index: 1; }
.ava-pair .avatar + .avatar { margin-left: -8px; }
.ava-pair .avatar-b { background: var(--blue); }
.chip-lawyers-text { display: grid; gap: 3px; }
.chip-lawyers-text .mono-label { font-size: .625rem; }
.chip-lawyers-text b { font: 600 .8125rem/1.2 var(--font-text); color: var(--ink); white-space: nowrap; }

.client-copy { padding: 58px 14px 22px; }
.client-copy .lead { margin-top: 20px; }
.client-list { margin: 26px 0 30px; border-top: 1px solid var(--line-navy); }
.client-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-navy);
  font-size: .96875rem;
  line-height: 1.5;
  color: var(--on-navy);
}
.client-list .icon { margin-top: 1px; color: var(--blue-hi); }
.client-copy .btn { width: 100%; }

@media (min-width: 560px) {
  .client-copy .btn { width: auto; }
}
@media (min-width: 768px) {
  .client-banner { padding: 14px; }
  .client-photo { aspect-ratio: 16 / 9; border-radius: calc(var(--r-room) - 14px); }
  .client-copy { padding: 64px clamp(24px, 4vw, 48px) 36px; }
  .client-chip { left: 28px; width: 244px; padding: 16px; }
  /* cruza a borda de cima da foto, como no celular e no desktop (a faixa tem 14 px de margem) */
  .client-chip-lawyers { top: -12px; right: -6px; }
}
@media (min-width: 1100px) {
  .client-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
  .client-photo { order: 0; aspect-ratio: auto; min-height: 620px; }
  .client-photo img { object-position: 70% 50%; }
  .client-copy { align-self: center; padding: clamp(40px, 4.6vw, 68px) clamp(48px, 5.4vw, 84px) clamp(40px, 4.6vw, 68px) clamp(32px, 4.2vw, 58px); }
  .client-chip { left: -46px; bottom: 52px; }
  .client-chip-lawyers { top: 18px; right: -28px; }
}

/* --------------------------------------------------------------------------
   Planos
   -------------------------------------------------------------------------- */
.pricing { padding-top: var(--section); }
.pricing-head { margin-bottom: clamp(36px, 5vw, 76px); }
.pricing-note {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  font: 500 .9375rem/1.4 var(--font-text);
  color: var(--ink);
}
.pricing-note .icon { flex: none; }

/* Os 12 meses do plano anual: 10 pagos e 2 de presente */
.months { display: flex; gap: 5px; margin-top: 18px; }
.months i { width: clamp(13px, 1.6vw, 22px); height: 8px; border-radius: 4px; background: rgba(242, 245, 249, .8); }
.months i.free { background: none; box-shadow: inset 0 0 0 1.5px rgba(25, 211, 162, .75); }
.plans {
  display: grid;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.plan { display: flex; flex-direction: column; padding: 30px 24px 26px; }
.plan-name { font: 600 1.1875rem/1.2 var(--font-display); letter-spacing: -.01em; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(25, 211, 162, .14);
  box-shadow: inset 0 0 0 1px rgba(25, 211, 162, .42);
  color: var(--green-hi);
  font: 500 .6875rem/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 12px; color: var(--ink); }
.cur { align-self: flex-start; margin-top: .55em; font: 500 1.125rem/1 var(--font-display); color: var(--ink-3); }
.val { font: 600 clamp(3.5rem, 2.6rem + 3vw, 4.75rem)/.92 var(--font-display); letter-spacing: -.05em; }
.per { margin-left: 4px; font: 500 .9375rem/1 var(--font-text); color: var(--ink-3); }
.plan-desc { margin-bottom: 26px; font-size: .96875rem; line-height: 1.5; }
.plan .btn { margin-top: auto; }

.plan-featured {
  --ring: var(--navy);
  margin: 8px;
  border-radius: calc(var(--r-xl) - 8px);
  color: var(--on-navy-2);
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(25, 211, 162, .2), transparent 62%),
    radial-gradient(80% 70% at 0% 100%, rgba(21, 94, 239, .26), transparent 62%),
    var(--navy);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-2);
}
.plan-featured .plan-name, .plan-featured .price { color: var(--on-navy); }
.plan-featured .cur, .plan-featured .per { color: var(--on-navy-2); }

.included { display: grid; gap: 18px; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.included ul { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .9375rem; line-height: 1.4; color: var(--ink); }
.included li { display: flex; align-items: center; gap: 9px; }
.included .icon { color: var(--green-ink); }
.included .pricing-note { margin-top: 6px; }
.included .pricing-note .icon { color: var(--blue); }

@media (min-width: 900px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan { padding: 44px clamp(26px, 3vw, 40px) 40px; }
  .plan-desc { min-height: 3em; }
  .plan-featured { margin: -18px 0; padding-block: 52px 50px; border-radius: var(--r-xl); }
  .included { grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px; align-items: start; margin-top: 62px; }
  .included .mono-label { grid-row: 1 / 3; line-height: 21px; }
  .included .pricing-note { grid-column: 2; margin-top: 4px; border-radius: var(--r-pill); }
}

/* --------------------------------------------------------------------------
   Entrar: duas abas
   -------------------------------------------------------------------------- */
.enter { padding-top: var(--section); }
.enter-grid { display: grid; gap: 28px; }
.enter-legend { margin-top: 26px; border-top: 1px solid var(--line); }
.enter-legend li {
  display: grid;
  grid-template-columns: 18px 5.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.4;
}
.enter-legend .icon { align-self: start; margin-top: .1em; stroke-width: 1.75; color: var(--ink); }
.enter-legend .icon-client { color: var(--blue); }
.enter-legend b { font-weight: 600; color: var(--ink); }
.enter-card {
  padding: 10px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2);
}
.tablist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: 22px;
  background: var(--paper-2);
}
html:not(.js) .tablist { display: none; }
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 8px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  font: 600 .9375rem/1 var(--font-text);
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tab .icon { stroke-width: 1.75; color: var(--ink-3); transition: color .25s var(--ease); }
.tab:hover .icon, .tab[aria-selected="true"] .icon { color: var(--ink); }
.tab:hover .icon-client, .tab[aria-selected="true"] .icon-client { color: var(--blue); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 23, 38, .08), 0 8px 18px -8px rgba(11, 23, 38, .22);
}
.tabpanel { padding: 28px 16px 20px; }
.tabpanel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.js .tabpanel-title { display: none; }
html:not(.js) .tabpanel + .tabpanel { border-top: 1px solid var(--line); }
.tabpanel-text { max-width: 32rem; font-size: var(--fs-lead); line-height: 1.6; }
.tabpanel .cta-row { margin-top: 26px; }
.tabpanel .btn { width: 100%; }
.tabpanel-help { margin-top: 18px; font-size: .9375rem; color: var(--ink-3); }

@media (min-width: 560px) {
  .tabpanel .btn { width: auto; }
  .tab { gap: 10px; padding: 0 10px; font-size: 1rem; }
}
@media (min-width: 768px) {
  .tabpanel { padding: 36px 30px 30px; }
}
@media (min-width: 1100px) {
  .enter-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
  }
  .enter-legend { max-width: 26rem; margin-top: 36px; }
}

/* --------------------------------------------------------------------------
   Dúvidas
   -------------------------------------------------------------------------- */
.faq { padding-top: var(--section); }
.faq-grid { display: grid; gap: 30px; }
.faq-aside { max-width: 21rem; margin-top: 18px; font-size: .96875rem; line-height: 1.6; color: var(--ink-3); }
.faq-aside .link-arrow { display: inline-flex; min-height: 44px; margin-top: 2px; padding: 12px 0; font-size: .96875rem; }
.faq-list { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  list-style: none;
  font: 500 clamp(1.125rem, 1.05rem + .35vw, 1.3125rem)/1.3 var(--font-display);
  letter-spacing: -.014em;
  color: var(--ink);
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform .4s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item summary:hover .faq-icon { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.faq-item[open] .faq-icon,
.faq-item[open] summary:hover .faq-icon {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--on-navy);
  box-shadow: none;
}
.faq-item > p { max-width: 40rem; padding: 0 56px 26px 0; }

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
    }
    .faq-item[open]::details-content { block-size: auto; }
  }
}

@media (min-width: 1100px) {
  .faq-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(48px, 8vw, 128px);
    align-items: start;
  }
  .faq-head { position: sticky; top: 120px; }
  .faq-item summary { padding: 26px 0; }
}

/* --------------------------------------------------------------------------
   Chamada final e rodapé: duas salas navy empilhadas
   -------------------------------------------------------------------------- */
.final-grid { display: grid; gap: 36px; }
.final-copy .lead { margin-top: 22px; }
/* Três motivos, só com fatos do briefing */
.reasons { max-width: 30rem; margin-top: 30px; border-top: 1px solid var(--line-navy); }
.reasons li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-navy);
  font: 500 1rem/1.4 var(--font-text);
  color: var(--on-navy);
}
.reasons .icon { color: var(--green-hi); }

.final-form {
  padding: 20px 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px var(--line-navy), inset 0 1px 0 rgba(255, 255, 255, .12), 0 48px 80px -48px rgba(0, 0, 0, .7);
}
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font: 500 .8125rem/1.2 var(--font-text); color: var(--on-navy); }
.field input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 16px;
  background: rgba(4, 10, 18, .5);
  box-shadow: inset 0 0 0 1px var(--line-navy);
  color: var(--on-navy);
  font: 400 1rem/1 var(--font-text);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder { color: #8090A4; }
.field input:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.field input:focus-visible {
  outline: none;
  background: rgba(4, 10, 18, .7);
  box-shadow: inset 0 0 0 1.5px var(--green-hi), 0 0 0 4px rgba(25, 211, 162, .18);
}
/* Campo inválido só depois de a pessoa mexer nele */
.field input:user-invalid { box-shadow: inset 0 0 0 1.5px #F2A6A6, 0 0 0 4px rgba(242, 166, 166, .14); }
.field input:user-invalid:focus-visible { box-shadow: inset 0 0 0 1.5px #F2A6A6, 0 0 0 4px rgba(242, 166, 166, .2); }
.lead-form .btn { margin-top: 8px; }
.form-note { margin-top: 16px; font-size: .8125rem; line-height: 1.5; text-align: center; }

.form-success { display: grid; justify-items: start; gap: 6px; padding: 14px 6px; }
.form-success:focus { outline: none; }
.success-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(25, 211, 162, .16);
  box-shadow: inset 0 0 0 1px rgba(25, 211, 162, .4);
  color: var(--green-hi);
}
.success-title { font: 500 1.5rem/1.2 var(--font-display); letter-spacing: -.02em; color: var(--on-navy); }

@media (min-width: 768px) {
  .final-form { padding: clamp(24px, 3vw, 36px); border-radius: 30px; }
}
@media (min-width: 1100px) {
  .final-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
  }
}

.site-footer {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-block: clamp(40px, 5vw, 64px) 22px;
  background:
    radial-gradient(60% 80% at 100% 100%, rgba(21, 94, 239, .16), transparent 62%),
    var(--navy);
}
.footer-top { display: grid; gap: 40px; }
.footer-brand a { display: block; width: fit-content; margin-left: -6px; border-radius: 12px; }
.footer-brand img { height: 96px; width: auto; max-width: none; }
.footer-tagline { margin-top: 12px; font: 500 1.125rem/1.3 var(--font-display); letter-spacing: -.01em; color: var(--on-navy); }
.footer-tech {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font: 400 .75rem/1.5 var(--font-mono);
  letter-spacing: .06em;
}
.footer-tech .icon { color: var(--green-hi); }
.footer-nav { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 40px clamp(24px, 7vw, 112px); }
.footer-nav ul { margin-top: 10px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  /* alvo de 44 px com passo de 40 px entre as linhas */
  min-height: 44px;
  margin-block: -2px;
  font-size: 1rem;
  color: var(--on-navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-nav a:hover { color: var(--green-hi); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: 18px;
  border-top: 1px solid var(--line-navy);
  font-size: .8125rem;
  line-height: 1.5;
}
.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-block: -2px;
  font-weight: 500;
  color: var(--on-navy);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.footer-top-link .icon { transition: transform .3s var(--ease); }
.footer-top-link:hover { color: var(--green-hi); }
.footer-top-link:hover .icon { transform: translateY(-3px); }

@media (max-width: 400px) {
  .footer-brand a { margin-left: -8px; }
  .footer-tech { font-size: .6875rem; letter-spacing: .04em; }
  .footer-nav a { font-size: .9375rem; }
}
@media (min-width: 768px) {
  .site-footer { margin-bottom: clamp(10px, 1.4vw, 20px); }
  .footer-brand img { height: 108px; }
  .footer-brand a { margin-left: -8px; }
}
@media (min-width: 1100px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .footer-nav { padding-top: 10px; }
}

/* --------------------------------------------------------------------------
   Diálogo de acesso ao aplicativo
   -------------------------------------------------------------------------- */
.app-dialog {
  width: min(480px, calc(100% - 28px));
  padding: 30px 24px 26px;
  border: 0;
  border-radius: 28px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line), 0 24px 48px -12px rgba(11, 23, 38, .35), 0 64px 120px -40px rgba(11, 23, 38, .55);
}
.app-dialog::backdrop {
  background: rgba(11, 23, 38, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.dialog-close:hover { background: var(--paper-2); }
.dialog-mark { margin-bottom: 22px; }
.app-dialog .eyebrow { margin-bottom: 12px; }
.app-dialog h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); line-height: 1.12; letter-spacing: -.025em; }
.dialog-text { margin-top: 12px; text-wrap: balance; }
.dialog-form { display: grid; gap: 10px; margin-top: 22px; }
.dialog-form input[type="email"] {
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink);
  font: 400 1rem/1 var(--font-text);
  transition: box-shadow .2s var(--ease);
}
.dialog-form input[type="email"]::placeholder { color: var(--ink-3); }
.dialog-form input[type="email"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(21, 94, 239, .14);
}
/* Campo inválido só depois de a pessoa mexer nele (paleta clara, mesmo anel do formulário) */
.dialog-form input[type="email"]:user-invalid { box-shadow: inset 0 0 0 1.5px #C4463A, 0 0 0 4px rgba(196, 70, 58, .14); }
.dialog-form input[type="email"]:user-invalid:focus-visible { box-shadow: inset 0 0 0 1.5px #C4463A, 0 0 0 4px rgba(196, 70, 58, .2); }
.app-dialog .form-success { margin-top: 18px; padding: 0; }
.app-dialog .success-title { color: var(--ink); }
.app-dialog .success-mark { background: rgba(16, 185, 129, .14); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .4); color: var(--green-ink); }

@media (min-width: 560px) {
  .app-dialog { padding: 36px 34px 34px; }
  .dialog-form { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --------------------------------------------------------------------------
   Movimento: só enfeite, só em CSS, só para quem aceita movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  #visao-chave:checked ~ .cipher-screen .cipher-view-plain,
  #visao-servidor:checked ~ .cipher-screen .cipher-view-code { animation: troca .45s var(--ease); }
  @keyframes troca { from { transform: translateY(8px); filter: blur(6px); } }

  .msg-typing i, .bub-typing i { animation: digitando 1.2s ease-in-out infinite; }
  .msg-typing i:nth-child(2), .bub-typing i:nth-child(2) { animation-delay: .15s; }
  .msg-typing i:nth-child(3), .bub-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes digitando { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }

  .app-dialog[open] { animation: dialogo .35s var(--ease); }
  @keyframes dialogo { from { transform: translateY(14px) scale(.985); } }

  @supports (animation-timeline: view()) {
    .problem-room, .product-stage, .cipher, .step-ui, .office-copy, .client-copy,
    .plans, .enter-card, .final-form {
      animation: surgir linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 9%;
    }
    @keyframes surgir { from { opacity: 0; translate: 0 22px; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   Título do hero que troca ao rolar: a primeira frase sobe e some, a segunda
   entra de baixo. Guiado por --p (0 a 1), que o app.js calcula pela rolagem.
   Sem JavaScript fica só a primeira frase.
   --------------------------------------------------------------------------- */
.h1-swap { display: grid; align-items: end; --p: 0; --pa: clamp(0, calc(var(--p) / .45), 1); --pb: clamp(0, calc((var(--p) - .35) / .65), 1); }
.h1-swap > span { grid-area: 1 / 1; will-change: transform, opacity; }
.h1-a { opacity: calc(1 - var(--pa)); transform: translateY(calc(var(--pa) * -22px)); }
.h1-b { opacity: var(--pb); transform: translateY(calc((1 - var(--pb)) * 26px)); font-size: .88em; letter-spacing: -.03em; }
@media (prefers-reduced-motion: reduce) {
  .h1-a, .h1-b { transform: none; }
}

/* botões: acabamento mais fino, com degradê discreto e borda de luz */
.btn-primary {
  background: linear-gradient(180deg, #19C795 0%, #10B981 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(8, 113, 79, .18), 0 1px 2px rgba(8, 113, 79, .22), 0 8px 18px -10px rgba(16, 185, 129, .55);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #22D1A0 0%, #14BF88 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(8, 113, 79, .18), 0 2px 4px rgba(8, 113, 79, .2), 0 14px 26px -12px rgba(16, 185, 129, .7);
}
.btn-ghost { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(11, 23, 38, .04); }
@media (max-width: 767px) {
  /* no celular a segunda frase entra um pouco menor para não passar por baixo da barra */
  .h1-b { font-size: .8em; }
}

/* Topo travado durante a troca do título: a tela fica parada enquanto a frase
   muda e só depois a página sobe. --pin é o quanto se rola com o topo parado. */
.hero { --hero-top: 92px; --pin: 70vh; }
@media (min-width: 768px) { .hero { --hero-top: 132px; } }
@media (min-width: 1100px) { .hero { --hero-top: 122px; --pin: 80vh; } }
.hero-grid { position: sticky; top: var(--hero-top); }
.hero-pin { height: var(--pin); }
@media (prefers-reduced-motion: reduce) {
  .hero-grid { position: static; }
  .hero-pin { display: none; }
}

.price .cents { font-size: .42em; letter-spacing: -.01em; vertical-align: .95em; margin-left: 1px; }
.footer-etimo { margin-top: 6px; font-size: .875rem; color: rgba(233, 240, 246, .62); }
.footer-etimo em { font-style: italic; color: var(--on-navy); }
.form-error { margin-top: 12px; font-size: .875rem; color: #F59E9E; }
.lead-form button[aria-busy="true"], .dialog-form button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* No celular, tablet e telas baixas o topo é mais alto que a tela:
   travar ali impediria ver os botões. Então só trava em tela grande. */
@media (max-width: 1099px), (max-height: 760px) {
  .hero-grid { position: static; }
  .hero-pin { display: none; }
}