/* ═══════════════════════════════════════════════════════════════════
   ProfileDock — Landing page oficial
   ───────────────────────────────────────────────────────────────────
   Estático, sem build step, sem dependências. Mesma convenção do
   cliente Electron (`renderer/style.css`) e da landing page da Yolu:
   HTML/CSS/JS puro, tudo self-hosted.

   DIREÇÃO (revisão): a página usa os DOIS temas reais do ProfileDock.
   Corre escura (tema padrão do app) e abre numa faixa clara — a mesma
   "paper" do `body.light` do app, tokens idênticos — na seção "Para
   quem é", onde as ilustrações respiram e onde a leitura corrida no
   escuro começava a cansar. Depois volta ao escuro pra preço e
   fechamento. Não é uma paleta inventada pra "dar variedade": são as
   duas peles que o produto já tem.

   Estrutura por FAIXAS de superfície (`.band`), não por fios de 1px
   repetidos até o fim — era isso que dava à versão anterior a cara de
   documentação em vez de página comercial.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fonte: mesmo arquivo do app (Inter variável, eixo wght 100-900,
      48KB, self-hosted — nunca CDN) ───────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* Superfícies escuras — tokens do tema padrão do app */
  --ink: #0c0a08;
  --ink-2: #100e0d;
  --panel: #151312;
  --panel-2: #1a1818;
  --inset: #161413;

  --line: #252323;
  --line-2: #302e2f;

  --text: #f2f2f0;      /* 17.6:1 sobre --ink */
  --text-mid: #9c9a96;  /*  7.0:1 sobre --ink */
  /* `--text-dim` do app (#575552) rende 2.69:1 — suficiente dentro de um
     app que o usuário já domina, reprovado numa página pública. Este é o
     equivalente calibrado: passa em todas as superfícies escuras da
     página (4.75:1 a 5.31:1). `--text-dim` fica só pra decoração e pra
     dentro da recriação da interface, que é ilustração de screenshot. */
  --text-quiet: #878480;
  --text-dim: #575552;

  --accent: #ff7a30;
  --accent-ink: #0c0a08;
  --accent-soft: rgba(255, 122, 48, 0.12);
  --accent-line: rgba(255, 122, 48, 0.3);

  /* Cores reais da paleta de sessões do app (`renderer.js`, COLORS).
     Usadas nas ilustrações e na recriação da interface. */
  --s1: #6c7dff;
  --s2: #22c1a0;
  --s3: #e0a95b;
  --s4: #e26a6a;
  --sc: var(--s1); /* cor da sessão corrente — resolvida por [data-s] */

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --shell: 1120px;
  --shell-wide: 1300px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

/* Índice de cor de sessão → cor real. Evita `style=` inline, que
   obrigaria a CSP a liberar `style-src 'unsafe-inline'`. */
[data-s='1'] { --sc: var(--s1); }
[data-s='2'] { --sc: var(--s2); }
[data-s='3'] { --sc: var(--s3); }
[data-s='4'] { --sc: var(--s4); }

/* ═══════════════════════════════════════════════════════════════════
   LINGUAGEM DE ILUSTRAÇÃO
   ───────────────────────────────────────────────────────────────────
   As ilustrações da página não são decoração genérica: são desenhadas
   com o vocabulário do próprio produto — molduras de janela, panes,
   fichas de sessão, os ícones reais do app — em traço de 1,5px com
   junções arredondadas, exatamente a linguagem dos ícones de
   `renderer/renderer.js`. Monocromáticas, com as 4 cores reais de
   sessão como único preenchimento. Sem gradiente, sem sombra, sem
   mascote.

   As classes abaixo existem pra que nenhum SVG precise de `style=`
   ou de cor fixa: assim as ilustrações reagem sozinhas à troca de
   superfície (escura ↔ clara) e a CSP continua dispensando
   `style-src 'unsafe-inline'`.
   ═══════════════════════════════════════════════════════════════════ */
