/**
 * Proactive base layer: reset, typography, layout and shared primitives.
 * All values come from tokens.css. No section-specific styling belongs here.
 */

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

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

body {
  margin: 0;
  background: var(--pa-surface);
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-body);
  line-height: var(--pa-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img, video { height: auto; }

::selection { background: var(--pa-purple-tint); color: var(--pa-text); }

a {
  color: var(--pa-purple);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--pa-dur-fast) ease;
}
a:hover { color: var(--pa-purple-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--pa-focus-ring-light);
  border-radius: var(--pa-radius-xs);
}
.pa-on-dark :focus-visible { box-shadow: var(--pa-focus-ring); }

.pa-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--pa-purple);
  color: #fff;
  font-weight: 700;
}
.pa-skip-link:focus { left: 12px; top: 12px; color: #fff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pa-w { width: var(--pa-container); margin-inline: auto; }

.pa-section { padding-block: var(--pa-section-y); }
.pa-section--lg { padding-block: var(--pa-section-y-lg); }
.pa-section--sm { padding-block: var(--pa-section-y-sm); }
.pa-section--light { background: var(--pa-surface); }
.pa-section--warm { background: var(--pa-surface-alt); }
.pa-section--dark { background: var(--pa-ink); color: var(--pa-text-on-dark); }
.pa-section[id] { scroll-margin-top: 96px; }

/* ---- Typography ---------------------------------------------------------- */

.pa-hero-title {
  margin: 0;
  font-family: var(--pa-font);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pa-h2 {
  margin: 26px 0 0;
  font-family: var(--pa-font);
  font-size: var(--pa-h2-section);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.pa-h3 {
  margin: 0;
  font-family: var(--pa-font);
  font-size: var(--pa-h3-lead);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.pa-h4 {
  margin: 0;
  font-family: var(--pa-font);
  font-size: var(--pa-h4-feature);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.024em;
}

.pa-lead {
  margin: 0;
  max-width: 440px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.012em;
}

.pa-body { font-size: var(--pa-body); line-height: var(--pa-leading-body); }
.pa-body-lg { font-size: var(--pa-body-lg); line-height: 1.7; }
.pa-body-sm { font-size: var(--pa-body-sm); line-height: 1.6; }
.pa-meta { font-size: var(--pa-meta); line-height: 1.55; }

.pa-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: var(--pa-radius-pill);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: -0.002em;
  white-space: nowrap;
}
.pa-eyebrow__index { color: var(--pa-purple-on-dark); }
.pa-eyebrow--on-light { background: var(--pa-ink); border: 1px solid var(--pa-ink); color: #fff; }
.pa-eyebrow--on-dark { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #fff; }
.pa-eyebrow--inverse { background: var(--pa-surface); border: 1px solid var(--pa-surface); color: var(--pa-text); }
.pa-eyebrow--inverse .pa-eyebrow__index { color: var(--pa-purple); }

.pa-label {
  margin: 0;
  font-family: var(--pa-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--pa-tracking-eyebrow);
  text-transform: uppercase;
}

/* ---- Buttons ------------------------------------------------------------- */

.pa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--pa-radius-sm);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--pa-dur) var(--pa-ease),
    border-color var(--pa-dur) var(--pa-ease),
    color var(--pa-dur) var(--pa-ease),
    transform var(--pa-dur) var(--pa-ease);
}

.pa-btn--primary { background: var(--pa-purple); color: #fff; }
.pa-btn--primary:hover { background: var(--pa-purple-hover); color: #fff; }
.pa-on-dark .pa-btn--primary:hover { background: var(--pa-purple-lift); color: #fff; transform: translateY(-2px); }

.pa-btn--secondary { padding: 15px 22px; border-color: rgba(255,255,255,0.16); color: #fff; }
.pa-btn--secondary:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.06); color: #fff; }

.pa-btn--outline { padding: 14px 20px; border-color: var(--pa-border-strong); color: var(--pa-text); background: transparent; }
.pa-btn--outline:hover { border-color: var(--pa-text); color: var(--pa-text); }

.pa-btn--sm { padding: 12px 18px; font-size: var(--pa-meta); }

/* A control that is deliberately not available yet. The dashed edge carries
   the state structurally, so it does not depend on colour, and the label
   always says so in words. */
.pa-btn--unavailable {
  padding: 14px 20px;
  border-style: dashed;
  border-color: var(--pa-border-strong);
  background: var(--pa-surface-alt);
  color: var(--pa-text-muted);
}

.pa-btn[disabled], .pa-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.pa-btn--unavailable[disabled], .pa-btn--unavailable[aria-disabled="true"] { opacity: 1; }

.pa-link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
  color: var(--pa-purple);
}
.pa-link-quiet:hover { color: var(--pa-purple-hover); }
.pa-on-dark .pa-link-quiet { color: var(--pa-purple-on-dark); }
.pa-on-dark .pa-link-quiet:hover { color: #fff; }

.pa-play-dot {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 50%;
}

/* ---- Status: three levels, deliberately unequal --------------------------- */

.pa-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: var(--pa-radius-xs);
  font-family: var(--pa-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pa-status--release { background: var(--pa-purple); color: #fff; }
/* Next carries more weight than a proof of concept and less than a release:
   the purple is an outline, never a fill, so it cannot be mistaken at a glance
   for the shipped capability above it. */
.pa-status--next { border: 1px solid var(--pa-purple); color: var(--pa-purple); }
.pa-status--concept { border: 1px solid var(--pa-border-card); color: var(--pa-text-warm); }
.pa-status--direction { color: var(--pa-text-warm); padding-inline: 0; font-weight: 600; letter-spacing: 0.1em; }

.pa-chip {
  padding: 11px 16px;
  border: 1px solid var(--pa-border-card);
  border-radius: var(--pa-radius-sm);
  background: transparent;
  color: var(--pa-text-muted);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--pa-dur-fast) ease, background-color var(--pa-dur-fast) ease, color var(--pa-dur-fast) ease;
}
.pa-chip:hover { border-color: var(--pa-border-hover); }
.pa-chip[aria-pressed="true"] { background: var(--pa-purple); border-color: var(--pa-purple); color: #fff; }

.pa-tag {
  padding: 7px 10px;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius-xs);
  font-size: var(--pa-micro);
  line-height: 1.4;
  color: var(--pa-text-muted);
}

/* ---- Form controls ------------------------------------------------------- */

.pa-field { margin-top: 22px; }
.pa-field--first { margin-top: 30px; }

.pa-field__label {
  display: block;
  color: var(--pa-text);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
}
.pa-field__hint { margin: 6px 0 0; color: var(--pa-text-warm); font-size: var(--pa-meta); line-height: 1.5; }

.pa-input, .pa-select, .pa-textarea {
  margin-top: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--pa-border-card);
  border-radius: var(--pa-radius-sm);
  background: #fff;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color var(--pa-dur-fast) ease, box-shadow var(--pa-dur-fast) ease;
}
.pa-textarea { min-height: 92px; resize: vertical; }
.pa-textarea--tall { min-height: 140px; }

.pa-input:focus, .pa-select:focus, .pa-textarea:focus {
  outline: none;
  border-color: var(--pa-purple);
  box-shadow: var(--pa-focus-ring-light);
}
.pa-input[aria-invalid="true"], .pa-select[aria-invalid="true"], .pa-textarea[aria-invalid="true"] { border-color: var(--pa-error); }
.pa-input[disabled], .pa-select[disabled], .pa-textarea[disabled] { background: var(--pa-surface-alt); color: var(--pa-text-soft); cursor: not-allowed; }

.pa-error { margin: 8px 0 0; color: var(--pa-error); font-size: var(--pa-meta); line-height: 1.5; }
.pa-form-error {
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--pa-error);
  border-radius: var(--pa-radius-sm);
  color: var(--pa-error);
  font-size: var(--pa-body-sm);
}

/* Honeypot. Hidden from sight and from assistive technology, not from bots. */
.pa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Reveal and motion --------------------------------------------------- */

.pa-reveal-init {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--pa-dur-reveal) var(--pa-ease), transform var(--pa-dur-reveal) var(--pa-ease);
}
.pa-reveal-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .pa-reveal-init { opacity: 1; transform: none; }
}

/* ---- Container gutters (approved responsive design) ---------------------- */

@media (max-width: 1180px) { .pa-w { width: min(1320px, calc(100% - var(--pa-container-gutter-md))); } }
@media (max-width: 640px)  { .pa-w { width: min(1320px, calc(100% - var(--pa-container-gutter-sm))); } }

/* The Worksets screenshot deliberately bleeds past the container. The
   approved design contains that bleed on its page wrapper; this is the
   equivalent. The hero clips its own. The fixed header sits outside <main>,
   so it is unaffected. */
main { overflow-x: clip; }

/* Controls take their height from padding, not from the body's reading leading.
   The approved design leaves these at `normal`; inheriting 1.65 was adding
   roughly 8px to every button and quiet link on the page. */
.pa-btn { line-height: 1.15; }
.pa-link-quiet { line-height: 1.2; }