/* PageChute marketing site. Built on the PageChute Passage tokens in tokens.css.
   Site styles use --pc-* tokens only. Raw hex appears in two scoped places:
   the customer's host-app illustration (.host, neutral slate so it reads as
   someone else's product) and the widget illustration (.tw), which copies the
   shipping widget's colours from src/widget/index.js injectStyles(). */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--pc-surface);
  color: var(--pc-text);
  font-family: var(--pc-font-body);
  font-size: var(--pc-type-body-size);
  line-height: var(--pc-type-body-line-height);
  font-weight: var(--pc-type-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--pc-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--pc-link-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: var(--pc-focus-width) solid var(--pc-focus);
  outline-offset: var(--pc-focus-offset);
}
main:focus { outline: none; }
/* The snippet's pre sits in the dark scope, so its ring is the dark-theme
   mint. Drawn outside, it would land on the white page (1.86:1). Inset it so
   it sits on the dark surface instead (#78CEB8 on #1D2927, 8.09:1). */
.code-block pre:focus-visible {
  outline-offset: calc(-1 * (var(--pc-focus-width) + var(--pc-focus-offset)));
}

code, .mono { font-family: var(--pc-font-mono); }

p code {
  font-size: 0.875em;
  padding: 0.0625rem var(--pc-space-1);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-surface-subtle);
}

.container {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--pc-space-4);
}
@media (min-width: 48rem) {
  .container { padding-inline: var(--pc-space-8); }
}

.skip-link {
  position: absolute;
  top: var(--pc-space-2);
  left: var(--pc-space-2);
  z-index: 10;
  padding: var(--pc-space-2) var(--pc-space-4);
  border-radius: var(--pc-radius-control);
  background: var(--pc-surface);
  color: var(--pc-text);
  font-weight: var(--pc-weight-semibold);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Controls ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pc-target-touch);
  padding: var(--pc-space-3) var(--pc-space-6);
  border: 1px solid transparent;
  border-radius: var(--pc-radius-control);
  background: var(--pc-primary);
  color: var(--pc-on-primary);
  font-size: var(--pc-type-body-size);
  font-weight: var(--pc-weight-semibold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--pc-motion-fast) var(--pc-motion-ease);
}
.button:hover {
  background: var(--pc-primary-hover);
  color: var(--pc-on-primary);
}
.button-sm {
  min-height: var(--pc-target-default);
  padding: var(--pc-space-2) var(--pc-space-4);
  font-size: var(--pc-type-label-size);
  line-height: var(--pc-type-label-line-height);
}

@media (max-width: 29.99rem) {
  .button { padding-inline: var(--pc-space-4); }
}

.text-link {
  font-weight: var(--pc-weight-semibold);
  padding-block: var(--pc-space-2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-4) var(--pc-space-6);
}
.hero .actions { column-gap: var(--pc-space-4); }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--pc-border); }

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-3) var(--pc-space-4);
  min-height: 4.5rem;
  padding-block: var(--pc-space-4);
}

/* Logo: 32px tall (142px wide) is above the 120px horizontal minimum. The
   clear space (one rail width, 46/240 of the height, about 6px) is kept by the
   header padding and the 16px minimum gap; nothing sits closer. */
.brand {
  display: inline-flex;
  border-radius: var(--pc-radius-sm);
}
.brand img { width: auto; height: 2rem; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-2) var(--pc-space-6);
  padding: 0;
  list-style: none;
}
.site-nav a:not(.button) {
  display: inline-block;
  padding-block: var(--pc-space-2);
  color: var(--pc-text-muted);
  font-size: var(--pc-type-ui-size);
  font-weight: var(--pc-type-ui-weight);
  line-height: var(--pc-type-ui-line-height);
  text-decoration: none;
}
.site-nav a:not(.button):hover {
  color: var(--pc-text);
  text-decoration: underline;
}

/* The in-page section links are a desktop convenience; on narrow screens the
   sections follow directly. */
