/* Landing do melink.bio. Usa os tokens de app.css; temas em miniatura vêm de themes.css (.tile / .t-{slug}). */
.lp{background:var(--bg)}
.lp svg{fill:none}
.lp-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.lp-narrow{max-width:820px}

/* ---------- Navegação ---------- */
.lp-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.lp-nav-in{display:flex;align-items:center;gap:28px;height:68px}
.lp-logo .logo{height:30px}
.lp-links{display:flex;gap:26px;margin-left:12px}
.lp-links a{color:var(--text);font-weight:600;font-size:15px}
.lp-links a:hover{color:var(--primary);text-decoration:none}
.lp-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.lp-login{font-weight:700;color:var(--text)}
.lp-btn{min-height:42px;padding:0 20px}

/* ---------- Hero ---------- */
.hero{padding:44px 0 72px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:40px;align-items:center}
.chip-note{display:inline-block;margin:0 0 20px;padding:7px 15px;border-radius:999px;background:color-mix(in srgb,var(--primary) 11%,transparent);color:var(--primary);font-weight:800;font-size:13px}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.01;letter-spacing:-.045em;margin:0 0 20px;max-width:13ch}
.lead{font-size:1.2rem;line-height:1.5;color:var(--muted);max-width:44ch;margin:0}
.claim{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 8px;max-width:560px}
.claim-field{flex:1 1 250px;display:flex;align-items:center;min-width:0;height:56px;padding:0 10px 0 22px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.claim-field:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
.claim-field span{color:var(--muted);font-weight:700;white-space:nowrap}
.claim-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font:800 16px inherit;font-family:inherit;padding-left:2px}
.claim .btn{height:56px;padding:0 28px;font-size:16px}
.claim-msg{flex-basis:100%;margin:2px 0 0 8px;min-height:22px;font-size:14px;font-weight:700;color:var(--muted)}
.claim.is-free .claim-msg{color:var(--ok)}
.claim.is-bad .claim-msg{color:var(--danger)}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:18px 0 0;color:var(--muted);font-weight:600;font-size:14px}
.hero-points li::before{content:"✓";color:var(--primary);font-weight:800;margin-right:7px}

