/* Noveriq legal pages - privacy, terms, refunds.

   One narrow column of prose. No cards, no accents, no illustration: these are
   pages people open when something has gone wrong or when they are deciding
   whether to trust us, and both readers want plain text they can scan and
   quote. Everything structural (nav, footer, colours, type scale, .wrap) comes
   from styles.css; this file only sets the reading column. */

.legal {
  background: var(--wash);
  /* the nav is fixed and solid on these pages, so the section clears it itself */
  padding-block: clamp(116px, 13vw, 156px) clamp(88px, 10vw, 128px);
  min-height: 100vh;
}

/* Measure before page width. Long-form terms are read one line at a time. */
.legal .wrap { max-width: 720px; }

.legal-head {
  padding-bottom: clamp(30px, 3.5vw, 40px);
  margin-bottom: clamp(34px, 4vw, 46px);
  border-bottom: 1px solid var(--edge);
}
.legal-date {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--mist);
  letter-spacing: -.005em;
}

/* The three-sentence summary at the top of each page. Set apart because it is
   the part most people will actually read, and it has to be findable without
   reading anything else. */
.legal-summary {
  margin: 0 0 clamp(36px, 4vw, 48px);
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--edge);
}
.legal-summary p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  letter-spacing: -.01em;
}
.legal-summary p + p { margin-top: 12px; }

.legal section + section {
  margin-top: clamp(36px, 4vw, 48px);
}

/* Any heading these pages link to internally. The nav is fixed, so without
   this the jump lands with the heading tucked underneath it and the visitor
   starts reading from the second paragraph. Same offset the nav itself uses;
   the two have to agree. */
.legal h2[id] { scroll-margin-top: var(--nav-offset); }

.legal h2 {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--ink);
}
.legal h3 {
  margin: clamp(22px, 2.4vw, 28px) 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
  letter-spacing: -.01em;
}
.legal p { margin: 0 0 14px; }
.legal p:last-child { margin-bottom: 0; }

.legal ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.legal li {
  position: relative;
  padding: 5px 0 5px 20px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iris);
  opacity: .5;
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--edge);
  transition: text-decoration-color .18s ease;
}
.legal a:hover { text-decoration-color: var(--iris); }

/* Used for file paths and endpoints. A privacy policy that names the exact
   file it reads is checkable, and checkable is the whole argument. */
.legal code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--paper);
  border: 1px solid var(--edge);
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The data tables. They scroll on their own rather than pushing the page
   sideways on a phone. */
.legal-table {
  margin: 0 0 14px;
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper);
}
.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.legal-table th,
.legal-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  color: var(--slate);
  letter-spacing: -.01em;
}
.legal-table th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.legal-table tr + tr th,
.legal-table tr + tr td { border-top: 1px solid var(--edge); }

/* ── refund request form ──────────────────────────────────────────────
   Same quiet materials as the summary card; the form is part of the prose,
   not a landing-page moment. */

/* The app links straight to #request; same fixed-nav clearance the linked
   headings get, or the jump lands with the title under the bar. */
#request { scroll-margin-top: var(--nav-offset); }

#refund-form label {
  display: block;
  margin: 16px 0 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

#refund-form input,
#refund-form select,
#refund-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}

#refund-form button { margin-top: 18px; }

/* The honeypot: gone from view and from the tab order, present in the DOM. */
#refund-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.form-error { margin-top: 12px; color: #b3261e; font-size: 14px; }

#refund-sent { font-size: 17px; font-weight: 600; color: var(--ink); }

/* Sending and sent, as one motion: the form fades away, the confirmation
   fades in where it stood. */
#refund-form { transition: opacity .25s ease; }
#refund-form.is-sent { opacity: 0; pointer-events: none; }
#refund-form button[disabled] { opacity: .6; cursor: default; }
#refund-sent { transition: opacity .25s ease; }
#refund-sent.is-appearing { opacity: 0; }