@media (max-width: 47.99rem) {
  .nav-section { display: none; }
  .site-nav ul { gap: var(--pc-space-2) var(--pc-space-4); }
}
/* The header's primary button fits beside the section links and Sign in from
   64rem. Below that the page's own primary button is in the first screen, so
   the header keeps the logo and the Sign in text link. */
@media (max-width: 63.99rem) {
  .nav-cta { display: none; }
}

/* ---------- Type ---------- */

h1 {
  font-family: var(--pc-font-display);
  font-size: clamp(2.5rem, 1.5rem + 3vw, var(--pc-type-display-lg-size));
  font-weight: var(--pc-type-display-lg-weight);
  line-height: var(--pc-type-display-lg-line-height);
  letter-spacing: var(--pc-type-display-lg-letter-spacing);
}

h2 {
  font-family: var(--pc-font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, var(--pc-type-heading-1-size));
  font-weight: var(--pc-type-heading-1-weight);
  line-height: var(--pc-type-heading-1-line-height);
  letter-spacing: var(--pc-type-heading-1-letter-spacing);
}

h3 {
  font-size: var(--pc-type-lead-size);
  font-weight: var(--pc-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.lead {
  font-size: 1.125rem;
  line-height: var(--pc-type-lead-line-height);
  color: var(--pc-text-muted);
}
@media (min-width: 40rem) {
  .lead { font-size: var(--pc-type-lead-size); }
}

/* ---------- Hero ---------- */

.hero { padding-block: var(--pc-space-12) var(--pc-space-16); }
@media (min-width: 64rem) {
  .hero { padding-block: var(--pc-space-12) var(--pc-space-24); }
}

.hero-copy {
  display: grid;
  gap: var(--pc-space-6);
  margin-bottom: var(--pc-space-12);
}
.hero-copy h1 { max-width: 15ch; }
.hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-6);
  max-width: 34rem;
}
@media (min-width: 64rem) {
  .hero-copy { margin-bottom: var(--pc-space-8); }
}
/* Headline and lead side by side only where the lead column is wide enough
   to read well; the two columns share a top edge so the headline leads. */
@media (min-width: 76rem) {
  .hero-copy {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--pc-space-12);
  }
}

/* Product composition.
   - Below 40rem: the pieces stack. The widget overlaps the host page's spare
     bottom padding; the issue card sits just below the widget, clear of Submit.
   - 40-60rem: as above, with the issue card overlapping the widget's left
     edge, which is clear of Submit at these widths.
   - 60-72rem: the host page spans the top; the widget and issue card sit side
     by side under it, both overlapping its bottom padding.
   - From 72rem: the three share one grid cell and are placed by alignment
     (72rem is where the full 480px widget clears the host page's Pay button).
   Below 72rem the host page's bottom padding is 24px deeper than the widget's
   pull-up, so the widget's top edge never lands on host content. */
.composition {
  display: flex;
  flex-direction: column;
}
.composition > * { position: relative; }
.composition .tw {
  z-index: 1;
  align-self: flex-end;
  width: min(30rem, 100%);
  margin-top: calc(-1 * var(--pc-space-24));
}
.composition .issue-card {
  z-index: 2;
  align-self: flex-start;
  width: min(25rem, 92%);
  margin-top: var(--pc-space-3);
}
@media (min-width: 40rem) {
  .composition .tw { width: min(30rem, 88%); }
  .composition .issue-card { margin-top: calc(-1 * var(--pc-space-6)); }
}
@media (max-width: 71.99rem) {
  .host > .host-body { padding-bottom: calc(var(--pc-space-24) + var(--pc-space-6)); }
}
@media (min-width: 60rem) and (max-width: 71.99rem) {
  .composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30rem;
    column-gap: var(--pc-space-6);
  }
  .composition .host { grid-column: 1 / -1; grid-row: 1; }
  .composition .tw {
    grid-column: 2;
    grid-row: 2;
    width: 30rem;
    margin-top: calc(-1 * var(--pc-space-24));
  }
  .composition .issue-card {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: auto;
    max-width: 25rem;
    margin-top: calc(-1 * var(--pc-space-12));
  }
}
@media (min-width: 72rem) {
  .composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--pc-space-24);
  }
  .composition > * { grid-area: 1 / 1; }
  .composition .host { margin-right: var(--pc-space-24); }
  .composition .tw {
    align-self: start;
    justify-self: end;
    width: 30rem;
    margin-top: var(--pc-space-12);
  }
  .composition .issue-card {
    align-self: end;
    justify-self: start;
    width: 25rem;
    margin: 0 0 calc(-1 * var(--pc-space-24)) var(--pc-space-12);
  }
}

