/* by4.me — páginas públicas (Parte 2). Usa os tokens de app.css (claro/escuro). */
body.pub{display:flex;flex-direction:column;min-height:100vh;
  background:
    radial-gradient(900px 420px at 12% -8%,color-mix(in srgb,var(--c2) 30%,transparent),transparent 70%),
    radial-gradient(700px 380px at 100% 0%,color-mix(in srgb,var(--c1) 14%,transparent),transparent 70%),
    var(--bg)}

/* ── Topo ── */
.pub-top{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:1180px;margin:0 auto;padding:18px 24px}
.pub-nav{display:flex;align-items:center;gap:10px}
.pub-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:0 24px 48px}

/* ── Hero + campo ── */
.hero-pub{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(28px,7vw,76px) 0 36px}
.hero-pub h1{font:800 clamp(38px,6.4vw,72px)/1.02 var(--display);letter-spacing:-.04em;max-width:15ch}
.hero-pub .lead{font-size:clamp(15px,1.8vw,18px);max-width:56ch}
.shorten{width:min(760px,100%);margin-top:12px;text-align:left}
.shorten-box{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.shorten-box:focus-within{border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 18%,transparent),var(--shadow)}
.shorten-box.has-error{border-color:var(--danger)}
.shorten-box .ico{color:var(--muted)}
.shorten-box input{flex:1;min-width:0;border:0!important;box-shadow:none!important;background:transparent;padding:14px 4px;font:inherit;font-size:16px;color:var(--ink);outline:none}
.shorten-box .btn{padding:14px 22px;white-space:nowrap}
.shorten-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;color:var(--ok)}
.consent{text-align:center;margin-top:6px}
.consent a,.check a,.auth-alt a,.pub-foot a:hover,.cookie a{text-decoration:underline;text-underline-offset:2px}
.form-error{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--danger-bg);color:var(--danger);font-weight:500;font-size:13.5px}

.example{display:flex;align-items:center;gap:18px;width:min(760px,100%);margin-top:18px;padding:16px 20px;text-align:left;color:var(--muted)}
.example>div{min-width:0}.example>div:first-child{flex:1}.example .eyebrow{display:block;margin-bottom:6px}
.example strong{color:var(--ink)}.example>div:last-child{color:var(--c1);font-weight:600;white-space:nowrap}

/* ── Funcionalidades ── */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.feat{display:flex;flex-direction:column;gap:10px;padding:24px;transition:transform .18s}
.feat:hover{transform:translateY(-3px)}
.feat h2{font:700 19px/1.2 var(--display);letter-spacing:-.01em;margin-top:6px}

/* ── Registo / login ── */
.auth-wrap{display:grid;place-items:start center;padding:clamp(8px,4vw,40px) 0}
.auth-card{width:min(460px,100%);padding:clamp(22px,4vw,34px);display:flex;flex-direction:column;gap:14px}
.auth-card h1{font:800 clamp(26px,4vw,32px)/1.1 var(--display);letter-spacing:-.03em}
.chip-link{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.chip-link .eyebrow{font-size:10px}.chip-link>div{min-width:0;font-size:13.5px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .field small{font-weight:400}
input[type=email],input[type=password]{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;outline:none}
input[type=email]:focus,input[type=password]:focus{border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 20%,transparent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.btn-google{gap:12px}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-alt{text-align:center;font-size:13.5px}
.auth-note{font-size:12px;color:var(--muted);text-align:center;margin-top:-4px}

/* ── Política de privacidade ── */
.legal{max-width:760px;margin:0 auto;padding:clamp(8px,3vw,32px) 0}
.legal h1{font:800 clamp(30px,5vw,44px)/1.08 var(--display);letter-spacing:-.03em;margin:10px 0 6px}
.legal h2{font:700 21px/1.25 var(--display);margin:30px 0 8px;scroll-margin-top:20px}
.legal p,.legal li{color:var(--ink);line-height:1.65;margin:0 0 10px}.legal ul{padding-left:20px;margin:0 0 10px}
.legal a{text-decoration:underline;text-underline-offset:2px}

/* ── Rodapé + cookies ── */
.pub-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;width:100%;max-width:1180px;margin:0 auto;padding:22px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.pub-foot-links{display:flex;gap:18px}.pub-foot a:hover{color:var(--ink)}
.cookie{position:fixed;left:50%;bottom:18px;z-index:60;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:min(720px,calc(100% - 28px));padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 50px -16px rgba(0,0,0,.45);animation:pop .2s ease-out}
.cookie p{flex:1;font-size:13px}.cookie .btn{padding:9px 16px;white-space:nowrap}
.cookie[hidden]{display:none}

/* ── Responsivo ── */
@media (max-width:860px){.feats{grid-template-columns:1fr}.hide-sm{display:none}}
@media (max-width:560px){
  .pub-top,.pub-main{padding-left:16px;padding-right:16px}
  .shorten-box{flex-wrap:wrap;padding:10px}.shorten-box .ico{display:none}
  .shorten-box input{flex:1 1 100%;padding:10px 8px}.shorten-box .btn{width:100%}
  .example{flex-direction:column;align-items:flex-start;gap:12px}.example>.ico{transform:rotate(90deg)}
  .cookie{flex-direction:column;align-items:stretch;text-align:left}
}

/* tabela de cookies */
.legal-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 14px}
.legal-table th,.legal-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{font:600 11px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}