/*
  Forasak — the legal and pricing pages.

  These exist because a payment processor will not approve a domain without
  them, but they are read by customers too, so they are written to be read
  rather than to be survived. They borrow app.css's tokens wholesale so the
  accent, the greens-biased neutrals and both themes stay in one place; only
  the long-form reading rules live here.

  One column, ~68 characters. A tool's UI wants density; a policy wants air.
*/

body.legal {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 var(--font);
  -webkit-text-size-adjust: 100%;
}

.legal-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

/* ------------------------------------------------------------ chrome */

.legal-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.legal-top .brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
}

.legal-top .spacer { flex: 1; }

.legal-top a.plain {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .9rem;
}
.legal-top a.plain:hover { color: var(--accent); }

button.lang {
  font: inherit;
  font-size: .85rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}
button.lang:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- type */

.legal h1 {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 .4rem;
}

.legal .updated {
  color: var(--ink-3);
  font-size: .85rem;
  margin: 0 0 2.5rem;
}

.legal h2 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin: 2.75rem 0 .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  font-size: 1rem;
  margin: 1.75rem 0 .5rem;
}

.legal p  { margin: 0 0 1rem; color: var(--ink-2); }
.legal li { margin: 0 0 .45rem; color: var(--ink-2); }
.legal ul { margin: 0 0 1.25rem; padding-inline-start: 1.35rem; }
.legal strong { color: var(--ink); font-weight: 650; }
.legal a { color: var(--accent); }

/*
  The one thing a reader must not miss on each page. Not a decoration: it
  carries the fact that would otherwise be buried in a paragraph — who takes
  the money, how long the refund window is, what leaves the machine.
*/
.legal .keypoint {
  background: var(--accent-bg);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
}
.legal .keypoint p { margin: 0; color: var(--ink); }

/* ------------------------------------------------------- price cards */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2.5rem;
}

.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.plan.is-paid { border-color: var(--accent); box-shadow: var(--shadow); }

.plan .name {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-weight: 650;
}
.plan .price {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.plan .price span {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}
.plan ul { margin: .8rem 0 0; padding-inline-start: 1.2rem; }
.plan li { font-size: .93rem; }

/* --------------------------------------------------------- contact */

.legal .contact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  margin-top: 2.5rem;
}
.legal .contact p:last-child { margin-bottom: 0; }

.legal-foot {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  font-size: .87rem;
}
.legal-foot a { color: var(--ink-2); text-decoration: none; }
.legal-foot a:hover { color: var(--accent); }
.legal-foot .note { color: var(--ink-3); flex-basis: 100%; margin-top: .5rem; }

/*
  Both language versions ship in the markup and one is hidden, rather than
  being fetched — a policy page must render with no network and no script
  beyond the toggle. Until the script runs, English shows.
*/
[data-lang="ar"] { display: none; }
html[lang="ar"] [data-lang="ar"] { display: block; }
html[lang="ar"] [data-lang="en"] { display: none; }