/* Host app (the customer's product), neutral slate on purpose. */
.host {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: var(--pc-radius-card);
  overflow: hidden;
  color: #0F172A;
  font-family: var(--pc-font-widget);
  box-shadow: var(--pc-shadow-sm);
}
.host-bar {
  padding: var(--pc-space-3) var(--pc-space-4);
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-family: var(--pc-font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}
.host-body {
  display: grid;
  gap: var(--pc-space-6);
  padding: var(--pc-space-6) var(--pc-space-6) var(--pc-space-24);
}
@media (min-width: 40rem) {
  .host-body {
    grid-template-columns: minmax(0, 20rem) minmax(0, 13rem);
    gap: var(--pc-space-8);
    padding: var(--pc-space-8) var(--pc-space-8) var(--pc-space-24);
  }
}
@media (min-width: 72rem) {
  .host-body { padding-bottom: var(--pc-space-8); }
}
@media (max-width: 39.99rem) {
  .host > .host-body .host-group:nth-child(3),
  .host > .host-body .host-summary > .host-label,
  .host > .host-body .host-line:not(.host-total) { display: none; }
  .host > .host-body .host-total { padding-top: 0; border-top: 0; }
}
.host-form, .host-summary { display: flex; flex-direction: column; gap: var(--pc-space-4); }
.host-summary { gap: var(--pc-space-3); }
.host-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.host-group { display: flex; flex-direction: column; gap: var(--pc-space-2); }
.host-label { font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: #475569; }
.host-field {
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  background: #FFFFFF;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.host-field-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--pc-space-2); }
.host-split, .host-line { display: flex; justify-content: space-between; gap: var(--pc-space-3); }
.host-line { font-size: 0.8125rem; line-height: 1.4; color: #334155; }
.host-total { padding-top: var(--pc-space-3); border-top: 1px solid #E2E8F0; color: #0F172A; font-weight: 600; }
.host-pay {
  margin-top: var(--pc-space-2);
  padding: var(--pc-space-3);
  border-radius: 6px;
  background: #334155;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* Widget, drawn from src/widget/index.js injectStyles() with the intended type (see README, Known difference). Customer accent
   #2855A6: white text on it is 7.14:1. Two quiet text colours (#64748b) are
   lifted to the widget's own #94a3b8 here so the illustration's text passes
   4.5:1; the counter and the enhanced-capture link are omitted. */
.tw {
  --tw-accent: #2855A6;
  background: #0F172A;
  color: #E2E8F0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  font-family: var(--pc-font-widget);
  overflow: hidden;
}
.tw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.tw-title { font-size: 0.9375rem; font-weight: 600; line-height: 1.25; }
.tw-close { color: #94A3B8; font-size: 1.125rem; line-height: 1; padding: 0.25rem; }
.tw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0.625rem 0.875rem 0;
}
.tw-tab {
  flex: 1;
  min-width: 6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #CBD5E1;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.tw-tab svg { flex: none; width: 1rem; height: 1rem; }
.tw-tab.is-selected { background: var(--tw-accent); border-color: var(--tw-accent); color: #FFFFFF; }
.tw-body { padding: 0.875rem 1.125rem 1.125rem; }
.tw-label { margin: 0.375rem 0 0.25rem; color: #94A3B8; font-size: 0.75rem; line-height: 1.4; }
.tw-textarea {
  min-height: 5.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: #1E293B;
  color: #F8FAFC;
  font-size: 0.875rem;
  line-height: 1.5;
}
.tw-shot {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.625rem;
  border: 1px dashed rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.5);
}
.tw-thumb {
  flex: none;
  width: 5rem;
  height: 3.125rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 4px;
  overflow: hidden;
}
.tw-shot-label { color: #94A3B8; font-size: 0.75rem; line-height: 1.4; }
.tw-actions { display: flex; justify-content: flex-end; margin-top: 0.875rem; }
.tw-submit {
  padding: 0.625rem 1rem;
  border-radius: 8px;
  background: var(--tw-accent);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Miniature page, used for the screenshot thumbnails. */
.mini { display: flex; flex-direction: column; width: 100%; height: 100%; background: #F8FAFC; }
.mini-bar { flex: none; height: 10%; min-height: 3px; background: #FFFFFF; border-bottom: 1px solid #E2E8F0; }
.mini-cols { flex: 1; display: flex; gap: 8%; padding: 8% 10%; }
.mini-col { flex: 1.6; display: flex; flex-direction: column; gap: 12%; }
.mini-col-side { flex: 1; }
.mini i { display: block; height: 14%; min-height: 2px; border: 1px solid #CBD5E1; border-radius: 2px; background: #FFFFFF; }
.mini i:first-child { width: 55%; border: 0; background: #CBD5E1; }
.mini b { display: block; height: 16%; min-height: 3px; margin-top: auto; border-radius: 2px; background: #334155; }

/* Issue card (hero) */
.issue-card {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
  padding: var(--pc-space-4) var(--pc-space-6) var(--pc-space-6);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-card);
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-md);
}
.issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-2) var(--pc-space-3);
  color: var(--pc-text-muted);
  font-size: var(--pc-type-caption-size);
  font-weight: var(--pc-type-caption-weight);
  line-height: var(--pc-type-caption-line-height);
  letter-spacing: var(--pc-type-caption-letter-spacing);
}
.issue-title { font-size: 1rem; font-weight: var(--pc-weight-semibold); line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: var(--pc-space-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pc-space-1);
  padding: var(--pc-space-half) var(--pc-space-2);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-pill);
  background: var(--pc-surface);
  color: var(--pc-text);
  font-size: var(--pc-type-caption-size);
  font-weight: var(--pc-weight-semibold);
  line-height: var(--pc-type-caption-line-height);
}
.chip-label { border-color: var(--pc-danger-border); background: var(--pc-danger-bg); color: var(--pc-danger-text); }
.chip-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--pc-radius-pill); background: var(--pc-danger-border); }
.chip-icon { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.chip-icon-line { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Sections ---------- */

.section { padding-block: var(--pc-space-16); }
@media (min-width: 64rem) {
  .section { padding-block: var(--pc-space-24); }
}
.section-tint {
  background: var(--pc-bg);
  border-block: 1px solid var(--pc-border);
}
.section-rule { border-top: 1px solid var(--pc-border); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-space-12);
  align-items: start;
}
.split-copy {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
  max-width: 34rem;
}
.split-copy p { color: var(--pc-text-muted); }
@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--pc-space-16);
  }
  .split-center { align-items: center; }
  .split-sticky { position: sticky; top: var(--pc-space-8); }
}

/* Issue detail */
.issue-detail {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-card);
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-sm);
  overflow: hidden;
}
.issue-detail-head {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
  padding: var(--pc-space-6);
  border-bottom: 1px solid var(--pc-border);
}
.issue-detail-title {
  font-size: 1.25rem;
  font-weight: var(--pc-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.issue-detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
  padding: var(--pc-space-6);
}
.issue-subhead {
  margin-top: var(--pc-space-4);
  padding-top: var(--pc-space-4);
  border-top: 1px solid var(--pc-border);
  font-size: var(--pc-type-label-size);
  font-weight: var(--pc-weight-bold);
  line-height: var(--pc-type-label-line-height);
}
@media (min-width: 48rem) {
  .issue-detail-head, .issue-detail-body { padding: var(--pc-space-6) var(--pc-space-8); }
}

.env-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pc-type-ui-size);
  line-height: var(--pc-type-ui-line-height);
}
.env-table th, .env-table td {
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-border);
  text-align: left;
  vertical-align: top;
}
.env-table thead th { background: var(--pc-bg); font-weight: var(--pc-weight-semibold); }
.env-table tbody th { width: 9.5rem; color: var(--pc-text-muted); font-weight: var(--pc-weight-medium); }
.env-table td { overflow-wrap: anywhere; }
.env-table td.mono { font-size: 0.8125rem; }
/* Phones: each row stacks, field name above its value. */
@media (max-width: 29.99rem) {
  .env-table, .env-table tbody, .env-table tr, .env-table th, .env-table td { display: block; }
  .env-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .env-table tbody { border-top: 1px solid var(--pc-border); }
  .env-table tr { padding-block: var(--pc-space-2); border-bottom: 1px solid var(--pc-border); }
  .env-table th, .env-table td { padding: 0; border: 0; }
  .env-table tbody th { width: auto; font-size: var(--pc-type-caption-size); line-height: var(--pc-type-caption-line-height); }
}

.issue-shot {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-control);
  overflow: hidden;
}
/* The screenshot is the host page itself, scaled down, without browser chrome
   or the widget (the widget's basic capture is of the page content). */
.shot-page {
  background: #F8FAFC;
  color: #0F172A;
  font-family: var(--pc-font-widget);
  zoom: 0.65;
}
.shot-page .host-body { padding: var(--pc-space-8); }

.issue-detail figcaption {
  padding: var(--pc-space-4) var(--pc-space-6);
  border-top: 1px solid var(--pc-border);
  background: var(--pc-bg);
  color: var(--pc-text-muted);
  font-size: var(--pc-type-ui-size);
  line-height: var(--pc-type-body-line-height);
}
@media (min-width: 48rem) {
  .issue-detail figcaption { padding-inline: var(--pc-space-8); }
}

/* Install */
.code-block {
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-card);
  background: var(--pc-surface);
  color: var(--pc-text);
}
.code-block pre {
  margin: 0;
  padding: var(--pc-space-6);
  border-radius: var(--pc-radius-card);
  font-size: 0.875rem;
  line-height: 1.75;
  white-space: pre;
  overflow-x: auto;
}
@media (min-width: 48rem) {
  .code-block pre { padding: var(--pc-space-8); font-size: 1rem; }
}
.tk-p { color: var(--pc-text-muted); }
.tk-t { color: var(--pc-text); font-weight: 600; }
.tk-a { color: var(--pc-text); }
.tk-v { color: var(--pc-primary); }

