/* ── Tokens de clima ────────────────────────────────────────────────────────
   O escuro é o padrão da marca: o site é a noite com o farol aceso, e abrir
   claro para quem tem o sistema claro entregaria a pior primeira impressão.
   Por isso o claro é OPT-IN — entra pelo botão, não pelo `prefers-color-scheme`.

   Regra do arquivo: cor de PÁGINA vira token; cor de APARELHO não. As molduras
   de iPhone, Mac e Watch, a janela do app desenhada em HTML (`data-r="win"`, com
   barra de título, sidebar e cards por dentro), a pílula da bandeja e as pulseiras
   do relógio continuam com o hex cravado, porque um iPhone é escuro nas duas
   aparências — clarear a moldura junto com a página faria o aparelho parecer um
   erro de tema.

   CUIDADO: `data-device` não é a fronteira. Cada bloco `.ld-pane` embrulha o
   aparelho E o cartão de texto ao lado (`.ld-pane-notes`), que é página e leva
   token. A fronteira é a moldura, não o pane — 97 dos 133 brancos cravados do
   index estão dentro dela e devem continuar lá.

   Os neutros claros são os mesmos do app (`ClColors.textLight*`), para o site
   e a captura dentro da moldura não discordarem lado a lado. */
:root {
  --ld-bg: #050509;
  --ld-bg-rgb: 5, 5, 9;
  --ld-surface: #14141C;
  --ld-surface-rgb: 20, 20, 28;
  --ld-surface-2: #101019;
  --ld-text-1: #F4F4FA;
  --ld-text-2: #E4E4F0;
  --ld-text-3: #9CA0B8;
  --ld-text-4: #6B6F8A;
  --ld-text-5: #4E5270;
  /* O canal de toda linha e todo véu da página. Sozinho ele não resolve o
     claro — quem resolve é a escala abaixo, que escolhe a opacidade por tema. */
  --ld-hair-rgb: 255, 255, 255;
  /* ── Linhas e véus ────────────────────────────────────────────────────────
     Trocar `--ld-hair-rgb` por si só não resolve o claro: a MESMA opacidade
     que desenha uma borda de branco sobre a noite desenha quase nada de preto
     sobre #F8F8FC. Um véu de 6% já é 15 níveis de cinza no escuro e só 4 no
     claro — a borda existe no CSS e não existe no olho.
     Por isso a escala é semântica e cada tema escolhe a sua opacidade: no
     claro as linhas sobem para 0,09–0,30 e o véu de card vira BRANCO SÓLIDO
     com sombra, porque translucidez sobre um fundo quase branco não separa
     nada — o que separa é a sombra. */
  --ld-line-1: rgba(var(--ld-hair-rgb), 0.06);   /* divisor: nav, rodapé, seção */
  --ld-line-2: rgba(var(--ld-hair-rgb), 0.08);   /* borda de card e de painel */
  --ld-line-3: rgba(var(--ld-hair-rgb), 0.14);   /* contorno: botão fantasma, tracejado */
  --ld-line-4: rgba(var(--ld-hair-rgb), 0.22);   /* traço forte: caixa de checklist */
  --ld-fill-1: rgba(var(--ld-hair-rgb), 0.015);  /* véu quase invisível */
  --ld-fill-2: rgba(var(--ld-hair-rgb), 0.04);   /* trilho, chip apagado */
  --ld-fill-3: rgba(var(--ld-hair-rgb), 0.07);   /* tecla, pílula, barra de progresso */
  /* Superfícies de card. `veil` é o cartão translúcido que flutua sobre o céu
     das seções; `inset` é o painel afundado DENTRO de um card. */
  --ld-card-bg: rgba(var(--ld-surface-rgb), 0.9);
  --ld-card-veil: rgba(var(--ld-hair-rgb), 0.025);
  --ld-inset-bg: rgba(var(--ld-bg-rgb), 0.55);
  /* No escuro o card se destaca sozinho (ele é mais claro que o fundo); sombra
     preta sobre preto seria só sujeira. */
  --ld-card-shadow: none;
  --ld-accent: #FFD277;
  --ld-accent-hover: #FFEFCD;
  /* Disco da marca: no claro ele repete a direção A do app — creme sobre
     quase-branco tem contraste de 1,05:1 e simplesmente some. */
  --ld-mark-core: #FFEFCD;
  /* O feixe e o halo do marco. No escuro a luz é somada ao fundo (`screen`) e
     as paradas podem partir do branco. No claro isso não existe: clarear o que
     já é claro devolve o mesmo claro, e o feixe sumia. Lá a luz vira sombra
     quente (`multiply`) e as paradas descem para âmbar — senão multiplicar por
     quase-branco também não muda nada. */
  --ld-mark-blend: screen;
  --ld-cone-1: #FFF6DC;
  --ld-cone-2: #FFD37A;
  --ld-cone-3: #FFB53A;
  --ld-cone-4: #FFC24B;
  --ld-hot-1: #FFFCF2;
  --ld-hot-2: #FFE9AE;
  --ld-halo-c: #FFD277;
  /* Tokens da captura — os MESMOS de `ClColors.chip*` no app, para o site não
     ensinar uma cor e o app mostrar outra. No claro eles descem de tom: verde
     #22C55E sobre branco dá 2,2:1 e some. */
  --ld-tok-mention: #4F8FFF;
  --ld-tok-tag: #22C55E;
  --ld-tok-project: #8B5CF6;
  --ld-tok-priority: #EF4444;
  --ld-tok-date: #F59E0B;
  /* ── Cores de ÁREA ────────────────────────────────────────────────────────
     Os tons que cada área usa em ícone e rótulo. No escuro são os mesmos do
     app; no claro descem de tom pelo mesmo motivo dos `--ld-tok-*`: nasceram
     para brilhar sobre a noite e sobre branco não sobrevivem — o verde das
     rotinas dá 1,7:1, o laranja das compras 2,3:1. */
  --ld-a-routines: #4ADE80;
  --ld-a-indigo: #818CF8;
  --ld-a-focus: #3B82F6;
  --ld-a-notes: #2DD4BF;
  --ld-a-water: #38BDF8;
  --ld-a-violet: #A78BFA;
  --ld-a-health: #F472B6;
  --ld-a-sky: #93B9FF;
  --ld-a-pr: #FBBF24;
  --ld-a-shopping: #FB923C;
  --ld-a-shopping-soft: #FFC08A;
  --ld-a-plants: #6EE7B7;
  --ld-a-food: #F59E0B;
  /* A janela de Mac da seção "O app hoje" não é captura: é HTML desenhado à
     mão. Sem par claro ela fica uma lápide preta na página clara — foi o que
     apareceu. O resto da janela reusa a rampa de cima; estes são os que não
     existiam, ou porque descrevem a MOLDURA (que não é card nem página), ou
     porque são acentos de módulo que só aparecem aqui. */
  /* Moldura de aparelho: no escuro é um fio branco e um poço preto; no claro
     o fio some e o poço vira fumaça. */
  --ld-frame-line: rgba(255, 255, 255, 0.1);
  --ld-frame-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  /* A "área de trabalho" do Mac com a bandeja: papel de parede, barra de menus
     e o popover. É o macOS que está sendo desenhado, então ele acompanha o
     clima da página — do contrário a captura clara do app aparece ao lado de
     um desktop noturno, que foi o que quebrou. */
  --ld-desktop: radial-gradient(120% 120% at 70% 0%, #1B2340 0%, #10131F 50%, #0B0D16 100%);
  --ld-menubar: linear-gradient(180deg, #1C1C24, #17171F);
  --ld-menubar-ink: #C9CBDA;
  --ld-popover-bg: rgba(14, 14, 22, 0.94);
  --ld-popover-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
  --ld-win-chrome: #16161F;
  --ld-win-bg: #0A0A14;
  --ld-win-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  --ld-win-title: linear-gradient(90deg, #C7D2FE, #A5B4FC, #C4B5FD);
  --ld-win-agenda: #6366F1;
  --ld-win-plants: #10B981;
  --ld-win-map: #06B6D4;
  --ld-sky-hero: radial-gradient(115% 85% at 50% 0%, #17213C 0%, #0A0C18 52%, #050509 100%);
  --ld-sky-a: radial-gradient(90% 70% at 50% 0%, #10131F 0%, #050509 70%);
  --ld-sky-b: radial-gradient(90% 60% at 50% 0%, #0D1020 0%, #050509 60%);
  --ld-sky-c: radial-gradient(90% 70% at 50% 100%, #14102A 0%, #050509 68%);
  --ld-sky-d: radial-gradient(100% 90% at 50% 30%, #12182C 0%, #0A0C18 60%, #070810 100%);
  --ld-sky-e: radial-gradient(100% 120% at 50% 100%, #1B2036 0%, #090A12 55%, #050509 100%);
}

:root[data-theme="light"] {
  --ld-bg: #F8F8FC;
  --ld-bg-rgb: 248, 248, 252;
  --ld-surface: #FFFFFF;
  --ld-surface-rgb: 255, 255, 255;
  --ld-surface-2: #F1F1F7;
  --ld-text-1: #12121F;
  --ld-text-2: #1A1A2E;
  --ld-text-3: #4C5068;
  --ld-text-4: #6B6F8A;
  --ld-text-5: #8B8FA6;
  --ld-hair-rgb: 12, 12, 24;
  /* Opacidades calibradas no olho, não copiadas do escuro: cada degrau precisa
     de mais tinta para render a mesma linha sobre #F8F8FC. */
  --ld-line-1: rgba(var(--ld-hair-rgb), 0.09);
  --ld-line-2: rgba(var(--ld-hair-rgb), 0.13);
  --ld-line-3: rgba(var(--ld-hair-rgb), 0.22);
  --ld-line-4: rgba(var(--ld-hair-rgb), 0.3);
  --ld-fill-1: rgba(var(--ld-hair-rgb), 0.03);
  --ld-fill-2: rgba(var(--ld-hair-rgb), 0.055);
  --ld-fill-3: rgba(var(--ld-hair-rgb), 0.08);
  /* Branco sólido, não véu: 90% de branco sobre #F8F8FC devolve #F8F8FC. */
  --ld-card-bg: #FFFFFF;
  --ld-card-veil: #FFFFFF;
  --ld-inset-bg: #F1F1F7;
  /* Aqui a sombra é obrigatória: no claro o card é a MESMA cor do papel, e sem
     ela a página vira uma folha lisa com texto solto. Duas camadas — o contato
     de 1px encosta o card no papel, a difusa dá a altura. */
  --ld-card-shadow: 0 1px 2px rgba(var(--ld-hair-rgb), 0.06), 0 12px 28px -14px rgba(var(--ld-hair-rgb), 0.22);
  /* Âmbar puro sobre branco dá 1,7:1 — ilegível. O bronze mantém a família da
     marca e passa em texto. O âmbar continua inteiro no símbolo e nas pílulas,
     onde ele é fundo e não tinta. */
  --ld-accent: #A35D00;
  --ld-accent-hover: #7A4400;
  --ld-mark-core: #E08A16;
  --ld-mark-blend: multiply;
  --ld-cone-1: #E8912A;
  --ld-cone-2: #DA8214;
  --ld-cone-3: #C2740A;
  --ld-cone-4: #C2740A;
  --ld-hot-1: #F0A63A;
  --ld-hot-2: #E08A16;
  --ld-halo-c: #E8912A;
  --ld-tok-mention: #1D5FD0;
  --ld-tok-tag: #16833C;
  --ld-tok-project: #6D33D6;
  --ld-tok-priority: #C42B2B;
  --ld-tok-date: #A2620A;
  --ld-a-routines: #16833C;
  --ld-a-indigo: #4B45C6;
  --ld-a-focus: #1D5FD0;
  --ld-a-notes: #0F766E;
  --ld-a-water: #0369A1;
  --ld-a-violet: #6D33D6;
  --ld-a-health: #BE2A6B;
  --ld-a-sky: #2F5FB8;
  --ld-a-pr: #9A6700;
  --ld-a-shopping: #B4530A;
  --ld-a-shopping-soft: #B4530A;
  --ld-a-plants: #0F7A54;
  --ld-a-food: #A2620A;
  --ld-frame-line: rgba(var(--ld-hair-rgb), 0.14);
  --ld-frame-shadow: 0 2px 6px rgba(var(--ld-hair-rgb), 0.07), 0 30px 70px -34px rgba(var(--ld-hair-rgb), 0.4);
  --ld-desktop: radial-gradient(120% 120% at 70% 0%, #DEE4F6 0%, #CBD4EC 50%, #BAC5E2 100%);
  --ld-menubar: linear-gradient(180deg, #F3F3F7, #E9E9F0);
  --ld-menubar-ink: #3A3D52;
  --ld-popover-bg: rgba(255, 255, 255, 0.96);
  --ld-popover-shadow: 0 2px 8px rgba(var(--ld-hair-rgb), 0.1), 0 20px 40px -20px rgba(var(--ld-hair-rgb), 0.45);
  --ld-win-chrome: #E8E8F0;
  --ld-win-bg: #F8F8FC;
  /* No claro a moldura precisa de sombra de elevação, não de um poço preto:
     0,9 de preto sob uma janela branca lê como fumaça. */
  --ld-win-shadow: 0 2px 6px rgba(var(--ld-hair-rgb), 0.07), 0 40px 90px -42px rgba(var(--ld-hair-rgb), 0.42);
  --ld-win-title: linear-gradient(90deg, #3B3A9E, #4B45C6, #6D33D6);
  --ld-win-agenda: #4B45C6;
  --ld-win-plants: #0F7A54;
  --ld-win-map: #0E7490;
  --ld-sky-hero: radial-gradient(115% 85% at 50% 0%, #DFE4F5 0%, #EFF0F8 52%, #F8F8FC 100%);
  --ld-sky-a: radial-gradient(90% 70% at 50% 0%, #EDEFF8 0%, #F8F8FC 70%);
  --ld-sky-b: radial-gradient(90% 60% at 50% 0%, #EBEEF8 0%, #F8F8FC 60%);
  --ld-sky-c: radial-gradient(90% 70% at 50% 100%, #ECE9F8 0%, #F8F8FC 68%);
  --ld-sky-d: radial-gradient(100% 90% at 50% 30%, #E6EAF7 0%, #F1F3FA 60%, #F8F8FC 100%);
  --ld-sky-e: radial-gradient(100% 120% at 50% 100%, #E7EAF6 0%, #F2F3F9 55%, #F8F8FC 100%);
}

body { margin: 0; background: var(--ld-bg); }
  a { color: var(--ld-accent); text-decoration: none; }
  a:hover { color: var(--ld-accent-hover); }
  [data-l="en"] { display: none; }
  [data-lang="en"] [data-l="en"] { display: inline; }
  [data-lang="en"] [data-l="pt"] { display: none; }
  /* Capturas reais do app dentro das molduras. Uma por idioma: a troca usa o
     mesmo data-l do resto da página, mas precisa de `block` (e não `inline`,
     como a regra genérica faz) para o height:100% valer. */
  .ld-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  /* A moldura do Mac é a janela inteira do app, com a barra de título que
     ele mesmo desenha: a imagem manda na altura em vez de preencher uma
     caixa de altura fixa como acontece nas de celular. */
  .ld-shot-mac { height: auto; object-fit: contain; }
  /* A tela do watch é fotografada no simulador de 42 mm, a menor da
     geração: preenche o bezel sem esticar. */
  .ld-shot-watch { width: 100%; height: 100%; object-fit: cover; }
  /* O bezel do watch tem tamanho fixo: a foto do simulador de 42 mm entra
     exatamente aqui, com o mesmo raio de canto da tela real. */
  .ld-watch-screen {
    position: relative; width: 158px; height: 192px;
    border-radius: 54px; overflow: hidden; background: #000;
  }
  [data-l="en"].ld-shot { display: none; }
  [data-lang="en"] [data-l="en"].ld-shot { display: block; }
  [data-lang="en"] [data-l="pt"].ld-shot { display: none; }
  @keyframes ld-spin { 0%, 6% { transform: rotate(-45deg); } 70%, 100% { transform: rotate(315deg); } }
  @keyframes ld-cone { 0%, 5% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 88%, 100% { opacity: 0; } }
  @keyframes ld-core { 0% { transform: scale(0); opacity: 0; } 5% { transform: scale(1.5); opacity: 1; } 11% { transform: scale(.9); } 16%, 100% { transform: scale(1); opacity: 1; } }
  @keyframes ld-halo { 0%, 5% { opacity: 0; } 14% { opacity: 1; } 70% { opacity: .6; } 88%, 100% { opacity: .32; } }
  @keyframes ld-ig { 0% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(1.45); } 48% { transform: scale(.95); } 70%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
  .ld-mark .ld-core { transform-box: fill-box; transform-origin: 50% 50%; animation: ld-core var(--beam-dur, 5s) cubic-bezier(.2,.9,.25,1) infinite; }
  /* PIVÔ DAS ANIMAÇÕES — leia antes de mexer.
     Nada aqui usa `transform-origin` em PIXEL. Um valor como `100px 100px` é
     ambíguo em SVG: uns navegadores leem como unidade do viewBox, outros como
     100 pixels de CSS a partir do canto do elemento. Como o marco é desenhado
     a ~2,1px por unidade, as duas leituras caem a 50 unidades de distância uma
     da outra — e o feixe girava em torno do ponto errado, com a base soltando
     do disco.
     A regra é `fill-box` + `50% 50%`: o pivô vira o centro da própria caixa do
     elemento, que não depende de interpretação. Isso exige que a caixa de cada
     elemento animado esteja centrada no ponto em que ele deve girar — vale
     para os oito ícones e para o disco, e o feixe só passou a valer por causa
     do círculo invisível de r=96 dentro dele. NÃO remova aquele círculo. */
  .ld-mark .ld-beam { transform-box: fill-box; transform-origin: 50% 50%; animation: ld-spin var(--beam-dur, 5s) cubic-bezier(.3,0,.18,1) infinite; }
  .ld-mark .ld-beamfade { animation: ld-cone var(--beam-dur, 5s) linear infinite; }
  /* Estava no `style=` inline, onde vencia a folha e não dava para trocar
     por clima. */
  .ld-mark .ld-halo, .ld-mark .ld-beamfade { mix-blend-mode: var(--ld-mark-blend); }
  .ld-mark .ld-halo { animation: ld-halo var(--beam-dur, 5s) ease-out infinite; }
  @keyframes ld-ring { 0%, 52% { opacity: 0; } 70%, 100% { opacity: 1; } }
  .ld-mark .ld-ring { animation: ld-ring var(--beam-dur, 5s) ease-in-out infinite; }
  .ld-mark .ld-lit { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation-duration: var(--beam-dur, 5s); animation-timing-function: cubic-bezier(.2,1.1,.3,1); animation-iteration-count: infinite; }
  @keyframes ld-i1 { 0%, 62% { opacity: 0; transform: scale(.6); } 64% { opacity: 1; transform: scale(1.45); } 67% { transform: scale(.95); } 70%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i2 { 0%, 6% { opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1.45); } 11% { transform: scale(.95); } 14%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i3 { 0%, 14% { opacity: 0; transform: scale(.6); } 16% { opacity: 1; transform: scale(1.45); } 19% { transform: scale(.95); } 22%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i4 { 0%, 22% { opacity: 0; transform: scale(.6); } 24% { opacity: 1; transform: scale(1.45); } 27% { transform: scale(.95); } 30%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i5 { 0%, 30% { opacity: 0; transform: scale(.6); } 32% { opacity: 1; transform: scale(1.45); } 35% { transform: scale(.95); } 38%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i6 { 0%, 38% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.45); } 43% { transform: scale(.95); } 46%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i7 { 0%, 46% { opacity: 0; transform: scale(.6); } 48% { opacity: 1; transform: scale(1.45); } 51% { transform: scale(.95); } 54%, 100% { opacity: 1; transform: scale(1); } }
  @keyframes ld-i8 { 0%, 54% { opacity: 0; transform: scale(.6); } 56% { opacity: 1; transform: scale(1.45); } 59% { transform: scale(.95); } 62%, 100% { opacity: 1; transform: scale(1); } }
  .ld-mark .ld-i1 { animation-name: ld-i1; }
  .ld-mark .ld-i2 { animation-name: ld-i2; }
  .ld-mark .ld-i3 { animation-name: ld-i3; }
  .ld-mark .ld-i4 { animation-name: ld-i4; }
  .ld-mark .ld-i5 { animation-name: ld-i5; }
  .ld-mark .ld-i6 { animation-name: ld-i6; }
  .ld-mark .ld-i7 { animation-name: ld-i7; }
  .ld-mark .ld-i8 { animation-name: ld-i8; }
  @media (prefers-reduced-motion: reduce) {
    .ld-mark .ld-core, .ld-mark .ld-beam, .ld-mark .ld-beamfade, .ld-mark .ld-halo, .ld-mark .ld-lit, .ld-mark .ld-ring { animation: none; opacity: 1; }
    .ld-mark .ld-beamfade { opacity: 0; }
  }
  /* !important porque cada painel carrega display:flex inline (o editor do
     canvas edita layout por atributo style; a troca de aparelho é da folha). */
  [data-plat="mac"] .ld-pane:not([data-device="mac"]),
  [data-plat="iphone"] .ld-pane:not([data-device="iphone"]),
  [data-plat="watch"] .ld-pane:not([data-device="watch"]) { display: none !important; }
  @media (max-width: 940px) {
    .ld-pane { gap: 20px !important; }
    .ld-pane-notes { flex: 1 1 100% !important; }
  }
  /* No celular o menu vira uma faixa de uma linha só, que rola na horizontal:
     empilhado em três linhas ele comia meia tela. */
  @media (max-width: 760px) {
    [data-r="areamenu"] {
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      overflow-x: auto;
      scrollbar-width: none;
      max-width: calc(100vw - 32px);
      -webkit-overflow-scrolling: touch;
    }
    [data-r="areamenu"]::-webkit-scrollbar { display: none; }
    [data-r="areamenu"] > * { flex: 0 0 auto; }
  }
  .ld-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
  details.ld-faq summary { list-style: none; cursor: pointer; }
  details.ld-faq summary::-webkit-details-marker { display: none; }
  details.ld-faq summary svg { transition: transform .2s ease; }
  details.ld-faq[open] summary svg { transform: rotate(45deg); }
  @media (max-width: 940px) {
    [data-r="sec"] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
    [data-r="navinner"] { padding: 12px 20px !important; }
    [data-r="navlinks"] { gap: 14px !important; }
    [data-r="navlink"] { display: none !important; }
    [data-r="hero"] { grid-template-columns: 1fr !important; gap: 40px !important; }
    [data-r="heromark"] { max-width: 300px !important; }
    [data-r="bento"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    [data-r="bento"] > * { grid-column: span 2 !important; grid-row: auto !important; }
    [data-r="two"] { grid-template-columns: 1fr !important; gap: 40px !important; }
    [data-r="win"] { overflow-x: auto !important; }
    [data-r="winbody"] { min-width: 940px; }
  }
  @media (max-width: 620px) {
    [data-r="bento"] { grid-template-columns: 1fr !important; }
    [data-r="bento"] > * { grid-column: span 1 !important; min-height: 0 !important; padding: 22px !important; }
    [data-r="cta"] > a { flex: 1 1 100%; text-align: center; }
    [data-r="navinner"] { padding: 12px 16px !important; }
    [data-r="navlinks"] { gap: 10px !important; }
    [data-r="wordmark"] { display: none !important; }
    [data-r="navcta"] { padding: 9px 14px !important; font-size: 13px !important; }
  }

/* ── Menu flutuante: chips de área e plataforma ───────────────── */
.ld-lang-chip {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-3);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ld-lang-chip.is-on { background: #FFD277; color: #1A1207; }

.ld-area-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--ld-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ld-area-chip[data-goto-area="foco"]    { --ld-c: #3B82F6; --ld-rgb: 59, 130, 246; }
.ld-area-chip[data-goto-area="agua"]    { --ld-c: #38BDF8; --ld-rgb: 56, 189, 248; }
.ld-area-chip[data-goto-area="treino"]  { --ld-c: #A78BFA; --ld-rgb: 124, 58, 237; }
.ld-area-chip[data-goto-area="saude"]   { --ld-c: #F472B6; --ld-rgb: 244, 114, 182; }
.ld-area-chip[data-goto-area="rotinas"] { --ld-c: #818CF8; --ld-rgb: 129, 140, 248; }
.ld-area-chip[data-goto-area="notas"]   { --ld-c: #2DD4BF; --ld-rgb: 45, 212, 191; }
/* `--ld-c` é TINTA do chip aceso; no claro o acento cru cai para 2,9:1. O véu
   (`--ld-rgb`) fica: matiz como fundo tem para onde ir sobre papel. */
:root[data-theme="light"] .ld-area-chip[data-goto-area="foco"]    { --ld-c: var(--ld-a-focus); }
:root[data-theme="light"] .ld-area-chip[data-goto-area="agua"]    { --ld-c: var(--ld-a-water); }
:root[data-theme="light"] .ld-area-chip[data-goto-area="treino"]  { --ld-c: var(--ld-a-violet); }
:root[data-theme="light"] .ld-area-chip[data-goto-area="saude"]   { --ld-c: var(--ld-a-health); }
:root[data-theme="light"] .ld-area-chip[data-goto-area="rotinas"] { --ld-c: var(--ld-a-indigo); }
:root[data-theme="light"] .ld-area-chip[data-goto-area="notas"]   { --ld-c: var(--ld-a-notes); }
.ld-area-chip.is-on {
  border-color: rgba(var(--ld-rgb), 0.5);
  background: rgba(var(--ld-rgb), 0.15);
  color: var(--ld-c);
}
.ld-area-chip:hover  { border-color: rgba(var(--ld-rgb), 0.35); color: var(--ld-c); }
.ld-area-chip:focus-visible,
.ld-plat-chip:focus-visible,
.ld-lang-chip:focus-visible { outline: 2px solid #FFD277; outline-offset: 2px; }

.ld-plat-chip {
  padding: 7px 12px;
  border: 1px solid var(--ld-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-3);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.ld-plat-chip.is-on {
  border-color: rgba(255, 210, 119, 0.4);
  background: rgba(255, 210, 119, 0.13);
  color: var(--ld-accent);
}
.ld-plat-chip:hover { border-color: rgba(255, 210, 119, 0.28); color: var(--ld-accent); }

/* ── Rolagem suave e âncoras sob o cabeçalho fixo ─────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id^="area-"] { scroll-margin-top: 150px; }
:target { scroll-margin-top: 96px; }

/* ── Menu flutuante em telas estreitas ────────────────────────── */
@media (max-width: 720px) {
  [data-r="areamenu"] { gap: 5px !important; padding: 7px 9px !important; }
  .ld-area-chip { padding: 6px 10px; font-size: 11.5px; }
  .ld-plat-chip { padding: 6px 9px; font-size: 9.5px; }
}

/* ── Páginas legais (privacidade, suporte) ────────────────────────────── */
/* Texto corrido, largura de leitura. Herdam o header e o seletor de idioma
   do index, então o app.js continua servindo às três páginas. */
.ld-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  color: var(--ld-text-3);
  font-size: 16px;
  line-height: 1.72;
  text-wrap: pretty;
}
.ld-legal h1 {
  margin: 0 0 28px;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.035em;
  color: var(--ld-text-1);
}
.ld-legal h2 {
  margin: 44px 0 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ld-text-1);
}
.ld-legal h3 {
  margin: 28px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ld-text-2);
}
.ld-legal p { margin: 0 0 14px; }
.ld-legal a { color: var(--ld-accent); text-decoration: none; border-bottom: 1px solid rgba(255, 210, 119, 0.28); }
.ld-legal a:hover { border-bottom-color: var(--ld-accent); }
.ld-legal code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ld-text-3);
  background: var(--ld-fill-2);
  padding: 1px 5px;
  border-radius: 4px;
}
.ld-legal-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EC9522;
  margin: 0 0 10px;
}
/* O laranja do escuro dá 2,9:1 sobre #F8F8FC — pouco para um rótulo de 11px.
   Só o claro troca: o escuro está aprovado e não pode mudar de cor. */
:root[data-theme="light"] .ld-legal-kicker { color: var(--ld-accent); }
.ld-legal-lede {
  font-size: 17.5px;
  color: var(--ld-text-2);
  border-left: 2px solid rgba(255, 210, 119, 0.4);
  padding-left: 20px;
  margin: 0 0 8px;
}
.ld-legal-lede strong { color: var(--ld-text-1); font-weight: 600; }
.ld-legal-list { margin: 0 0 14px; padding-left: 20px; }
.ld-legal-list li { margin-bottom: 9px; }
.ld-legal-list strong { color: var(--ld-text-2); font-weight: 600; }
.ld-legal-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--ld-accent);
}
.ld-legal-back {
  font-size: 13.5px;
  color: var(--ld-text-4);
  text-decoration: none;
  white-space: nowrap;
}
.ld-legal-back:hover { color: var(--ld-text-3); }
.ld-legal-foot {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--ld-line-1);
}
@media (max-width: 640px) {
  .ld-legal { padding: 36px 22px 72px; font-size: 15.5px; }
}

/* ── Botão de clima ─────────────────────────────────────────────────────────
   Um só botão, dois glifos: mostra o clima para onde ele LEVA, não o atual —
   sol no escuro, lua no claro. Mesma pílula do seletor de idioma. */
.ld-theme-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-3);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.ld-theme-chip:hover { color: var(--ld-text-1); background: var(--ld-fill-3); }
.ld-theme-chip:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
.ld-theme-chip .ld-ico-moon { display: none; }
:root[data-theme="light"] .ld-theme-chip .ld-ico-sun { display: none; }
:root[data-theme="light"] .ld-theme-chip .ld-ico-moon { display: inline; }

/* ── Cores de área no tema claro ────────────────────────────────────────────
   Aqui existiam 21 regras que reescreviam cor por SELETOR DE ATRIBUTO
   (`[stroke="#4ADE80"]`, `[style*="color:#3B82F6"]`), porque atributo de
   apresentação do SVG não aceita `var()` e estilo inline ganha da folha.
   Elas excluíam `#app` e `.ld-pane` de propósito: a política era "o aparelho
   é escuro nas duas aparências".

   Essa política caiu, e caiu porque se contradizia: as capturas FOTOGRAFADAS
   já trocavam para a versão clara (`data-shot-light`), então no claro uma
   janela de Mac fotografada aparecia clara ao lado de uma janela de Mac
   DESENHADA em preto — e a área de trabalho do Mac, atrás dela, era noite.
   Agora a interface desenhada carrega token no próprio HTML, como o resto da
   página; sobrou literal só onde é HARDWARE (a caixa do relógio, o preto do
   iPhone, os três botões do macOS), onde é acento SÓLIDO com tinta escura em
   cima, e no `#7C3AED`, que é o único acento da paleta que já passa sobre
   papel (5,38:1) e por isso não tem gêmeo a que recorrer. */

/* ── O cartão de texto cortado no celular ───────────────────────────────────
   A janela de Mac tem 600px fixos. O `.ld-pane` é item de um flex, e item de
   flex nasce com `min-width: auto`: ele se recusa a encolher abaixo do próprio
   conteúdo. Resultado: a linha inteira ficava com 602px dentro de um pai de
   335px e, como a seção corta o que passa (`overflow-x: clip`, que é o que
   mantém o `position: sticky` vivo), o excesso não rolava — sumia. Como o pane
   é centralizado, o corte comia os dois lados do cartão de texto.
   Destravar o `min-width` deixa a janela encolher e o cartão descer para
   baixo dela, que é o que o `flex-wrap: wrap` sempre quis fazer. */
.ld-pane { min-width: 0; }
.ld-pane > * { min-width: 0; max-width: 100%; }

/* ── O celular: a janela de Mac e a ilha do menu ────────────────────────────
   Duas correções que nasceram do mesmo diagnóstico — o desktop foi desenhado
   primeiro e o celular herdou o que sobrou.

   A JANELA. Antes, a captura de 1200px virava RECORTE em escala 1:1 abaixo de
   720px, para o texto do app não cair para 3,6px. O recorte é legível, mas
   mostra 28% da janela: sem barra de título e sem barra lateral, ele lê como
   imagem cortada por acidente — some justamente o que dizia "isto é um app de
   Mac". Agora a regra é outra, e depende do que a janela É:

   - CAPTURA (bitmap) encolhe INTEIRA. Nessa dobra o trabalho da imagem é
     dizer "é um app de Mac", não ser lida; ler continua a um toque, na lente.
   - DESENHADA (HTML) REFLUI. Encolher HTML seria jogar fora a única vantagem
     que ele tem sobre a captura: saber se reorganizar. A grade de duas colunas
     vira uma, a barra lateral estreita, e o texto fica em tamanho de verdade.

   `!important` em quase tudo aqui porque essas janelas carregam a grade e a
   largura em `style=` inline, que ganha da folha — a mesma armadilha do
   seletor de plataforma.

   O gancho é `data-mac-window`, ATRIBUTO. Antes era `:has([style*="#0A0A14"])`,
   que casava por cor cravada: no dia em que a cor virou token o seletor parou
   de casar e as janelas desenhadas vazaram para o celular, cortadas ao meio.
   Nada de estilo deve depender de um literal de cor. */
@media (max-width: 720px) {
  .ld-pane [id$="-mac"] {
    position: relative;
    display: block;
    cursor: zoom-in;
  }

  /* ── A janela DESENHADA reflui ── */
  /* A coluna precisa vir junto: com `width:100%` na janela e nada na coluna, o
     navegador resolve a largura pelo min-content e a janela encolhe para 252px
     dentro de um painel de 335. */
  .ld-pane > * {
    width: 100% !important;
  }
  [data-mac-window] {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* corpo: barra lateral estreita + conteúdo */
  [data-mac-window] > [data-r="winbody"],
  [data-mac-window] > div:last-child {
    min-height: 0 !important;
  }
  [data-r="winbody"] {
    grid-template-columns: 46px 1fr !important;
  }
  [data-r="winbody"] > aside {
    padding: 12px 0 8px !important;
    gap: 0 !important;
  }
  /* Só os alvos de ícone: o divisor da barra também é `div` filho, e sem o
     `:not` ele virava um bloco de 34x34 no meio da fila. */
  [data-r="winbody"] > aside > div[style*="border-radius:10px"] {
    width: 34px !important;
    height: 34px !important;
  }
  [data-r="winbody"] > main {
    padding: 16px 12px 12px !important;
  }
  /* a grade "fila + coluna do dia" empilha */
  [data-r="winbody"] [style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr !important;
  }
  /* Numa janela de 289px de conteúdo, as filas do desktop precisam quebrar:
     a ação desce para baixo do texto em vez de espremer o título em três
     linhas, e a pílula de "atrasada" sai de cima do nome do remédio. */
  [data-r="wincard"],
  [data-r="winhead"],
  [data-r="wintitle"] {
    flex-wrap: wrap !important;
  }
  /* A AÇÃO desce inteira para a linha de baixo — seja a coluna de dois botões
     ou um botão só. Alinhada com o texto (ícone de 40 + vão de 12), para a
     quebra parecer decisão e não acidente. */
  [data-r="wincard"] > *:last-child {
    flex-basis: 100% !important;
    margin-left: 52px;
  }
  [data-r="winact"] {
    flex-direction: row !important;
    align-items: center !important;
  }
  [data-r="winhead"] {
    gap: 2px 10px !important;
  }

  /* Item de grade e item de flex nascem com `min-width: auto`: eles se RECUSAM
     a encolher abaixo do próprio conteúdo, e a janela inteira empurrava a
     página para 961px de largura. É a mesma armadilha que já mordeu o
     `.ld-pane` — só que aqui ela mora dentro da janela, então precisa descer
     por toda a subárvore. */
  [data-mac-window],
  [data-mac-window] * {
    min-width: 0 !important;
  }
  /* o título é o único texto grande demais para 335px */
  [data-r="winbody"] [style*="font-size:20px"] {
    font-size: 16px !important;
  }

  /* ── A CAPTURA encolhe inteira ── */
  .ld-pane [id$="-mac"] .ld-shot-mac {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* A dica vira convite de ampliar, não desculpa de recorte. Fica FORA da
     imagem: sobre a janela inteira ela taparia justamente o rodapé do app. */
  .ld-pane [id$="-mac"]::after {
    content: attr(data-zoom-hint);
    display: block;
    padding: 7px 10px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ld-text-4);
    pointer-events: none;
  }

  /* ── A ilha do menu: resumo, e a folha por baixo ──────────────────────────
     Nove chips numa faixa de 333px dão 666px de conteúdo: metade nasce fora da
     tela, e o que fica fora é o seletor de aparelho INTEIRO — a história do
     produto, invisível no celular. E o erro de origem não é de estilo, é de
     categoria: área é NAVEGAÇÃO (para onde eu vou) e aparelho é MODO DE
     EXIBIÇÃO (como eu vejo). Dois controles diferentes espremidos numa fila só.
     No celular a barra passa a mostrar só o que está ativo, um de cada, e a
     escolha acontece numa folha com alvo grande e rótulo em tudo. */
  [data-r="areamenu"] .ld-area-chip,
  [data-r="areamenu"] .ld-plat-chip,
  [data-r="areamenu"] > span:not(.ld-sum-sep) {
    display: none !important;
  }
  [data-r="areamenu"] {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    width: 100%;
  }
  .ld-sum { display: flex !important; }
}

/* ── Os botões-resumo da ilha ───────────────────────────────────────────────
   Existem só no celular; no desktop a fila inteira cabe e é melhor. */
.ld-sum {
  display: none;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ld-text-1);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.ld-sum:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
.ld-sum .ld-sum-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-sum .ld-sum-ico { display: flex; flex: 0 0 auto; }
.ld-sum .ld-sum-ico svg { width: 15px; height: 15px; display: block; }
.ld-sum .ld-sum-caret { flex: 0 0 auto; opacity: 0.55; }
/* O de ÁREA carrega a cor da área ativa; o de aparelho é neutro, porque
   aparelho não tem cor no sistema. */
.ld-sum[data-sum="area"] { color: var(--ld-c, var(--ld-text-1)); }
.ld-sum[data-sum="area"] .ld-sum-lbl { color: var(--ld-c, var(--ld-text-1)); }
.ld-sum-sep {
  display: none;
  width: 1px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--ld-line-2);
}
@media (max-width: 720px) { .ld-sum-sep { display: block; } }

/* ── A folha de escolha ─────────────────────────────────────────────────────
   Sobe de baixo porque o polegar mora lá. Alvo de 44px, rótulo em tudo — é o
   que a barra não tinha como dar. */
.ld-sheet {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: flex-end;
  background: rgba(var(--ld-bg-rgb), 0.55);
  backdrop-filter: blur(3px);
}
.ld-sheet.is-open { display: flex; }
.ld-sheet-card {
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px 14px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--ld-surface);
  border-top: 1px solid var(--ld-line-2);
  box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, 0.6);
}
.ld-sheet-grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 99px;
  background: var(--ld-line-3);
}
.ld-sheet-title {
  margin: 0 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ld-text-4);
}
.ld-sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-sheet-grid.is-plat { grid-template-columns: 1fr 1fr 1fr; }
.ld-sheet-opt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--ld-line-1);
  border-radius: 13px;
  background: var(--ld-fill-1);
  color: var(--ld-text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.ld-sheet-grid.is-plat .ld-sheet-opt { justify-content: center; }
.ld-sheet-opt svg { width: 17px; height: 17px; flex: 0 0 auto; }
.ld-sheet-opt.is-on {
  border-color: currentColor;
  background: rgba(var(--ld-rgb, 124, 58, 237), 0.13);
  color: var(--ld-c, var(--ld-accent));
}
.ld-sheet-opt:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }

/* ── A lente ────────────────────────────────────────────────────────────────
   Abre a janela inteira em cima da página, com rolagem nos dois eixos: numa
   tela de 330px não existe escala que caiba 1200px de app e continue legível,
   então quem manda no enquadramento é o dedo. */
.ld-lens {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  background: rgba(5, 5, 9, 0.92);
}
.ld-lens.is-open { display: block; }
.ld-lens-scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  padding: 56px 12px 24px;
}
.ld-lens-scroll img {
  width: auto;
  max-width: none;
  height: auto;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.ld-lens-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(20, 20, 28, 0.9);
  color: #F4F4FA;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.ld-lens-close:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }

/* ── Formulário de suporte ────────────────────────────────────────────────
   O endereço de destino NÃO mora aqui. O form posta em /api/suporte, no
   próprio domínio, e quem sabe para onde vai é a variável de ambiente da
   função — ver web/functions/api/suporte.js. Ofuscar e-mail em JavaScript
   seria teatro: o que o navegador decifra, o visitante lê. */
.ld-form{display:grid;gap:16px;margin:26px 0 8px}
.ld-field{display:grid;gap:7px}
.ld-field > span:first-child{font-size:14px;font-weight:600;color:var(--ld-text-2)}
.ld-field small{font-size:12.5px;color:var(--ld-text-4)}
.ld-form input,.ld-form textarea{
  font:inherit;font-size:15px;color:var(--ld-text-2);
  /* fill-1 (branco a 1,5%) e line-1 (6%) são véus de cartão: num campo de
     formulário eles somem e a pessoa não vê onde clicar. Um degrau acima em
     cada um é o mínimo para o campo PARECER campo. */
  background:var(--ld-fill-2);border:1px solid var(--ld-line-3);
  border-radius:11px;padding:12px 14px;width:100%;
  transition:border-color .16s ease,background .16s ease}
.ld-form textarea{min-height:150px;resize:vertical;line-height:1.55}
.ld-form input:focus,.ld-form textarea:focus{
  outline:none;border-color:var(--ld-accent);background:var(--ld-fill-3)}
.ld-form input::placeholder,.ld-form textarea::placeholder{color:var(--ld-text-4)}
/* Armadilha de robô: some para gente, some para leitor de tela, e some do
   tab. Quem preencher isso não é gente e a função descarta em silêncio. */
.ld-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ld-send{justify-self:start;font:inherit;font-size:15px;font-weight:600;
  color:#1B1206;background:var(--ld-accent);border:0;border-radius:999px;
  padding:13px 26px;cursor:pointer;transition:background .16s ease,transform .12s ease}
.ld-send:hover:not(:disabled){background:var(--ld-accent-hover)}
.ld-send:active:not(:disabled){transform:translateY(1px)}
.ld-send:disabled{opacity:.55;cursor:progress}
.ld-form-note{font-size:13px;line-height:1.6;color:var(--ld-text-4);margin:0}
.ld-form-msg{display:none;border-radius:12px;padding:15px 17px;font-size:14.5px;line-height:1.6}
.ld-form-msg.is-on{display:block}
.ld-form-msg.is-ok{background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.34);color:var(--ld-text-2)}
.ld-form-msg.is-bad{background:rgba(251,146,60,.10);border:1px solid rgba(251,146,60,.34);color:var(--ld-text-2)}