/* Shared page primitives for legal/status/support pages */

body {
  font-family: var(--ds-font-family-base, Formular, "Segoe UI", Arial, sans-serif);
  color: var(--ds-color-text, #111111);
  background: var(--ds-color-bg-canvas, #fffdf7);
}

.wrap,
.cw-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.125rem);
}

.card,
.cw-card {
  border: 1px solid var(--ds-color-border-soft, #e7e7e7);
  border-radius: 1rem;
  padding: clamp(1rem, 2.2vw, 1.375rem);
  background: var(--ds-color-surface, #ffffff);
  box-shadow: var(--ds-shadow-sm, 0 0.125rem 0.25rem rgb(17 17 17 / 0.08));
}

h1,
.cw-page-title {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  color: var(--ds-color-text, #111111);
}

p,
.cw-text {
  margin: 0.625rem 0;
  line-height: 1.5;
  color: var(--ds-color-text, #111111);
}

.muted,
.cw-muted {
  color: var(--ds-color-text-muted, #666666);
  font-size: 0.875rem;
}

.btns,
.cw-btn-row {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Utility pages (thanks / pay-failed / public-offer) run their own thin stack
   and never load the generated token file, so the contract's axes arrive as
   fallbacks here — but they are the contract's numbers, not a third opinion.
   This had its own 0.75rem corner and 0.75rem/1rem padding. */
a.btn,
a.btn:visited,
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-button-gap, 0.5rem);
  min-height: var(--ds-button-min-height, var(--ds-touch-target-min, 3rem));
  padding-inline: var(--ds-button-padding-inline, 1.15rem);
  border-radius: var(--ds-button-radius, 1rem);
  font-size: var(--ds-button-font-size, 1rem);
  font-weight: var(--ds-button-font-weight, 700);
  text-decoration: none;
  border: 1px solid var(--ds-color-text, #111111);
  color: var(--ds-color-text, #111111);
  line-height: 1.2;
}

a.btn.primary,
a.btn.primary:visited,
.cw-btn.cw-btn-primary {
  background: var(--product-primary, var(--ds-color-primary, #111111));
  border-color: var(--product-primary, var(--ds-color-primary, #111111));
  color: #ffffff;
}

a.btn.primary:hover,
.cw-btn.cw-btn-primary:hover {
  background: var(--product-primary-strong, var(--ds-color-primary-strong, #222222));
  border-color: var(--product-primary-strong, var(--ds-color-primary-strong, #222222));
}

.hint,
.cw-hint {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--ds-color-bg-soft, #f7f7f7);
}

code,
.cw-code {
  background: var(--ds-color-bg-soft, #f6f6f6);
  padding: 0.125rem 0.375rem;
  border-radius: 0.5rem;
}

.public-offer-page,
.cw-legal-page {
  max-width: min(72rem, 100%);
  margin: 0 auto;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.public-offer,
.cw-legal {
  color: var(--ds-color-text-muted, #333333);
}

.public-offer h1,
.public-offer h2,
.cw-legal h1,
.cw-legal h2 {
  color: var(--ds-color-text, #111111);
  line-height: 1.2;
}

.public-offer h1,
.cw-legal h1 {
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
}

.public-offer h2,
.cw-legal h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.public-offer p,
.public-offer li,
.cw-legal p,
.cw-legal li {
  line-height: 1.6;
}

body.utility-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 2rem);
  background:
    radial-gradient(
      circle at top,
      color-mix(in srgb, var(--landing-color-primary, var(--ds-color-primary, #111111)) 10%, transparent) 0,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      var(--landing-color-surface-muted, var(--ds-color-bg-canvas, #fffdf7)) 0%,
      var(--landing-color-surface-base, var(--ds-color-surface, #ffffff)) 100%
    );
}

.utility-status-wrap {
  width: 100%;
  max-width: min(42rem, 100%);
  padding: 0;
}

.utility-status-card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-color: var(--landing-color-border-soft, var(--ds-color-border-soft, #e7e7e7));
  border-radius: var(--landing-radius-card-unified, 1rem);
  background: var(--landing-color-card-trust, var(--landing-color-surface, var(--ds-color-surface, #ffffff)));
  box-shadow: var(--landing-shadow-card-unified, var(--ds-shadow-md, 0 0.375rem 1rem rgb(17 17 17 / 0.12)));
  text-align: center;
}

.utility-status-kicker {
  margin: 0 0 0.75rem;
  color: var(--landing-color-primary, var(--ds-color-primary, #111111));
  font-size: var(--landing-type-caption-size, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.utility-status-title {
  margin-bottom: 0.875rem;
  color: var(--landing-color-heading, var(--ds-color-text, #111111));
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.05;
  text-wrap: balance;
}

.utility-status-lead {
  max-width: 32rem;
  margin: 0 auto;
  color: var(--landing-color-text-muted, var(--ds-color-text-muted, #666666));
  font-size: var(--landing-type-body-size, 1rem);
}

.utility-status-actions {
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

.utility-status-actions a.btn,
.utility-status-actions a.btn:visited {
  min-width: min(100%, 15rem);
  border-width: 1px;
  border-style: solid;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.utility-status-actions a.btn.primary,
.utility-status-actions a.btn.primary:visited {
  border-color: var(--landing-color-primary, var(--ds-color-primary, #111111));
  background: var(--landing-color-primary, var(--ds-color-primary, #111111));
  color: var(--landing-color-on-primary, var(--ds-color-on-primary, #ffffff));
  box-shadow: var(--landing-shadow-cta, var(--landing-shadow-card-unified, var(--ds-shadow-md, 0 0.375rem 1rem rgb(17 17 17 / 0.12))));
}

.utility-status-actions a.btn.primary:hover,
.utility-status-actions a.btn.primary:focus-visible {
  background: var(--landing-color-primary-strong, var(--landing-color-primary, var(--ds-color-primary-strong, #222222)));
  border-color: var(--landing-color-primary-strong, var(--landing-color-primary, var(--ds-color-primary-strong, #222222)));
  transform: translateY(-1px);
}

.utility-status-actions a.btn:not(.primary),
.utility-status-actions a.btn:not(.primary):visited {
  border-color: var(--landing-color-border-strong, var(--ds-color-border-strong, #d4d9e2));
  background: color-mix(
    in srgb,
    var(--landing-color-surface-base, var(--ds-color-surface, #ffffff)) 82%,
    var(--landing-color-surface-muted, var(--ds-color-bg-soft, #f6f8fb)) 18%
  );
  color: var(--landing-color-heading, var(--ds-color-text, #111111));
}

.utility-status-actions a.btn:not(.primary):hover,
.utility-status-actions a.btn:not(.primary):focus-visible {
  border-color: var(--landing-color-primary, var(--ds-color-primary, #111111));
  background: color-mix(
    in srgb,
    var(--landing-color-surface-base, var(--ds-color-surface, #ffffff)) 64%,
    var(--landing-color-primary, var(--ds-color-primary, #111111)) 8%
  );
  transform: translateY(-1px);
}

.utility-status-meta {
  margin-top: 1.5rem;
}

.utility-status-meta .muted {
  margin: 0.35rem 0;
  color: var(--landing-color-text-soft, var(--landing-color-text-muted, var(--ds-color-text-muted, #666666)));
}

@media (max-width: 37.5rem) {
  body.utility-page {
    padding: 1.125rem 0.875rem;
  }

  .utility-status-wrap {
    max-width: 100%;
  }

  .utility-status-card {
    padding: 1.35rem 1rem 1.1rem;
  }

  .utility-status-kicker {
    margin-bottom: 0.625rem;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }

  .utility-status-title {
    margin-bottom: 0.75rem;
    font-size: clamp(1.55rem, 7.2vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .utility-status-lead {
    max-width: 18.5rem;
    font-size: 0.94rem;
    line-height: 1.42;
  }

  .utility-status-meta {
    margin-top: 1.25rem;
  }

  .utility-status-meta .muted {
    max-width: 17.5rem;
    margin-inline: auto;
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .utility-status-actions {
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.35rem;
  }

  .utility-status-actions a.btn,
  .utility-status-actions a.btn:visited {
    width: 100%;
    padding: 0.9rem 1.125rem;
  }
}