/* ===========================================================
   STRIPEND — legal pages
   -----------------------------------------------------------
   Shared by refund, privacy, terms and delivery.

   Two deliberate choices:

     • The translated summary sits ABOVE the English body, in a
       box that reads as the important part. Most readers will
       only read that, which is fine — it is written to be
       sufficient on its own.

     • The body is set at 15.5px with generous line height. Legal
       text set small and tight is how people are discouraged
       from reading it, and this site does not do that.
   =========================================================== */

.legal { max-width: 700px; margin: 0 auto; padding: 30px 0 60px; }

.legal h1 { font-size: clamp(25px, 6vw, 34px); line-height: 1.2; margin-bottom: 9px; }

.upd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .04em; color: var(--dim2);
  margin-bottom: 26px;
}

/* ---- the part most people will actually read ---- */
.sum {
  background: rgba(0, 192, 127, .06);
  border: 1px solid rgba(0, 192, 127, .26);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.sum-t {
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: 11px;
}
.sum ul { list-style: none; display: grid; gap: 10px; }
.sum li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; line-height: 1.65; color: #E4E9F2;
}
.sum li::before {
  content: '→'; position: absolute; left: 0; top: 0;
  color: var(--emerald); font-weight: 700;
}

/* ---- the full text ---- */
.legal .body { margin-top: 6px; }
.legal .body h2 {
  font-size: 18.5px; margin: 30px 0 10px;
  padding-top: 4px;
}
.legal .body h2:first-child { margin-top: 8px; }
.legal .body p {
  font-size: 15.5px; line-height: 1.78; color: #CBD2E0; margin-bottom: 14px;
}
.legal .body ul {
  list-style: none; display: grid; gap: 9px; margin: 0 0 16px;
}
.legal .body li {
  position: relative; padding-left: 18px;
  font-size: 15px; line-height: 1.7; color: #CBD2E0;
}
.legal .body li::before {
  content: '·'; position: absolute; left: 4px; top: -1px;
  color: var(--emerald); font-weight: 700; font-size: 18px;
}
.legal .body a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }
.legal .body a:hover { color: #6FE0B4; }
.legal .body strong { color: #fff; }

/* A definition-style block, used for the data table in Privacy. */
.deflist { display: grid; gap: 12px; margin: 4px 0 18px; }
.def {
  background: var(--ink2); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px;
}
.def .dt { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.def .dd { font-size: 13.5px; line-height: 1.65; color: var(--dim); }

/* The governing-language clause that closes each legal page.
   These pages now exist in Tamil and Hindi as well as English. A
   translated contract has to say which version governs, or a dispute
   turns on whose wording you read. It is set apart from the body so a
   reader can see it is a note about the page, not another clause. */
.legal .body p.gov {
  margin-top: 26px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--dim);
  font-style: normal;
}