/*
  Shared styling for the standalone legal pages (app-privacy.html, app-terms.html).

  These pages are deliberately plain static HTML rather than routes inside the React
  app: App Store Connect needs a privacy-policy URL that resolves to readable text
  with no JavaScript, no client-side routing and no rewrite rules on Netlify. Keeping
  the CSS in one file rather than inlining it twice means the two pages cannot drift
  apart visually.
*/

:root {
  --bg: #000000;
  --card: #141416;
  --card-deep: #111113;
  --line: #2a2a2e;
  --text: #f5f5f7;
  --text-dim: #c6c6ca;
  --text-dimmer: #a1a1a6;
  --text-faint: #98989d;
  --blue: #007aff;
  --amber: #ff9f0a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text-dim);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: rgba(0, 122, 255, 0.3); color: var(--text); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

/* Back link to the marketing site, kept above the title so the page never feels
   like a dead end when it is opened straight from the App Store listing. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-dimmer);
}
.back:hover { color: var(--text); text-decoration: none; }

h1 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin: 24px 0 6px;
}

.subtitle { font-size: 14px; color: var(--text-dimmer); margin: 0 0 4px; }
.updated {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-faint);
  margin: 0;
}

/* The plain-language summary that opens both documents, mirroring the card shown
   at the top of the same screens inside the app. */
.key-card {
  margin: 28px 0 8px;
  padding: 18px 20px;
  background: rgba(0, 122, 255, 0.06);
  border: 1px solid rgba(0, 122, 255, 0.22);
  border-radius: 16px;
}
.key-card h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.key-card ul { list-style: none; margin: 0; padding: 0; }
.key-card li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.key-card li:last-child { margin-bottom: 0; }
.key-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

/* The educational-use statement. Word for word the same sentence the app puts on
   every exported PDF, so the website, the app and the exports never disagree. */
.notice {
  margin: 24px 0;
  padding: 16px 18px;
  background: rgba(255, 159, 10, 0.07);
  border: 1px solid rgba(255, 159, 10, 0.28);
  border-radius: 16px;
  font-size: 14px;
  color: var(--text-dim);
}
.notice strong { color: var(--text); font-weight: 600; }

section { margin-top: 30px; }
section h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
section p { margin: 0; font-size: 15px; color: var(--text-dim); }

.page-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-faint);
}
.page-foot p { margin: 0 0 8px; }
.page-foot p:last-child { margin-bottom: 0; }

/* Links across to the companion document, so privacy and terms are one hop apart. */
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13px;
}

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

/* The contact details close the page rather than opening it: someone arriving here
   usually has a question the answers below already cover, and a wall of contact card
   above them just pushes the answers off the screen. Understated, but the email is
   still a plain link in running text, repeated in the page footer, so a reviewer
   scanning for it cannot miss it. */
.contact-block {
  margin: 34px 0 0;
  padding: 18px 20px;
  background: var(--card-deep);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.contact-block h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.contact-block p {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--text-dimmer);
}
.contact-block p:last-child { margin-bottom: 0; }

/* Question-and-answer blocks. Plain markup rather than <details>, so everything is
   visible to a reviewer (and to search engines) without a single click. */
.qa { margin-top: 26px; }
.qa h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.qa p { margin: 0 0 18px; font-size: 14px; color: var(--text-dim); }
.qa p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
   404
   --------------------------------------------------------------------------- */

.center-page {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.center-page h1 { margin-bottom: 10px; }
.center-page p { max-width: 44ch; margin: 0 0 24px; font-size: 15px; color: var(--text-dimmer); }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.button:hover { border-color: #48484a; text-decoration: none; }
.button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.button.primary:hover { background: #0071e3; }

/* Small helpers so the pages need no inline style attributes at all — one less thing
   leaning on `style-src 'unsafe-inline'` in the Content-Security-Policy. */
.qa-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------------------
   Shared prose helpers
   --------------------------------------------------------------------------- */

.spaced { margin-top: 14px; }

/* Bulleted lists inside a section — used for the responsibilities and data-category
   lists in the privacy policy. */
.checklist {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 15px;
  color: var(--text-dim);
}
.checklist li { margin-bottom: 8px; }
.checklist li:last-child { margin-bottom: 0; }
.checklist strong { color: var(--text); font-weight: 600; }

/* The lawful-basis table. It is the one piece of content here that cannot be made
   narrow, so it scrolls inside its own box rather than forcing the page sideways on
   a phone. */
.table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card-deep);
  -webkit-overflow-scrolling: touch;
}
.table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.table-wrap th {
  padding: 12px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  vertical-align: top;
  line-height: 1.55;
}
.table-wrap tr:last-child td { border-bottom: none; }
.table-wrap strong { color: var(--text); font-weight: 600; }

/* Section anchors are linked from the notice at the top of the privacy policy, so
   give them somewhere to land rather than butting against the viewport edge. */
section[id] { scroll-margin-top: 24px; }