/* Nexuro, identidade visual 2026-10.
   Pessoal: Folha Green, Areia Off-White, Noite Dark e Lumi Mint.
   Empresas: Navy, Laranja, Cinza claro e Branco.
   As ondas/fitas são a assinatura visual das duas edições; os fragmentos de
   interface continuam marcados com data-ui e usam os mesmos tokens. */

@font-face {
  font-family: "Outfit";
  src: url("./assets/outfit.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

/* Empresas usa Inter Tight no corpo. Sem essa declaração o override de
   --font para "Inter" não tinha fonte nenhuma pra carregar (ninguém
   distribuía Inter), e a edição inteira caía no system-ui. */
@font-face {
  font-family: "Inter Tight";
  src: url("./assets/inter_tight.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #f4f3ef;
  --surface: #ffffff;
  --field: #e5eee9;
  --field-2: #d9e8e2;
  --ink: #032a25;
  --muted: #49645d;
  --accent: #0d5c54;
  --accent-2: #08463f;
  /* Idêntico a --accent no Pessoal. No Empresas vira o laranja escuro que
     passa 4,5:1 quando a cor é usada como TEXTO (ver bloco business). */
  --accent-ink: var(--accent);
  --on-accent: #ffffff;
  --soft: #d9eee8;
  --mint: #4e9f8e;
  --on-soft: #032a25;
  --dark: #032a25;
  --dark-ink: #f4f3ef;
  --dark-muted: #b8d3cc;
  --pos: #12784c;
  --neg: #b93a2e;
  --warn: #8a5d0c;

  --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display: clamp(40px, 4.6vw, 76px);
  --t-h3: clamp(26px, 2.3vw, 34px);
  --t-h2: clamp(32px, 3.3vw, 52px);
  --t-lead: clamp(19px, 1.45vw, 22px);
  --t-body: 17px;
  --t-small: 14px;

  --m: clamp(16px, 2.8vw, 44px);
  /* em telas largas o conteúdo para em 1400px e as margens crescem */
  --g: max(var(--m), calc((100% - 1400px) / 2));
  --gap: clamp(16px, 2vw, 28px);
  --sec: clamp(112px, 13vw, 200px);
  --r: 16px;
  --bar-h: 72px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Nexuro Empresas: Navy #0D1E24, Laranja #F1753F, Cinza claro #F0F4F5. */
html[data-edition="business"] {
  --bg: #f0f4f5;
  --surface: #ffffff;
  --field: #e2eaed;
  --field-2: #d4e0e4;
  --ink: #0d1e24;
  --muted: #52636a;
  --accent: #f1753f;
  --accent-2: #c9542a;
  --on-accent: #0d1e24;
  --soft: #fce2d7;
  --mint: #f1753f;
  --on-soft: #7a321b;
  --dark: #0d1e24;
  --dark-ink: #ffffff;
  --dark-muted: #b5c4c9;
  --signal: #f1753f;
  /* texto perde o laranja do botão, que não chega a 3:1 sobre o fundo
     claro (2,58:1). Mesma família, mais escura: 5,06/5,60/4,60:1.
     No Pessoal --accent-ink fica idêntico a --accent, sem mudar nada. */
  --accent-ink: #af4722;
  --pos: #337a5c;
  --neg: #b8462f;
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-edition="business"] h1,
html[data-edition="business"] h2,
html[data-edition="business"] h3,
html[data-edition="business"] .hero-title,
html[data-edition="business"] .h2 { letter-spacing: -0.03em; font-family: "Outfit", system-ui, sans-serif; }
html[data-edition="business"] .text-link,
html[data-edition="business"] .lp-faq a { color: var(--accent-ink); }
.mark .mark-b { width: auto; height: 40px; }
html[data-edition="business"] .tick i { background: var(--signal); }

html[data-edition="personal"] [data-ed="business"],
html[data-edition="business"] [data-ed="personal"] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 24px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--soft); color: var(--on-soft); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; /* taste-skill-ignore: visually-hidden utility */
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--m); top: -60px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-size: var(--t-small);
}
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-size: var(--t-body); font-weight: 600; text-decoration: none;
  border: 0; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 180ms ease, color 180ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-solid { background: var(--accent); color: var(--on-accent); }
.btn-line { background: var(--field-2); color: var(--ink); }
.btn-inv { background: var(--soft); color: var(--on-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--accent-2); }
  .btn-line:hover { background: var(--ink); color: var(--bg); }
  .btn-inv:hover { background: var(--surface); color: var(--ink); }
}

.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--soft);
  transition: text-decoration-color 180ms ease, transform 160ms var(--ease-out);
}
.text-link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { text-decoration-color: var(--accent); }
}
html[data-edition="business"] .text-link { text-decoration-color: #f0a889; }

/* ---------- bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  padding-top: env(safe-area-inset-top);
}
.bar-in {
  height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px);
  padding: 0 var(--g);
}
.mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; flex: none; }
.mark img { width: 118px; height: auto; }
.mark-ed { font-size: 15px; font-weight: 600; color: var(--accent-ink); }

.edition {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px;
  background: var(--field); flex: none;
}
.edition button {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 15px; font-weight: 600;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.edition button:active { transform: scale(0.97); }
.edition button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }

.links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); margin-left: auto; }
.links a {
  font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color 180ms ease;
}
/* sublinhado que entra pela esquerda e sai pela direita (Não Codei, efeito 09);
   o link da seção em que a pessoa está fica marcado (aria-current) */
.links a { position: relative; }
.links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 260ms var(--ease-out);
}
.links a[aria-current="true"] { color: var(--accent-ink); }
.links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .links a:hover { color: var(--accent-ink); }
  .links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.links .links-web { display: none; }
.bar-act { display: flex; align-items: center; gap: 18px; flex: none; }
.bar-web { font-size: 15px; }
.menu { display: none; }

@media (max-width: 1180px) {
  .links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); padding: 8px var(--g) 20px;
    box-shadow: 0 24px 40px -24px rgba(10, 30, 25, 0.35); /* taste-skill-ignore: open menu floats */
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 200ms;
  }
  .links[data-open] {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }
  .links a { min-height: 52px; font-size: var(--t-body); }
  .links .links-web { display: inline-flex; color: var(--accent-ink); }
  .bar-act { margin-left: auto; }
  .menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--field);
    padding: 0 12px;
  }
  .menu span { height: 2px; background: var(--ink); border-radius: 2px; transition: transform 200ms var(--ease-out); }
  .menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 720px) {
  :root { --bar-h: 64px; }
  .bar-web { display: none; }
  .mark img { width: 100px; }
  .mark-ed { display: none; }
  .bar-act .btn-sm { display: none; }
  .bar-in { gap: 10px; }
  .edition button { padding: 0 12px; }
}

/* ---------- phone ----------
   Porte do IPhoneMockup (React) para CSS puro: modelo 15 Pro, tela lógica
   393×852, raio 56, bezel 12, Dynamic Island 126×37, indicador de home.
   Tudo dentro da tela é medido em --u (1 px lógico do aparelho), então o
   celular escala inteiro só mudando --pw. É um fragmento de interface
   (data-ui): a moldura tem o degradê e a sombra do aparelho. */
