/* ===========================================================================
   The sub-pages: contact, delete-account, privacy, terms.
   ===========================================================================

   WHY THIS FILE EXISTS. index.html styles everything inline, which is right for
   one page: there is no second page to drift from. The four pages below are a
   different problem — they share a header, a footer and a whole prose voice, and
   the previous version had each of them carrying its own copy. The copies had
   already diverged (two footers said "Built for Indian housing societies", two
   said "Mumbai, India"; contact's header linked home, privacy's did not).

   So the chrome lives here once. index.html is deliberately NOT wired to it: its
   header sits on a dark hero with a radial glow behind it and shares only the
   markup, not the context. Duplicating ~40 lines of nav is the cheaper mistake
   than making the landing page depend on a stylesheet written for prose.

   THE PALETTE IS THE BRAND SHEET, same five values as tailwind.config.js:
     PERIMETER NAVY #0B1320 · SIGNAL BLUE #2563EB · SLATE #475569
     MIST #E5E7EB · FLOW WHITE #F8FAFC
   Anything else here is a tint of those, not a new colour.
   =========================================================================== */

:root {
  --navy:   #0B1320;
  --onnavy: #F8FAFC;
  --bg:     #F7F8FB;
  --surface:#FFFFFF;
  --ink:    #0B1320;
  --ink2:   #475569;
  --ink3:   #94A3B8;
  --line:   #E5E7EB;
  --line2:  #EEF2F7;
  --signal: #2563EB;
}

*, *::before, *::after { box-sizing: border-box }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: var(--signal); text-decoration: none }
a:hover { color: var(--ink) }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px }

/* Keyboard users get past the nav without tabbing the whole thing. Mirrors the
   `.skip` in index.html. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: var(--onnavy);
  padding: 12px 18px; border-radius: 0 0 12px 0; font-size: 14px; font-weight: 700;
}
.skip:focus { left: 0 }

/* ---------------------------------------------------------------------------
   HEADER — the same lockup, links and Sign in button as index.html's nav, on the
   same navy. On a light prose page it reads as a band rather than a hero, which
   is what a document page wants: present, not competing with the H1 below it.
   --------------------------------------------------------------------------- */
.top { background: var(--navy); color: var(--onnavy) }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px }

.nav { display: flex; align-items: center; justify-content: space-between; height: 88px }

.lockup { display: flex; align-items: center; gap: 12px }
.lockup img { width: 40px; height: 22px; display: block }
.wordmark {
  font-family: Michroma, sans-serif; font-size: 14px; letter-spacing: 0.16em;
  color: var(--onnavy); padding-top: 2px;
}
a.lockup:hover .wordmark { color: var(--onnavy) }

.nav-right { display: flex; align-items: center; gap: 34px }
.nav-links { font-size: 13.5px; font-weight: 600; color: var(--ink3) }
.nav-links:hover { color: var(--onnavy) }
/* Marks which document you are reading, since these four pages look alike. */
.nav-links[aria-current="page"] { color: var(--onnavy) }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: 6px }
.nav-cta a {
  font-size: 13.5px; font-weight: 700; color: #E2E8F0;
  border: 1.5px solid rgba(248,250,252,0.22); border-radius: 12px; padding: 10px 16px;
}
.nav-cta a:hover { color: var(--onnavy); border-color: rgba(248,250,252,0.45) }

/* ---------------------------------------------------------------------------
   PAGE HEAD — eyebrow, title, and the one line that says how current the
   document is. On a legal page that line is load-bearing, so it is a definition
   list rather than a paragraph of separators.
   --------------------------------------------------------------------------- */
.page-head { padding: 64px 0 0 }
.eyebrow {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #64748B;
}
h1 {
  margin: 16px 0 0; font-size: 46px; line-height: 1.08; font-weight: 800;
  letter-spacing: -0.032em; color: var(--ink); text-wrap: balance;
}
.lede {
  margin: 20px 0 0; max-width: 680px; font-size: 18px; line-height: 1.6;
  color: var(--ink2); text-wrap: pretty;
}
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 28px 0 0;
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); max-width: 680px;
}
.doc-meta div { display: flex; flex-direction: column; gap: 2px }
.doc-meta dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink3);
}
.doc-meta dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink) }

/* ---------------------------------------------------------------------------
   PROSE — capped at 720px. The header and footer stay on the 1240px grid so the
   chrome matches index.html exactly; only the reading column narrows, because 16px
   Manrope across 1240px is roughly 150 characters a line and nobody finishes those.
   --------------------------------------------------------------------------- */
.prose { max-width: 720px; padding-bottom: 8px }

.prose h2 {
  margin: 56px 0 14px; font-size: 24px; line-height: 1.25; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: 24px;
}
.prose h3 {
  margin: 34px 0 10px; font-size: 16.5px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.prose h2 + h3 { margin-top: 22px }

.prose p { margin: 0 0 16px; color: var(--ink2); text-wrap: pretty }
.prose strong { color: var(--ink); font-weight: 700 }

.prose ul { margin: 0 0 18px; padding-left: 22px; color: var(--ink2) }
.prose li { margin-bottom: 9px; text-wrap: pretty }
.prose li::marker { color: var(--ink3) }

.prose hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0 0 }

