/* =============================================================================
   LLMail — design system
   Estrutura, escala e movimento extraídos de linear.app (04/09/2026).
   Cor, tom e marca vindos do branding starter kit do LLMail.
   O mapa de cada efeito está em ../TECNOLOGIAS.md
   ========================================================================== */

@font-face {
  font-family: "Inter Variable";
  src: url("/landing/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. tokens ---------------------------------------------------- */

:root {
  /* 1.1 famílias --------------------------------------------------------- */
  --font-regular: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-monospace: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-settings: "cv01", "ss03";

  /* 1.2 pesos (a escala do Linear: 510 e 590 no lugar de 500 e 600) ------- */
  --font-weight-normal: 400;
  --font-weight-medium: 510;
  --font-weight-semibold: 590;
  --font-weight-bold: 680;

  /* 1.3 títulos ---------------------------------------------------------- */
  --title-1-size: 1.0625rem;  --title-1-lh: 1.4;   --title-1-ls: -0.012em;
  --title-2-size: 1.25rem;    --title-2-lh: 1.33;  --title-2-ls: -0.012em;
  --title-3-size: 1.5rem;     --title-3-lh: 1.33;  --title-3-ls: -0.012em;
  --title-4-size: 2rem;       --title-4-lh: 1.125; --title-4-ls: -0.022em;
  --title-5-size: 2.5rem;     --title-5-lh: 1.1;   --title-5-ls: -0.022em;
  --title-6-size: 3rem;       --title-6-lh: 1;     --title-6-ls: -0.022em;
  --title-7-size: 3.5rem;     --title-7-lh: 1.1;   --title-7-ls: -0.022em;
  --title-8-size: 4rem;       --title-8-lh: 1.06;  --title-8-ls: -0.022em;

  /* 1.4 texto ------------------------------------------------------------ */
  --text-large-size: 1.0625rem; --text-large-lh: 1.6;  --text-large-ls: 0;
  --text-size: 0.9375rem;       --text-lh: 1.6;        --text-ls: -0.011em;
  --text-small-size: 0.875rem;  --text-small-lh: 1.5;  --text-small-ls: -0.013em;
  --text-mini-size: 0.8125rem;  --text-mini-lh: 1.5;   --text-mini-ls: -0.01em;
  --text-micro-size: 0.75rem;   --text-micro-lh: 1.4;  --text-micro-ls: 0;

  /* 1.5 marca ------------------------------------------------------------ */
  --brand-050: #f2fafb;
  --brand-100: #ddf1f3;
  --brand-200: #b7e2e6;
  --brand-300: #7fccd4;
  --brand-400: #34aab6;
  --brand-500: #0d8f9b;   /* Kingfisher Cyan — a cor da marca */
  --brand-600: #0b7a85;
  --brand-700: #0a636c;
  --brand-800: #094f57;

  /* 1.6 superfícies e texto (tema claro é o padrão) ---------------------- */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-translucent: rgba(15, 23, 42, 0.04);
  --color-bg-panel: #ffffff;

  --color-text-primary: #0f172a;    /* Dark Slate do branding */
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;   /* Muted Gray do branding */
  --color-text-quaternary: #94a3b8;
  --color-text-on-brand: #ffffff;

  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-translucent: rgba(15, 23, 42, 0.08);
  --color-border-translucent-strong: rgba(15, 23, 42, 0.14);

  --color-positive: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;

  /* 1.7 raios ------------------------------------------------------------ */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-rounded: 9999px;

  /* 1.8 sombras (baixas e empilhadas, como no Linear) -------------------- */
  --shadow-low: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-medium: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-high: 0 4px 8px rgba(15, 23, 42, 0.05), 0 16px 48px rgba(15, 23, 42, 0.1);
  --shadow-brand: 0 6px 20px rgba(13, 143, 155, 0.24);

  /* 1.9 tempo e curva ---------------------------------------------------- */
  --speed-quick: 0.1s;
  --speed-regular: 0.25s;
  --speed-button: 0.16s;
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  /* 1.10 medidas da página ---------------------------------------------- */
  --header-height: 64px;
  --header-blur: 20px;
  --page-max-width: 1152px;
  --prose-max-width: 640px;
  --page-padding-inline: 24px;
  --page-padding-block: 96px;
  --border-hairline: 1px;
  --layer-header: 100;
}

/* superfície escura: aplica-se a qualquer bloco com [data-surface="dark"] */
[data-surface="dark"] {
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #111f38;
  --color-bg-tertiary: #1e293b;
  --color-bg-translucent: rgba(255, 255, 255, 0.05);
  --color-bg-panel: #16243d;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-quaternary: #64748b;
  --color-border-primary: #1e293b;
  --color-border-secondary: #334155;
  --color-border-translucent: rgba(255, 255, 255, 0.08);
  --color-border-translucent-strong: rgba(255, 255, 255, 0.14);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.36);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

/* ---------- 2. base ------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-regular);
  font-feature-settings: var(--font-settings);
  font-size: var(--text-size);
  line-height: var(--text-lh);
  letter-spacing: var(--text-ls);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--brand-200); color: var(--color-text-primary); }

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

/* ---------- 3. tipografia ----------------------------------------------- */

.ds-title-8, .ds-title-7, .ds-title-6, .ds-title-5,
.ds-title-4, .ds-title-3, .ds-title-2, .ds-title-1 {
  font-weight: var(--font-weight-semibold);
  text-wrap: balance;
}

.ds-title-8 { font-size: var(--title-8-size); line-height: var(--title-8-lh); letter-spacing: var(--title-8-ls); }
.ds-title-7 { font-size: var(--title-7-size); line-height: var(--title-7-lh); letter-spacing: var(--title-7-ls); }
.ds-title-6 { font-size: var(--title-6-size); line-height: var(--title-6-lh); letter-spacing: var(--title-6-ls); }
.ds-title-5 { font-size: var(--title-5-size); line-height: var(--title-5-lh); letter-spacing: var(--title-5-ls); }
.ds-title-4 { font-size: var(--title-4-size); line-height: var(--title-4-lh); letter-spacing: var(--title-4-ls); }
.ds-title-3 { font-size: var(--title-3-size); line-height: var(--title-3-lh); letter-spacing: var(--title-3-ls); }
.ds-title-2 { font-size: var(--title-2-size); line-height: var(--title-2-lh); letter-spacing: var(--title-2-ls); }
.ds-title-1 { font-size: var(--title-1-size); line-height: var(--title-1-lh); letter-spacing: var(--title-1-ls); }

/* o degrau de baixo, no celular: a hero nunca estoura a tela */
@media (max-width: 1024px) {
  .ds-title-8 { font-size: var(--title-7-size); }
  .ds-title-7 { font-size: var(--title-6-size); }
  .ds-title-6 { font-size: var(--title-5-size); }
}
@media (max-width: 640px) {
  .ds-title-8, .ds-title-7 { font-size: var(--title-5-size); line-height: 1.08; }
  .ds-title-6 { font-size: var(--title-4-size); }
  .ds-title-5 { font-size: var(--title-4-size); }
}

.ds-text-large { font-size: var(--text-large-size); line-height: var(--text-large-lh); letter-spacing: var(--text-large-ls); }
.ds-text       { font-size: var(--text-size); line-height: var(--text-lh); letter-spacing: var(--text-ls); }
.ds-text-small { font-size: var(--text-small-size); line-height: var(--text-small-lh); letter-spacing: var(--text-small-ls); }
.ds-text-mini  { font-size: var(--text-mini-size); line-height: var(--text-mini-lh); letter-spacing: var(--text-mini-ls); }
.ds-text-micro { font-size: var(--text-micro-size); line-height: var(--text-micro-lh); letter-spacing: var(--text-micro-ls); }

.ds-muted { color: var(--color-text-tertiary); }
.ds-prose { max-width: var(--prose-max-width); }
.ds-mono  { font-family: var(--font-monospace); font-size: var(--text-mini-size); }

.ds-eyebrow {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-600);
}

/* ---------- 4. layout ---------------------------------------------------- */

.ds-page { max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--page-padding-inline); }
.ds-section { padding-block: var(--page-padding-block); }
@media (max-width: 640px) { :root { --page-padding-block: 64px; } }

