/* ---------------------------------------------------------------------
   Legal pages.

   Its own stylesheet, not the card's and not the interface's: a notice is
   read, at length, often on a phone, by somebody who did not plan to be
   reading it. That wants a comfortable measure, real hierarchy and no
   decoration competing for attention.
   --------------------------------------------------------------------- */

/* The palette comes from branding.php, emitted into :root by the page itself.
   These were the same colours give or take two points — #4A5766 against
   #566274, #F4F6F9 against #F5F7FA, #E2E7EE against #E1E7EE — which is
   invisible on one page and wrong the moment you arrive here from another.
   The literal after each comma is the fallback for a page that forgets to
   emit the block, so this stylesheet still renders standalone. */

:root {
  --legal-ink:        var(--brand-ink, #16202E);
  --legal-ink-soft:   var(--brand-ink-soft, #566274);
  --legal-paper:      var(--brand-surface, #FFFFFF);
  --legal-page:       var(--brand-paper, #F5F7FA);
  --legal-rule:       var(--brand-rule, #E1E7EE);
  --legal-accent:     var(--brand-accent, #0E7C74);
  --legal-accent-ink: var(--brand-accent-strong, #0B655E);
  /* The caution flag is this page's own — nothing else in the product has a
     "read this bit twice" treatment, so there is nothing for it to agree with. */
  --legal-flag:       #FFF8E6;
  --legal-flag-rule:  #E8D9A8;

  /* The wordmark, as its own pair, because this page has a dark mode and the
     brand navy is not readable on a dark page. See the rules further down. */
  --legal-wordmark-xinn: var(--brand-navy, #12233F);
  --legal-wordmark-ace:  var(--brand-teal-on-paper, #12A59D);
}

* { box-sizing: border-box; }

.legal-page {
  margin: 0;
  padding: 0;
  background: var(--legal-page);
  color: var(--legal-ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.legal {
  max-width: 44rem;              /* ~70 characters: a readable measure */
  margin: 0 auto;
  padding: clamp(24px, 6vw, 64px) clamp(18px, 5vw, 40px) 80px;
  background: var(--legal-paper);
}

@media (min-width: 48rem) {
  .legal {
    margin: 32px auto;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(22, 32, 46, .06), 0 12px 32px rgba(22, 32, 46, .06);
  }
}

/* ---------- heading block ---------- */

.legal-head { margin-bottom: 2.5rem; }

.legal-eyebrow {
  margin: 0 0 .75rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
}

.legal h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.legal-dates {
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--legal-page);
  border-radius: 10px;
  font-size: .95rem;
  color: var(--legal-ink-soft);
}

/* The "LAST UPDATED" / "EFFECTIVE DATE" label itself, as its own line above
   the sentence explaining it — a reader skimming for the date should not
   have to parse a paragraph to find it. */
.legal-date-label {
  display: block;
  margin: 0 0 .35rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
}

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

.legal-toc {
  margin: 0 0 3rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--legal-rule);
  border-radius: 12px;
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: 2rem;
  font-size: .95rem;
}

@media (max-width: 34rem) {
  .legal-toc ol { columns: 1; }
}

.legal-toc li { margin-bottom: .4rem; break-inside: avoid; }

/* ---------- sections ---------- */

.legal section { margin-bottom: 3rem; scroll-margin-top: 1.5rem; }

.legal h2 {
  margin: 0 0 .35rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--legal-rule);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  letter-spacing: -.01em;
}

/* One per section, right under its heading — a reader partway down a long
   document should be able to get back to the contents list without
   scrolling for it by hand. */
.legal-back {
  display: inline-block;
  margin: 0 0 1.25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
}

.legal h3 {
  margin: 2rem 0 .75rem;
  font-size: 1.08rem;
  color: var(--legal-accent-ink);
}

.legal p { margin: 0 0 1.1rem; }

.legal a {
  color: var(--legal-accent-ink);
  text-underline-offset: .2em;
}
.legal a:hover { text-decoration-thickness: 2px; }

.legal strong { font-weight: 650; }

/* ---------- lists ---------- */

.legal-list { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.legal-list li { margin-bottom: .7rem; }

/* The "what we do not do" list. A tick would be wrong — these are absences,
   and the point is that the absence is deliberate. */
.legal-list-negative { list-style: none; padding-left: 0; }
.legal-list-negative li {
  position: relative;
  padding-left: 1.9rem;
}
.legal-list-negative li::before {
  content: "—";
  position: absolute;
  left: .35rem;
  color: var(--legal-accent);
  font-weight: 700;
}

/* ---------- definition pairs ---------- */

.legal-defs { margin: 0 0 1.25rem; }
.legal-defs dt {
  margin-top: 1.25rem;
  font-weight: 650;
  color: var(--legal-accent-ink);
}
.legal-defs dd { margin: .4rem 0 0; padding-left: 0; }

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

/* Wide content scrolls inside its own box; the page itself never does.
   The scrolling belongs on a wrapper, not on the table: `display:block` plus
   `overflow-x` applied to a <table> lets the caption and rows escape the box
   and push the page sideways, which is what used to happen at 320px. The
   wrapper is focusable and labelled so a keyboard can reach the scroll too. */
.legal-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.legal-scroll:focus-visible {
  outline: 2px solid var(--legal-accent);
  outline-offset: 3px;
}

.legal-table {
  width: 100%;
  min-width: 26rem;          /* below this the columns are unreadable — scroll instead */
  margin: 0;
  border-collapse: collapse;
  font-size: .93rem;
}

.legal-table caption {
  margin-bottom: .6rem;
  font-weight: 650;
  text-align: left;
  color: var(--legal-ink-soft);
}

.legal-table th,
.legal-table td {
  padding: .7rem .8rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--legal-rule);
}

.legal-table thead th {
  border-bottom-width: 2px;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
  white-space: nowrap;
}

.legal-table tbody tr:last-child td { border-bottom: 0; }

/* On a narrow screen a three-column table is a sideways scroll, and the
   column a reader most needs — why we keep it that long — is the one off the
   edge. Below this width each row becomes a small labelled block instead, so
   the whole notice reads top to bottom with no scrolling at all. The column
   headings move into each cell via data-label, and the real <thead> is hidden
   from sight but left in the accessibility tree. */
@media (max-width: 34rem) {
  .legal-scroll { overflow-x: visible; }

  .legal-table { min-width: 0; }

  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal-table tbody tr {
    display: block;
    margin-bottom: .9rem;
    padding: .9rem 1rem;
    border: 1px solid var(--legal-rule);
    border-radius: 10px;
  }

  .legal-table tbody td {
    display: block;
    padding: .35rem 0;
    border-bottom: 0;
  }

  .legal-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--legal-ink-soft);
  }

  /* The first cell names the thing; its own label would only repeat the
     heading above it. */
  .legal-table tbody td:first-child {
    font-weight: 650;
    font-size: 1rem;
  }
  .legal-table tbody td:first-child::before { display: none; }
}

/* ---------- the flagged aside ---------- */

.legal-aside {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--legal-flag);
  border: 1px solid var(--legal-flag-rule);
  border-radius: 10px;
  font-size: .95rem;
}

.legal-contact {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--legal-page);
  border-left: 3px solid var(--legal-accent);
  border-radius: 0 8px 8px 0;
}

.legal-address {
  margin: 1rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--legal-page);
  border-radius: 10px;
  font-style: normal;
  line-height: 1.8;
}

/* An email address is one unbreakable word to a browser, and some of these
   are long. Left alone, POPIAComplaints@inforegulator.org.za is what makes a
   narrow phone scroll sideways. */
.legal a,
.legal-address,
.legal-contact { overflow-wrap: anywhere; }

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

.legal-foot {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--legal-rule);
  font-size: .93rem;
  color: var(--legal-ink-soft);
}
.legal-foot p { margin: 0; }

/* Only the separator gets breathing room. This used to be `.legal-foot span`,
   which also caught the three spans the wordmark is built from and pushed
   XINN and ACE apart — the wordmark is one word, and must be
   spaced by nobody. */
.legal-sep { margin: 0 .5rem; }

/* ---------- the XINNACE wordmark ---------- */
/* The comment here used to say "XINN takes the page's own ink and ACE stays
   the brand teal", and the two rules under it did neither: XINN was set in
   --legal-ink, a near-black, and ACE in --legal-accent, which is #0E7C74 —
   the button colour, not the mark's teal. So the wordmark on the privacy
   notice was navy-less and a different green from the wordmark in the
   sidebar, on the sign-in screen, on every card footer, in every email and in
   the favicon. On the one public page a stranger reads at length, and the one
   whose entire job is to look like it can be trusted.

   BRAND_TEAL_ON_PAPER rather than BRAND_TEAL: this page is white, and the
   mark's own #12B5AB measures 2.55:1 against white, which cannot be read.
   #12A59D is that colour walked to 3.05:1 — the same value app.css uses for
   the same reason on the signed-out screens. */

.wordmark { white-space: nowrap; font-weight: 700; letter-spacing: normal; }
.wordmark-xinn { color: var(--legal-wordmark-xinn); }
.wordmark-ace  { color: var(--legal-wordmark-ace); }

/* ---------- printing ---------- */
/* People print these, or save them as PDF, to keep a copy of what they were
   told on the day they were told it. That copy should be legible. */

@media print {
  .legal-page { background: #fff; }
  .legal { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
  .legal-toc { display: none; }
  .legal section { page-break-inside: auto; margin-bottom: 2rem; }
  .legal h2 { page-break-after: avoid; }
  .legal-table, .legal-aside, .legal-address { page-break-inside: avoid; }
  .legal a { color: inherit; text-decoration: underline; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ---------- dark mode ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --legal-ink:        #E7ECF3;
    --legal-ink-soft:   #9AA7B8;
    --legal-paper:      #161C25;
    --legal-page:       #0E131A;
    --legal-rule:       #2A3341;
    --legal-accent:     #35C6BB;
    --legal-accent-ink: #5FD9D0;
    --legal-flag:       #2A2517;
    --legal-flag-rule:  #4A4128;

    /* This page is the only surface in the product with a dark mode — the
       interface declares color-scheme: light and stays there — so it is the
       only place the wordmark has to be resolved against a dark ground.
       Which is the same problem the navy sidebar already solves: XINN takes
       the surface colour rather than the navy, because navy on navy is not a
       colour choice, and ACE keeps the mark's own #12B5AB, which needs no
       walking here (6.7:1 on this page's paper) precisely because the walk to
       #12A59D exists for white.

       Before this block, the mark inherited --legal-ink and --legal-accent,
       so in dark mode ACE rendered as #35C6BB — a third teal, after the
       #0E7C74 it used in light mode and the #12B5AB everywhere else. */
    --legal-wordmark-xinn: var(--brand-surface, #FFFFFF);
    --legal-wordmark-ace:  var(--brand-teal, #12B5AB);
  }

  /* The Order Form does not follow the rest of this stylesheet into the dark.
     It shares legal.css because it is a standalone document read by somebody
     with no account, but it is not a reading document — it is a transactional
     one, the sibling of the invoice rather than of the Terms. A client prints
     it, signs it and files it beside the invoice, and the invoice is white
     paper: the interface declares color-scheme: light and stays there, so an
     order form that arrives dark is the only page in the product that does
     not match the document it turns into.

     The light values are restated rather than referenced because the tokens
     above are the defaults being overridden — there is nowhere left to point
     at. They must stay in step with the :root block at the top of the file. */
  .quote-page {
    color-scheme: light;
    --legal-ink:        var(--brand-ink, #16202E);
    --legal-ink-soft:   var(--brand-ink-soft, #566274);
    --legal-paper:      var(--brand-surface, #FFFFFF);
    --legal-page:       var(--brand-paper, #F5F7FA);
    --legal-rule:       var(--brand-rule, #E1E7EE);
    --legal-accent:     var(--brand-accent, #0E7C74);
    --legal-accent-ink: var(--brand-accent-strong, #0B655E);
    --legal-flag:       #FFF8E6;
    --legal-flag-rule:  #E8D9A8;
    --legal-wordmark-xinn: var(--brand-navy, #12233F);
    --legal-wordmark-ace:  var(--brand-teal-on-paper, #12A59D);
  }
}

/* ---------------------------------------------------------------------------
 * The Order Form
 *
 * On the legal stylesheet rather than the application's, because it is read by
 * somebody with no account, on a page that has to look like a document worth
 * signing rather than a screen in an admin tool. It sits beside the Terms it
 * refers to and inherits their measure and typography.
 * ------------------------------------------------------------------------- */

/* The masthead, matched to the invoice's. Same arrangement, same 2px rule,
   same letter-spacing on the wordmark and the same monospaced reference — the
   order form and the invoice it turns into are one pair of documents, and a
   client who sees them a day apart should not have to wonder. The figures
   below are app.css's .invoice-head values, not approximations of them. */
.quote-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--legal-ink);
}
.quote-from { font-size: 1.05rem; font-weight: 700; letter-spacing: .16em; margin: 0; }
.quote-meta { margin: 6px 0 0; font-size: .85rem; color: var(--legal-ink-soft); line-height: 1.5; }
.quote-ident { text-align: right; }
.quote-ident h1 {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
  font-weight: 600;
}
.quote-ref  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
              font-size: 1.02rem; font-weight: 600; margin: 4px 0 0; }
.quote-pill {
  display: inline-block; margin-top: 8px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  background: var(--legal-page); color: var(--legal-ink-soft);
  border: 1px solid var(--legal-rule);
}
.quote-pill-ok { background: #E6F3EC; border-color: #BFE0CF; color: #16794A; }

.quote-lines { display: grid; grid-template-columns: max-content 1fr;
               gap: 10px 24px; margin: 0 0 22px; }
.quote-lines dt { font-size: .8125rem; font-weight: 600; color: var(--legal-ink-soft);
                  text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.quote-lines dd { margin: 0; }
.quote-lines code { font-size: .875em; word-break: break-all; }

@media (max-width: 560px) {
  /* Two columns at this width turns every value into a two-word column beside
     a label longer than it. Stacked, the label reads as a heading for the line
     under it, which is what it is. */
  .quote-lines { grid-template-columns: 1fr; gap: 2px 0; }
  .quote-lines dd { margin: 0 0 14px; }
}

.quote-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 14px 0; margin: 0 0 6px;
  border-top: 1px solid var(--legal-rule); border-bottom: 2px solid var(--legal-ink);
  font-size: 1.05rem;
}
.quote-total strong { font-size: 1.4rem; }

/* 420px was the right measure for a name input. The confirmation is a
   sentence naming the card, the term and the price, and at that width it broke
   into six short lines — the shape of small print, which is the last thing
   this paragraph should look like. It takes the article's own measure now. */
.quote-accept { margin-top: 20px; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* The controls, which this document has to carry itself.
 *
 * The order form is a standalone page linking this stylesheet and nothing
 * else, the same way the Terms and the privacy notice are — so .btn, .stack,
 * .hint and .alert, which live in app.css, are not here. Accept and Decline
 * were rendering as the browser's own default buttons: small, grey, and beside
 * 18px legal prose in a wide column, close enough to invisible that the page
 * read as though it had no way to accept at all.
 *
 * These are deliberately not a copy of app.css's button. That one belongs to an
 * instrument somebody uses all day. This is one decision, taken once, by
 * somebody who has never seen the page before, so the primary action is large
 * and unambiguous and the secondary one is clearly still a button rather than
 * a link pretending to be one. */
.quote-form .stack { display: grid; gap: 6px; }
.quote-form label {
  font-size: .8125rem; font-weight: 600; color: var(--legal-ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.quote-form input[type="text"] {
  font: inherit; font-size: 1rem;
  color: var(--legal-ink); background: var(--legal-paper);
  padding: 11px 13px; min-height: 46px; width: 100%;
  border: 1px solid var(--legal-rule); border-radius: 8px;
}
.quote-form input[type="text"]:focus-visible {
  outline: none; border-color: var(--legal-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--legal-accent) 22%, transparent);
}
.quote-form .hint {
  font-size: .8125rem; line-height: 1.55; color: var(--legal-ink-soft); margin: 2px 0 0;
}

/* The confirmation. It carries the whole sentence rather than "I agree", so it
   is a paragraph with a box in front of it and not a control with a label: the
   text is the thing being agreed to and has to be readable as prose. The whole
   row is the label, so the sentence itself is the hit target — on a phone, a
   14px box is not one. */
.quote-form label.quote-confirm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--legal-rule);
  border-radius: 8px;
  background: var(--legal-page);
  cursor: pointer;
  /* Undoes the uppercase label treatment above — this one is a sentence, not
     a three-word field label, so it needs the specificity to say so. */
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--legal-ink);
  text-transform: none;
  letter-spacing: normal;
}
.quote-form label.quote-confirm:hover { border-color: var(--legal-ink-soft); }
.quote-form label.quote-confirm input[type="checkbox"] {
  width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--legal-accent);
  cursor: pointer;
  flex: none;
}
.quote-form label.quote-confirm:focus-within {
  border-color: var(--legal-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--legal-accent) 22%, transparent);
}

.quote-form .btn {
  font: inherit; font-size: 1rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 26px;
  border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
}
.quote-form .btn-primary {
  background: var(--legal-accent); color: #fff;
  border-color: var(--legal-accent);
  /* This is the button the whole page exists for. It should not have to be
     looked for. */
  flex: 1 1 auto; min-width: 220px;
}
.quote-form .btn-primary:hover { background: var(--legal-accent-ink); border-color: var(--legal-accent-ink); }
.quote-form .btn-quiet {
  background: var(--legal-paper); color: var(--legal-ink-soft);
  border-color: var(--legal-rule);
}
.quote-form .btn-quiet:hover { border-color: var(--legal-ink-soft); color: var(--legal-ink); }
.quote-form .btn:focus-visible {
  outline: 2px solid var(--legal-accent); outline-offset: 2px;
}

/* Status, when the order is already answered or has expired. Quiet by default,
   because the common case is a confirmation rather than a problem. */
.quote-form .alert {
  padding: 12px 14px; margin: 0 0 22px;
  border: 1px solid var(--legal-rule); border-radius: 8px;
  background: var(--legal-page); font-size: .9375rem;
}
.quote-form .alert-ok    { border-color: #BFE0CF; background: #EFF7F2; }
.quote-form .alert-error { border-color: #E8C4BF; background: #FBF0EE; }

.quote-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--legal-rule);
              font-size: .875rem; color: var(--legal-ink-soft); }
.quote-foot p { margin: 0 0 4px; }