/* ============================================================
   ARTinez v2 — Legal pages
   Reuses every token / component from base.css + components.css
   ============================================================ */

/* ---------- Legal page layout ---------- */
.legal {
  padding-top: 160px;
  padding-bottom: var(--section-y);
}
.legal__crumbs {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.legal__crumbs a { color: var(--text-mute); }
.legal__crumbs a:hover { color: var(--gold-2); }

.legal__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0 0 18px;
  max-width: 24ch;
}
.legal__lede {
  color: var(--text-mute);
  max-width: 66ch;
  font-size: 16.5px;
  line-height: 1.65;
  margin-bottom: 40px;
}

/* ---------- Policy version bar ---------- */
.legal__version {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 40px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.02);
}
.legal__version b { color: var(--gold-3); font-weight: 500; }

/* ---------- Long-form body content ---------- */
.legal__body {
  max-width: 74ch;
}
.legal__body h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.5vw, 30px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 54px 0 16px;
  color: #fff;
  scroll-margin-top: 120px;
}
.legal__body h2::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold-2);
  margin-bottom: 16px;
}
.legal__body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin: 34px 0 10px;
  color: #fff;
  scroll-margin-top: 120px;
}
.legal__body p {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.72;
  margin: 0 0 16px;
}
.legal__body ul, .legal__body ol {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--text);
}
.legal__body li { margin-bottom: 8px; line-height: 1.68; }
.legal__body li::marker { color: var(--gold-3); }
.legal__body strong { color: #fff; font-weight: 500; }
.legal__body em { color: var(--text-mute); font-style: italic; }
.legal__body a {
  color: var(--gold-3);
  /* A link inside a paragraph has to be distinguishable from the
     surrounding text without relying on colour alone (WCAG 1.4.1).
     The underline is always there; it brightens on hover. */
  text-decoration: underline;
  text-decoration-color: rgba(201,163,92,.45);
  text-underline-offset: 2px;
}
.legal__body a:hover {
  color: var(--gold-2);
  text-decoration-color: var(--gold-2);
}
.legal__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--gold-1);
}
.legal__body hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 52px 0;
}

/* ---------- Callouts ---------- */
.legal__callout {
  margin: 30px 0;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
}
.legal__callout--info { border-left: 3px solid var(--gold-2); }
.legal__callout--note { border-left: 3px solid #6b8aa8; }
.legal__callout--warn { border-left: 3px solid #d97a4a; }
/* The callout label is promoted a level where the outline would
   otherwise skip. These rules keep it looking exactly as before. */
.legal__callout h4,
.legal__callout h2,
.legal__callout h3 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin: 0 0 10px;
  font-weight: 500;
  line-height: 1.3;
}
.legal__callout--note h4,
.legal__callout--note h2,
.legal__callout--note h3 { color: #94b4d4; }
.legal__callout--warn h4,
.legal__callout--warn h2,
.legal__callout--warn h3 { color: #e0a380; }
/* .legal__body h2 draws a short gold rule above the heading. A callout
   label that was promoted to h2 keeps the label appearance, so that
   rule must not be drawn. */
.legal__callout h2::before { display: none; }
.legal__callout p { margin: 0; color: var(--text-mute); font-size: 14.5px; line-height: 1.65; }
.legal__callout p + p { margin-top: 10px; }
.legal__callout ul, .legal__callout ol { color: var(--text-mute); font-size: 14.5px; margin-bottom: 0; }
.legal__callout strong { color: #fff; }

/* ---------- Formal / statutory text blocks ---------- */
.legal__form-block {
  margin: 30px 0;
  padding: 24px 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
}
.legal__form-block h3 { margin-top: 0; }
.legal__form-block .legal__body p,
.legal__form-block p { font-size: 14.5px; }

/* ---------- Index / landing grid ---------- */
.legal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 760px) {
  .legal__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.legal__card {
  display: block;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  transition: border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.legal__card:hover { border-color: var(--gold-2); transform: translateY(-1px); }
.legal__card__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.legal__card__title .num {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--gold-3);
  text-transform: uppercase;
  font-weight: 500;
}
.legal__card__desc {
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.legal__card__meta {
  display: inline-block;
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Print / downloadable terms ---------- */
.legal__updated {
  margin-top: 58px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  align-items: center;
}
/* A 24px minimum target, as WCAG 2.2 AA (2.5.8) asks for. */
.legal__updated a {
  display: inline-block;
  padding: 4px 0;
}
.legal__print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: none;
  transition: border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.legal__print:hover { border-color: var(--gold-2); color: var(--gold-2); }
.legal__print svg { width: 14px; height: 14px; }

/* ---------- Tables ---------- */
.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: 13.5px;
  display: block;
  overflow-x: auto;
}
@media (min-width: 700px) { .legal__table { display: table; } }
.legal__table th, .legal__table td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal__table th {
  color: var(--gold-3);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legal__table td { color: var(--text-mute); line-height: 1.6; }
.legal__table td:first-child { color: var(--text); }
.legal__table tr:last-child td { border-bottom: 0; }

/* ---------- Forms (model cancellation form) ---------- */
.legal__form {
  margin: 26px 0 40px;
  padding: 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
}
.legal__form .field { display: block; margin-bottom: 18px; }
.legal__form label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin-bottom: 7px;
  font-weight: 500;
}
.legal__form input,
.legal__form textarea,
.legal__form select {
  width: 100%;
  padding: 11px 13px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--d-fast) var(--ease-out);
}
.legal__form input:focus,
.legal__form textarea:focus,
.legal__form select:focus {
  outline: none;
  border-color: var(--gold-2);
  box-shadow: 0 0 0 2px rgba(212,175,55,.15);
}
.legal__form textarea { min-height: 96px; resize: vertical; }
.legal__form .hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- Print-friendly ---------- */
@media print {
  .nav, .footer, .legal__crumbs, .legal__print, .bg-atmos, .bg-grid, .cursor-glow { display: none !important; }
  body { background: #fff; color: #000; }
  .legal { padding-top: 0; }
  .legal__body, .legal__body p, .legal__body li, .legal__body td, .legal__body th,
  .legal__body h2, .legal__body h3, .legal__version, .legal__card__title { color: #000; }
  .legal__body h2::before { background: #000; }
  .legal__body a { color: #000; text-decoration: underline; }
  .legal__callout, .legal__form-block, .legal__form, .legal__version {
    background: #f5f5f5; border-color: #bbb; break-inside: avoid;
  }
  .legal__callout p, .legal__callout li { color: #222; }
  .legal__body h2, .legal__body h3 { break-after: avoid; }
  .legal__body tr { break-inside: avoid; }
  .legal__table thead { display: table-header-group; }
}