.ds-stack { display: flex; flex-direction: column; }
.ds-gap-8  { gap: 8px; }  .ds-gap-12 { gap: 12px; } .ds-gap-16 { gap: 16px; }
.ds-gap-24 { gap: 24px; } .ds-gap-32 { gap: 32px; } .ds-gap-48 { gap: 48px; }

.ds-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ds-row  { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.ds-divider { height: 1px; background: var(--color-border-primary); border: 0; }

/* ---------- 5. botões ---------------------------------------------------- */

.ds-btn {
  --btn-height: 40px;
  --btn-padding: 0 18px;
  --btn-font-size: var(--text-small-size);
  appearance: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-height);
  padding: var(--btn-padding);
  border-radius: var(--radius-rounded);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--speed-button) var(--ease-out-quad);
  transition-property: background-color, border-color, color, box-shadow, transform, filter;
}
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn:active:not(:disabled) { transform: translateY(1px); }
.ds-btn > svg { width: 16px; height: 16px; fill: currentColor; }

/* brand-600, e não a cor cheia da marca: branco sobre #0d8f9b dá 3,87 de contraste,
   e o mínimo para texto de 13px é 4,5. Medido pelo Lighthouse em 05/09/2026. */
.ds-btn-primary {
  background: var(--brand-600);
  color: var(--color-text-on-brand);
  box-shadow: var(--shadow-brand);
}
.ds-btn-primary:hover { background: var(--brand-700); box-shadow: 0 8px 26px rgba(13, 143, 155, 0.3); }

