/* Shared look for the app pages (sign-up, account, call, admin). Matches landing.html. */
:root {
  --bg: #0c080d; --card: #181019; --card2: #1f1520; --line: #2d2130;
  --fg: #f6ede9; --dim: #b8a3ab; --mute: #958390;
  --ember: #ff4d6d; --coral: #ff8a5c; --amber: #ffc27a; --ok: #3ee08f; --bad: #ff6b81;
  --grad: linear-gradient(115deg, var(--ember), var(--coral) 55%, var(--amber));
  --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--fg); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  background: var(--bg) radial-gradient(ellipse 70% 40% at 15% 0%, rgba(255,61,100,.16), transparent 70%) no-repeat; }
a { color: inherit; }
main { max-width: 560px; margin: 0 auto; padding: 28px 16px 80px; }
main.wide { max-width: 980px; }
.top { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.brand { font: 600 20px var(--serif); display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
/* The crescent moon from the app icon. */
.brand i { width: 20px; height: 20px; flex: none; position: relative; filter: drop-shadow(0 0 7px rgba(255,77,109,.65)); }
.brand i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grad);
  -webkit-mask: radial-gradient(circle at 80% 23%, transparent 9px, #000 9.6px); mask: radial-gradient(circle at 80% 23%, transparent 9px, #000 9.6px); }
.top .right { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--dim); }
h1 { font: 400 clamp(34px, 6vw, 46px)/1.05 var(--serif); letter-spacing: -.025em; margin: 0 0 10px; }
h1 em { font-style: italic; color: var(--amber); font-weight: 300; }
h2 { font: 500 22px var(--serif); margin: 0 0 14px; }
p.lead { color: var(--dim); margin: 0 0 28px; }
.dim { color: var(--dim); } .mute { color: var(--mute); font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; margin: 0 0 16px; }
label { display: block; font-size: 14px; color: var(--dim); margin: 14px 0 6px; }
input[type=email], input[type=password], input[type=tel], input[type=date], input[type=text] {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 16px var(--sans); }
input:focus { outline: 2px solid rgba(255,77,109,.5); border-color: transparent; }
.consent { display: flex; gap: 2px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin-top: 18px; }
.consent[hidden] { display: none; }
.consent a { color: var(--fg); }
input[type=checkbox] { accent-color: var(--ember); width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 0;
  font: 600 15px var(--sans); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.btn-hot { background: var(--grad); color: #1a0710; box-shadow: 0 10px 34px -12px rgba(255,77,109,.75); }
.btn-hot:hover { transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--fg); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-small { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; margin-top: 20px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.link { background: none; border: 0; color: var(--coral); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.err { color: var(--bad); font-size: 14px; min-height: 20px; margin-top: 12px; }
.ok { color: var(--ok); }
.banner { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; margin-bottom: 16px; border: 1px solid; font-size: 15px; }
.banner.warn { background: rgba(255,194,122,.08); border-color: rgba(255,194,122,.35); }
.banner.bad { background: rgba(255,107,129,.08); border-color: rgba(255,107,129,.4); }
.banner .btn { margin-left: auto; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); color: var(--dim); }
.pill.hot { background: rgba(255,77,109,.14); border-color: rgba(255,77,109,.35); color: #ffb3c1; }
.pill.good { background: rgba(62,224,143,.1); border-color: rgba(62,224,143,.35); color: var(--ok); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--mute); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.orb { width: 44px; height: 44px; border-radius: 50%; flex: none; box-shadow: inset 0 -6px 14px rgba(0,0,0,.35), inset 0 5px 12px rgba(255,255,255,.25); }
.orb.vera { background: radial-gradient(circle at 30% 30%, #ffb3c1, #ff4d6d 45%, #6b1030); }
.orb.marco { background: radial-gradient(circle at 30% 30%, #ffd9a8, #e0803a 45%, #4a1d08); }
.orb.nadia { background: radial-gradient(circle at 30% 30%, #d8c4ff, #8a5cff 45%, #26105c); }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
/* Terms, privacy and contact pages. */
.doc { max-width: 720px; }
.doc h2 { margin: 36px 0 10px; font-size: 24px; }
.doc h3 { font: 600 16px var(--sans); margin: 22px 0 6px; }
.doc p, .doc li { color: var(--dim); }
.doc ul { padding-left: 20px; }
.doc li { margin: 4px 0; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc a:not(.brand) { color: var(--coral); }
@media (max-width: 640px) { .doc table { font-size: 13px; } .doc th, .doc td { padding: 8px 5px; } }
.doc .updated { color: var(--mute); font-size: 14px; margin: 0 0 28px; }
.doc table { margin: 10px 0 6px; }
.doc td { color: var(--dim); }
.doc td:first-child { color: var(--fg); }
.doc nav.legal { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--mute); }
.doc nav.legal a { color: var(--dim); }
mark.todo { background: rgba(255,194,122,.18); color: var(--amber); padding: 0 4px; border-radius: 4px; }
/* Numbered clauses (terms). */
.doc .cl { display: grid; grid-template-columns: 3.4em 1fr; gap: 0 6px; margin: 8px 0; }
.doc .cl > b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.doc .cl.l2 { margin-left: 3.4em; grid-template-columns: 4.2em 1fr; }
.doc .cl.l3 { margin-left: 7.6em; grid-template-columns: 5em 1fr; }
@media (max-width: 640px) { .doc .cl.l2 { margin-left: 1em; } .doc .cl.l3 { margin-left: 2em; } }
.doc .toc { columns: 2; column-gap: 32px; font-size: 14px; padding-left: 20px; }
.doc .toc li { break-inside: avoid; }
@media (max-width: 640px) { .doc .toc { columns: 1; } }
.doc h2.sub { font: 600 16px var(--sans); margin: 22px 0 6px; }