/* VIP Name Style — legal & trust pages
   This stylesheet is intentionally scoped to .legal-shell so the rest of the site
   keeps its existing layout, tools, sidebar and advertising behaviour unchanged. */

.legal-shell {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 0 30px;
}

.legal-card {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 20px;
  box-shadow: 0 12px 38px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.legal-hero {
  padding: 30px 32px 25px;
  text-align: center;
  background:
    radial-gradient(circle at 50% -45%, var(--c-green-t), transparent 55%),
    linear-gradient(180deg, var(--c-surface), var(--c-soft));
  border-bottom: 1px solid var(--c-border);
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto 11px;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--c-green) 16%, var(--c-border));
  border-radius: 999px;
  background: var(--c-green-t);
  color: var(--c-green);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.legal-title {
  margin: 0;
  color: var(--c-text);
  font-size: clamp(29px, 4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
  text-align: center;
  text-wrap: balance;
}

.legal-lead {
  max-width: 62ch;
  margin: 13px auto 0;
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.72;
  text-align: center;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 15px;
  margin-top: 16px;
  color: var(--c-faint);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.legal-nav-wrap {
  width: 100%;
  min-width: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  overflow: hidden;
}

.legal-nav {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
  border-color: var(--c-green);
  background: var(--c-green-t);
  color: var(--c-green);
}

.legal-content {
  width: 100%;
  min-width: 0;
  padding: 27px 31px 34px;
  background: var(--c-surface);
}

.legal-content > :first-child { margin-top: 0; }
.legal-content section { min-width: 0; scroll-margin-top: 84px; }
.legal-content section + section {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--c-border);
}

.legal-content h2 {
  max-width: 680px;
  margin: 28px auto 10px;
  color: var(--c-text);
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 800;
  text-align: center;
  text-wrap: balance;
}

.legal-content section + section > h2:first-child { margin-top: 0; }

.legal-content h3 {
  margin: 19px 0 7px;
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
}

.legal-content p,
.legal-content li,
.legal-content td,
.legal-content th {
  color: var(--c-muted);
  font-size: 15.5px;
  line-height: 1.76;
  overflow-wrap: anywhere;
}

.legal-content p { margin: 9px 0 14px; }
.legal-content strong { color: var(--c-text); }
.legal-content ul,
.legal-content ol {
  max-width: 100%;
  margin: 8px 0 17px;
  padding-left: 22px;
}
.legal-content li + li { margin-top: 7px; }
.legal-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legal-summary,
.legal-note,
.legal-status {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 16px 17px;
  border: 1px solid var(--c-border);
  border-radius: 15px;
  background: var(--c-soft);
  text-align: center;
}

.legal-status {
  border-color: color-mix(in srgb, var(--c-green) 28%, var(--c-border));
  background: var(--c-green-t);
}

.legal-summary-title,
.legal-note-title {
  display: block;
  margin-bottom: 5px;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
}

.legal-summary p,
.legal-note p,
.legal-status p { margin: 0; }

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 14px 0 22px;
}

.legal-mini-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-soft);
  text-align: center;
}

.legal-mini-card h3 { margin: 0 0 6px; font-size: 15px; text-align: center; }
.legal-mini-card p { margin: 0; font-size: 14px; line-height: 1.65; text-align: center; }

.legal-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 12px 0 22px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-surface);
  -webkit-overflow-scrolling: touch;
}

.legal-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

.legal-table th,
.legal-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}

.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th {
  color: var(--c-text);
  background: var(--c-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.legal-contact-box {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: 15px;
  background: var(--c-soft);
  text-align: center;
}

.legal-contact-box h2 { margin-top: 0; }

.legal-form {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin-top: 18px;
}

.legal-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.legal-field { min-width: 0; display: grid; gap: 6px; }
.legal-field label {
  color: var(--c-text);
  font-size: 13px;
  font-weight: 800;
}

.legal-field input,
.legal-field select,
.legal-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--c-border);
  border-radius: 11px;
  background: var(--c-surface);
  color: var(--c-text);
  padding: 11px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
}

.legal-field textarea { min-height: 150px; resize: vertical; }
.legal-field input:focus,
.legal-field select:focus,
.legal-field textarea:focus {
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px var(--c-green-t);
}

