/* Welliana document pages — privacy, support, terms.
   Same brand tokens as index.html, but calmer: these are things people read,
   not a landing page. Ground stays near-black, one neon rule for structure. */
:root{
  --bg:#08080c; --bg2:#0f1320;
  --card:#121826; --line:#283143; --line-soft:#28314366;
  --ink:#f7f8fc; --soft:#9aa3b4; --faint:#6b7280;
  --violet:#7c3aed; --violet-2:#a855f7; --pink:#ec4899; --teal:#00f5d4; --cyan:#22d3ee;
  --brand-grad:linear-gradient(120deg,#7c3aed 0%,#a855f7 42%,#ec4899 100%);
  --electric:linear-gradient(90deg,#00f5d4,#22d3ee,#7c3aed,#ec4899);
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* --- chrome, matching index.html --- */
header.nav{
  position:sticky;top:0;z-index:10;
  background:rgba(8,8,12,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1120px}
.mark img{height:26px;display:block}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--soft);text-decoration:none;font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--ink)}

/* --- title --- */
.doc-head{padding:64px 0 28px}
.doc-head .eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 14px
}
.doc-head h1{
  font-size:clamp(32px,5.6vw,46px);line-height:1.12;margin:0 0 14px;font-weight:800;letter-spacing:-.02em;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.doc-head .updated{color:var(--faint);font-size:14px;margin:0}
.rule{height:2px;border:0;margin:0 0 44px;background:var(--electric);opacity:.75;border-radius:2px}

/* --- body --- */
main{padding-bottom:88px}
main h2{
  font-size:22px;font-weight:700;letter-spacing:-.01em;margin:44px 0 12px;padding-top:8px;
  border-top:1px solid var(--line-soft);
}
main h2:first-of-type{border-top:0;margin-top:0;padding-top:0}
main h3{font-size:17px;font-weight:600;margin:26px 0 8px;color:var(--ink)}
main p{color:var(--soft);margin:0 0 16px}
main strong{color:var(--ink);font-weight:600}
main a{color:var(--cyan);text-decoration:none;border-bottom:1px solid transparent}
main a:hover{border-bottom-color:var(--cyan)}
main ul{color:var(--soft);margin:0 0 18px;padding-left:22px}
main li{margin:0 0 9px}
main li::marker{color:var(--violet-2)}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;margin:0 0 20px;
}
.card p:last-child{margin-bottom:0}
.card.accent{border-color:#7c3aed55;background:linear-gradient(180deg,#121826,#0f1320)}

table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px;display:block;overflow-x:auto}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{color:var(--ink);font-weight:600;white-space:nowrap}
td{color:var(--soft)}

/* On a phone these two columns cannot both fit.
   `white-space:nowrap` sizes the label column to the longest label in the whole
   table, so one long one sets the width for every row: "What the coach
   remembers" needs about 220px of a 312px viewport, leaving the description
   column too narrow to survive. It was being cut off mid-word at the right edge
   — "Your em", "Passwo", "authent" — for the entire "What we collect" table.
   The processors table below it looked fine only because "RevenueCat" is short.
   The table does scroll sideways, but nobody discovers that, and a privacy
   policy you cannot read is the same as one that was never published.
   So below 640px each row becomes its label with the text underneath. */
@media (max-width: 640px){
  table{display:block;overflow-x:visible}
  tbody,tr{display:block}
  tr{border-bottom:1px solid var(--line-soft);padding:12px 0}
  tr:last-child{border-bottom:0}
  th,td{display:block;white-space:normal;border-bottom:0;padding:0}
  th{margin-bottom:5px}
}

.contact{
  display:inline-block;margin-top:6px;padding:13px 22px;border-radius:999px;
  background:var(--brand-grad);color:#fff;font-weight:600;text-decoration:none;font-size:16px;
}
.contact:hover{opacity:.92}

footer{border-top:1px solid var(--line-soft);padding:34px 0 56px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;max-width:1120px}
footer .tag{color:var(--faint);font-size:14px}