/* Facts */
.facts {
  display: grid;
  gap: var(--pc-space-8);
  margin-top: var(--pc-space-12);
  padding: 0;
  list-style: none;
}
.facts li {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
  padding-top: var(--pc-space-4);
  border-top: 1px solid var(--pc-text);
}
.facts p { color: var(--pc-text-muted); max-width: 34rem; }
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pc-space-8); }
}

/* Final call to action */
.cta { padding-bottom: var(--pc-space-16); }
@media (min-width: 64rem) {
  .cta { padding-bottom: var(--pc-space-24); }
}
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pc-space-8);
  padding: var(--pc-space-12) var(--pc-space-6);
  border-radius: var(--pc-radius-card);
  background: var(--pc-surface);
  color: var(--pc-text);
}
.cta-band h2 {
  max-width: 14ch;
  font-size: clamp(2rem, 1.25rem + 2.5vw, var(--pc-type-display-size));
  line-height: var(--pc-type-display-line-height);
  letter-spacing: var(--pc-type-display-letter-spacing);
}
@media (max-width: 29.99rem) {
  .cta-band { padding-inline: var(--pc-space-4); }
}
@media (min-width: 48rem) {
  .cta-band { padding: var(--pc-space-16) var(--pc-space-12); }
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--pc-border); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-space-6);
  padding-block: var(--pc-space-8);
}
.footer-logo { width: auto; height: 1.75rem; }
.footer-text {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-space-2) var(--pc-space-6);
  color: var(--pc-text-muted);
  font-size: var(--pc-type-ui-size);
  line-height: var(--pc-type-body-line-height);
}