code {
  background: var(--line2); border-radius: 5px; padding: 1.5px 6px;
  font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.tw {
  overflow-x: auto; margin: 4px 0 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 460px }
th, td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line2);
  vertical-align: top; color: var(--ink2); line-height: 1.5;
}
th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748B; font-weight: 700; background: #FBFCFE; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0 }
td strong { color: var(--ink) }

/* ---------------------------------------------------------------------------
   CONTENTS — ten or eleven numbered sections is past the point where a reader
   scrolls looking for one. Anchored, so a committee can link a clause directly.
   --------------------------------------------------------------------------- */
.toc {
  margin: 40px 0 8px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.toc h2 {
  margin: 0 0 14px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink3);
}
.toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 32px;
}
.toc li { margin: 0 0 9px; break-inside: avoid; font-size: 14px }
.toc a { color: var(--ink2); font-weight: 600 }
.toc a:hover { color: var(--signal) }
.toc .n { display: inline-block; min-width: 20px; color: var(--ink3); font-weight: 700 }

/* ---------------------------------------------------------------------------
   CALLOUT — for the one or two claims per document that carry the most weight
   ("we never hold your money").
   NOT A LEFT ACCENT BAR. A thick coloured border down one side is the stock
   callout of every generated interface, and it also breaks this project's own
   rule that signal blue marks a live or actionable state and never decorates —
   a bar down a paragraph is decoration. The marker is instead the dot-in-a-
   bordered-box that index.html already used for its own inline note, so the
   documents and the landing page say "read this one" the same way.
   --------------------------------------------------------------------------- */
.note {
  display: flex; gap: 14px; margin: 4px 0 22px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
.note::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 4px;
  /* Sits on the first line's optical centre: (16px × 1.65 − 8px) ÷ 2. */
  margin-top: 9px; background: var(--signal);
}
.note p { margin: 0 }
.note p + p { margin-top: 10px }

/* ---------------------------------------------------------------------------
   CARDS — the two-route pattern on contact and delete-account.
   --------------------------------------------------------------------------- */
.cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 36px 0 8px; max-width: 720px;
}
.card {
  padding: 26px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface);
}
.card .who {
  margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--signal);
}
.card h2 {
  margin: 0 0 12px; font-size: 19px; line-height: 1.3; font-weight: 800;
  letter-spacing: -0.015em; color: var(--ink);
}
.card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink2) }
.card p:last-of-type { margin-bottom: 0 }
.mail {
  display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 700;
  color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 16px; background: var(--bg);
}
.mail:hover { color: var(--ink); border-color: var(--ink3) }

/* The closing line every page ends on: where to go next. */
.tail { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line) }
.tail p { margin: 0; font-size: 13.5px; color: #64748B }

/* ---------------------------------------------------------------------------
   FOOTER — byte-for-byte the markup index.html uses, so the two never disagree.
   --------------------------------------------------------------------------- */
.foot { max-width: 1240px; margin: 104px auto 0; padding: 32px 40px 56px; border-top: 1px solid var(--line) }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px }
.foot-brand { display: flex; align-items: center; gap: 12px }
.foot-brand img { width: 32px; height: 17px; display: block; opacity: 0.85 }
.foot-brand span { font-size: 12.5px; color: var(--ink3) }
.foot-links { display: flex; gap: 22px }
.foot-links a { font-size: 12.5px; font-weight: 600; color: var(--ink3) }
.foot-links a:hover { color: var(--ink) }

/* ---------------------------------------------------------------------------
   RESPONSIVE — the same breakpoints index.html uses, so the two pages collapse
   in step rather than at different widths.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-links { display: none }
  .cards { grid-template-columns: 1fr }
  .toc ol { columns: 1 }
}

@media (max-width: 760px) {
  .wrap { padding-left: 24px; padding-right: 24px }
  .foot { padding-left: 24px; padding-right: 24px }
  .page-head { padding-top: 44px }
  h1 { font-size: 33px }
  .lede { font-size: 16.5px }
  .prose h2 { font-size: 21px; margin-top: 46px }
}

@media (max-width: 620px) {
  .nav-cta { display: none }
  .nav { height: 72px }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 18px }
  .foot-links { flex-wrap: wrap; gap: 14px }
  .doc-meta { flex-direction: column; gap: 12px }
}

/* Printing a policy is a real thing committees do — they put it in the AGM pack.
   The chrome goes; the document stays, with links resolved to their targets. */
@media print {
  .top, .foot, .toc, .skip { display: none }
  body { font-size: 11pt; line-height: 1.5; background: #fff }
  .wrap { padding: 0 }
  .prose { max-width: none }
  .prose h2 { margin-top: 24pt; page-break-after: avoid }
  .tw, table, .note, .card { page-break-inside: avoid }
  a { color: #000 }
  .prose a[href^="http"]::after,
  .prose a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 }
}