/* palco com celulares reais */
.stage{position:relative;height:610px}
.stage-bg{position:absolute;inset:34px 0 20px 34px;border-radius:44px;background:var(--grad);box-shadow:0 30px 70px rgba(255,91,0,.25)}
.stage-bg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px 320px at 18% 0%,rgba(255,255,255,.28),transparent 70%)}
.mock{position:absolute;border:8px solid #19181B;border-radius:38px;overflow:hidden;background:#000;box-shadow:0 22px 50px rgba(25,24,27,.38)}
.mock iframe{display:block;width:390px;height:800px;border:0;transform-origin:0 0;pointer-events:none}
.m-center{left:50%;top:18px;width:273px;height:544px;margin-left:-118px;z-index:3}
.m-center iframe{transform:scale(.66)}
.m-left{left:-6px;top:128px;width:222px;height:456px;transform:rotate(-6deg);z-index:2}
.m-left iframe{transform:scale(.538)}
.m-right{right:6px;top:150px;width:222px;height:456px;transform:rotate(6deg);z-index:2}
.m-right iframe{transform:scale(.538)}

/* ---------- Faixa de plataformas ---------- */
.strip{border-block:1px solid var(--border);background:var(--surface)}
.strip-in{display:flex;align-items:center;gap:28px;padding-block:22px;flex-wrap:wrap}
.strip-in p{margin:0;color:var(--muted);font-weight:600}
.strip-in ul{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0;font-weight:800;letter-spacing:-.01em}
.strip-in li{color:color-mix(in srgb,var(--text) 80%,transparent)}

/* ---------- Seções ---------- */
.sec{padding:104px 0 20px}
.sec-title{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 8px;max-width:18ch}
.sec-sub{margin:0 0 36px;color:var(--muted);font-size:1.1rem}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;margin-top:84px}
.feat-rev .feat-text{order:2}
.feat-text h3{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 14px}
.feat-text>p{font-size:1.08rem;line-height:1.55;color:var(--muted);margin:0 0 20px;max-width:46ch}
.ticks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:600}
.ticks li::before{content:"✓";display:grid;place-items:center;flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;background:var(--grad);color:#fff;font-size:12px;font-weight:800}
.feat-vis{min-width:0;padding:28px;border:1px solid var(--border);border-radius:30px;background:var(--surface);box-shadow:var(--shadow)}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
.tiles figure{margin:0;display:grid;gap:7px}
.tiles .tile{display:block;height:132px;border-radius:14px;border:2px solid var(--border)}
.tiles figcaption{font-size:12px;font-weight:700;text-align:center;color:var(--muted)}

.dash-mock{display:grid;gap:16px}
.dm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dm-kpis div{padding:14px;border-radius:16px;background:var(--bg);border:1px solid var(--border)}
.dm-kpis span{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.dm-kpis b{display:block;font-size:26px;letter-spacing:-.03em;line-height:1.15}
.dm-kpis em{font-style:normal;font-size:12px;font-weight:800;color:var(--ok)}
.dm-line{width:100%;height:auto;display:block}
.dm-line polyline{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dm-line .a{stroke:var(--c-views)}.dm-line .b{stroke:var(--c-clicks)}
.dm-ins{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dm-ins li{padding:8px 13px;border-radius:999px;background:var(--bg);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--muted)}
.dm-ins strong{color:var(--text)}
.dash-mock small{color:var(--muted);font-size:12px}

.route{display:grid;gap:16px}
.route-from{justify-self:start;padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.route-from b{color:var(--brand-amber)}
.route ul{list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:10px;border-left:2px dashed var(--border)}
.route li{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--border);border-radius:16px;background:var(--bg)}
.r-if{padding:5px 12px;border-radius:999px;background:var(--surface-2);font-weight:800;font-size:13px;min-width:92px;text-align:center}
.route i{font-style:normal;color:var(--muted)}
.r-to{font-weight:800;color:var(--primary)}

.profiles-mock{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.profiles-mock li{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--border);border-radius:18px;background:var(--bg)}
.pm-av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;flex:none}
.pm2{background:linear-gradient(145deg,#8b5cf6,#4f46e5)}.pm3{background:linear-gradient(145deg,#12b886,#0b8a64)}.pm4{background:linear-gradient(145deg,#38bdf8,#0369a1)}
.profiles-mock div{flex:1;display:flex;flex-direction:column;line-height:1.25}
.profiles-mock b{font-size:16px}.profiles-mock small{color:var(--muted);font-weight:600}
.profiles-mock em{font-style:normal;font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.profiles-mock em.draft{background:var(--surface-2);color:var(--muted)}

/* ---------- Planos ---------- */
.sec-plans{padding-bottom:40px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:28px 24px 24px;background:var(--surface);border:1px solid var(--border);border-radius:26px}
.plan.is-pop{border:2px solid var(--primary);box-shadow:0 18px 50px rgba(255,91,0,.18)}
.pop{position:absolute;top:-14px;left:24px;padding:5px 14px;border-radius:999px;background:var(--grad);color:#fff;font-size:12px;font-weight:800}
.plan h3{font-size:20px;margin:0}
.price{margin:6px 0 0}.price b{font-size:38px;letter-spacing:-.04em}.price span{color:var(--muted);font-weight:600;margin-left:3px}
.plan-prof{margin:0 0 14px;font-weight:800;color:var(--primary)}
.plan .ticks{margin-bottom:22px;font-size:14px}
.plan .ticks li::before{width:19px;height:19px;font-size:11px}
.plan .btn{margin-top:auto}

/* ---------- Perguntas ---------- */
.faq{margin-top:28px;border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;font-weight:700;font-size:1.08rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--primary);font-weight:600;flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:2px;border-radius:6px}
.faq p{margin:0 0 22px;color:var(--muted);line-height:1.6;max-width:62ch}

/* ---------- CTA final ---------- */
.final{padding:90px 0 40px}
.final-in{padding:72px 28px;border-radius:40px;background:var(--grad);color:#fff;text-align:center;box-shadow:0 30px 70px rgba(255,91,0,.25)}
.final h2{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.05;letter-spacing:-.04em;margin:0 auto 12px;max-width:16ch}
.final p{margin:0 0 6px;font-size:1.15rem;opacity:.95}
.final .claim{margin:26px auto 0;justify-content:center}
.final .claim-field{background:#fff;border-color:transparent}
.final .claim-field input{color:#19181B}.final .claim-field span{color:#6b6670}
.final .claim-msg{color:#fff;text-align:center;margin:4px 0 0}
.final .claim.is-free .claim-msg,.final .claim.is-bad .claim-msg{color:#fff}
.lp-white{background:#19181B;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.lp-white:hover{background:#000;text-decoration:none}

/* ---------- Rodapé ---------- */
.lp-foot{padding:48px 0 34px;border-top:1px solid var(--border);margin-top:40px}
.lp-foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.lp-foot .logo{height:28px}
.lp-foot p{color:var(--muted);margin:12px 0 0;max-width:34ch}
.lp-foot nav{display:flex;gap:10px 26px;flex-wrap:wrap;align-content:flex-start}
.lp-foot nav a{color:var(--text);font-weight:600}
.lp-foot .lp-copy{max-width:1180px;margin:30px auto 0;padding:0 24px;font-size:13px}

@media (max-width:1020px){
  .hero-in{grid-template-columns:1fr;gap:20px}
  .hero h1{max-width:16ch}
  .stage{height:560px;max-width:520px;margin:0 auto;width:100%}
  .feat{grid-template-columns:1fr;gap:28px;margin-top:64px}
  .feat-rev .feat-text{order:0}
}
@media (max-width:820px){.lp-links{display:none}.sec{padding-top:72px}}
@media (max-width:560px){
  .lp-wrap{padding:0 18px}
  .lp-login{display:none}
  .hero{padding-top:28px}
  .claim .btn{width:100%}
  .stage{height:520px}
  .m-left,.m-right{display:none}
  .m-center{margin-left:-136px;width:273px}
  .stage-bg{inset:30px 0 14px 0}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feat-vis{padding:18px;border-radius:24px}
  .dm-kpis b{font-size:21px}
  .final-in{padding:52px 18px;border-radius:30px}
  .final .claim-field{flex-basis:100%}
}

/* ---------- Páginas legais ---------- */
.legal{padding-block:56px 80px}
.legal h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.04em;line-height:1.05;margin:0 0 6px}
.legal .meta{color:var(--muted);margin:0 0 28px}
.legal h2{font-size:1.25rem;letter-spacing:-.02em;margin:34px 0 10px}
.legal p,.legal li{line-height:1.65;max-width:72ch;color:color-mix(in srgb,var(--text) 90%,transparent)}
.legal ul{padding-left:1.2rem;display:grid;gap:8px}

.plan-now{display:block;margin-top:10px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.plan-now:hover{color:var(--primary)}