/* ---------- Request access ---------- */

.access {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-space-8);
  padding-block: var(--pc-space-12) var(--pc-space-16);
}
.access-intro {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
  max-width: 34rem;
}
@media (min-width: 64rem) {
  .access {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--pc-space-16);
    align-items: start;
    padding-block: var(--pc-space-24);
  }
}

.access-card {
  max-width: 40rem;
  padding: var(--pc-space-6) var(--pc-space-4);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-card);
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-sm);
  scroll-margin-top: var(--pc-space-4);
}
@media (min-width: 30rem) {
  .access-card { padding: var(--pc-space-8) var(--pc-space-6); }
}
@media (min-width: 48rem) {
  .access-card { padding: var(--pc-space-8); }
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-6);
}
.form-note, .field-hint, .form-privacy {
  color: var(--pc-text-muted);
  font-size: var(--pc-type-ui-size);
  line-height: var(--pc-type-body-line-height);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-2);
}
.field label {
  font-size: var(--pc-type-label-size);
  font-weight: var(--pc-type-label-weight);
  line-height: var(--pc-type-label-line-height);
}
.optional { color: var(--pc-text-muted); font-weight: var(--pc-weight-medium); }

/* Controls: 40px tall at the default text size, 8px radius, the control
   border (#73877F, 3.82:1 on white). Type is 1rem so iOS does not zoom on
   focus. Height is a minimum, not fixed, so the input grows when only the
   text is enlarged (larger default font size, text-only zoom). */
