/* =========================================================================
   StudyBrain: legal / document pages.

   Shared by terms.html, refunds.html, privacy.html, website-terms.html
   and what-it-does.html.

   These are DOCUMENTS, not marketing pages. No murmuration canvas, no
   reveal animations, no parallax. The only job is readability: one
   column at a sensible measure (~68ch), generous line height, and a
   heading hierarchy you can navigate.

   Every colour token below is copied verbatim from the :root block in
   public/index.html, which is the source of truth for the brand.
   If a token changes there, change it here too.
   ========================================================================= */

:root{
  --ivory:#F0EEE6;
  --white:#FBFAF7;
  --ink:#191919;
  --muted:#57544D;
  --faint:#8A867C;
  --terra:#D97757;
  --terra-deep:#C2612F;
  --manilla:#EBDBBC;
  --kraft:#D4A27F;
  --sage:#6E8B74;
  --line:#DDD9CE;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x on html as well as body: html is the root scroller. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--ivory);
  color: var(--muted);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Paper wash behind the text, same trick as the home page but static. */
.paper {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 60% 20%, var(--white) 0%, transparent 70%);
}

/* ---------------------------------------------------------------- nav */

nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(240,238,230,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: 1180px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 1.3rem;
  color: var(--ink); text-decoration: none;
}
.logo em { font-style: normal; color: var(--terra); }
.nav-back { font-size: .92rem; font-weight: 500; color: var(--muted); text-decoration: none; }
.nav-back:hover { color: var(--ink); }

/* --------------------------------------------------------------- page */

.doc {
  position: relative; z-index: 2;
  /* 68ch on this font lands at roughly 70 characters of running text. */
  max-width: 68ch;
  margin: 0 auto;
  padding: 6vh 24px 10vh;
}

.doc-head { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 34px; }

.kicker {
  display: inline-block; font-weight: 600; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terra-deep); margin-bottom: 14px;
}

h1 {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.14; letter-spacing: -.015em;
}

.updated { margin-top: 14px; font-size: .92rem; color: var(--faint); }

.standfirst {
  margin-top: 16px; font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.12rem; line-height: 1.6; color: var(--ink);
}

/* --------------------------------------------------------- typography */

.doc h2 {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: var(--ink);
  font-size: clamp(1.3rem, 2.6vw, 1.62rem); line-height: 1.25; letter-spacing: -.01em;
  margin: 2.4em 0 .55em;
  /* sticky nav is ~62px; keep anchored headings clear of it */
  scroll-margin-top: 84px;
}
.doc h2:first-of-type { margin-top: 1.2em; }

.doc h3 {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: var(--ink);
  font-size: 1.12rem; margin: 1.9em 0 .4em; scroll-margin-top: 84px;
}

/* Part A / Part B dividers in the Website Terms page. */
.doc .part {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.2;
  margin: 3.2em 0 .2em; padding-top: 2.2em; border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}
.doc .part:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* The source markdown puts a "---" between Part A and Part B, which becomes
   an <hr>. Without this the reader sees two rules stacked above Part B. */
.doc hr + .part { border-top: 0; padding-top: 0; margin-top: 1.6em; }

.doc p { margin: 0 0 1.05em; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc em { font-style: italic; }

.doc a { color: var(--terra-deep); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--ink); }

.doc ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.doc ul li {
  position: relative; padding-left: 22px; margin-bottom: .6em;
}
.doc ul li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--kraft);
}

/* Long documents get a rule between major blocks. */
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.6em 0; }

/* ----------------------------------------------------------- contents */

.toc {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 26px; margin: 0 0 2.6em;
}
.toc h2 {
  font-size: .78rem !important; font-family: 'Inter', sans-serif !important;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 12px !important;
}
/* No bullets and no numbers: the headings carry their own section numbers.
   Selectors are .doc-prefixed so they outrank the .doc ul li rules above. */
.doc .toc ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.doc .toc ul li { margin-bottom: .35em; padding-left: 0; }
.doc .toc ul li::before { content: none; display: none; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--terra-deep); text-decoration: underline; }

/* ------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; margin: 0 0 1.6em; -webkit-overflow-scrolling: touch; }
.doc table {
  width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.6;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  min-width: 520px;
}
.doc th, .doc td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; background: rgba(235,219,188,.35); }
.doc tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- callout box */

/* Used for the "this is an extract" note on the Refund Policy page and
   for the highlighted guarantee. Not a legal device, just emphasis. */
.callout {
  background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--terra);
  border-radius: 10px; padding: 18px 22px; margin: 0 0 1.8em; font-size: .97rem;
}
.callout p:last-child { margin-bottom: 0; }

.guarantee-badge {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: .88rem; color: #48664E; background: #E7EDE4; border: 1px solid #C9D6C6;
  border-radius: 999px; padding: 8px 16px; margin-bottom: 20px;
}

/* -------------------------------------------------------- placeholders */

/* Values James has not filled in yet. They are deliberately left in the
   published page rather than guessed at: an invented ICO number or a
   made-up date on a live legal page is worse than a visible gap.
   Styled in manilla so it reads as "to be completed", not as an error. */
.ph {
  background: var(--manilla);
  border: 1px dashed var(--kraft);
  border-radius: 4px;
  padding: 0 6px;
  color: #6B5A3A;
  font-size: .93em;
  font-weight: 500;
  white-space: normal;
}

/* --------------------------------------------------------------- foot */

footer {
  position: relative; z-index: 2; border-top: 1px solid var(--line);
  background: rgba(240,238,230,.9); padding: 34px 0; font-size: .82rem; color: var(--faint);
}
footer .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--ink); }
.foot-links { margin-bottom: 12px; line-height: 2; }
/* The separator hangs off each link, so a wrapped line can never begin
   with an orphaned dot. */
.foot-links a { white-space: nowrap; }
.foot-links a:not(:last-child)::after { content: "b7"; padding: 0 10px; color: var(--kraft); }
.foot-legal { line-height: 1.7; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .doc { padding: 4vh 20px 8vh; }
  .toc { padding: 18px 20px; }
  .foot-links a:not(:last-child)::after { padding: 0 7px; }
}