/* Self-hosted Inter, identical to the landing page and the app. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Shared stylesheet for the legal pages. The landing page keeps its own inline
   CSS: these pages are long-form prose and need almost none of it, so they get
   a small sheet of their own rather than a shared extraction that would risk
   the page people actually land on. Same variables, same palette. */
:root {
  --ink: #2E323A;
  --ink-soft: #5B6069;
  /* All three light inks clear 4.5:1 on the darkest ground they sit on
     (--bg #E9E8E3). --ink-faint was #6E7480 at 3.83:1, which is below AA
     and it carries real body text: pricing sub-labels, the effective date,
     the footer. Darkened to 4.8:1 while staying visibly lighter than
     --ink-soft. Measure before changing any of these. */
  --ink-faint: #5F656F;
  --bg: #E9E8E3;
  --bg-tint: #F1F0EC;
  --brand-deep: #232833;
  --brand-accent: #FFC94A;
  /* See the note in site/index.html: brassShade is too light for small text.
     Kept identical to that file and to .link-brand in the app. */
  --link: #7C5C0F;
  --line: #D8D6CE;
  --card: #F1F0EC; /* parchment, same card as the app */
}
html.dark {
  --ink: #E4E6EA;
  --ink-soft: #A9AFBA;
  /* --ink-faint was #8B93A3, which is 5.4:1 on the page but only 4.3:1 on
     --card, where the summary label sits. Lightened to clear 4.5:1 on the
     card too. */
  --ink-faint: #98A0B0;
  --bg: #1B1F26;
  --bg-tint: #20242D;
  --card: #2A303B;
  --link: #E4C36A;
  --line: #38404E;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
header {
  background: var(--brand-deep);
  color: #fff;
  padding: 14px 0;
}
header .wrap { display: flex; align-items: center; gap: 14px; max-width: 1120px; }
header .home { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
/* color: inherit above is deliberate. Without it this anchor picks up
   a { color: var(--link) }, a dark brass tuned for light grounds, on the
   dark header. Nothing renders in it today because .name sets its own
   colour, which is exactly what makes it easy to reintroduce by accident. */
header .name { color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
header .name b { color: var(--brand-accent); font-weight: 700; }
header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
header nav a { color: #C7CCD6; text-decoration: none; font-size: 14px; }
header nav a:hover { color: #fff; }
/* The toggle lives in the footer here, which sits on the page ground rather
   than the dark header, so it takes the ink tokens and follows the theme. */
.theme-btn {
  background: transparent; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 7px; padding: 5px 10px; font-size: 13px; cursor: pointer;
}
.theme-btn:hover { color: var(--ink); }
main { padding: 44px 0 72px; }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 6px; }
.effective { color: var(--ink-faint); font-size: 14px; margin: 0 0 30px; }
h2 {
  font-size: 19px; letter-spacing: -0.01em; margin: 38px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
h3 { font-size: 16px; margin: 22px 0 6px; }
p, li { color: var(--ink-soft); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }
a { color: var(--link); }
b, strong { color: var(--ink); }
.lead { font-size: 17px; color: var(--ink); }
.summary {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 22px; margin: 0 0 34px;
}
.summary p:last-child, .summary ul:last-child { margin-bottom: 0; }
.summary h2 { border: 0; padding: 0; margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 600; }
td { color: var(--ink-soft); }
.tablewrap { overflow-x: auto; }
footer {
  border-top: 1px solid var(--line); padding: 22px 0; font-size: 14px; color: var(--ink-faint);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; max-width: 1120px; }
footer .legal { display: flex; gap: 18px; }
footer a { color: var(--ink-faint); text-decoration: none; }
footer a:hover { color: var(--ink); }
@media (max-width: 640px) {
  h1 { font-size: 26px; }
  header nav a:not(.sign) { display: none; }
}