.input {
  width: 100%;
  min-height: var(--pc-target-default);
  margin: 0;
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-input-border);
  border-radius: var(--pc-radius-control);
  background: var(--pc-input-bg);
  color: var(--pc-input-text);
  font: inherit;
  font-size: var(--pc-type-body-size);
  line-height: var(--pc-type-body-line-height);
  transition: border-color var(--pc-motion-fast) var(--pc-motion-ease);
}
/* 24px line + 2 x 7px padding + 2 x 1px border = 40px at the default size. */
.input:not(.textarea) { padding-block: calc(var(--pc-space-2) - 1px); }
.input::placeholder { color: var(--pc-input-placeholder); opacity: 1; }
.input:hover { border-color: var(--pc-text-muted); }
.input:focus-visible { border-color: var(--pc-focus); }
.textarea { min-height: 8rem; resize: vertical; }

/* Errors: a thicker danger border plus the message text, so the state never
   rests on colour alone. */
.input[aria-invalid="true"] {
  border-color: var(--pc-danger-border);
  box-shadow: inset 0 0 0 1px var(--pc-danger-border);
}
.field-error {
  color: var(--pc-danger-text);
  font-size: var(--pc-type-ui-size);
  font-weight: var(--pc-weight-semibold);
  line-height: var(--pc-type-ui-line-height);
}
.field-error::before { content: "Error: "; }

.form-alert {
  margin-bottom: var(--pc-space-6);
  padding: var(--pc-space-3) var(--pc-space-4);
  border: 1px solid var(--pc-danger-border);
  border-left-width: 4px;
  border-radius: var(--pc-radius-control);
  background: var(--pc-danger-bg);
  color: var(--pc-danger-text);
  font-size: var(--pc-type-ui-size);
  line-height: var(--pc-type-body-line-height);
  scroll-margin-top: var(--pc-space-4);
}
.form-alert:focus-visible { outline-offset: var(--pc-focus-offset); }