.ds-btn-secondary {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: var(--border-hairline) solid var(--color-border-secondary);
  box-shadow: var(--shadow-low);
}
.ds-btn-secondary:hover { border-color: var(--brand-400); color: var(--brand-700); }

.ds-btn-ghost { background: transparent; color: var(--color-text-secondary); }
.ds-btn-ghost:hover { background: var(--color-bg-translucent); color: var(--color-text-primary); }

.ds-btn-small { --btn-height: 32px; --btn-padding: 0 14px; --btn-font-size: var(--text-mini-size); }
.ds-btn-large { --btn-height: 48px; --btn-padding: 0 24px; --btn-font-size: var(--text-size); }

/* ---------- 6. campos e formulário -------------------------------------- */

.ds-field {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-rounded);
  border: var(--border-hairline) solid var(--color-border-secondary);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-size);
  transition: border-color var(--speed-button) var(--ease-out-quad),
              box-shadow var(--speed-button) var(--ease-out-quad);
}
.ds-field::placeholder { color: var(--color-text-quaternary); }
.ds-field:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(13, 143, 155, 0.14);
}
.ds-field[aria-invalid="true"] { border-color: var(--color-danger); }

.ds-form { display: flex; gap: 10px; width: 100%; max-width: 520px; }
.ds-form .ds-field { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) { .ds-form { flex-direction: column; } .ds-form .ds-btn { width: 100%; } }

.ds-form-note { color: var(--color-text-tertiary); font-size: var(--text-micro-size); }
.ds-form-error { color: var(--color-danger); font-size: var(--text-mini-size); }
.ds-form-ok {
  color: var(--color-positive);
  font-size: var(--text-small-size);
  font-weight: var(--font-weight-medium);
}

/* ---------- 7. superfícies e cards -------------------------------------- */

.ds-card {
  background: var(--color-bg-panel);
  border: var(--border-hairline) solid var(--color-border-primary);
  border-radius: var(--radius-16);
  padding: 24px;
  transition: box-shadow var(--speed-regular) var(--ease-out-quad),
              transform var(--speed-regular) var(--ease-out-quad),
              border-color var(--speed-regular) var(--ease-out-quad);
}
.ds-card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }

.ds-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-rounded);
  background: var(--brand-050);
  border: var(--border-hairline) solid var(--brand-200);
  color: var(--brand-700);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
}
[data-surface="dark"] .ds-badge {
  background: rgba(13, 143, 155, 0.16);
  border-color: rgba(52, 170, 182, 0.4);
  color: var(--brand-300);
}

.ds-kbd {
  font-family: var(--font-monospace);
  font-size: 0.8em;
  padding: 2px 6px;
  border-radius: var(--radius-4);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* 7.1 borda em gradiente — a técnica do Linear: máscara com composite xor */
.ds-gradient-border { position: relative; }
.ds-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--gradient-border-size, 1px);
  border-radius: inherit;
  background: var(--gradient-border,
    linear-gradient(160deg, var(--brand-400), rgba(13, 143, 155, 0) 55%));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 7.2 brilho na borda que segue o cursor (JS alimenta --edge-x e --edge-y) */