:root { --ill-ink: #46423f; }

.ill { display: block; width: 100%; height: auto; color: var(--ill-ink); }
.ill .ln { stroke: currentColor; }   /* traço de estrutura */
.ill .lnf { fill: currentColor; }    /* massa de estrutura */
.ill .srf { fill: var(--inset); }    /* superfície interna */
.ill .mut { opacity: 0.55; }

.ill .c1 { stroke: var(--s1); }
.ill .c2 { stroke: var(--s2); }
.ill .c3 { stroke: var(--s3); }
.ill .c4 { stroke: var(--s4); }
.ill .f1 { fill: var(--s1); }
.ill .f2 { fill: var(--s2); }
.ill .f3 { fill: var(--s3); }
.ill .f4 { fill: var(--s4); }

.ill .ac { stroke: var(--accent); }
.ill .acf { fill: var(--accent); }
.ill .acs { stroke: var(--accent-line); }

/* ── Reset enxuto ───────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--text); text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ═══════════════════════════════════════════════════════════════════
   TIPOGRAFIA — dois registros extremos, uma família só.
   Display: peso alto, tracking bem negativo, corpo grande.
   Utilitário: caixa alta, tracking bem aberto, corpo pequeno.
   O contraste entre os dois é o que dá personalidade sem introduzir
   uma segunda fonte — a landing precisa parecer o mesmo produto.
   ═══════════════════════════════════════════════════════════════════ */
.eyebrow {
  display: block;
  color: var(--text-quiet);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow--accent { color: var(--accent); }

.h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.9rem);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 0.98;
}

.h2 {
  font-size: clamp(2rem, 4.3vw, 3.1rem);
  font-weight: 680;
  letter-spacing: -0.034em;
  line-height: 1.05;
}

