:root {
  color-scheme: light;
  font-family: var(--commerce-font-sans);
  color: var(--commerce-label);
  background: var(--commerce-canvas);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  padding: 34px 16px;
  color: var(--commerce-label);
  background: var(--commerce-canvas-field);
  font-family: var(--commerce-font-sans);
  font-size: var(--commerce-text-body);
}

main {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px);
  border-radius: var(--commerce-radius-lg);
  background: var(--commerce-surface);
  box-shadow:
    0 1px 1px rgba(16, 24, 40, .05),
    0 10px 24px -10px rgba(16, 24, 40, .16),
    0 0 0 1px var(--commerce-line);
}

a {
  color: var(--commerce-tint);
  font-weight: var(--commerce-weight-medium);
}

a:focus-visible {
  outline: var(--commerce-focus-width) solid var(--commerce-focus-color);
  outline-offset: var(--commerce-focus-offset);
}

.brand {
  font-size: var(--commerce-text-meta);
  text-decoration: none;
}

.eyebrow {
  margin: 42px 0 var(--commerce-space-2);
  color: var(--commerce-tint);
  font-size: var(--commerce-text-eyebrow);
  font-weight: var(--commerce-weight-strong);
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: var(--commerce-space-3) 0 var(--commerce-space-2);
  font-size: var(--commerce-text-display);
  font-weight: var(--commerce-weight-display);
  line-height: var(--commerce-leading-tight);
  letter-spacing: var(--commerce-tracking-display);
}

h2 {
  margin: 30px 0 10px;
  color: var(--commerce-label);
  font-size: var(--commerce-text-page);
  font-weight: var(--commerce-weight-heading);
  line-height: var(--commerce-leading-snug);
  letter-spacing: var(--commerce-tracking-title);
}

p,
li {
  color: var(--commerce-label-2);
  font-size: var(--commerce-text-body);
  line-height: 1.9;
}

ul { padding-left: var(--commerce-space-5); }

.meta {
  padding: 2px 0 2px 14px;
  color: var(--commerce-label-2);
  background: transparent;
  box-shadow: inset 3px 0 0 var(--commerce-tint);
  font-size: var(--commerce-text-caption);
  font-variant-numeric: tabular-nums;
}

.summary {
  margin: var(--commerce-space-5) 0 30px;
  color: var(--commerce-label);
  font-size: var(--commerce-text-card);
}

.policy-body { min-height: 260px; }
.policy-body h2:first-child { margin-top: 0; }

.operator-card {
  margin-top: 40px;
  padding: var(--commerce-space-5) 0 0;
  border-top: 1px solid var(--commerce-line);
}

.operator-card strong {
  color: var(--commerce-label);
  font-size: var(--commerce-text-card);
  font-weight: var(--commerce-weight-strong);
}

.operator-card p { margin: 6px 0 0; }

.policy-links {
  margin-top: var(--commerce-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--commerce-space-5);
  font-size: var(--commerce-text-meta);
}

.policy-links a { text-decoration: none; }
.policy-links a::after { content: "›"; margin-left: 4px; }

.load-error {
  padding: var(--commerce-space-4) var(--commerce-space-4) var(--commerce-space-4) 19px;
  border-radius: 0 var(--commerce-radius-md) var(--commerce-radius-md) 0;
  color: var(--commerce-label-2);
  background: var(--commerce-surface-sunken);
  box-shadow: inset 3px 0 0 var(--commerce-status-fail);
}

@media (max-width: 560px) {
  body {
    padding: 0;
    background: var(--commerce-surface);
  }

  main {
    width: 100%;
    min-height: 100vh;
    padding: 28px 20px 40px;
    border-radius: 0;
    box-shadow: none;
  }
}