.ds-edge-highlight { position: relative; isolation: isolate; }
.ds-edge-highlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    240px circle at var(--edge-x, 50%) var(--edge-y, 0%),
    rgba(13, 143, 155, 0.12),
    transparent 65%
  );
  transition: opacity var(--speed-regular) var(--ease-out-quad);
}
.ds-edge-highlight:hover::after { opacity: 1; }

/* 7.3 grão: textura de ruído, sem imagem externa */
.ds-grain { position: relative; }
.ds-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* 7.4 clarão da marca atrás da primeira dobra */
.ds-glow { position: relative; overflow: hidden; }
.ds-glow::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 2 / 1;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(13, 143, 155, 0.16), rgba(13, 143, 155, 0) 62%);
}

/* ---------- 8. cabeçalho ------------------------------------------------- */

.ds-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: var(--border-hairline) solid transparent;
  transition: background-color var(--speed-regular) var(--ease-out-quad),
              border-color var(--speed-regular) var(--ease-out-quad);
}
.ds-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border-bottom-color: var(--color-border-translucent);
}
.ds-header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ds-nav { display: flex; align-items: center; gap: 4px; }
.ds-nav a {
  padding: 6px 12px;
  border-radius: var(--radius-8);
  color: var(--color-text-secondary);
  font-size: var(--text-small-size);
  text-decoration: none;
  transition: color var(--speed-button) var(--ease-out-quad),
              background-color var(--speed-button) var(--ease-out-quad);
}
.ds-nav a:hover { color: var(--color-text-primary); background: var(--color-bg-translucent); }
@media (max-width: 720px) { .ds-nav { display: none; } }

/* ---------- 9. tabela de preço ------------------------------------------ */

.ds-plan { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.ds-plan-price { display: flex; align-items: baseline; gap: 6px; }
.ds-plan-price b {
  font-size: var(--title-5-size);
  line-height: 1;
  letter-spacing: var(--title-5-ls);
  font-weight: var(--font-weight-semibold);
}
/* o plano em destaque se separa pela sombra e pela borda mais forte, não por cor:
   o ciano nomeia só o que o LLMail fez sozinho (decisão D3 do quadro) */
.ds-plan-featured { border-color: var(--color-border-secondary); box-shadow: var(--shadow-medium); }
.ds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-text-secondary); font-size: var(--text-small-size); }
.ds-check { flex: none; width: 16px; height: 16px; margin-top: 3px; fill: var(--color-text-quaternary); }

/* ---------- 10. perguntas ------------------------------------------------ */

.ds-faq { border-top: var(--border-hairline) solid var(--color-border-primary); }
.ds-faq details { border-bottom: var(--border-hairline) solid var(--color-border-primary); }
.ds-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--speed-button) var(--ease-out-quad);
}
.ds-faq summary::-webkit-details-marker { display: none; }
.ds-faq summary:hover { color: var(--brand-700); }
.ds-faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--speed-regular) var(--ease-out-quart);
}
.ds-faq details[open] summary::after { rotate: -135deg; }
.ds-faq p { padding-bottom: 20px; color: var(--color-text-secondary); max-width: var(--prose-max-width); }

/* ---------- 11. movimento ------------------------------------------------ */

/* surgimento no rolar; o JS só troca o atributo */
.ds-reveal { transition: none; }
.js .ds-reveal {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s var(--ease-out-quint), translate 0.6s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s);
}
.js .ds-reveal[data-visible="true"] { opacity: 1; translate: 0 0; }

@keyframes ds-fade-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.ds-fade-in { animation: ds-fade-in 0.48s var(--ease-out-quint) both; }

@keyframes ds-sweep { from { background-position: -140% 0; } to { background-position: 240% 0; } }
.ds-sweep {
  background-image: linear-gradient(100deg,
    transparent 35%, rgba(13, 143, 155, 0.18) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: ds-sweep 2.4s linear infinite;
}

/* ---------- 12. a caixa viva: os efeitos desta marca --------------------- */

/* 12.1 a janela — a moldura do navegador em volta do produto */
.ds-janela {
  width: 100%;
  border: var(--border-hairline) solid var(--color-border-primary);
  border-radius: var(--radius-16);
  background: var(--color-bg-panel);
  box-shadow: var(--shadow-high);
  overflow: hidden;
  text-align: left;
}
.ds-janela-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: var(--border-hairline) solid var(--color-border-primary);
  background: var(--color-bg-secondary);
}
.ds-janela-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-secondary); }
.ds-janela-url {
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-6);
  background: var(--color-bg-primary);
  border: var(--border-hairline) solid var(--color-border-primary);
  font-family: var(--font-monospace);
  font-size: 11px;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 12.2 os dois painéis: a regra que se escreve · a caixa que se organiza */