.legal-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.legal-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--c-green);
  border-radius: 11px;
  background: var(--c-grad-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
}

.legal-primary:hover { color: #fff; filter: brightness(.98); }

.legal-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 11px;
  background: var(--c-surface);
  color: var(--c-text) !important;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none !important;
}

.legal-form-help,
.legal-form-status {
  color: var(--c-faint);
  font-size: 12.5px;
  line-height: 1.6;
}

.legal-form-status { min-height: 20px; margin: 0; text-align: center; }
.legal-divider { height: 1px; margin: 28px 0; background: var(--c-border); }
.legal-footnote { color: var(--c-faint) !important; font-size: 13px !important; }

@media (max-width: 767px) {
  /* Keep the complete article inside one visible card on phones. The site's base .page
     has generous side padding, so trim it slightly here to make the reading box wider
     without ever touching the viewport edge. */
  body[data-static-view] main.page {
    width: 100%;
    max-width: 100%;
    padding: 10px 6px 22px;
  }

  .legal-shell {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .legal-card {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    background: var(--c-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
    overflow: hidden;
  }

  .legal-hero {
    padding: 22px 14px 19px;
    text-align: center;
    background:
      radial-gradient(circle at 50% -55%, var(--c-green-t), transparent 58%),
      linear-gradient(180deg, var(--c-surface), var(--c-soft));
  }

  .legal-eyebrow {
    margin: 0 auto 10px;
    padding: 6px 10px;
    font-size: 10.5px;
  }

  .legal-title {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(28px, 9vw, 34px);
    line-height: 1.1;
    text-align: center;
  }

  .legal-lead {
    max-width: 34em;
    margin: 12px auto 0;
    font-size: 14.5px;
    line-height: 1.66;
    text-align: center;
  }

  .legal-meta {
    justify-content: center;
    margin-top: 12px;
    font-size: 11.5px;
    line-height: 1.45;
    text-align: center;
  }

  .legal-nav-wrap {
    margin: 0;
    padding: 11px 10px;
    overflow: hidden;
    border-top: 0;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
  }

  .legal-nav {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .legal-nav a {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 11.5px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .legal-content {
    width: 100%;
    min-width: 0;
    padding: 21px 14px 26px;
  }

  .legal-content section + section {
    margin-top: 22px;
    padding-top: 22px;
  }

  .legal-content h2 {
    margin: 24px auto 10px;
    font-size: 19px;
    line-height: 1.3;
    text-align: center;
  }

  .legal-content h3 { font-size: 15.5px; }

  .legal-content p,
  .legal-content li,
  .legal-content td,
  .legal-content th {
    font-size: 14.5px;
    line-height: 1.7;
  }

  .legal-content ul,
  .legal-content ol { padding-left: 19px; }

  .legal-grid,
  .legal-form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-summary,
  .legal-note,
  .legal-status,
  .legal-contact-box {
    width: 100%;
    max-width: 100%;
    padding: 15px 13px;
    border-radius: 13px;
  }

  .legal-mini-card {
    width: 100%;
    max-width: 100%;
    padding: 15px 12px;
  }

  .legal-table-wrap { border-radius: 12px; }
  .legal-table { min-width: 520px; }

  .legal-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-primary,
  .legal-secondary {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 359px) {
  body[data-static-view] main.page { padding-left: 4px; padding-right: 4px; }
  .legal-card { border-radius: 14px; }
  .legal-hero { padding-left: 11px; padding-right: 11px; }
  .legal-content { padding-left: 11px; padding-right: 11px; }
  .legal-nav-wrap { padding-left: 8px; padding-right: 8px; }
  .legal-nav { gap: 6px; }
  .legal-nav a { font-size: 11px; padding-left: 6px; padding-right: 6px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .legal-shell { padding-top: 16px; }
  .legal-card { max-width: 820px; }
  .legal-hero { padding-left: 30px; padding-right: 30px; }
  .legal-content { padding-left: 30px; padding-right: 30px; }
}

@media (min-width: 1024px) {
  main.page.is-alt,
  body[data-static-view] main.page {
    padding-top: 28px;
    padding-bottom: 36px;
  }
}