/* No-JavaScript fallback: the app's error redirects end in #request-form, so
   this generic message shows only on that path. With JavaScript the
   <noscript> content is not rendered at all, and the script shows the
   specific message instead. */
.nojs-alert { display: none; }
#request-form:target .nojs-alert { display: block; }

.form-submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pc-space-3);
}
.form-submit .button { font-family: inherit; cursor: pointer; }
/* While posting, the script changes the label to "Sending…"; that text is
   the visible busy state, so the colours stay at full contrast. */
.form-submit .button[aria-disabled="true"] { cursor: progress; }
@media (max-width: 29.99rem) {
  .form-submit .button { width: 100%; }
}

/* Honeypot: off-screen for sighted users, aria-hidden for screen readers and
   out of the tab order. Not display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Privacy policy ---------- */

/* Long-form reading page: one column of about 68 characters per line
   (median, measured in Manrope at 16px), smaller headings than the landing
   page so the sections read as a document. `ch` is the width of a zero,
   which in Manrope is wider than the average letter, so 55ch gives about
   68 characters (longest 80); 68ch gave about 84. */
.policy {
  max-width: 55ch;
  padding-block: var(--pc-space-12) var(--pc-space-16);
}
@media (min-width: 64rem) {
  .policy { padding-block: var(--pc-space-16) var(--pc-space-24); }
}
.policy > * + * { margin-top: var(--pc-space-4); }
.policy-head {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
  margin-bottom: var(--pc-space-8);
  padding-bottom: var(--pc-space-6);
  border-bottom: 1px solid var(--pc-border);
}
.policy h1 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, var(--pc-type-heading-1-size));
  line-height: var(--pc-type-heading-1-line-height);
  letter-spacing: var(--pc-type-heading-1-letter-spacing);
}
.policy-effective { color: var(--pc-text-muted); }
.policy h2 {
  margin-top: var(--pc-space-12);
  font-size: var(--pc-type-heading-3-size);
  line-height: var(--pc-type-heading-3-line-height);
  letter-spacing: var(--pc-type-heading-3-letter-spacing);
  scroll-margin-top: var(--pc-space-4);
}
.policy h2 + * { margin-top: var(--pc-space-3); }
.policy ul { padding-left: var(--pc-space-6); }
.policy li + li { margin-top: var(--pc-space-2); }
.policy a { overflow-wrap: anywhere; }
.policy address { font-style: normal; }

.policy-table-wrap { overflow-x: auto; }
.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pc-type-ui-size);
  line-height: var(--pc-type-body-line-height);
}
.policy-table th, .policy-table td {
  padding: var(--pc-space-2) var(--pc-space-3);
  border: 1px solid var(--pc-border);
  text-align: left;
  vertical-align: top;
}
.policy-table thead th { background: var(--pc-bg); font-weight: var(--pc-weight-semibold); }
.policy-table tbody th { width: 38%; font-weight: var(--pc-weight-semibold); }

/* ---------- 404 and confirmation ---------- */

.not-found, .message-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pc-space-6);
  max-width: 40rem;
  padding-block: var(--pc-space-24);
}
.not-found .lead, .message-page .lead { max-width: 32rem; }

/* ---------- Preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .button { border-color: ButtonText; }
  .chip, .issue-card, .issue-detail, .code-block, .cta-band, .tw, .host, .access-card { border: 1px solid CanvasText; }
  .input { border-color: CanvasText; }
  .input[aria-invalid="true"] { border-width: 3px; box-shadow: none; }
  .form-alert { border-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

@media print {
  .site-header nav, .skip-link, .cta { display: none; }
  .section-tint { background: none; }
  .policy-table thead th { background: none; }
}