/* Modality — shared styling for the public legal pages (privacy, terms).
   Standalone: these pages must render without the app or any auth. */
:root{
  --bg:#f2fbfa; --bg2:#fef6f1;
  --panel:#ffffff; --panel2:#f0f9f8; --line:#dcefec;
  /* The bright brand teal/coral are fills, not text: on this near-white bg the
     teal is 2.3:1 and the app's muted is 3.9:1, both under the 4.5:1 floor.
     --accent stays for fills/borders; --accent-txt is the readable text tint. */
  --txt:#123536; --muted:#4d6d6c;
  --accent:#0fb9a6; --accent2:#2dd4bf; --accent-txt:#07776a;
  --coral:#ff7a5c; --gold:#ffbf47;
  --radius:18px; --sh:0 10px 34px rgba(15,150,140,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#071a1c; --bg2:#0d2426;
    --panel:#0f2528; --panel2:#143034; --line:#1e4448;
    /* On the dark bg the brights already clear 7:1 — use them as-is. */
    --txt:#e6fbf8; --muted:#7fb3ad;
    --accent:#2dd4bf; --accent2:#5eead4; --accent-txt:#2dd4bf;
    --coral:#ff8a6c; --gold:#ffcb5e;
    --sh:0 10px 34px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(255,122,92,.14), transparent 60%),
    radial-gradient(900px 480px at 5% 0%, rgba(45,212,191,.16), transparent 58%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  color:var(--txt);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 80px}

/* ---- header ---- */
header{display:flex;align-items:center;gap:12px;padding:22px 0 18px}
.mark{width:40px;height:40px;flex:none}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--txt)}
.brand b{font-size:19px;letter-spacing:-.02em;display:block;line-height:1.2}
.brand small{color:var(--muted);font-size:12px;font-weight:500}
.back{margin-left:auto;color:var(--accent-txt);text-decoration:none;font-weight:600;font-size:14px}
.back:hover{text-decoration:underline}

/* ---- page card ---- */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--sh);
  padding:34px 32px;
}
@media (max-width:600px){ .card{padding:24px 20px} .wrap{padding:0 14px 60px} }

h1{font-size:30px;letter-spacing:-.03em;margin:0 0 6px}
.eff{color:var(--muted);font-size:13px;margin:0 0 26px}
h2{
  font-size:19px;letter-spacing:-.02em;margin:34px 0 10px;
  padding-top:20px;border-top:1px solid var(--line);
}
h2:first-of-type{border-top:none;padding-top:0;margin-top:26px}
h3{font-size:15px;margin:20px 0 6px}
p,li{font-size:15px;color:var(--txt)}
ul{padding-left:22px}
li{margin:6px 0}
a{color:var(--accent-txt)}
strong{font-weight:650}

/* ---- plain-English summary box ---- */
.tldr{
  background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(255,122,92,.09));
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:0 0 8px;
}
.tldr h2{border:none;padding:0;margin:0 0 8px;font-size:16px}
.tldr ul{margin:0;padding-left:20px}
.tldr li{font-size:14.5px}

/* ---- callouts ---- */
.note{
  border-left:3px solid var(--accent);background:var(--panel2);
  border-radius:0 12px 12px 0;padding:14px 16px;margin:16px 0;
}
.note.warn{border-left-color:var(--coral)}
.note p{margin:0;font-size:14.5px}
.note p+p{margin-top:8px}

/* Placeholders the owner still needs to fill in. Deliberately loud. */
.todo{
  background:var(--gold);color:#3a2600;font-weight:700;
  padding:1px 7px;border-radius:6px;font-size:13.5px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}

/* ---- table ---- */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.tscroll{overflow-x:auto}

footer{
  text-align:center;color:var(--muted);font-size:13px;
  margin-top:28px;padding-top:20px;
}
footer a{color:var(--muted);text-decoration:none;margin:0 8px}
footer a:hover{color:var(--accent-txt)}