.ds-obra { display: grid; grid-template-columns: 290px 1fr; min-height: 316px; }
.ds-obra > * { min-width: 0; }
@media (max-width: 860px) { .ds-obra { grid-template-columns: 1fr; min-height: 0; } }

/* 12.3 o painel da regra — a única superfície escura da primeira dobra */
.ds-regra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-right: var(--border-hairline) solid var(--color-border-primary);
}
@media (max-width: 860px) {
  .ds-regra { border-right: 0; border-bottom: var(--border-hairline) solid var(--color-border-primary); }
}
.ds-regra-nome {
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.ds-regra-campo {
  flex: 1;
  border-radius: var(--radius-8);
  border: var(--border-hairline) solid var(--color-border-secondary);
  background: var(--color-bg-secondary);
  padding: 11px 12px;
  font-size: var(--text-small-size);
  line-height: 1.55;
  color: var(--brand-300);
}
.ds-regra-campo b { font-weight: var(--font-weight-normal); }
/* cada pedaço da frase entra na sua vez, e o cursor anda com ela; sem JS, a frase
   inteira já está escrita */
.js [data-ds-caixa] .ds-regra-campo b { display: none; }
.js [data-ds-caixa] .ds-regra-campo b[data-escrito] { display: inline; }
.ds-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--brand-400);
}
.js [data-ds-caixa][data-animando="true"] .ds-cursor { animation: ds-pisca 1.06s steps(2, start) infinite; }
@keyframes ds-pisca { to { visibility: hidden; } }

/* as regras que já valem explicam por que as outras quatro mensagens também ganham
   etiqueta. No celular elas saem: o que precisa aparecer sem rolar é a caixa. */
.ds-regra-antigas { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .ds-regra-outras { display: none; } }
.ds-regra-antigas span {
  padding: 3px 9px;
  border-radius: var(--radius-rounded);
  border: var(--border-hairline) solid var(--color-border-secondary);
  color: var(--color-text-tertiary);
  font-size: 11px;
  white-space: nowrap;
}

/* 12.4 a caixa de entrada, montada em HTML */
.ds-caixa { display: flex; flex-direction: column; }
.ds-caixa-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: var(--border-hairline) solid var(--color-border-primary);
  font-size: var(--text-mini-size);
  font-weight: var(--font-weight-medium);
}
.ds-caixa-conta { color: var(--color-text-tertiary); font-weight: var(--font-weight-normal); font-size: var(--text-micro-size); }
.ds-caixa-conta b { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

.ds-msg {
  position: relative;
  display: grid;
  grid-template-columns: 168px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: var(--border-hairline) solid var(--color-border-primary);
  overflow: hidden;
}
.ds-msg:last-child { border-bottom: 0; }
.ds-msg-de { font-size: var(--text-small-size); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-msg-assunto { font-size: var(--text-small-size); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1024px) { .ds-msg { grid-template-columns: 140px 1fr auto; } }
@media (max-width: 720px) {
  .ds-msg { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; }
  .ds-msg-assunto { display: none; }
}

/* a etiqueta: o ciano da página inteira mora aqui — é o que o LLMail fez sozinho */
.etiqueta {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-rounded);
  background: var(--brand-050);
  border: var(--border-hairline) solid var(--brand-200);
  color: var(--brand-700);
  font-size: var(--text-micro-size);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.etiqueta-saiu {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-secondary);
  color: var(--color-text-tertiary);
}
/* o risco no assunto é consequência da etiqueta: só aparece quando ela nasce */
.ds-msg:has(.etiqueta-saiu) .ds-msg-assunto { text-decoration: line-through; }
.js [data-ds-caixa][data-animando="true"] .ds-msg:not([data-estado="pronta"]) .ds-msg-assunto { text-decoration: none; }

/* 12.5 o estado "lendo": a varredura ciano atravessa a linha enquanto a IA decide */
.ds-msg-marca { display: inline-flex; align-items: center; min-height: 24px; }
.ds-lendo {
  display: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-rounded);
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  font-size: var(--text-micro-size);
  white-space: nowrap;
}
.ds-lendo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  animation: ds-pulso 1s var(--ease-out-quad) infinite;
}
.js [data-ds-caixa][data-animando="true"] .ds-msg[data-estado="lendo"] .ds-lendo { display: inline-flex; }
.js [data-ds-caixa][data-animando="true"] .ds-msg[data-estado="lendo"] .etiqueta { display: none; }
.js [data-ds-caixa][data-animando="true"] .ds-msg[data-estado="limpo"] .etiqueta,
.js [data-ds-caixa][data-animando="true"] .ds-msg[data-estado="limpo"] .ds-lendo { visibility: hidden; }
.js [data-ds-caixa][data-animando="true"] .ds-msg[data-estado="lendo"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg, transparent 34%, rgba(13, 143, 155, 0.16) 50%, transparent 66%);
  background-size: 220% 100%;
  animation: ds-varre 0.9s linear infinite;
}
@keyframes ds-varre { from { background-position: -120% 0; } to { background-position: 220% 0; } }
/* a etiqueta nasce: pequeno salto, uma vez só */
.js [data-ds-caixa][data-animando="true"] .ds-msg[data-estado="pronta"] .etiqueta { animation: ds-nasce 0.42s var(--ease-out-quint) both; }
@keyframes ds-nasce {
  from { opacity: 0; transform: scale(0.86) translateX(8px); }
  to { opacity: 1; transform: none; }
}