.phone {
  --k: calc(var(--pw, 320px) / 417);
  width: var(--pw, 320px);
  aspect-ratio: 417 / 876;
  padding: calc(12 * var(--k));
  border-radius: calc(68 * var(--k));
  position: relative;
  flex: none;
}
.phone-ti { --frame: #a69a8a; --frame-hi: rgba(255, 255, 255, 0.45); }
html[data-edition="business"] .phone-ti { --frame: #2a2c31; --frame-hi: rgba(255, 255, 255, 0.18); }
/* a moldura é uma camada própria (data-ui): o que está na tela continua
   contando como imagem real da página */
.phone-body {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: var(--frame);
  box-shadow: inset 0 0 0 1.5px var(--frame-hi), inset 0 0 0 calc(10 * var(--k)) #111214, 0 0 0 1px rgba(0, 0, 0, 0.16), 0 40px 80px -30px rgba(12, 32, 26, 0.45), 0 12px 24px -12px rgba(12, 32, 26, 0.3); /* taste-skill-ignore: device frame */
}
.phone::before, .phone::after { /* botões laterais */
  content: ""; position: absolute; width: calc(4 * var(--k)); border-radius: 2px;
  background: var(--frame, #8f8577); filter: brightness(.85);
}
.phone::before { left: calc(-3 * var(--k)); top: 22%; height: 7%; box-shadow: 0 calc(78 * var(--k)) 0 0 var(--frame, #8f8577); } /* taste-skill-ignore: device side buttons */
.phone::after { right: calc(-3 * var(--k)); top: 28%; height: 11%; }
.phone-screen {
  --u: calc((var(--pw, 320px) - 24 * var(--k)) / 393);
  position: relative; width: 100%; height: 100%;
  border-radius: calc(56 * var(--k));
  overflow: hidden; isolation: isolate; z-index: 1;
  font-size: max(12.5px, calc(15 * var(--u)));
}
.island {
  position: absolute; z-index: 5; left: 50%; top: calc(11 * var(--u));
  width: calc(122 * var(--u)); height: calc(36 * var(--u));
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
.sbar {
  position: absolute; z-index: 4; inset: 0 0 auto;
  height: calc(54 * var(--u)); padding: calc(17 * var(--u)) calc(30 * var(--u)) 0 calc(36 * var(--u));
  display: flex; justify-content: space-between;
  font-size: max(12.5px, calc(16 * var(--u))); font-weight: 600; letter-spacing: -0.01em;
}
.sb-ic { display: flex; gap: calc(6 * var(--u)); align-items: center; }
.sb-ic .sig { width: calc(17 * var(--u)); height: calc(11 * var(--u)); background: currentColor;
  clip-path: polygon(0 100%, 22% 100%, 22% 70%, 0 70%, 0 100%, 26% 100%, 26% 48%, 48% 48%, 48% 100%, 52% 100%, 52% 24%, 74% 24%, 74% 100%, 78% 100%, 78% 0, 100% 0, 100% 100%); }
.sb-ic .bat { width: calc(25 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(4 * var(--u));
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) currentColor; position: relative; opacity: .9; } /* taste-skill-ignore: battery outline in status bar */
.sb-ic .bat::after { content: ""; position: absolute; inset: calc(2.5 * var(--u)) calc(5 * var(--u)) calc(2.5 * var(--u)) calc(2.5 * var(--u)); background: currentColor; border-radius: calc(2 * var(--u)); }
.home-ind {
  position: absolute; z-index: 5; left: 50%; bottom: calc(8 * var(--u));
  width: calc(134 * var(--u)); height: calc(5 * var(--u)); border-radius: 3px;
  transform: translateX(-50%); background: currentColor; opacity: .55;
}

/* app built in HTML inside the phone */
.app-light { background: #f3f6f3; color: #14211d; --a: #0f5c48; --a2: #a8f0ce; --a2ink: #0a3b2e; --chip: #ebefea; --card: #fff; --mut: #5c6d65; }
.app-dark { background: #061820; color: #e7eef0; --a: #ff7a45; --a2: #4a2416; --a2ink: #ffd8c6; --chip: #16323d; --card: #0d2530; --mut: #9db0b8; }
.app {
  position: absolute; inset: calc(54 * var(--u)) 0 0;
  display: flex; flex-direction: column;
  padding: calc(6 * var(--u)) calc(20 * var(--u)) 0;
}
.app-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(14 * var(--u)); }
.app-top b { font-size: calc(20 * var(--u)); font-weight: 700; color: var(--a); letter-spacing: -0.02em; }
.app-top span { color: var(--mut); font-size: max(11.5px, calc(14 * var(--u))); }
.app-tabs { display: flex; background: var(--chip); border-radius: 999px; padding: calc(4 * var(--u)); gap: calc(2 * var(--u)); }
.app-tabs button {
  flex: 1; border: 0; background: transparent; color: var(--mut);
  font-size: max(11.5px, calc(13.5 * var(--u))); font-weight: 600; border-radius: 999px;
  min-height: calc(34 * var(--u)); padding: 0;
  transition: background-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out);
}
.app-tabs button:active { transform: scale(0.96); }
.app-tabs span { flex: 1; display: grid; place-items: center; color: var(--mut); font-size: max(11.5px, calc(13.5 * var(--u))); font-weight: 600; border-radius: 999px; min-height: calc(34 * var(--u)); }
.app-tabs button[aria-selected="true"], .app-tabs span.on { background: var(--a); color: #fff; }
.app-dark .app-tabs span.on { color: #2a0f04; }
.scr-h .acc { color: var(--a); }
.card2.co-sel { box-shadow: 0 0 0 2px var(--a); } /* taste-skill-ignore: selected item in app */
.app-dark .app-tabs button[aria-selected="true"] { color: #2a0f04; }
.scrs { position: relative; flex: 1; margin-top: calc(14 * var(--u)); }
.scr {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(calc(8 * var(--u))); filter: blur(2px); visibility: hidden;
  transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out), filter 240ms ease, visibility 0s 320ms;
}
.scr.is-on { opacity: 1; transform: none; filter: none; visibility: visible; transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out), filter 240ms ease; }
.scr-h { font-size: calc(17 * var(--u)); font-weight: 600; margin-bottom: calc(12 * var(--u)); }
.scr-f { margin-top: calc(10 * var(--u)); color: var(--mut); }
.scr-f b { color: var(--a); }
.money {
  border-radius: calc(20 * var(--u)); padding: calc(18 * var(--u));
  background: #135f4b; color: #fff;
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.money-sand { background: #0d2530; color: #e7eef0; }
.money-sand .money-k { color: #ff7a45; opacity: 1; }
.money-k { font-size: max(11.5px, calc(13 * var(--u))); opacity: .85; }
.money-v { font-size: calc(34 * var(--u)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.money-f { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); font-size: max(11.5px, calc(12.5 * var(--u))); opacity: .9; }
.money-f b { display: block; font-size: max(11.5px, calc(14 * var(--u))); }
.txs { list-style: none; margin: calc(12 * var(--u)) 0 0; padding: 0; }
.txs li { display: flex; justify-content: space-between; padding: calc(10 * var(--u)) 0; color: var(--mut); }
.txs b { color: inherit; font-variant-numeric: tabular-nums; }
.app-light .txs b { color: #14211d; }
.txs .pos, .app-light .txs .pos { color: #12784c; }
.app-dark .txs .pos { color: #6fc79b; }
.card2 {
  display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u));
  background: var(--card); border-radius: calc(18 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.app-light .card2 { box-shadow: 0 0 0 1px #e3e8e2; } /* taste-skill-ignore: app card */
.card2 span { display: block; color: var(--mut); font-size: max(11.5px, calc(12.5 * var(--u))); }
.card2 b { display: block; font-size: max(12.5px, calc(16 * var(--u))); font-variant-numeric: tabular-nums; }
.card2 > div:last-child { text-align: right; }
.card2 em { display: inline-block; font-style: normal; font-size: max(11.5px, calc(12 * var(--u))); font-weight: 600; padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: var(--chip); margin-bottom: calc(4 * var(--u)); }
.card2 em.hot { background: var(--a2); color: var(--a2ink); }
.goal { background: var(--card); border-radius: calc(20 * var(--u)); padding: calc(18 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.app-light .goal { box-shadow: 0 0 0 1px #e3e8e2; } /* taste-skill-ignore: app card */
.goal-t { font-size: calc(30 * var(--u)); letter-spacing: -0.03em; }
.goal-track { height: calc(12 * var(--u)); border-radius: 999px; background: var(--chip); margin: calc(12 * var(--u)) 0; overflow: hidden; }
.goal-track i { display: block; height: 100%; border-radius: inherit; background: var(--a); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 120ms; }
.scr.is-on .goal-track i { transform: scaleX(var(--w)); }
.goal-n { display: flex; justify-content: space-between; color: var(--mut); font-size: max(11.5px, calc(13 * var(--u))); }
.goal-n b { color: var(--a); }
.hbars > div { display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--u)) calc(10 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.hbars i { grid-column: 1 / -1; height: calc(10 * var(--u)); border-radius: 999px; background: var(--chip); position: relative; overflow: hidden; }
.hbars i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--a); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 120ms; }
.scr.is-on .hbars i::after { transform: scaleX(var(--w)); }
.bub { max-width: 82%; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)); margin-bottom: calc(10 * var(--u)); line-height: 1.35; }
.bub.me { margin-left: auto; background: var(--chip); border-bottom-right-radius: calc(6 * var(--u)); }
.bub.lu { background: var(--a2); color: var(--a2ink); border-bottom-left-radius: calc(6 * var(--u)); font-weight: 500; }
.scr.is-on .bub { animation: bub-in 360ms var(--ease-out) both; }
.scr.is-on .bub:nth-child(3) { animation-delay: 140ms; }
.scr.is-on .bub:nth-child(4) { animation-delay: 420ms; }
.scr.is-on .bub:nth-child(5) { animation-delay: 560ms; }
@keyframes bub-in { from { opacity: 0; transform: translateY(calc(10 * var(--u))) scale(.97); } }
.app-nav {
  display: flex; justify-content: space-around; align-items: center;
  margin: 0 calc(-4 * var(--u)) calc(30 * var(--u)); padding: calc(8 * var(--u));
  background: var(--chip); border-radius: 999px;
}
.app-nav i { width: calc(40 * var(--u)); height: calc(40 * var(--u)); display: grid; place-items: center; border-radius: 999px; color: var(--mut); }
.app-nav i.on { background: var(--a); color: #fff; }
.app-dark .app-nav i.on { color: #2a0f04; }
.app-nav svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.split { position: relative; display: flex; justify-content: space-between; margin-top: calc(14 * var(--u)); padding-bottom: calc(16 * var(--u)); color: var(--mut); font-size: max(11.5px, calc(13 * var(--u))); }
.split b { color: inherit; }
.split::before, .split i { content: ""; position: absolute; left: 0; bottom: 0; height: calc(8 * var(--u)); border-radius: 999px; }
.split::before { right: 0; background: var(--chip); }
.split i { width: 100%; background: var(--a); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 120ms; }
.scr.is-on .split i { transform: scaleX(var(--w)); }
.tip { margin-top: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--a2); color: var(--a2ink); font-size: max(11.5px, calc(13.5 * var(--u))); line-height: 1.4; }
.tip b { display: block; font-size: max(12.5px, calc(14.5 * var(--u))); }
.scr.is-on .bub:nth-child(6) { animation-delay: 700ms; }
.scr.is-on .bub:nth-child(7) { animation-delay: 980ms; }

/* troca de tela: o aparelho sobe de leve, um brilho atravessa o vidro
   (Não Codei, efeito 10) e o conteúdo entra em cascata. Só com movimento. */
@media (prefers-reduced-motion: no-preference) {
  .phone-screen::after {
    content: ""; position: absolute; z-index: 6; inset: -10% -80%; pointer-events: none;
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%); /* taste-skill-ignore: glass glint on device */
    transform: translateX(-60%); opacity: 0;
  }
  .panel.is-lit .phone-screen::after, .phone-screen.is-switch::after { animation: glint 1000ms var(--ease-out); }
  @keyframes glint { 0% { transform: translateX(-60%); opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
  .panel.is-lit .phone { animation: lift 620ms var(--ease-out); }
  @keyframes lift { from { transform: translateY(22px) scale(.96); } }
  .scr.is-on > *, .panel.is-lit .scr > * { animation: scr-rise 520ms var(--ease-out) both; }
  .scr.is-on > :nth-child(2), .panel.is-lit .scr > :nth-child(2) { animation-delay: 60ms; }
  .scr.is-on > :nth-child(3), .panel.is-lit .scr > :nth-child(3) { animation-delay: 120ms; }
  .scr.is-on > :nth-child(4), .panel.is-lit .scr > :nth-child(4) { animation-delay: 180ms; }
  .scr.is-on > :nth-child(5), .panel.is-lit .scr > :nth-child(5) { animation-delay: 240ms; }
  .scr.is-on > :nth-child(n+6), .panel.is-lit .scr > :nth-child(n+6) { animation-delay: 300ms; }
  @keyframes scr-rise { from { opacity: 0; transform: translateY(calc(14 * var(--u))); filter: blur(3px); } }
}

/* screenshots inside the phone (tour) */
.shot-paper { background: #f3f6f3; color: #14211d; }
.shot-navy { background: #010f1a; color: #eef2f7; }
.shot-ink { background: #141311; color: #f1f1ef; }
.shot-top {
  position: absolute; inset: calc(58 * var(--u)) calc(22 * var(--u)) auto;
  display: flex; justify-content: space-between; align-items: baseline;
}
.shot-top b { font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -0.02em; color: #0f5c48; }
.shot-navy .shot-top b { color: #ff7a45; }
.shot-top span { font-size: max(11.5px, calc(14 * var(--u))); opacity: .7; }
.shot img, .shot video {
  position: absolute; left: 0; right: 0; bottom: calc(14 * var(--u));
  width: 100%; height: auto;
}
.panel-video .shot video { bottom: auto; top: 50%; transform: translateY(-50%); }

@media (max-width: 380px) {
  .bar-in { gap: 6px; }
  .mark img { width: 72px; }
  .mark .mark-b { width: auto; height: 32px; }
  .edition { padding: 3px; }
  .edition button { padding: 0 8px; font-size: 14px; min-height: 38px; }
  .menu { width: 42px; height: 42px; flex: none; }
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  column-gap: clamp(32px, 5vw, 88px);
  align-items: center;
  min-height: calc(100svh - var(--bar-h));
  padding: clamp(24px, 4vh, 56px) var(--g) clamp(40px, 6vh, 72px);
}
.hero-title {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 18ch;
}
.hero-sub { font-size: var(--t-lead); line-height: 1.5; max-width: 38ch; margin-top: 28px; }
.hero-acts { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; margin-top: 36px; }
.hero-acts .text-link { margin-left: 6px; }
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start;
  gap: 16px clamp(20px, 2.6vw, 40px); margin: 48px 0 0; padding-top: 28px;
  border-top: 2px solid var(--field); /* taste-skill-ignore: the old hero's divider the client asked for */
}
.facts dt { font-weight: 600; font-size: var(--t-body); }
.facts dd { margin: 2px 0 0; color: var(--muted); font-size: var(--t-small); }

.hero-stage {
  position: relative;
  background: var(--field);
  border-radius: calc(var(--r) * 1.75);
  min-height: min(calc(100svh - var(--bar-h) - 80px), 760px);
  display: grid; place-items: center;
  padding: clamp(28px, 4vw, 56px) 24px;
  perspective: 1400px;
  overflow: hidden;
}
.hero-stage::after {
  content: "";
  position: absolute;
  left: -12%; right: -12%; bottom: -9%; height: 31%; z-index: 0;
  opacity: .82; pointer-events: none;
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 18%, transparent), var(--accent) 48%, color-mix(in srgb, var(--mint) 65%, transparent));
  border-radius: 48% 52% 0 0 / 42% 58% 0 0;
  transform: rotate(-3deg);
}
html[data-edition="business"] .hero-stage::after {
  background: linear-gradient(105deg, rgba(241,117,63,.18), var(--signal) 52%, rgba(241,117,63,.42));
}
/* foto da cidade atrás do celular: em cinza, multiplicada sobre um verde
   claro e tingida com a cor da marca (o traço vira verde). Recortada pelo
   painel, sem cortar os cartões que saem da borda. */
.stage-bg {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden;
  background: var(--stage-base, #eef4f0);
}
.stage-bg img {
  position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; max-width: none;
  object-fit: cover; object-position: 58% 38%;
  filter: grayscale(1) contrast(1.2) brightness(1.04);
  mix-blend-mode: multiply; opacity: .5;
}
.stage-bg::after {
  content: ""; position: absolute; inset: 0;
  z-index: 1;
  background: var(--stage-ink, #7fb39c); mix-blend-mode: multiply; opacity: .62;
}
/* halo atrás do aparelho: um véu claro no centro, que some para as bordas */
.stage-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 52% 58% at 50% 52%, rgba(246, 248, 245, .78), rgba(246, 248, 245, 0) 70%); /* taste-skill-ignore: legibility scrim over the photo */
}
html[data-edition="business"] .stage-bg { --stage-base: #eef3f5; --stage-ink: #8fa6b2; }
.hero-stage .tilt { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stage-bg img { animation: city-drift 26s ease-in-out infinite alternate; }
  @keyframes city-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.07) translate3d(-2%, -1.5%, 0); }
  }
}
.hero-stage .phone { --pw: clamp(280px, min(24vw, (100svh - 200px) * 0.476), 360px); }
.tilt { transform-style: preserve-3d; transition: transform 500ms var(--ease-out); will-change: transform; }

.chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: 18px; padding: 12px 18px 12px 14px;
  box-shadow: 0 24px 48px -24px rgba(12, 32, 26, 0.35), 0 0 0 1px rgba(12, 32, 26, 0.06); /* taste-skill-ignore: floating card */
  font-size: 14px; color: var(--muted); line-height: 1.3;
}
.chip b { display: block; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.chip i { width: 12px; height: 12px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 5px var(--soft); flex: none; } /* taste-skill-ignore: floating card / app card */
.chip img { width: 34px; height: auto; flex: none; }
.chip-a { left: -28px; top: 13%; }
.chip-b { right: 20px; bottom: 9%; }

@media (prefers-reduced-motion: reduce) { .scr:not(.is-on) { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .chip-a { animation: float 6s ease-in-out infinite; }
  .chip-b { animation: float 7s ease-in-out -2s infinite; }
  @keyframes float { 50% { transform: translateY(-8px); } }
  /* título do hero: cada palavra sobe de dentro da própria linha, em cascata */
  .rv .hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.14em; margin: 0 -0.04em -0.14em; }
  .rv .hero-title .w > span { display: inline-block; transform: translateY(110%); opacity: 0; }
  .rv .hero-title.is-in .w > span {
    transform: none; opacity: 1;
    transition: transform 900ms var(--ease-out), opacity 500ms ease;
    transition-delay: calc(120ms + var(--wi, 0) * 70ms);
  }
  .rv .hero-copy > [data-reveal] { transition-delay: calc(520ms + var(--i, 0) * 90ms); }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 56px; }
  .hero-title { font-size: clamp(32px, 8.4vw, 66px); }
  .hero-stage { min-height: 0; padding: 48px 16px; }
  .chip-a { left: 12px; top: 24px; }
  .chip-b { right: 12px; bottom: 24px; }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-acts .btn { flex: 1 1 auto; }
  .hero-stage .phone { --pw: min(84vw, 340px); }
  .hero-stage { padding: 72px 12px 80px; }
  .chip { padding: 10px 14px 10px 12px; }
  .chip b { font-size: 15px; }
}

/* ---------- simulator section ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 112px); align-items: center; }
.sim-sub { font-size: var(--t-lead); line-height: 1.5; max-width: 36ch; margin-top: 24px; }
.sim-frame { width: min(100%, 540px); justify-self: end; }
@media (max-width: 900px) {
  .sim { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .sim-frame { justify-self: stretch; width: 100%; }
}


/* the working fragment */
.calc {
  background: var(--surface);
  border: 1px solid var(--field-2); /* taste-skill-ignore: data-ui fragment */
  border-radius: var(--r);
  padding: clamp(18px, 1.8vw, 26px);
  font-size: 15px;
  box-shadow: 0 30px 60px -38px rgba(12, 40, 32, 0.45); /* taste-skill-ignore: data-ui fragment */
}
.calc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--muted); }
.calc-tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border-radius: 999px; background: var(--soft); color: var(--on-soft);
  font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; transition: background-color 200ms ease, color 200ms ease;
}
.calc-tag[data-state="tight"] { background: #f5e2b8; color: #5c3f06; }
.calc-tag[data-state="red"] { background: #f6d3cf; color: #7a1f16; }
.calc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; border-bottom: 1px solid var(--field); /* taste-skill-ignore: data-ui form row */
}
.calc-row > span:first-child { color: var(--ink); }
.calc-in {
  display: inline-flex; align-items: baseline; gap: 6px;
  border-radius: 10px; padding: 4px 10px; background: var(--bg);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.calc-in:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); } /* taste-skill-ignore: data-ui input focus */
.calc-in i { font-style: normal; color: var(--muted); font-size: 15px; }
.calc-neg i { color: var(--neg); }
.calc-in input {
  width: 9ch; border: 0; background: transparent; outline: 0; text-align: right;
  font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 4px 0;
}
.calc-meter { height: 10px; border-radius: 999px; background: var(--field); margin: 20px 0 16px; overflow: hidden; }
.calc-meter b {
  display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--accent);
  transform-origin: left; transform: scaleX(var(--p, .5));
  transition: transform 420ms var(--ease-out);
}
.calc-out { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.calc-out span { display: block; color: var(--muted); font-size: 14px; }
.calc-out output {
  display: block; font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--accent-ink);
}
.calc-out output.is-long { font-size: clamp(22px, 2vw, 30px); }
.calc-day { text-align: right; }
.calc-day output { font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.calc-note { margin-top: 14px; color: var(--ink); font-size: 15px; line-height: 1.45; min-height: 2.9em; }

/* ---------- sections ---------- */
.sec { padding: var(--sec) var(--g) 0; }

/* comparison set as text */
.compare .h2 { margin-bottom: 48px; }
.cmp { font-size: var(--t-body); }
.cmp-row {
  display: grid;
  grid-template-columns: 5fr repeat(3, minmax(0, 2.33fr));
  min-height: 68px;
}
.cmp-row > * { padding: 18px 20px; display: flex; align-items: center; }
.cmp-row:nth-child(even) { background: var(--field); }
.cmp-row > [role="rowheader"] { font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.01em; padding-left: 0; }
.cmp-row:nth-child(even) > [role="rowheader"] { padding-left: 20px; }
.cmp-row:nth-child(odd):not(.cmp-head) > [role="rowheader"] { padding-left: 20px; }
.cmp-hi { background: var(--accent); color: var(--on-accent); }
.cmp-row:nth-child(even) > .cmp-hi { background: var(--accent-2); }
.cmp-head { min-height: 0; }
.cmp-head > * { font-weight: 700; padding-top: 24px; padding-bottom: 16px; }
.cmp-head > .cmp-hi { border-radius: var(--r) var(--r) 0 0; padding-top: 32px; }
.cmp-row:last-child > .cmp-hi { border-radius: 0 0 var(--r) var(--r); }
.cmp-row > [role="cell"]:not(.cmp-hi) { color: var(--ink); }

@media (min-width: 641px) and (max-width: 860px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; padding: 16px; }
  .cmp-row > [role="rowheader"] { grid-row: span 3; align-items: flex-start; }
  .cmp-row > [role="cell"] { grid-column: 2; }
}
@media (max-width: 860px) {
  .cmp-head { display: none; }
  .cmp-row { min-height: 0; }
}
@media (max-width: 640px) {
  .cmp-row { display: block; padding: 20px 16px; }
  .cmp-row.cmp-head { display: none; }
  .cmp-row > * { display: block; padding: 0; }
  .cmp-row > [role="rowheader"],
  .cmp-row:nth-child(even) > [role="rowheader"],
  .cmp-row:nth-child(odd):not(.cmp-head) > [role="rowheader"] { padding: 0 0 10px; font-size: 20px; font-weight: 700; }
  .cmp-row > [role="cell"] { padding: 6px 0; }
  .cmp-row > .cmp-hi, .cmp-row:nth-child(even) > .cmp-hi { padding: 10px 12px; margin: 2px -12px 4px; border-radius: 10px; }
  .cmp-row:last-child > .cmp-hi { border-radius: 10px; }
  .cmp-row > [role="cell"]::before { display: block; font-size: var(--t-small); font-weight: 600; opacity: .8; }
  html[data-edition="personal"] .cmp-row > :nth-child(2)::before { content: "Nexuro"; }
  html[data-edition="personal"] .cmp-row > :nth-child(3)::before { content: "App do banco"; }
  html[data-edition="personal"] .cmp-row > :nth-child(4)::before { content: "Planilha"; }
  html[data-edition="business"] .cmp-row > :nth-child(2)::before { content: "Nexuro Empresas"; }
  html[data-edition="business"] .cmp-row > :nth-child(3)::before { content: "Extrato do banco"; }
  html[data-edition="business"] .cmp-row > :nth-child(4)::before { content: "Planilha"; }
  .cmp-row > [role="cell"]:not(.cmp-hi)::before { color: var(--muted); opacity: 1; }
}

/* ---------- tour: coluna de texto e uma fileira de celulares ----------
   No desktop o texto fica à esquerda e a fileira corre até a borda direita,
   com o celular aceso encostado no começo dela. Gira sozinha no relógio
   único (3,6 s); toque, roda do mouse ou foco seguram por dois ciclos. */
.tour {
  margin-top: var(--sec);
  background: var(--dark); color: var(--dark-ink);
  display: grid;
  grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
  grid-template-areas: 'top reel' 'cap reel';
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  padding: clamp(72px, 8vw, 120px) var(--g) clamp(64px, 7vw, 104px);
  min-height: 92svh;
  align-items: start;
}
.tour-top { grid-area: top; padding-top: 24px; }
.tour-cap { grid-area: cap; align-self: end; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.reel {
  grid-area: reel; align-self: center;
  position: relative;
  --pw: clamp(260px, 21vw, 330px);
  display: flex; gap: clamp(28px, 3vw, 56px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 32px calc(100% - var(--pw)) 48px 4px;
  scrollbar-width: none; outline: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel:focus-visible { outline: 3px solid var(--soft); outline-offset: -3px; }
.panel {
  flex: none; width: var(--pw); margin: 0; scroll-snap-align: start;
  opacity: .5; transform: scale(.9); transform-origin: 50% 60%;
  transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out);
  cursor: pointer;
}
.panel.is-lit { opacity: 1; transform: none; cursor: default; }
.panel.is-out { opacity: 0; }
.panel-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.tour-nav { display: flex; gap: 10px; order: 4; margin-top: 10px; }
.round {
  width: 52px; height: 52px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, 0.12); color: var(--dark-ink); font-size: 20px;
  transition: background-color 180ms ease, transform 160ms var(--ease-out);
}
.round:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .round:hover { background: rgba(255, 255, 255, 0.22); } }
.tour-name { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.tour-text { color: var(--dark-muted); margin-top: 6px; font-size: var(--t-lead); line-height: 1.45; min-height: 4.4em; }
.tour-name, .tour-text { transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.tour-cap.is-swapping .tour-name, .tour-cap.is-swapping .tour-text { opacity: 0; transform: translateY(4px); }
.tick { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; width: 160px; }
.tick i { display: block; height: 100%; border-radius: inherit; background: var(--soft); transform-origin: left; transform: scaleX(0); }
.tick i.is-run { animation: tick 3600ms linear forwards; }
@keyframes tick { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tick { display: none; } }

@media (max-width: 900px) {
  .tour {
    display: flex; flex-direction: column; gap: 28px; min-height: 0;
    padding: clamp(64px, 12vw, 96px) 0 64px;
  }
  .tour-top, .tour-cap { padding-left: var(--g); padding-right: var(--g); }
  .tour-top { padding-top: 0; }
  .tour-cap { order: 3; padding-bottom: 0; max-width: none; }
  .reel { --pw: min(70vw, 300px); gap: 18px; padding: 16px calc(50% - var(--pw) / 2) 24px; align-self: stretch; width: 100%; }
  .panel { scroll-snap-align: center; transform-origin: 50% 50%; }
  .tour-text { min-height: 0; }
}

/* ---------- pinned story ---------- */
.story {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(32px, 6vw, 112px);
  align-items: start;
}
.story-text .h2 { margin-bottom: 8vh; }
.step {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  max-width: 30ch;
}
.step:last-child { min-height: 52vh; }
.step h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.step p { margin-top: 14px; font-size: var(--t-lead); line-height: 1.45; }
.step { transition: opacity 260ms ease; }
.step-frame { display: none; }


.story-stage {
  position: sticky; top: calc(var(--bar-h) + 6vh);
  height: calc(88vh - var(--bar-h));
  display: flex; align-items: center;
  background: var(--field); border-radius: calc(var(--r) * 1.75);
  padding: clamp(20px, 3vw, 48px);
  justify-content: center;
}
.story-stage .phone { --pw: clamp(270px, min(23vw, (100svh - 260px) * 0.476), 340px); }
.stage { position: relative; flex: 1; display: grid; align-content: start; }
.stage .sf { align-self: start; }
.app-dark .stage {
  --surface: #0d2530; --bg: #0d2530; --field: #16323d; --field-2: #24404a;
  --ink: #e7eef0; --muted: #9db0b8; --accent: #ff7a45; --on-accent: #2a0f04;
  --soft: #4a2416; --on-soft: #ffd8c6; --pos: #6fc79b;
}
.sf {
  grid-area: 1 / 1;
  padding: 0; /* taste-skill-ignore: data-ui fragment */
  font-size: 15px; align-self: center;
  opacity: 0; transform: translateY(14px) scale(.98); visibility: hidden;
  transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s 360ms;
}
.sf.is-on {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 260ms var(--ease-out) 80ms, transform 360ms var(--ease-out) 80ms;
}
.sf-t { font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.sf-t b { color: var(--accent-ink); }
.sf-field { display: flex; justify-content: space-between; padding: 12px 14px; background: var(--bg); border-radius: 10px; margin-bottom: 8px; }
.sf-field span { color: var(--muted); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.sf-chips span { padding: 6px 12px; border-radius: 999px; background: var(--bg); font-size: 14px; }
.sf-chips .on { background: var(--soft); color: var(--on-soft); font-weight: 600; }
.sf-btn { display: flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.sf-foot { margin-top: 14px; color: var(--muted); font-size: 14px; }
.sf-foot b { color: var(--ink); }
.bars > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; }
.bars i { height: 10px; border-radius: 999px; background: var(--field); position: relative; overflow: hidden; }
.bars i::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--accent);
  transform-origin: left; transform: scaleX(0); transition: transform 600ms var(--ease-out) 160ms;
  width: var(--w);
}
.sf.is-on .bars i::after { transform: scaleX(1); }
.bars b { font-variant-numeric: tabular-nums; font-weight: 600; }
.due { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 12px; background: var(--bg); margin-bottom: 8px; }
.due span { display: block; color: var(--muted); font-size: 14px; }
.due > div:last-child { text-align: right; }
.due em { display: inline-block; font-style: normal; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--field); margin-bottom: 4px; }
.due-hot em { background: var(--soft); color: var(--on-soft); }
.due b { display: block; font-variant-numeric: tabular-nums; }
.goal-name { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; }
.goal-bar { height: 14px; border-radius: 999px; background: var(--field); margin: 14px 0 12px; overflow: hidden; }
.goal-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--ease-out) 160ms; }
.sf.is-on .goal-bar i { transform: scaleX(1); }
.goal-nums { display: flex; justify-content: space-between; color: var(--muted); }
.goal-nums b { color: var(--ink); }
.co { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); margin-bottom: 8px; }
.co span { display: block; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.co em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-on { background: var(--soft); color: var(--on-soft); }
.co-on span { color: var(--on-soft); }
.tx { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--field); } /* taste-skill-ignore: data-ui list row */
.tx b { font-variant-numeric: tabular-nums; }
.tx .pos { color: var(--pos); }

@media (max-width: 900px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-stage { display: none; }
  .step-frame { display: block; margin-top: 20px; background: var(--surface); border-radius: var(--r); padding: 16px; }
  .step-frame .sf { opacity: 1; visibility: visible; transform: none; }
  .stage { min-height: 300px; }
  .sf { font-size: 14px; }
  .story-text .h2 { margin: 32px 0 0; }
  .step { min-height: 0; max-width: none; padding-top: 56px; }
  .step:last-child { min-height: 0; }

}

/* ---------- lumi: a assistente à esquerda, a conversa à direita ---------- */
.lumi {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 120px); align-items: start;
}
.lumi-side { position: sticky; top: calc(var(--bar-h) + 40px); }
.lumi-pic { width: clamp(120px, 12vw, 180px); height: auto; margin-bottom: 24px; }
.lumi-lead { font-size: var(--t-lead); line-height: 1.5; max-width: 36ch; margin-top: 20px; }
.lumi-rules { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40ch; }
.lumi-rules li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.lumi-rules li::before {
  content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 999px; background: var(--soft);
  -webkit-mask: none;
  box-shadow: inset 0 0 0 6px var(--soft), inset 0 0 0 11px var(--accent); /* taste-skill-ignore: list marker */
}
.thread {
  background: var(--field); border-radius: calc(var(--r) * 1.75);
  padding: clamp(20px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 28px;
}
.thread-log { display: flex; flex-direction: column; gap: 12px; }
.ex-say { align-self: center; font-size: 15px; color: var(--muted); margin: 14px 0 2px; }
.ex-say:first-child { margin-top: 0; }
.msg { max-width: min(80%, 520px); padding: 14px 18px; border-radius: 22px; font-size: 17px; line-height: 1.45; }
.msg.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 8px; }
.msg.lu {
  align-self: flex-start; position: relative; margin-left: 48px;
  background: var(--surface); color: var(--ink); border-bottom-left-radius: 8px;
}
.msg.lu::before {
  content: ""; position: absolute; left: -48px; bottom: 0; width: 38px; height: 38px; border-radius: 999px;
  background: var(--soft) url(./assets/lumi_neutral.png) center 30% / 74% auto no-repeat;
}
.msg.lu b { color: var(--accent-ink); }
.msg-wide { max-width: calc(100% - 48px); width: 100%; }
.mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mini { margin-top: 18px; }
.mini div { padding: 0; }
.mini span { display: block; font-size: 14px; color: var(--muted); }
.mini strong { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.typing { display: inline-flex; gap: 5px; padding: 4px 0; }
.typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .5; } }
.msg.is-new { animation: msg-in 320ms var(--ease-out) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.thread-try { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.thread-try > p { font-size: 15px; color: var(--muted); }
.sugs { display: flex; flex-wrap: wrap; gap: 10px; }
.sugs button {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.sugs button:active { transform: scale(0.97); }
.sugs button[disabled] { opacity: .5; cursor: default; }
@media (hover: hover) and (pointer: fine) { .sugs button:not([disabled]):hover { background: var(--accent); color: var(--on-accent); } }

@media (max-width: 960px) {
  .lumi { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .lumi-side { position: static; }
}
@media (max-width: 600px) {
  .thread { padding: 16px; border-radius: var(--r); }
  .msg { max-width: 88%; font-size: 16px; }
  .msg.lu { margin-left: 40px; }
  .msg.lu::before { left: -40px; width: 32px; height: 32px; }
  .msg-wide { max-width: calc(100% - 40px); }
  .mini { grid-template-columns: 1fr; }
  .lumi-pic { width: 112px; }
}

/* ---------- plans: one large table ---------- */
.plans-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--field); }
.billing button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  font-weight: 600; color: var(--muted); font-size: 15px;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.billing button:active { transform: scale(0.97); }
.billing button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
.ptable {
  display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.67fr));
  grid-template-rows: repeat(11, auto);
}
.pcol { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
.pc { padding: 18px 20px; font-size: var(--t-lead); display: flex; align-items: center; }
.pcol > .pc:nth-child(even) { background: var(--field); }

.ph { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-top: 28px; padding-bottom: 24px; }
.ph h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price { font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.price small { font-size: 16px; letter-spacing: 0; color: var(--muted); }
.pmeta { font-size: 15px; color: var(--muted); margin-top: 8px; min-height: 2.6em; }
.pf { padding-top: 24px; padding-bottom: 28px; }
.pf .btn { width: 100%; }
.pcol-hi { background: var(--accent); color: var(--on-accent); border-radius: var(--r); }
.pcol-hi > .pc:nth-child(even) { background: var(--accent-2); }
.pcol-hi .price small, .pcol-hi .pmeta { color: var(--soft); }
html[data-edition="business"] .pcol-hi .price small, html[data-edition="business"] .pcol-hi .pmeta, html[data-edition="business"] .pcol-hi .pc[data-l]::before { color: #ffffff; }
.plans-note { margin-top: 28px; color: var(--muted); max-width: 70ch; }

@media (max-width: 960px) {
  .ptable { display: flex; flex-direction: column; gap: 16px; }
  .pcol.pcol-labels { display: none; }
  .pcol { display: block; border-radius: var(--r); background: var(--surface); overflow: hidden; }
  .pcol-hi { background: var(--accent); }
  .pc { display: block; padding: 12px 20px; font-size: 17px; }
  .pc[data-l]::before { content: attr(data-l); display: block; font-size: 15px; color: var(--muted); }
  .pcol-hi .pc[data-l]::before { color: var(--soft); }
  .ph h3, .price { font-size: clamp(32px, 9vw, 44px); }
  .ptable { gap: 40px; }
  .ph { padding-top: 28px; }
}

/* ---------- faq: question index, one answer ---------- */
.faq .h2 { margin-bottom: 48px; }
.qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 7vw, 120px); align-items: start; }
.qa-list { display: flex; flex-direction: column; }
.q {
  display: flex; align-items: center; gap: 14px; text-align: left;
  min-height: 52px; padding: 8px 0; border: 0; background: transparent;
  font-size: var(--t-lead); color: var(--muted);
  transition: color 150ms ease;
}
.q::before {
  content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--muted); flex: none;
  transition: background-color 150ms ease, transform 200ms var(--ease-out);
}
.q[aria-expanded="true"] { color: var(--ink); font-weight: 500; }
.q[aria-expanded="true"]::before { background: var(--accent); transform: scale(1.3); }
@media (hover: hover) and (pointer: fine) { .q:hover { color: var(--ink); } }
.a p { font-size: var(--t-body); padding: 4px 0 16px 23px; max-width: 52ch; }
.qa-pane { display: none; }
html.js .qa-pane {
  display: block; position: sticky; top: calc(var(--bar-h) + 48px);
  background: var(--field); border-radius: var(--r); padding: clamp(28px, 3vw, 48px);
  min-height: 280px;
}
html.js .qa-pane p {
  font-size: clamp(20px, 1.7vw, 24px); line-height: 1.35; max-width: 30ch; letter-spacing: -0.01em;
  transition: opacity 150ms ease;
}
html.js .qa-pane p.is-swapping { opacity: 0; }
html.js .qa .a { display: none; }
html:not(.js) .a[hidden] { display: block; }
@media (max-width: 860px) {
  .qa { grid-template-columns: minmax(0, 1fr); }
  html.js .qa-pane { display: none; }
  html.js .qa .a:not([hidden]) { display: block; }
}

/* ---------- cta + footer ---------- */
.cta { padding: 26svh var(--g) 18svh; }
.cta-line { font-size: var(--t-lead); max-width: 34ch; line-height: 1.4; }
.cta-acts { display: flex; align-items: center; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 var(--g) calc(30px + env(safe-area-inset-bottom));
  font-size: 15px; color: var(--muted);
}
.foot-b { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.foot a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--accent-ink); } }
.foot-c { text-align: right; }
@media (max-width: 860px) {
  .foot { grid-template-columns: 1fr; gap: 4px; }
  .foot-b { justify-content: flex-start; gap: 4px 20px; }
  .foot-c { text-align: left; }
}

/* ---------- entrances ----------
   Só existem com JS ativo (.rv vem do site.js) e sem pedido de movimento
   reduzido: a página reduzida é a página pronta. */
@media (prefers-reduced-motion: no-preference) {
  .rv [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .rv [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  .panel { transform: none; }
}

/* ---------- telas reais dos apps (scripts/real-phones.mjs) ----------
   Réplicas do Nexuro Pessoal (tema escuro) e do Nexuro Empresas (Ledger)
   capturadas no aparelho, com dados de demonstração. Medidas em --u. */
.rx-p {
  --bg: #141311; --sf: #1f1e1b; --hi: #2a2723; --hst: #322e29; --nav: #201f1c; --ol: #383430;
  --on: #f1f1ef; --mut: #acaca6; --acc: #b6f26c; --accC: #2b3a17; --onAccC: #d3f7a6; --onAcc: #141311;
  --pos: #6fdb8f; --neg: #f98c82; --warn: #f2c14e; --rr: calc(20 * var(--u));
  font-family: "Outfit", sans-serif;
}
.rx-b {
  --bg: #0d1e24; --sf: #152f38; --hi: #1f3b46; --hst: #24434e; --nav: #102730; --ol: #2e4a53;
  --on: #ffffff; --mut: #a6b5ba; --acc: #b84d28; --accC: #fce2d7; --onAccC: #7a321b; --onAcc: #0d1e24;
  --pos: #6fc79b; --neg: #e58379; --warn: #f2c14e; --rr: calc(12 * var(--u));
  font-family: "Inter Tight", system-ui, sans-serif;
}
.rx { background: var(--bg); color: var(--on); font-size: calc(15 * var(--u)); line-height: 1.3; letter-spacing: 0; }
.rx p { margin: 0; }
.rx b { font-weight: 600; }
.rx .mono { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rx .pos { color: var(--pos); } .rx .neg { color: var(--neg); } .rx .warn { color: var(--warn); }
.rx .lime, .rx .sig { color: var(--acc); }
.rx-i { width: 1em; height: 1em; fill: currentColor; flex: none; display: block; }
.rx-av { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--accC); flex: none; }

.rx-app { position: absolute; inset: calc(54 * var(--u)) 0 0; padding: calc(6 * var(--u)) calc(16 * var(--u)) 0; overflow: hidden; }
.rx-pushed { z-index: 7; background: var(--bg); }
.rx-scrs { position: absolute; inset: 0; }
.rx .scr { transform: translateX(calc(10 * var(--u))); filter: none; }
.rx .scr.is-on { transform: none; }
.rx .scr.rx-over.is-on { z-index: 8; }

/* cabeçalho, cartões e textos */
.rx-hd { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(14 * var(--u)); color: var(--mut); font-size: calc(20 * var(--u)); }
.rx-hi { display: grid; line-height: 1.3; }
.rx-hi span { font-size: calc(13 * var(--u)); }
.rx-hi b { font-size: calc(17 * var(--u)); color: var(--on); }
.rx-pill { margin-left: auto; display: flex; align-items: center; gap: calc(4 * var(--u)); background: var(--sf); border-radius: 999px; padding: calc(6 * var(--u)) calc(8 * var(--u)); font-size: calc(16 * var(--u)); }
.rx-pill b { font-size: calc(13 * var(--u)); color: var(--on); }
.rx-card { background: var(--sf); border-radius: var(--rr); padding: calc(16 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.rx-out { box-shadow: inset 0 0 0 1px var(--ol); } /* taste-skill-ignore: outlined card in app */
.rx-tonal { background: var(--accC); color: var(--onAccC); }
.rx-b .rx-tonal { background: var(--hi); color: var(--on); }
.rx-card span { display: block; font-size: calc(12.5 * var(--u)); color: var(--mut); }
.rx-tonal span { color: inherit; opacity: .78; }
.rx-saldo b { display: block; font-size: calc(34 * var(--u)); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: calc(2 * var(--u)); }
.rx-next { display: flex; align-items: center; gap: calc(10 * var(--u)); background: var(--accC); color: var(--onAccC); font-size: calc(20 * var(--u)); }
.rx-next > div { flex: 1; }
.rx-next span { color: inherit; opacity: .78; }
.rx-next b { display: block; font-size: calc(15 * var(--u)); margin-top: calc(2 * var(--u)); }
.rx .rx-h { font-size: calc(15 * var(--u)); font-weight: 600; margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.rx .rx-h.mono { font-size: calc(11 * var(--u)); text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.rx-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.rx-trio span { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.rx-trio span i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: currentColor; }
.rx-trio span i.pos { color: var(--pos); } .rx-trio span i.neg { color: var(--neg); } .rx-trio span i.warn { color: var(--warn); }
.rx-trio b { display: block; font-size: calc(15 * var(--u)); margin-top: calc(4 * var(--u)); font-variant-numeric: tabular-nums; }
.rx-flow > b { font-size: calc(14 * var(--u)); }
.rx-cols { display: flex; justify-content: space-around; align-items: flex-end; height: calc(92 * var(--u)); margin: calc(12 * var(--u)) 0 calc(10 * var(--u)); border-bottom: 1px solid var(--ol); }
.rx-cols i { width: calc(46 * var(--u)); height: calc(var(--h) * 100%); background: currentColor; border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0; }
.rx-flabels { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.rx-flabels span { font-size: calc(11 * var(--u)); }
.rx-flabels b { display: block; font-size: calc(13 * var(--u)); }

.rx-title { display: flex; justify-content: space-between; align-items: center; margin: calc(6 * var(--u)) 0 calc(4 * var(--u)); }
.rx-title > b { font-size: calc(24 * var(--u)); letter-spacing: -0.01em; }
.rx-ghost { display: flex; align-items: center; gap: calc(4 * var(--u)); color: var(--acc); font-size: calc(14 * var(--u)); font-weight: 600; }
.rx-ghost .rx-i { font-size: calc(18 * var(--u)); }
.rx-step { display: flex; justify-content: space-between; align-items: center; margin: calc(10 * var(--u)) 0 calc(12 * var(--u)); color: var(--mut); font-size: calc(22 * var(--u)); }
.rx-step b { font-size: calc(15 * var(--u)); color: var(--on); }
.rx-sum { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); }
.rx-sum b { display: block; font-size: calc(18 * var(--u)); margin-top: calc(2 * var(--u)); font-variant-numeric: tabular-nums; }
.rx-row { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.rx-row > div { flex: 1; min-width: 0; }
.rx-row b { display: block; font-size: calc(15 * var(--u)); }
.rx .rx-badge { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--hi); color: var(--acc); display: grid; place-items: center; font-size: calc(20 * var(--u)); flex: none; }
.rx .rx-badge.rust { background: var(--accC); }
.rx-row .rx-amt { flex: none; font-size: calc(15 * var(--u)); font-variant-numeric: tabular-nums; }
.rx-row2 { display: flex; justify-content: space-between; align-items: center; margin: calc(12 * var(--u)) 0 calc(8 * var(--u)); font-size: calc(12 * var(--u)); color: var(--mut); }
.rx .rx-chip { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: calc(11.5 * var(--u)); font-weight: 600; margin-left: auto; }
.rx-chip i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; }
.rx .rx-chip.warn { color: var(--warn); } .rx .rx-chip.pos { color: var(--pos); }
.rx-prog { height: calc(7 * var(--u)); border-radius: 999px; background: var(--hst); overflow: hidden; }
.rx-prog i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--acc); border-radius: inherit; }
.rx .rx-cap { margin-top: calc(8 * var(--u)); font-size: calc(12 * var(--u)); }
.rx .rx-big { display: block; font-size: calc(26 * var(--u)); margin-top: calc(12 * var(--u)); letter-spacing: -0.02em; }
.rx .rx-of { margin-bottom: calc(12 * var(--u)); font-size: calc(13 * var(--u)); }

/* barra de navegação, botão + e Lumi */
.rx-nav { position: absolute; z-index: 6; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(24 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(32 * var(--u)); background: var(--nav); box-shadow: inset 0 0 0 1px var(--ol); display: flex; justify-content: space-around; align-items: center; padding: 0 calc(6 * var(--u)); } /* taste-skill-ignore: app tab bar */
.rx-tab { appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer; width: calc(50 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(20 * var(--u)); display: grid; place-items: center; background: transparent; color: var(--mut); font-size: calc(24 * var(--u)); transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out); }
.rx-tab[aria-selected="true"] { background: var(--accC); color: var(--acc); }
.rx-nav-bar { left: 0; right: 0; bottom: 0; height: calc(84 * var(--u)); border-radius: 0; padding: 0 calc(10 * var(--u)) calc(22 * var(--u)); box-shadow: inset 0 1px 0 var(--ol); } /* taste-skill-ignore: app tab bar */
.rx-b .rx-tab { border-radius: calc(10 * var(--u)); width: calc(58 * var(--u)); }
.rx-fab { position: absolute; z-index: 6; right: calc(20 * var(--u)); bottom: calc(104 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--acc); color: var(--onAcc); display: grid; place-items: center; font-size: calc(28 * var(--u)); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .35); } /* taste-skill-ignore: floating action button */
.rx-b .rx-fab { bottom: calc(100 * var(--u)); border-radius: calc(14 * var(--u)); }
.rx-lumi { appearance: none; border: 0; font: inherit; cursor: pointer; position: absolute; z-index: 6; left: calc(20 * var(--u)); bottom: calc(110 * var(--u)); height: calc(44 * var(--u)); border-radius: 999px; background: var(--hi); color: var(--on); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(4 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .3); } /* taste-skill-ignore: Lumi shortcut */
.rx-b .rx-lumi { background: var(--accC); color: var(--onAccC); bottom: calc(106 * var(--u)); }
.rx-lumi .rx-av { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }

/* Lumi */
.rx-bar { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(4 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(22 * var(--u)); }
.rx-bar > div { display: grid; line-height: 1.3; }
.rx-bar b { font-size: calc(17 * var(--u)); }
.rx-b .rx-bar b { font-family: "Outfit", sans-serif; }
.rx-bar span { font-size: calc(12 * var(--u)); color: var(--mut); }
.rx-bar .rx-av { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.rx-chat { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.rx .rx-msg { max-width: 80%; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)); background: var(--sf); font-size: calc(14 * var(--u)); line-height: 1.35; align-self: flex-start; }
.rx .rx-msg.me { align-self: flex-end; background: var(--accC); color: var(--onAccC); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)) calc(18 * var(--u)); }
.rx-b.rx .rx-msg { border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)); }
.rx-b.rx .rx-msg.me { border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)) calc(12 * var(--u)); }
.rx-sugs { position: absolute; left: calc(16 * var(--u)); right: 0; bottom: calc(96 * var(--u)); display: flex; gap: calc(8 * var(--u)); overflow: hidden; }
.rx-sugs span { flex: none; white-space: nowrap; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ol); font-size: calc(12.5 * var(--u)); color: var(--mut); }
.rx-sugs.sq span { border-radius: calc(8 * var(--u)); }
.rx-input { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(30 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(27 * var(--u)); background: var(--sf); box-shadow: inset 0 0 0 1px var(--ol); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(16 * var(--u)); color: var(--mut); font-size: calc(22 * var(--u)); } /* taste-skill-ignore: chat input in app */
.rx-input span { flex: 1; font-size: calc(14 * var(--u)); }
.rx-input i { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--acc); color: var(--onAcc); display: grid; place-items: center; font-size: calc(20 * var(--u)); }
.rx-input.sq { border-radius: calc(12 * var(--u)); padding-right: calc(16 * var(--u)); }

/* folha "Adicionar" */
.rx-scrim { position: absolute; inset: 0; z-index: 7; background: rgba(0, 0, 0, .58); }
.rx-sheet { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; background: var(--sf); border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0; padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(34 * var(--u)); }
.rx-grab { display: block; width: calc(36 * var(--u)); height: calc(4 * var(--u)); border-radius: 2px; background: var(--mut); opacity: .5; margin: 0 auto calc(16 * var(--u)); }
.rx-sheet-t { display: block; font-size: calc(18 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.rx-opt { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(11 * var(--u)) 0; }
.rx-opt b { display: block; font-size: calc(15 * var(--u)); }
.rx-opt span:not(.o) { display: block; font-size: calc(12.5 * var(--u)); color: var(--mut); }
.rx .o { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: var(--hi); display: grid; place-items: center; font-size: calc(20 * var(--u)); flex: none; }

/* relatórios */
.rx-lines p { display: flex; justify-content: space-between; font-size: calc(14 * var(--u)); padding: calc(4 * var(--u)) 0; }
.rx-lines p span { display: inline; font-size: inherit; }
.rx .rx-lines .tot { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); margin-top: calc(6 * var(--u)); padding-top: calc(10 * var(--u)); font-weight: 600; }
.rx-tonal .pos, .rx-tonal .neg { filter: saturate(.9); }
.rx-donut { position: relative; width: calc(150 * var(--u)); aspect-ratio: 1; margin: calc(4 * var(--u)) auto calc(14 * var(--u)); border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(#a0d956 0 calc(var(--a) * 360deg), #f45911 0 calc((var(--a) + var(--b)) * 360deg), #526fff 0); }
.rx-donut::before { content: ""; position: absolute; inset: calc(22 * var(--u)); border-radius: 50%; background: var(--bg); }
.rx-donut b, .rx-donut span { position: relative; background: var(--bg); }
.rx-donut b { font-size: calc(17 * var(--u)); }
.rx-donut span { font-size: calc(11.5 * var(--u)); color: var(--mut); }
.rx-legend { list-style: none; margin: 0; padding: 0; }
.rx-legend li { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(6 * var(--u)) 0; font-size: calc(13.5 * var(--u)); }
.rx-legend i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; }
.rx-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.rx-legend em { font-style: normal; color: var(--mut); font-size: calc(12 * var(--u)); width: calc(34 * var(--u)); text-align: right; }
.rx .rx-note { text-align: center; font-size: calc(12 * var(--u)); color: var(--mut); margin-top: calc(8 * var(--u)); }

/* Empresas: painel, transações, empresas */
.rx .rx-ptitle { font-family: "Outfit", sans-serif; font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: -0.01em; margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); }
.rx-orgline { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-bottom: calc(12 * var(--u)); color: var(--mut); font-size: calc(16 * var(--u)); }
.rx-orgline > span:first-child { font-family: "Inter Tight", system-ui, sans-serif; font-size: calc(11 * var(--u)); color: var(--acc); letter-spacing: .02em; }
.rx-cons .k { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); }
.rx-cons .k .rx-i { font-size: calc(16 * var(--u)); color: var(--acc); }
.rx-cons .k2 { margin-top: calc(8 * var(--u)); color: var(--on); font-size: calc(13 * var(--u)); }
.rx-cons .big { display: block; font-size: calc(28 * var(--u)); margin-top: calc(2 * var(--u)); }
.rx-met { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid var(--ol); }
.rx-met span { font-size: calc(11 * var(--u)); }
.rx-met b { display: block; font-size: calc(14 * var(--u)); margin-top: calc(2 * var(--u)); }
.rx-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.rx-btns span { display: flex; justify-content: center; align-items: center; gap: calc(8 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--hi); font-size: calc(14 * var(--u)); font-weight: 600; }
.rx-btns .rx-i { font-size: calc(18 * var(--u)); color: var(--acc); }
.rx .rx-hbar p { display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--u)) calc(10 * var(--u)); margin-bottom: calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
.rx-hbar p span { display: inline; font-size: inherit; }
.rx-hbar i { grid-column: 1 / -1; height: calc(8 * var(--u)); width: calc(var(--w) * 100%); border-radius: calc(4 * var(--u)); background: currentColor; }
.rx-hbar i.pos { color: var(--pos); } .rx-hbar i.neg { color: var(--neg); } .rx-hbar i.sig { color: var(--acc); }
.rx-commit { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.rx-commit b { font-size: calc(14.5 * var(--u)); }
.rx-commit em { font-style: normal; color: var(--on); }
.rx-filters { display: flex; gap: calc(6 * var(--u)); margin-bottom: calc(10 * var(--u)); overflow: hidden; }
.rx-filters span { flex: none; padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ol); font-size: calc(12.5 * var(--u)); color: var(--mut); }
.rx-filters .on { background: var(--accC); color: var(--onAccC); box-shadow: none; }
.rx .rx-date { font-family: "Inter Tight", system-ui, sans-serif; font-size: calc(11 * var(--u)); text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
.rx-tx { list-style: none; margin: 0; padding: 0; }
.rx-tx li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); background: var(--sf); border-radius: calc(10 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.rx-tx li > div { flex: 1; min-width: 0; }
.rx-tx li b { display: block; font-size: calc(14 * var(--u)); }
.rx-tx li span:not(.o) { display: block; font-size: calc(12 * var(--u)); color: var(--mut); }
.rx-tx li > b { flex: none; font-size: calc(13 * var(--u)); }
.rx-tx .o { width: calc(36 * var(--u)); height: calc(36 * var(--u)); font-size: calc(18 * var(--u)); }
.rx .rx-sub { font-size: calc(13 * var(--u)); color: var(--mut); margin: 0 0 calc(12 * var(--u)); }
.rx-active { display: flex; gap: calc(12 * var(--u)); align-items: flex-start; font-size: calc(24 * var(--u)); }
.rx-b .rx-active { background: var(--accC); color: var(--onAccC); }
.rx-active b { display: block; font-size: calc(15 * var(--u)); }
.rx .rx-active .w { font-size: calc(14 * var(--u)); font-weight: 600; opacity: 1; margin: calc(2 * var(--u)) 0; }
.rx-org { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--sf); box-shadow: inset 0 0 0 1px var(--ol); margin-bottom: calc(8 * var(--u)); color: var(--mut); font-size: calc(22 * var(--u)); } /* taste-skill-ignore: company card in app */
.rx-org > div { flex: 1; min-width: 0; }
.rx-org b { display: block; font-size: calc(14 * var(--u)); color: var(--on); }
.rx-org span { display: block; font-size: calc(12 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-org em { font-style: normal; font-family: "Inter Tight", system-ui, sans-serif; font-size: calc(10.5 * var(--u)); }
.rx-org > i { font-style: normal; font-family: "Inter Tight", system-ui, sans-serif; font-size: calc(10 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--hi); }
.rx-org.on { background: var(--accC); box-shadow: inset 0 0 0 1.5px var(--acc); color: var(--onAccC); } /* taste-skill-ignore: active company in app */
.rx-org.on > i { background: var(--acc); color: var(--onAcc); }
.rx-cta-b { display: flex; justify-content: center; align-items: center; gap: calc(8 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--acc); color: var(--onAcc); font-weight: 600; font-size: calc(14.5 * var(--u)); margin-top: calc(6 * var(--u)); }
.rx-cta-b .rx-i { font-size: calc(18 * var(--u)); }

/* história fixada: cada passo é uma tela inteira */
.rx-stage { position: absolute; inset: 0; display: block; }
.rx-stage .sf.rx { position: absolute; inset: 0; padding: 0; font-size: calc(15 * var(--u)); align-self: auto; }
.step-frame:has(.rx) { padding: 0; background: none; }
.step-frame .sf.rx { --u: min(0.9px, calc((100vw - 64px) / 393)); position: relative; height: calc(600 * var(--u)); border-radius: 22px; overflow: hidden; }
.step-frame .sf.rx .rx-app { inset: calc(14 * var(--u)) 0 0; }

/* ---------- filme: o app em 15 segundos ----------
   Toca sem som quando aparece; o botão liga a narração e volta ao início.
   Em telas estreitas o site troca para a versão vertical do filme. */
.film { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--gap) calc(var(--gap) * 2); align-items: end; }
.film-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 34ch; margin-top: 20px; }
.film-frame { position: relative; margin: 0; border-radius: calc(var(--r) * 1.5); overflow: hidden; background: var(--dark); aspect-ratio: 16 / 9; }
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-sound {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.film-sound:active { transform: scale(0.97); }
.film-ic { width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.film-sound[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .film-sound:hover { background: #fff; } .film-sound[aria-pressed="true"]:hover { background: var(--accent-2); } }
@media (max-width: 900px) {
  .film { grid-template-columns: minmax(0, 1fr); }
  .film-frame { aspect-ratio: 9 / 16; max-height: 82svh; width: min(100%, 460px); justify-self: center; }
}

/* ---------- página de comparação (comparar.html) ---------- */
.lp-hero { padding: clamp(56px, 8vw, 120px) var(--g) 0; }
.lp-kicker { font-size: var(--t-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.lp-h1 { font-size: var(--t-display); font-weight: 600; line-height: 1; letter-spacing: -0.04em; max-width: 14ch; margin: 14px 0 0; }
.lp-lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); max-width: 46ch; margin-top: 24px; }
.lp-sec .h2 { margin-bottom: 40px; }
.cmp-2 .cmp-row { grid-template-columns: 5fr repeat(2, minmax(0, 3fr)); }
@media (max-width: 640px) { html[data-edition] .cmp-2 .cmp-row > :nth-child(3)::before { content: "Planilha"; } }
.lp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) calc(var(--gap) * 2); }
.lp-h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; }
.lp-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; font-size: var(--t-lead); line-height: 1.45; }
.lp-list li { padding: 0; }
.lp-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.lp-steps li { counter-increment: s; background: var(--field); border-radius: var(--r); padding: 28px; font-size: var(--t-body); line-height: 1.5; color: var(--muted); }
.lp-steps li::before { content: counter(s); display: block; font-size: 44px; font-weight: 600; line-height: 1; color: var(--accent-ink); margin-bottom: 18px; }
.lp-steps b { display: block; color: var(--ink); font-size: var(--t-lead); margin-bottom: 8px; }
.lp-film-frame { max-width: 1100px; }
.lp-faq { max-width: 860px; }
.lp-faq details { padding: 0 0 16px; }
.lp-faq details + details { padding-top: 16px; }
.lp-faq summary { cursor: pointer; padding: 22px 0; font-size: var(--t-lead); font-weight: 600; list-style-position: outside; }
.lp-faq p { margin: 0 0 22px; font-size: var(--t-body); line-height: 1.6; color: var(--muted); max-width: 62ch; }
.lp-faq a { color: var(--accent); }
@media (max-width: 900px) {
  .lp-cols, .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-film-frame { aspect-ratio: 16 / 9; width: 100%; max-height: none; }
  .lp-bar-act .bar-web { display: none; }
  .lp-bar-act { margin-left: auto; }
  .lp-bar-act .btn-sm { display: inline-flex; }
}
.lp-bar-act { margin-left: auto; }

/* ============ Lumi por mensagem (Telegram; WhatsApp em breve) ============ */
/* A tabela do Pessoal ganhou a linha "Lumi no Telegram e WhatsApp". */
.ptable[data-ed="personal"] { grid-template-rows: repeat(12, auto); }

.lumi-msg {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(40px, 6vw, 120px); align-items: center;
}
.lumi-msg-chat { gap: 18px; }
.lumi-msg-app {
  display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink);
  padding-bottom: 14px; border-bottom: 1px solid var(--field-2);
}
.lumi-msg-app small { font-weight: 500; color: var(--muted); }
.tg-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 0 4px var(--soft); }
.lm-meta { font-size: 15px; color: var(--muted); }
.lm-undo {
  display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px;
  background: var(--field); color: var(--accent-ink); font-size: 14px; font-weight: 600;
}
.lm-kicker {
  display: inline-block; padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
  background: var(--soft); color: var(--on-soft); font-size: 14px; font-weight: 600;
}
.lm-steps { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: lm; display: grid; gap: 14px; max-width: 44ch; }
.lm-steps li { counter-increment: lm; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.lm-steps li::before {
  content: counter(lm); width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px;
}
.lm-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lm-ch { padding: 8px 16px; border-radius: 999px; background: var(--field); color: var(--muted); font-size: 15px; font-weight: 500; }
.lm-ch.on { background: var(--accent); color: var(--on-accent); }
.lm-note { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 44ch; }

@media (max-width: 960px) {
  .lumi-msg { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .lumi-msg-text { order: -1; }
}