.h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.lead {
  max-width: 44ch;
  color: var(--text-mid);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Sublinhado laranja — único ornamento tipográfico da página.
   Em `background-image`, não em `::after` absoluto: um pseudo-elemento
   posicionado só cobre a primeira linha e obrigaria `white-space:
   nowrap`, que estoura a largura no celular. */
.mark {
  color: var(--text);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.11em;
  background-position: 0 calc(100% - 0.07em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tnum { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   FAIXAS — a estrutura da página. Cada seção é uma superfície, e o
   contraste entre superfícies substitui os fios de 1px repetidos.
   ═══════════════════════════════════════════════════════════════════ */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.shell--wide { max-width: var(--shell-wide); }

.band { padding-block: clamp(4rem, 8vw, 6.5rem); }

.band--lift {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
}

/* A faixa clara: tokens do `body.light` do app, sem invenção.
   `--accent` vira #c2410c porque o laranja puro rende ~2.6:1 sobre
   branco — a própria folha do app já resolve assim no tema claro. */
.band--paper {
  --text: #18181b;
  --text-mid: #55524e;
  --text-quiet: #6d6b68;
  --text-dim: #a5a39f;
  --line: #e2dfdb;
  --line-2: #d6d4d1;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --accent: #c2410c;
  --accent-soft: rgba(194, 65, 12, 0.07);
  --accent-line: rgba(194, 65, 12, 0.22);
  --accent-ink: #ffffff;
  /* Sessões um pouco mais profundas: as cores do tema escuro perdem
     legibilidade sobre branco. Mesma família, só assentadas. */
  --s2: #0f9b7f;
  --s3: #b07d2a;
  /* Superfície interna e traço das ilustrações precisam inverter junto
     com a faixa — sem isso os SVGs desenhariam massa escura sobre
     branco. */
  --inset: #f1efec;
  --ill-ink: #aca69e;

  color-scheme: light;
  background: #f5f4f2;
  color: var(--text);
}

.band-head { max-width: 54ch; }
.band-head .eyebrow { margin-bottom: 1.1rem; }
.band-head .lead { margin-top: 1.25rem; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════ */
.head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.head[data-scrolled='true'] {
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  border-bottom-color: var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: 4.25rem;
}

.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.022em;
}
.brand img { width: 1.75rem; height: 1.75rem; }

/* Wordmark em texto, como a titlebar do app monta (`Profile<b>Dock</b>`) */
.brand-word { font-size: 1.0625rem; font-weight: 500; }
.brand-word b { font-weight: 700; color: var(--accent); }

.head-nav {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  margin-left: auto;
  font-size: 0.875rem;
}
.head-nav a {
  padding-block: 0.35rem;
  color: var(--text-mid);
  transition: color 0.18s var(--ease);
}
.head-nav a:hover { color: var(--text); }

.head-side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.head-nav + .head-side { margin-left: 0; }

.lang {
  display: flex;
  align-items: center;
  padding: 0.14rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang a {
  padding: 0.28rem 0.5rem;
  border-radius: 5px;
  color: var(--text-quiet);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.lang a:hover { color: var(--text-mid); }
.lang a[aria-current='true'] { background: var(--panel-2); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   BOTÕES
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.16s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 87%, #fff); }

.btn--ghost {
  border-color: var(--line-2);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--text-dim); background: var(--panel); }

.btn--sm { min-height: 2.25rem; padding: 0.45rem 0.95rem; font-size: 0.875rem; }
.btn--lg { min-height: 3.3rem; padding: 1rem 1.85rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn svg { width: 1.05em; height: 1.05em; }

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding-top: clamp(3.25rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}

/* Halo quente atrás do conteúdo — mesmo recurso da landing da Yolu, em
   intensidade muito menor (é fundo, não protagonista). */
.hero::before {
  position: absolute;
  top: -30%;
  left: 50%;
  z-index: -1;
  width: min(1100px, 130%);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 122, 48, 0.12), rgba(255, 122, 48, 0.03) 45%, transparent 70%);
  content: '';
  filter: blur(20px);
  pointer-events: none;
}

.hero .eyebrow { margin-bottom: 1.25rem; }
.hero .lead { max-width: 46ch; }

/* A medida do título fica NO título, não no container: `ch` resolve
   contra o font-size do próprio elemento, então 16ch aqui significa
   ~16 caracteres por linha no corpo de display. Posto no `.hero-copy`
   (corpo de 1rem) daria ~190px e esmagaria a manchete. */
.hero .h1 {
  max-width: 16ch;
  margin-bottom: 1.4rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Fichas de reasseguramento: ícone + rótulo, no lugar da lista de texto
   corrido da versão anterior. */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.hero-chips li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  color: var(--text-mid);
  font-size: 0.8125rem;
}
.hero-chips svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}

.hero-stage { margin-top: clamp(2.75rem, 5.5vw, 4.25rem); }

.stage-note {
  max-width: 60ch;
  margin: 1.25rem auto 0;
  color: var(--text-quiet);
  font-size: 0.8125rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   RECRIAÇÃO DA INTERFACE  ← elemento-âncora da página
   ───────────────────────────────────────────────────────────────────
   Não existe screenshot no repositório do ProfileDock (só o ícone e os
   logos). Esta é uma recriação fiel em HTML/CSS da interface real
   (`renderer/index.html` + `renderer/style.css`): titlebar, rail de
   workspaces, painel de sessões com o switch de política, e a grade de
   panes com a STRIP VERTICAL de controles que o app de fato usa. Os
   ícones SVG são os mesmos do app, copiados literalmente.

   ↳ SUBSTITUIR POR SCREENSHOT: ver o comentário no HTML. Basta trocar
     o bloco `.app-window` por um `<img>`; nada mais depende dele.

   Escala: tudo em múltiplos de `--u`, derivada da largura do próprio
   container (`cqw`) — encolhe proporcional, sem JavaScript.
   ═══════════════════════════════════════════════════════════════════ */
.app-window {
  container-type: inline-size;
  --u: 1cqw;

  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--ink);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 2.5rem 5.5rem -1.5rem rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-titlebar {
  display: flex;
  align-items: center;
  gap: calc(0.9 * var(--u));
  height: calc(3.2 * var(--u));
  padding-inline: calc(1.1 * var(--u));
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}

.app-tb-brand {
  display: flex;
  align-items: center;
  gap: calc(0.55 * var(--u));
  font-size: calc(1.14 * var(--u));
  font-weight: 500;
  letter-spacing: -0.02em;
}
.app-tb-brand img { width: calc(1.55 * var(--u)); height: calc(1.55 * var(--u)); }
.app-tb-brand b { font-weight: 700; }

.app-tb-controls {
  display: flex;
  align-items: center;
  gap: calc(0.35 * var(--u));
  margin-left: auto;
}
.app-tb-btn {
  display: grid;
  place-items: center;
  width: calc(2.25 * var(--u));
  height: calc(2.25 * var(--u));
  border-radius: calc(0.45 * var(--u));
  color: var(--text-dim);
}
.app-tb-btn svg { width: calc(1.25 * var(--u)); height: calc(1.25 * var(--u)); }
.app-tb-sep {
  width: 1px;
  height: calc(1.5 * var(--u));
  margin-inline: calc(0.4 * var(--u));
  background: var(--line-2);
}

.app-body { display: flex; height: calc(37 * var(--u)); }

.app-sidebar {
  display: flex;
  flex: 0 0 auto;
  border-right: 1px solid var(--line);
  background: var(--ink-2);
}

.app-rail {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: calc(0.6 * var(--u));
  width: calc(3.9 * var(--u));
  padding-block: calc(0.9 * var(--u));
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.app-ws {
  display: grid;
  place-items: center;
  width: calc(2.55 * var(--u));
  height: calc(2.55 * var(--u));
  border: 1px solid var(--line-2);
  border-radius: calc(0.6 * var(--u));
  color: var(--text-dim);
}
.app-ws svg { width: calc(1.45 * var(--u)); height: calc(1.45 * var(--u)); }
.app-ws[data-active='true'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.app-ws--add { border-style: dashed; }

.app-sessions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: calc(16.5 * var(--u));
  padding: calc(1 * var(--u));
}

.app-sessions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(0.9 * var(--u));
  color: var(--text-dim);
  font-size: calc(0.86 * var(--u));
  font-weight: 600;
  letter-spacing: 0.14em;
}
.app-sessions-head svg { width: calc(1.15 * var(--u)); height: calc(1.15 * var(--u)); }

.app-policy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: calc(1.1 * var(--u));
  padding: calc(0.18 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(0.6 * var(--u));
  background: var(--inset);
}
.app-policy span {
  padding-block: calc(0.4 * var(--u));
  border-radius: calc(0.42 * var(--u));
  color: var(--text-dim);
  font-size: calc(0.88 * var(--u));
  text-align: center;
}
.app-policy span[data-on='true'] {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-acclist { display: flex; flex-direction: column; gap: calc(0.35 * var(--u)); }
.app-acc {
  display: flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  padding: calc(0.55 * var(--u)) calc(0.7 * var(--u));
  border: 1px solid transparent;
  border-radius: calc(0.55 * var(--u));
  color: var(--text-mid);
  font-size: calc(1 * var(--u));
}
.app-acc[data-active='true'] {
  border-color: var(--line-2);
  background: var(--panel-2);
  color: var(--text);
}
.app-acc-dot {
  flex: 0 0 auto;
  width: calc(0.7 * var(--u));
  height: calc(0.7 * var(--u));
  border-radius: 50%;
  background: var(--sc);
}
.app-acc-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.app-add {
  margin-top: calc(0.8 * var(--u));
  padding-block: calc(0.5 * var(--u));
  border: 1px dashed var(--line-2);
  border-radius: calc(0.55 * var(--u));
  color: var(--text-dim);
  font-size: calc(0.93 * var(--u));
  text-align: center;
}

.app-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  background: var(--line);
}
.app-pane { display: flex; overflow: hidden; background: var(--ink); }

/* Strip vertical de controles — 64px no app real */
.app-strip {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: calc(0.45 * var(--u));
  width: calc(3 * var(--u));
  padding-block: calc(0.7 * var(--u));
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.app-strip-dot {
  width: calc(0.82 * var(--u));
  height: calc(0.82 * var(--u));
  margin-bottom: calc(0.2 * var(--u));
  border-radius: 50%;
  background: var(--sc);
}
.app-strip-btn {
  display: grid;
  place-items: center;
  width: calc(2.05 * var(--u));
  height: calc(2.05 * var(--u));
  border-radius: calc(0.45 * var(--u));
  color: var(--text-dim);
}
.app-strip-btn svg { width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); }
.app-strip-btn--sync {
  width: calc(2.35 * var(--u));
  height: calc(2.35 * var(--u));
  border: 1px solid var(--line-2);
  color: var(--text-mid);
}
.app-strip-btn--sync[data-on='true'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.app-strip-sep {
  width: calc(1.4 * var(--u));
  height: 1px;
  margin-block: calc(0.25 * var(--u));
  background: var(--line-2);
}

/* Conteúdo do pane — representação neutra de uma aplicação web. De
   propósito não imita nenhum serviço real. */
.app-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(0.75 * var(--u));
  min-width: 0;
  padding: calc(1 * var(--u));
}
.app-view-bar {
  display: flex;
  align-items: center;
  gap: calc(0.55 * var(--u));
  padding: calc(0.35 * var(--u)) calc(0.6 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(0.45 * var(--u));
  background: var(--inset);
  color: var(--text-dim);
  font-size: calc(0.8 * var(--u));
}
.app-view-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-view-lock {
  flex: 0 0 auto;
  width: calc(0.62 * var(--u));
  height: calc(0.62 * var(--u));
  border-radius: 50%;
  background: #3fb950;
  opacity: 0.7;
}

/* Etiqueta da sessão dentro do pane: é o que faz a recriação parecer um
   produto em uso, e não um wireframe. */
.app-view-tag {
  display: flex;
  align-items: center;
  gap: calc(0.45 * var(--u));
  color: var(--text);
  font-size: calc(1.05 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-view-tag::before {
  width: calc(0.62 * var(--u));
  height: calc(0.62 * var(--u));
  border-radius: 50%;
  background: var(--sc);
  content: '';
}

.app-view-rows { display: flex; flex: 1 1 auto; flex-direction: column; gap: calc(0.5 * var(--u)); }
.app-view-row {
  height: calc(0.6 * var(--u));
  border-radius: calc(0.3 * var(--u));
  background: var(--line-2);
}
.app-view-row:nth-child(1) { width: 88%; }
.app-view-row:nth-child(2) { width: 72%; }
.app-view-row:nth-child(3) { width: 91%; }
.app-view-row:nth-child(4) { width: 55%; }

/* Barra de progresso colorida no rodapé do pane — sugere atividade real
   na sessão sem inventar número nenhum. */
.app-view-meter {
  height: calc(0.5 * var(--u));
  border-radius: 100px;
  background: var(--inset);
}
.app-view-meter i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--sc);
  opacity: 0.85;
}
/* Larguras via atributo, não `style=` inline (ver nota da CSP). */
.app-view-meter i[data-w='72'] { width: 72%; }
.app-view-meter i[data-w='45'] { width: 45%; }
.app-view-meter i[data-w='30'] { width: 30%; }
.app-view-meter i[data-w='18'] { width: 18%; }

/* Abaixo de 760px a recriação completa fica ilegível: reduz pra dois
   panes em coluna, sem o painel de sessões, e aumenta a unidade base. */
@media (max-width: 760px) {
  .app-window { --u: 2.1cqw; }
  .app-body { height: auto; }
  .app-sessions { display: none; }
  .app-grid { grid-template-columns: 1fr; grid-template-rows: repeat(2, calc(15 * var(--u))); }
  .app-pane--hide-sm { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROBLEMA — ilustração à esquerda, três frases curtas à direita.
   ═══════════════════════════════════════════════════════════════════ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.figure {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.figure svg { width: 100%; height: auto; }

.pain-list { display: grid; gap: 1.35rem; margin-top: 2rem; }
.pain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.pain::before {
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  border-radius: 2px;
  background: var(--accent);
  content: '';
}
.pain b {
  display: block;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.pain span { color: var(--text-mid); font-size: 0.9375rem; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   BENEFÍCIOS
   ═══════════════════════════════════════════════════════════════════ */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}
.benefit { padding: clamp(1.5rem, 2.6vw, 2rem); background: var(--ink); }
.benefit-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--panel);
  color: var(--accent);
}
.benefit-icon svg { width: 1.2rem; height: 1.2rem; }
.benefit .h3 { margin-bottom: 0.5rem; }
.benefit p { color: var(--text-mid); font-size: 0.9375rem; text-wrap: pretty; }

/* Faixa de tranquilidade — segurança como benefício, uma linha cada.
   Nada de arquitetura interna. */
.assure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.assure div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  color: var(--text-mid);
  font-size: 0.9rem;
  line-height: 1.5;
}
.assure svg { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   PARA QUEM É — a faixa clara. Três cartões brancos com ilustração.
   ═══════════════════════════════════════════════════════════════════ */
.uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.use {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.use-art {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  background: #faf9f8;
}
.use-art svg { width: 100%; height: auto; }
.use-body { padding: clamp(1.25rem, 2.5vw, 1.6rem); }
.use-body .h3 { margin-bottom: 0.45rem; }
.use-body p { color: var(--text-mid); font-size: 0.9375rem; text-wrap: pretty; }

.uses-note {
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--text-mid);
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════════
   COMO FUNCIONA — sequência real, por isso a numeração.
   Numerais em peso 200 num corpo grande, contra títulos pesados: é o
   contraste tipográfico da página, e só é possível porque a Inter aqui
   é variável de verdade (eixo wght 100–900, verificado no arquivo).
   ═══════════════════════════════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.step { position: relative; }

/* Fio pontilhado ligando os passos — some quando a grade quebra. */
.step:not(:last-child)::after {
  position: absolute;
  top: 1.5rem;
  right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem));
  width: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px dashed var(--line-2);
  content: '';
}

.step-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.step-num {
  color: var(--accent);
  font-size: 2.6rem;
  font-weight: 200;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
}
.step-icon svg { width: 1.25rem; height: 1.25rem; }
.step .h3 { margin-bottom: 0.4rem; }
.step p { color: var(--text-mid); font-size: 0.9375rem; text-wrap: pretty; }

@media (max-width: 900px) {
  .step:not(:last-child)::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREÇO
   ═══════════════════════════════════════════════════════════════════ */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.includes { display: grid; gap: 0.9rem; }
.includes li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  color: var(--text-mid);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.includes svg { width: 1.05rem; height: 1.05rem; margin-top: 0.22rem; color: var(--accent); }
.includes b { color: var(--text); font-weight: 600; }

.price-card {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--panel-2);
  box-shadow:
    0 1.5rem 3.5rem -1rem rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.price-was {
  color: var(--text-quiet);
  font-size: 0.9375rem;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.price-now {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: clamp(2.75rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.price-cur { color: var(--text-mid); font-size: 0.38em; font-weight: 600; }
.price-terms { margin-top: 0.7rem; color: var(--text-mid); font-size: 0.9375rem; }
.price-card .btn { margin-top: 1.5rem; }
.price-fine {
  margin-top: 1.1rem;
  color: var(--text-quiet);
  font-size: 0.75rem;
  line-height: 1.55;
}

@media (max-width: 880px) {
  .offer { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ — <details> nativo: acessível e funciona sem JavaScript.
   ═══════════════════════════════════════════════════════════════════ */
.faq {
  max-width: 52rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
  transition: color 0.18s var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary::after {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-quiet);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.1;
  content: '+';
  transition: transform 0.2s var(--ease), color 0.18s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-answer {
  max-width: 62ch;
  padding-right: 2.5rem;
  padding-bottom: 1.5rem;
  color: var(--text-mid);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════
   CTA FINAL
   ═══════════════════════════════════════════════════════════════════ */
.final {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  text-align: center;
}
.final::before {
  position: absolute;
  bottom: -55%;
  left: 50%;
  z-index: -1;
  width: min(900px, 120%);
  aspect-ratio: 1.7;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 122, 48, 0.11), transparent 65%);
  content: '';
  filter: blur(24px);
  pointer-events: none;
}
.final .h2 { max-width: 20ch; margin-inline: auto; }
.final .lead { max-width: 42ch; margin: 1.2rem auto 0; }
.final-actions { margin-top: 2rem; }

/* ═══════════════════════════════════════════════════════════════════
   RODAPÉ
   ═══════════════════════════════════════════════════════════════════ */
.foot {
  padding-block: clamp(2.5rem, 5vw, 3.25rem);
  border-top: 1px solid var(--line);
  color: var(--text-quiet);
  font-size: 0.8125rem;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
}
.foot-brand { display: flex; align-items: center; gap: 0.6rem; }
.foot-brand img { width: 1.4rem; height: 1.4rem; opacity: 0.9; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.foot-links a { transition: color 0.18s var(--ease); }
.foot-links a:hover { color: var(--text-mid); }
.foot-note {
  max-width: 66ch;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   MOVIMENTO — melhoria progressiva. Sem JS (ou com reduced-motion) o
   conteúdo já está visível: a classe só entra quando dá pra animar.
   ═══════════════════════════════════════════════════════════════════ */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js-reveal .reveal[data-shown='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ── Header responsivo ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .head-nav { display: none; }
  /* Sem esta linha o header quebra: `.head-nav + .head-side` zera a
     margem automática, e com a navegação oculta o bloco de idioma + CTA
     colaria na marca, alinhado à esquerda. */
  .head-side { margin-left: auto; }
}

@media (max-width: 460px) {
  .head-inner { height: 3.75rem; gap: 0.75rem; }
  .lang { display: none; }
  .hero-actions .btn { width: 100%; }
}

/* Sentinela de 1px observada pelo script pra saber se a página saiu do
   topo. É classe, não `style=` montado em JS — assim a CSP dispensa
   `style-src 'unsafe-inline'`. */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.skip {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  transform: translate(-50%, -120%);
  border: 1px solid var(--line-2);
  border-radius: 0 0 8px 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.875rem;
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }