/* =========================================================
   Full Pages: sistema de design (docs/design-system.md).
   Referência visual: tryholo.ai. Fundo claro e tinta quase preta, faixas escuras para contraste, o gradiente
   da marca (azul → roxo → rosa → laranja) nos botões principais e em destaques, cantos generosos (cartões 28px,
   botões e campos em pílula), tipografia larga e arredondada (Plus Jakarta Sans) com títulos grandes e
   apertados em dois tons. As cores vêm de /ui/brand.css.
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis-weight:none}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.t-display{font-size:clamp(42px,6.2vw,80px);line-height:1.04;letter-spacing:-.04em;font-weight:700}
.t-h1{font-size:clamp(32px,4.4vw,56px);line-height:1.08;letter-spacing:-.035em}
.t-h2{font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.025em}
.t-h3{font-size:22px;line-height:1.2;letter-spacing:-.02em}
.t-h4{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.t-lead{font-size:18px;line-height:1.55;color:var(--ink-secondary)}
.t-body{font-size:15px;line-height:1.55}
.t-small{font-size:13px;line-height:1.5;color:var(--ink-secondary)}
.t-tiny{font-size:12px;line-height:1.4;color:var(--ink-secondary)}
.t-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-secondary)}
.t-mono{font-family:var(--font-mono);font-size:13px}
.muted{color:var(--ink-secondary)}
.accent{color:var(--accent)}
.balance{text-wrap:balance}
/* destaque no título: a palavra em gradiente (e uma luz suave atrás no tema escuro) */
.hl,.t-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}
[data-theme=dark] .hl{filter:drop-shadow(0 0 28px rgba(61,92,245,.35))}
/* título em dois tons: a parte de apoio em cinza (como "Any niche, from bakeries to B2B SaaS.") */
.mute{color:var(--ink-tertiary)}
[data-theme=dark] .mute{color:#8b8c94}
/* parágrafo com a primeira frase em negrito e o resto em cinza */
.lead-b b,.lead-b strong{color:var(--ink);font-weight:700}

/* ---------- layout ---------- */
.wrap{width:min(var(--page-max),100% - 2*var(--page-pad));margin-inline:auto}
.wrap.narrow{width:min(760px,100% - 2*var(--page-pad))}
.wrap.wide{width:min(1280px,100% - 2*var(--page-pad))}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:12px}
.row.wrap-{flex-wrap:wrap}
.sp{flex:1}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.center{text-align:center}
/* faixas do site: claro | alternativo | escuro (o escuro redefine as variáveis para o tema escuro) */
.band{padding:clamp(56px,8vw,104px) 0}
.band.alt{background:var(--canvas-alt)}
.band.dark{background:var(--canvas)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius-input);background:var(--surface-hover);color:var(--ink);font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s,transform .12s,box-shadow .15s,border-color .15s}
.btn:hover{text-decoration:none;background:color-mix(in srgb,var(--surface-hover) 70%,var(--hairline))}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:var(--ink);color:var(--canvas)}
.btn.primary:hover{background:color-mix(in srgb,var(--ink) 86%,var(--canvas))}
.btn.accent{background:var(--accent);color:var(--accent-text)}
/* botão principal da marca: gradiente com brilho suave */
.btn.grad{position:relative;background:var(--grad);color:#fff;border:0;box-shadow:0 12px 28px -12px rgba(61,92,245,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.grad:hover{background:var(--grad);filter:saturate(1.08) brightness(1.04);box-shadow:0 16px 34px -12px rgba(61,92,245,.65),inset 0 1px 0 rgba(255,255,255,.3)}
/* contorno em gradiente (texto em gradiente também): "Get Starter" */
.btn.grad-line{background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:2px solid transparent;color:var(--ink)}
.btn.grad-line>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.btn.grad-line:hover{background:linear-gradient(var(--canvas-alt),var(--canvas-alt)) padding-box,var(--grad) border-box}
[data-theme=dark] .btn.grad-line{background:linear-gradient(#0f1019,#0f1019) padding-box,var(--grad) border-box;color:#fff}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn.accent:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn.ghost{background:transparent;border-color:var(--hairline)}
.btn.ghost:hover{background:var(--surface-hover);border-color:transparent}
.btn.link{background:none;padding:0;height:auto;color:var(--link);font-weight:500}
.btn.link:hover{text-decoration:underline}
.btn.danger{background:var(--danger-tint);color:var(--danger)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 18%,transparent)}
.btn.sm{height:34px;padding:0 14px;font-size:13px}
.btn.lg{height:52px;padding:0 26px;font-size:16px}
.btn.xl{height:60px;padding:0 32px;font-size:17px}
.btn.icon{width:40px;padding:0;height:40px}
.btn.icon.sm{width:32px;height:32px}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.block{width:100%}
/* botão com brilho que passa (chamadas principais do site) */
.btn.shine{position:relative;overflow:hidden}
.btn.shine::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);background-size:250% 100%;animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}

/* ---------- selos e pílulas ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--surface-hover);color:var(--ink-secondary);font-size:12px;font-weight:600;white-space:nowrap}
.pill.accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.pill.good{background:var(--success-tint);color:var(--success)}
.pill.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.pill.bad{background:var(--danger-tint);color:var(--danger)}
.pill.ink{background:var(--ink);color:var(--canvas)}
.pill.grad{background:var(--grad);color:#fff}
.pill.blue{background:#4f8ae6;color:#fff}.pill.orange{background:#f05427;color:#fff}.pill.pink{background:#3d5cf5;color:#fff}.pill.purple{background:#6a7cf0;color:#fff}
.pill.soft-pink{background:#fde7f0;color:#d13a7a}.pill.soft-green{background:#e6f4ea;color:#2e7d43}
/* pílula grande de destaque no topo (prova, aviso) */
.ring{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hairline);font-size:14px;color:var(--ink-secondary)}
.ring b{color:var(--ink);font-weight:700}
.ring .dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font-size:13px}
[data-theme=dark] .ring{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#b9bac2}
/* ícone em quadrado contornado (linhas de recursos no tema escuro) */
.ic-sq{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--ink)}
.ic-sq svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* número grande em gradiente (91%, 11x) */
.num-grad{font-weight:800;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* barra de progresso em gradiente */
.bar-grad{height:10px;border-radius:999px;background:var(--surface-hover);overflow:hidden}
.bar-grad i{display:block;height:100%;border-radius:999px;background:var(--grad)}
/* botão redondo (setas de carrossel) */
.btn.round{width:52px;height:52px;padding:0;border-radius:50%;background:var(--surface-hover)}
.pill.outline{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-badge);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-border),0 1px 2px var(--shadow-near);font-size:13px;font-weight:500;color:var(--ink-secondary)}
.badge b{color:var(--ink);font-weight:600}
.badge .star{color:#f5a524}
.kbd{display:inline-block;padding:1px 6px;border-radius:6px;border:1px solid var(--hairline);font:500 11px var(--font-mono);color:var(--ink-secondary)}

/* ---------- cartões ---------- */
.card{background:var(--card);border-radius:var(--radius-panel);box-shadow:inset 0 0 0 1px var(--card-border),0 1px 2px var(--shadow-near),0 10px 30px -18px var(--shadow-far);padding:22px}
.card.lg{border-radius:var(--radius-card);padding:28px}
/* cartão de destaque com faixa em gradiente no topo ("Most popular") */
.card.featured{position:relative;padding-top:52px;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:0 30px 60px -30px rgba(61,92,245,.45)}
.card.featured>.flag{position:absolute;inset:0 0 auto;height:38px;display:grid;place-items:center;border-radius:calc(var(--radius-card) - 2px) calc(var(--radius-card) - 2px) 0 0;background:var(--grad);color:#fff;font-size:13px;font-weight:700}
.card.flat{box-shadow:inset 0 0 0 1px var(--card-border)}
.card.hover{transition:transform .18s,box-shadow .18s}
.card.hover:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--card-border),0 2px 4px var(--shadow-near),0 20px 40px -20px var(--shadow-far)}
.card.dark{background:#0a0b14;color:#f5f6f8;box-shadow:none}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-head h3{font-size:16px;font-weight:600}
.card-head .sp{flex:1}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hairline{border:0;border-top:1px solid var(--hairline);margin:0}

/* ---------- formulários ---------- */
.f{display:flex;flex-direction:column;gap:7px;min-width:0}
.f>span,.f-label{font-size:13px;font-weight:600;color:var(--ink-secondary)}
.f .hint{font-size:12px;color:var(--ink-tertiary)}
.in,.f input:not([type=checkbox]):not([type=radio]):not([type=range]),.f select,.f textarea{width:100%;height:44px;padding:0 16px;border:1px solid var(--hairline);border-radius:var(--radius-input);background:var(--card);color:var(--ink);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
.f textarea{height:auto;min-height:96px;padding:12px 16px;border-radius:var(--radius-lg);resize:vertical;line-height:1.5}
.f select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236d6e76' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;cursor:pointer}
.in:hover,.f input:hover,.f select:hover,.f textarea:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--hairline))}
.in:focus,.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-tertiary)}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--danger)}
.f .err{margin:0;font-size:12.5px;font-weight:600;color:var(--danger)}
.f .err:empty{display:none}
.in.sm{height:36px;padding:0 12px;font-size:13.5px}
.f.inline{flex-direction:row;align-items:center;gap:10px}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--ink-secondary)}
.check input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
/* interruptor */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{position:relative;width:42px;height:24px;border-radius:999px;background:var(--hairline);transition:background .2s;flex:none}
.switch .track::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.switch input:checked+.track{background:var(--grad)}
.switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
/* segmentos (Mensal | Trimestral | Anual) */
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--surface-hover);gap:2px}
.seg button{height:34px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-secondary);font-size:13.5px;font-weight:600;transition:background .15s,color .15s}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px var(--shadow-far)}
.seg button:hover:not(.on){color:var(--ink)}
/* busca */
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:14px;width:16px;height:16px;fill:none;stroke:var(--ink-tertiary);stroke-width:1.8;stroke-linecap:round}
.search input{padding-left:40px}

/* ---------- avisos e toast ---------- */
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-lg);background:var(--canvas-alt);font-size:13.5px;line-height:1.5;color:var(--ink-secondary)}
.note.accent{background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--ink)}
.note.warn{background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--ink)}
.note.bad{background:var(--danger-tint);color:var(--danger)}
.note.good{background:var(--success-tint);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1000;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--canvas);font-size:14px;font-weight:500;box-shadow:0 14px 40px -12px rgba(0,0,0,.5);animation:toastin .25s ease}
.toast.err{background:var(--danger);color:#fff}
.toast[hidden]{display:none}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- menus e janelas ---------- */
.menu{position:absolute;z-index:60;min-width:200px;padding:6px;border-radius:var(--radius-lg);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-border),0 18px 50px -14px rgba(0,0,0,.35)}
.menu button,.menu a{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:var(--radius-link);background:none;color:var(--ink);font-size:14px;text-align:left;text-decoration:none}
.menu button:hover,.menu a:hover{background:var(--surface-hover)}
.menu button.danger{color:var(--danger)}
.menu hr{margin:6px 4px;border:0;border-top:1px solid var(--hairline)}
dialog.dlg{width:min(560px,calc(100% - 32px));padding:0;border:0;border-radius:var(--radius-card);background:var(--card);color:var(--ink);box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
dialog.dlg::backdrop{background:rgba(10,11,20,.55);backdrop-filter:blur(4px)}
dialog.dlg.wide{width:min(860px,calc(100% - 32px))}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 0}
.dlg-h b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.dlg-b{padding:16px 26px 22px}
.dlg-f{display:flex;justify-content:flex-end;gap:10px;padding:0 26px 24px}
.x{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--surface-hover);color:var(--ink-secondary);font-size:18px}
.x:hover{color:var(--ink)}

/* ---------- tabelas ---------- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-secondary);border-bottom:1px solid var(--hairline)}
.tbl td{padding:12px;border-bottom:1px solid var(--card-border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--canvas-alt)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- indicador (estatísticas) ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);margin-bottom:8px}
.stat .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat b{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--ink-secondary)}
.stat .delta{font-size:12px;font-weight:600}
.stat .delta.up{color:var(--success)}.stat .delta.down{color:var(--danger)}

/* ---------- estados vazios e carregando ---------- */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;text-align:center;color:var(--ink-secondary);border:1px dashed var(--hairline);border-radius:var(--radius-panel)}
.empty b{color:var(--ink);font-size:16px}
.empty .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--surface-hover);margin-bottom:6px}
.empty .ic svg{width:24px;height:24px;fill:none;stroke:var(--ink-secondary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skel{position:relative;overflow:hidden;background:var(--surface-hover);border-radius:var(--radius-md);min-height:14px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:skel 1.4s infinite}
[data-theme=dark] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes skel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.spin{width:18px;height:18px;border:2px solid var(--hairline);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* entrada suave ao rolar (site): .reveal fica invisível até ganhar .in */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.shown{opacity:1;transform:none}
/* esteira horizontal (logos, exemplos) */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:16px;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- ícones inline ---------- */
.ic-line{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

@media(max-width:900px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}.band{padding:48px 0}.card{padding:18px}.card.lg{padding:22px;border-radius:22px}}
@media(prefers-reduced-motion:reduce){.btn.shine::after,.marquee .track,.skel::after{animation:none}.reveal{opacity:1;transform:none;transition:none}}

/* ---------- seletor de idioma (public/ui/lang-pick.js; modelo do dono em 06/11/2026) ---------- */
.lang-pick{position:relative;display:inline-flex;flex:none}
.lang-pick .lp-btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 14px 0 12px;border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:999px;background:var(--card);color:var(--ink);font:600 14px var(--font-text);white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px var(--shadow-near);transition:border-color .15s,box-shadow .15s,background .15s}
.lang-pick .lp-btn:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.lang-pick .lp-btn:focus-visible,.lang-pick.open .lp-btn{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);outline:none}
.lang-pick small{font-size:.92em;font-weight:500;color:var(--ink-tertiary)}
.lp-flag{width:22px;height:15.4px;flex:none;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lp-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-tertiary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.lang-pick.open .lp-chev{transform:rotate(180deg)}
.lp-list{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:210px;margin:0;padding:6px;list-style:none;border:1px solid var(--card-border);border-radius:18px;background:var(--card);box-shadow:0 24px 48px -16px rgba(10,11,20,.28),0 2px 6px rgba(10,11,20,.06);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .15s,transform .15s}
.lang-pick.up .lp-list{top:auto;bottom:calc(100% + 8px);transform-origin:bottom right}
.lang-pick.open .lp-list{opacity:1;transform:none;pointer-events:auto}
.lp-list button{display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--ink);font:500 14px var(--font-text);text-align:left;cursor:pointer}
.lp-list button span{flex:1}
.lp-list button:hover,.lp-list button:focus-visible{background:var(--canvas-alt);outline:none}
.lp-list button[aria-selected="true"]{font-weight:700}
.lp-ok{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lang-pick.compact .lp-btn{gap:7px;padding:0 10px 0 10px}
/* rodapé da janela em tela estreita: os botões quebram de linha em vez de vazar (06/11/2026) */
@media(max-width:560px){.dlg-f{flex-wrap:wrap;padding:0 18px 20px}.dlg-f .sp{display:none}.dlg-b{padding:14px 18px 20px}.dlg-h{padding:18px 18px 0}}

/* ---------- conectar domínio (06/11/2026, modelo do CashGo): passos numerados, registros e guia por provedor ---------- */
.pill.site-prev{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--ink);font-size:11.5px}
.dg{gap:14px}
.dg .note svg{width:18px;height:18px}
.dg-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;padding:16px;border:1px solid var(--card-border);border-radius:18px;background:var(--card)}
.dg-step.off{opacity:.45;pointer-events:none}
.dg-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--canvas);font-size:13px;font-weight:700}
.dg-b{display:flex;flex-direction:column;gap:10px;min-width:0}
.dg-b h4{margin:4px 0 0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.dg-hint{margin:0;color:var(--ink-secondary);line-height:1.5}
.dg .err:empty{display:none}
.dg-recs{border:1px solid var(--card-border);border-radius:14px;overflow:hidden}
.dg-rh,.dg-r{display:grid;grid-template-columns:80px minmax(0,.8fr) minmax(0,1.4fr);gap:10px;align-items:center;padding:10px 14px}
.dg-rh{background:var(--canvas-alt);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-tertiary)}
.dg-r+.dg-r{border-top:1px solid var(--card-border)}
.dg-r code,.dg-steps code{font-family:var(--font-mono);font-size:12.5px;padding:2px 7px;border-radius:7px;background:var(--canvas-alt);color:var(--ink);word-break:break-all}
.dg-val{display:flex;align-items:center;gap:4px;min-width:0}
.dg-val .btn.icon{width:30px;height:30px;flex:none}
.dg-val .btn svg{width:15px;height:15px}
.dg-tabs{display:flex;flex-wrap:wrap;gap:6px}
.dg-tabs button{height:36px;padding:0 14px;border:1px solid var(--card-border);border-radius:999px;background:var(--card);color:var(--ink-secondary);font:600 13.5px var(--font-text);cursor:pointer}
.dg-tabs button:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.dg-tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.dg-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55;color:var(--ink)}
.dg-steps li::marker{font-weight:700;color:var(--ink-tertiary)}
.dg-help{align-self:flex-start}
@media(max-width:640px){.dg-step{grid-template-columns:minmax(0,1fr);padding:14px}.dg-n{width:26px;height:26px}.dg-rh{display:none}.dg-r{grid-template-columns:minmax(0,1fr);gap:6px}}
@media(max-width:640px){.dg-r>span{display:flex;align-items:center;gap:10px}.dg-r>span::before{content:attr(data-l);min-width:92px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-tertiary)}}
.dlg .err:empty{display:none}