/* 12.6 a logo em movimento: a asa-envelope bate, o corpo paira */
/* 40 px deixa o lettering do tamanho do texto do menu; a 32 px ele ficava menor
   que os links ao lado. No celular o cabeçalho é mais apertado, e 32 px é o certo. */
.ds-logo { display: block; height: 40px; width: auto; }
@media (max-width: 480px) { .ds-logo { height: 32px; } }
.ds-logo-asa, .ds-logo-corpo { transform-box: view-box; }
.js .ds-logo-asa { transform-origin: 62.22px 20.05px; animation: ds-bate 3.1s var(--ease-in-out-quart) infinite; }
.js .ds-logo-corpo { animation: ds-paira 3.1s var(--ease-in-out-quart) infinite; }
@keyframes ds-bate {
  0%, 100% { transform: rotate(0deg); }
  28% { transform: rotate(7.5deg); }
  62% { transform: rotate(-4.5deg); }
}
@keyframes ds-paira {
  0%, 100% { transform: translateY(0); }
  28% { transform: translateY(1.6px); }
  62% { transform: translateY(-2.2px); }
}
/* no cabeçalho a asa bate devagar, e acelera quando o cursor passa pela marca */
.ds-marca { display: inline-flex; align-items: center; text-decoration: none; }
.js .ds-marca .ds-logo-asa { animation-duration: 5.6s; }
.js .ds-marca .ds-logo-corpo { animation-duration: 5.6s; }
.js .ds-marca:hover .ds-logo-asa, .js .ds-marca:hover .ds-logo-corpo { animation-duration: 1.5s; }

/* 12.7 a malha: pontos a cada 28 px, que somem para as bordas.
   É a textura de fundo da primeira dobra e do fecho — neutra de propósito, porque o
   ciano nomeia outra coisa (decisão D3 do quadro). */
.ds-malha { position: relative; }
.ds-malha > .ds-page { position: relative; z-index: 1; }
.ds-malha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 34%, #000 24%, transparent 72%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 34%, #000 24%, transparent 72%);
}

/* 12.8 o ponto que pulsa no selo: o produto trabalhando agora */
.ds-pulso {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-500);
  flex: none;
}
.js .ds-pulso { animation: ds-pulso 2s var(--ease-out-quad) infinite; }
@keyframes ds-pulso {
  0% { box-shadow: 0 0 0 0 rgba(13, 143, 155, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(13, 143, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 143, 155, 0); }
}

/* ---------- 13. movimento reduzido -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .ds-reveal { opacity: 1; translate: 0 0; }
  .js [data-ds-caixa] .ds-regra-campo b { opacity: 1; }
}