/* @registerwithai/design-system — styles.css (fonts, tokens, base, components) */
/* RegisterWithAI brand faces (SIL Open Font License 1.1 — see src/fonts/OFL-*.txt).
   Latin subset. Skip this file if you load the same families another way (e.g. next/font). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/Newsreader-Variable.woff2') format('woff2-variations'), url('./fonts/Newsreader-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('./fonts/Newsreader-Variable-Italic.woff2') format('woff2-variations'), url('./fonts/Newsreader-Variable-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/PublicSans-Variable.woff2') format('woff2-variations'), url('./fonts/PublicSans-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/PublicSans-Variable-Italic.woff2') format('woff2-variations'), url('./fonts/PublicSans-Variable-Italic.woff2') format('woff2');
}

/* RegisterWithAI — generated from tokens.json. Do not edit by hand: change src/tokens/tokens.json and run `npm run tokens`. */

:root,
[data-theme="light"] {
  color-scheme: light;
  --paper: #f7f5f0;
  --paper-raised: #ffffff;
  --paper-sunken: #efede8;
  --line: #ddd9d0;
  --line-strong: #8a8478;
  --ink: #0f1f36;
  --ink-muted: #4b5768;
  --brand: #1f3350;
  --brand-strong: #15243a;
  --brand-soft: #e4e8ee;
  --on-brand: #ffffff;
  --verified: #0b6b66;
  --verified-soft: #d9efec;
  --on-verified: #ffffff;
  --seal: #e9b949;
  --seal-soft: #f8eccc;
  --pending: #875200;
  --pending-soft: #f9ebcb;
  --danger: #b42318;
  --danger-soft: #fbe5e1;
  --on-danger: #ffffff;
  --surface-inverse: #172539;
  --focus: #1f5fbf;
  --overlay: #0f1f3666;
  --logo-tile: #173b6c;
  --logo-bar: #ffffff;
  --link: var(--brand);
  --shadow-sm: 0 1px 2px #0f1f360d, 0 1px 3px #0f1f3614;
  --shadow-md: 0 2px 4px #0f1f360f, 0 8px 20px -4px #0f1f361f;
  --shadow-lg: 0 4px 8px #0f1f3612, 0 24px 48px -12px #0f1f362e;
  --focus-ring: 0 0 0 2px #f7f5f0, 0 0 0 4px #1f5fbf;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1520;
  --paper-raised: #152030;
  --paper-sunken: #0a0f18;
  --line: #263346;
  --line-strong: #6f7e95;
  --ink: #eef1f6;
  --ink-muted: #a8b3c5;
  --brand: #a7bde0;
  --brand-strong: #c3d3ec;
  --brand-soft: #1c2a40;
  --on-brand: #0e1520;
  --verified: #5ccabd;
  --verified-soft: #0e2c2d;
  --on-verified: #0e1520;
  --seal: #f0c45a;
  --seal-soft: #2e2510;
  --pending: #f2c766;
  --pending-soft: #2e2510;
  --danger: #ff8f80;
  --danger-soft: #3a1613;
  --on-danger: #0e1520;
  --surface-inverse: #1a2638;
  --focus: #93b8f2;
  --overlay: #000000a6;
  --logo-tile: #93b8f2;
  --logo-bar: #0b1524;
  --link: var(--brand);
  --shadow-sm: 0 1px 3px #000000a6;
  --shadow-md: 0 8px 20px -4px #000000bf;
  --shadow-lg: 0 24px 48px -12px #000000d9;
  --focus-ring: 0 0 0 2px #0e1520, 0 0 0 4px #93b8f2;
}

/* Opt-in: <html data-theme="system"> follows the visitor's OS setting. */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --paper: #0e1520;
    --paper-raised: #152030;
    --paper-sunken: #0a0f18;
    --line: #263346;
    --line-strong: #6f7e95;
    --ink: #eef1f6;
    --ink-muted: #a8b3c5;
    --brand: #a7bde0;
    --brand-strong: #c3d3ec;
    --brand-soft: #1c2a40;
    --on-brand: #0e1520;
    --verified: #5ccabd;
    --verified-soft: #0e2c2d;
    --on-verified: #0e1520;
    --seal: #f0c45a;
    --seal-soft: #2e2510;
    --pending: #f2c766;
    --pending-soft: #2e2510;
    --danger: #ff8f80;
    --danger-soft: #3a1613;
    --on-danger: #0e1520;
    --surface-inverse: #1a2638;
    --focus: #93b8f2;
    --overlay: #000000a6;
    --logo-tile: #93b8f2;
    --logo-bar: #0b1524;
    --link: var(--brand);
    --shadow-sm: 0 1px 3px #000000a6;
    --shadow-md: 0 8px 20px -4px #000000bf;
    --shadow-lg: 0 24px 48px -12px #000000d9;
    --focus-ring: 0 0 0 2px #0e1520, 0 0 0 4px #93b8f2;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 9999px;
  --container-md: 880px;
  --container-lg: 1200px;
  --measure: 640px;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --type-display-xl: 400 72px/76px var(--font-display);
  --tracking-display-xl: -0.02em;
  --type-display-lg: 400 52px/58px var(--font-display);
  --tracking-display-lg: -0.015em;
  --type-display-md: 400 40px/46px var(--font-display);
  --tracking-display-md: -0.01em;
  --type-display-sm: 400 28px/34px var(--font-display);
  --tracking-display-sm: -0.005em;
  --type-quote: 400 22px/32px var(--font-display);
  --tracking-quote: -0.003em;
  --type-heading-lg: 600 24px/32px var(--font-sans);
  --tracking-heading-lg: -0.01em;
  --type-heading-md: 600 20px/28px var(--font-sans);
  --tracking-heading-md: normal;
  --type-heading-sm: 600 16px/24px var(--font-sans);
  --tracking-heading-sm: normal;
  --type-body-lg: 400 19px/30px var(--font-sans);
  --tracking-body-lg: normal;
  --type-body: 400 16px/26px var(--font-sans);
  --tracking-body: normal;
  --type-body-sm: 400 14px/22px var(--font-sans);
  --tracking-body-sm: normal;
  --type-label: 600 15px/20px var(--font-sans);
  --tracking-label: normal;
  --type-eyebrow: 600 13px/16px var(--font-sans);
  --tracking-eyebrow: 0.08em;
  --type-caption: 500 12px/16px var(--font-sans);
  --tracking-caption: 0.01em;
}

/* Type styles as utility classes: <p className="rwa-text-body-lg"> */
.rwa-text-display-xl { font: var(--type-display-xl); letter-spacing: var(--tracking-display-xl); }
.rwa-text-display-lg { font: var(--type-display-lg); letter-spacing: var(--tracking-display-lg); }
.rwa-text-display-md { font: var(--type-display-md); letter-spacing: var(--tracking-display-md); }
.rwa-text-display-sm { font: var(--type-display-sm); letter-spacing: var(--tracking-display-sm); }
.rwa-text-quote { font: var(--type-quote); letter-spacing: var(--tracking-quote); }
.rwa-text-heading-lg { font: var(--type-heading-lg); letter-spacing: var(--tracking-heading-lg); }
.rwa-text-heading-md { font: var(--type-heading-md); letter-spacing: var(--tracking-heading-md); }
.rwa-text-heading-sm { font: var(--type-heading-sm); letter-spacing: var(--tracking-heading-sm); }
.rwa-text-body-lg { font: var(--type-body-lg); letter-spacing: var(--tracking-body-lg); }
.rwa-text-body { font: var(--type-body); letter-spacing: var(--tracking-body); }
.rwa-text-body-sm { font: var(--type-body-sm); letter-spacing: var(--tracking-body-sm); }
.rwa-text-label { font: var(--type-label); letter-spacing: var(--tracking-label); }
.rwa-text-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.rwa-text-caption { font: var(--type-caption); letter-spacing: var(--tracking-caption); }

/* RegisterWithAI base: a light reset and page defaults. Uses tokens only. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px; /* clears the sticky navbar for #anchor jumps */
}
@media (max-width: 880px) {
  html {
    scroll-padding-top: var(--space-4); /* the navbar is not sticky below 880px */
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
}

:where(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

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

:where(button, input, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

::selection {
  background: var(--seal-soft);
  color: var(--ink);
}

/* Visually hidden, still read by screen readers. */
.rwa-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: put <a class="rwa-skip-link" href="#main">Skip to content</a> first in <body>. */
.rwa-skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--on-brand);
  font: var(--type-label);
  text-decoration: none;
}
.rwa-skip-link:focus {
  top: var(--space-4);
}

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

/* Icon */
.rwa-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/* Logo */
.rwa-logo {
  display: block;
  flex: none;
}
/* The tile and its bars read the logo's own tokens, not brand: the logo is unchanged (decisions #48). */
.rwa-logo__tile {
  fill: var(--logo-tile);
}
.rwa-logo__bar {
  fill: var(--logo-bar);
}
.rwa-logo__cursor {
  fill: var(--seal);
}
.rwa-logo__ink {
  fill: var(--ink);
}
.rwa-logo__accent {
  fill: var(--verified);
}

/* Button */
.rwa-button {
  --rwa-button-bg: var(--brand);
  --rwa-button-bg-hover: var(--brand-strong);
  --rwa-button-fg: var(--on-brand);
  --rwa-button-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--rwa-button-border);
  border-radius: var(--radius-md);
  background: var(--rwa-button-bg);
  color: var(--rwa-button-fg);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.rwa-button:hover {
  background: var(--rwa-button-bg-hover);
  text-decoration: none;
}
.rwa-button:active {
  transform: translateY(1px);
}
.rwa-button:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}
.rwa-button:disabled,
.rwa-button[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.rwa-button .rwa-icon {
  width: 18px;
  height: 18px;
}

/* Variants */
.rwa-button--secondary {
  --rwa-button-bg: transparent;
  --rwa-button-bg-hover: var(--brand-soft);
  --rwa-button-fg: var(--brand);
  --rwa-button-border: var(--line-strong);
}
.rwa-button--ghost {
  --rwa-button-bg: transparent;
  --rwa-button-bg-hover: var(--brand-soft);
  --rwa-button-fg: var(--brand);
}

/* Sizes */
.rwa-button--sm {
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
}
.rwa-button--sm .rwa-icon {
  width: 16px;
  height: 16px;
}
.rwa-button--lg {
  height: 52px;
  padding: 0 26px;
  font-size: 16px;
}
.rwa-button--lg .rwa-icon {
  width: 20px;
  height: 20px;
}
.rwa-button--full {
  display: flex;
  width: 100%;
}

/* Loading */
.rwa-button--loading {
  cursor: progress;
}
.rwa-button__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: rwa-spin 700ms linear infinite;
}
@keyframes rwa-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Badge */
.rwa-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink);
  font: var(--type-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caption);
  white-space: nowrap;
}

/* Pill: a label that is not a status */
.rwa-badge--pill {
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--paper-sunken);
}
.rwa-badge--pill .rwa-icon {
  margin-left: -2px;
}
.rwa-badge--pill.rwa-badge--neutral {
  box-shadow: inset 0 0 0 1px var(--line);
}
.rwa-badge--pill.rwa-badge--brand {
  background: var(--brand-soft);
  color: var(--brand);
}
.rwa-badge--pill.rwa-badge--verified {
  background: var(--verified-soft);
  color: var(--verified);
}
.rwa-badge--pill.rwa-badge--pending {
  background: var(--pending-soft);
  color: var(--pending);
}
.rwa-badge--pill.rwa-badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Inline: every status. The icon carries the tone; the word stays ink. */
.rwa-badge--inline {
  gap: 6px;
}
.rwa-badge--inline.rwa-badge--neutral {
  color: var(--ink-muted);
}
.rwa-badge--inline.rwa-badge--brand .rwa-icon {
  color: var(--brand);
}
.rwa-badge--inline.rwa-badge--verified .rwa-icon {
  color: var(--verified);
}
.rwa-badge--inline.rwa-badge--pending .rwa-icon {
  color: var(--pending);
}
.rwa-badge--inline.rwa-badge--danger .rwa-icon {
  color: var(--danger);
}

/* Alert */
.rwa-alert {
  --rwa-alert-bg: var(--brand-soft);
  --rwa-alert-accent: var(--brand);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--rwa-alert-bg);
  color: var(--ink);
  font: var(--type-body-sm);
}
.rwa-alert__icon {
  margin-top: 1px;
  color: var(--rwa-alert-accent);
}
.rwa-alert__body {
  flex: 1;
  min-width: 0;
}
.rwa-alert__title {
  font: var(--type-heading-sm);
  color: var(--ink);
}
.rwa-alert__title + .rwa-alert__text {
  margin-top: 2px;
}
.rwa-alert__text {
  color: var(--ink);
}
.rwa-alert__action {
  flex: none;
  align-self: center;
}
.rwa-alert--verified {
  --rwa-alert-bg: var(--verified-soft);
  --rwa-alert-accent: var(--verified);
}
.rwa-alert--pending {
  --rwa-alert-bg: var(--pending-soft);
  --rwa-alert-accent: var(--pending);
}
.rwa-alert--danger {
  --rwa-alert-bg: var(--danger-soft);
  --rwa-alert-accent: var(--danger);
}

/* TextField */
.rwa-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.rwa-field__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--ink);
}
.rwa-field__required {
  color: var(--danger);
}
.rwa-field__hint {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--danger);
}
.rwa-field__error .rwa-icon {
  margin-top: 3px;
}

.rwa-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  color: var(--ink);
  font: var(--type-body);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rwa-input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.rwa-input:hover {
  border-color: var(--ink-muted);
}
.rwa-input:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}
.rwa-input:disabled {
  background: var(--paper-sunken);
  cursor: not-allowed;
}
.rwa-input[aria-invalid='true'] {
  border-color: var(--danger);
}
.rwa-input--multiline {
  height: auto;
  min-height: 112px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

/* Checkbox */
.rwa-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.rwa-checkbox__control {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}
.rwa-checkbox__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rwa-checkbox__box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-raised);
  color: transparent;
  pointer-events: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.rwa-checkbox__input:hover + .rwa-checkbox__box {
  border-color: var(--ink-muted);
}
.rwa-checkbox__input:checked + .rwa-checkbox__box {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}
.rwa-checkbox__input:focus-visible + .rwa-checkbox__box {
  box-shadow: var(--focus-ring);
}
.rwa-checkbox__input:disabled,
.rwa-checkbox__input:disabled + .rwa-checkbox__box {
  cursor: not-allowed;
  opacity: 0.55;
}
.rwa-checkbox--invalid .rwa-checkbox__box {
  border-color: var(--danger);
}
.rwa-checkbox__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rwa-checkbox__label {
  font: var(--type-body);
  color: var(--ink);
  cursor: pointer;
}
.rwa-checkbox__description {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-checkbox__error {
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--danger);
}

/* LookupForm */
.rwa-lookup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 600px;
}
.rwa-lookup__label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--ink);
}
.rwa-lookup__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 6px 6px var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rwa-lookup__bar:focus-within {
  border-color: var(--focus);
  box-shadow: var(--focus-ring);
}
.rwa-lookup--invalid .rwa-lookup__bar {
  border-color: var(--danger);
}
.rwa-lookup__icon {
  color: var(--ink-muted);
}
.rwa-lookup__input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: var(--type-body);
  font-size: 17px;
}
.rwa-lookup__input::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}
.rwa-lookup__input:focus,
.rwa-lookup__input:focus-visible {
  outline: none;
  box-shadow: none;
}
.rwa-lookup__button.rwa-button:focus-visible {
  box-shadow: var(--focus-ring);
}
.rwa-lookup__hint {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-lookup__error {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--danger);
}
.rwa-lookup__error .rwa-icon {
  margin-top: 3px;
}

@media (max-width: 560px) {
  .rwa-lookup__bar {
    flex-wrap: wrap;
    padding: 6px;
  }
  .rwa-lookup__icon {
    margin-left: var(--space-3);
  }
  .rwa-lookup__input {
    padding-right: var(--space-3);
  }
  .rwa-lookup__button {
    flex-basis: 100%;
  }
}

/* Container */
.rwa-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.rwa-container--lg {
  max-width: calc(var(--container-lg) + 2 * var(--space-6));
}
.rwa-container--md {
  max-width: calc(var(--container-md) + 2 * var(--space-6));
}
@media (max-width: 640px) {
  .rwa-container {
    padding-inline: var(--space-4);
  }
}

/* Section */
.rwa-section {
  position: relative;
  background: var(--paper);
  color: var(--ink);
}
.rwa-section--sunken {
  background: var(--paper-sunken);
}
.rwa-section--inverse {
  background: var(--surface-inverse);
}
.rwa-section--space-lg {
  padding-block: var(--space-24);
}
.rwa-section--space-md {
  padding-block: var(--space-16);
}
.rwa-section--space-none {
  padding-block: 0;
}
@media (max-width: 720px) {
  .rwa-section--space-lg {
    padding-block: var(--space-16);
  }
  .rwa-section--space-md {
    padding-block: var(--space-12);
  }
}

/* Grid */
.rwa-grid {
  display: grid;
  grid-template-columns: repeat(var(--rwa-grid-cols, 3), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwa-grid--cols-2 {
  --rwa-grid-cols: 2;
}
.rwa-grid--cols-3 {
  --rwa-grid-cols: 3;
}
.rwa-grid--cols-4 {
  --rwa-grid-cols: 4;
}
.rwa-grid--gap-md {
  gap: var(--space-6);
}
.rwa-grid--gap-lg {
  gap: var(--space-8);
}
.rwa-grid--align-start {
  align-items: start;
}
.rwa-grid--align-stretch {
  align-items: stretch;
}
/* The section rule across every column. */
.rwa-grid--rule {
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink);
}
/* A SectionHeader in a grid cell takes the grid's gap, not its own bottom margin. */
.rwa-grid > .rwa-section-header {
  margin-bottom: 0;
}
/* split: a section's title beside its body, 5:7 */
.rwa-grid--cols-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-16);
}
@media (max-width: 960px) {
  .rwa-grid--cols-3,
  .rwa-grid--cols-4 {
    --rwa-grid-cols: 2;
  }
  .rwa-grid--cols-split {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .rwa-grid--cols-split {
    row-gap: var(--space-4);
  }
}
@media (max-width: 640px) {
  .rwa-grid {
    --rwa-grid-cols: 1;
  }
}

/* Stack */
.rwa-stack {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwa-stack--gap-2 { gap: var(--space-2); }
.rwa-stack--gap-3 { gap: var(--space-3); }
.rwa-stack--gap-4 { gap: var(--space-4); }
.rwa-stack--gap-6 { gap: var(--space-6); }
.rwa-stack--gap-8 { gap: var(--space-8); }
.rwa-stack--gap-12 { gap: var(--space-12); }
.rwa-stack--gap-16 { gap: var(--space-16); }
.rwa-stack--align-stretch { align-items: stretch; }
.rwa-stack--align-start { align-items: flex-start; }
/* Narrower columns keep the page's left edge, where every section rule starts. */
.rwa-stack--width-md { max-width: var(--container-md); }
.rwa-stack--width-text { max-width: 720px; }
/* A SectionHeader inside a Stack takes the Stack's gap, not its own bottom margin. */
.rwa-stack > .rwa-section-header {
  margin-bottom: 0;
}

/* Card */
.rwa-card {
  position: relative;
  border-radius: var(--radius-lg);
  color: var(--ink);
}
.rwa-card--raised {
  background: var(--paper-raised);
  border: 1px solid var(--line);
}
.rwa-card--outline {
  background: transparent;
  border: 1px solid var(--line);
}
.rwa-card--sunken {
  background: var(--paper-sunken);
  border: 1px solid transparent;
}
.rwa-card--pad-sm {
  padding: var(--space-4);
}
.rwa-card--pad-md {
  padding: var(--space-6);
}
.rwa-card--pad-lg {
  padding: var(--space-8);
}
.rwa-card--interactive {
  transition: border-color 160ms ease;
}
.rwa-card--interactive:hover {
  border-color: var(--line-strong);
}
.rwa-card--interactive:focus-within {
  box-shadow: var(--focus-ring);
}
@media (max-width: 640px) {
  .rwa-card--pad-lg {
    padding: var(--space-6);
  }
}

/* SectionHeader */
.rwa-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
/* The section rule, B's one motif */
.rwa-section-header--rule {
  padding-top: var(--space-6);
  border-top: 1px solid var(--ink);
}
.rwa-section-header__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
}
.rwa-section-header__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rwa-section-header__title {
  font: var(--type-display-md);
  letter-spacing: var(--tracking-display-md);
  color: var(--ink);
  text-wrap: balance;
}
.rwa-section-header__note {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-section-header__description {
  font: var(--type-body-lg);
  color: var(--ink-muted);
  text-wrap: pretty;
}
.rwa-section-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: none;
}
.rwa-section-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rwa-section-header--center .rwa-section-header__text {
  align-items: center;
}
@media (max-width: 720px) {
  .rwa-section-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-8);
  }
  .rwa-section-header--center {
    align-items: center;
  }
  .rwa-section-header__title {
    font: var(--type-display-sm);
    letter-spacing: var(--tracking-display-sm);
  }
  .rwa-section-header__description {
    font: var(--type-body);
  }
}

/* FeatureCard */
.rwa-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  list-style: none;
}
.rwa-feature__icon {
  display: inline-flex;
  color: var(--brand);
}
.rwa-feature__title {
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading-md);
  color: var(--ink);
}
.rwa-feature__body {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-feature__body > * + * {
  margin-top: var(--space-2);
}
.rwa-feature__link {
  color: inherit;
  text-decoration: none;
}
.rwa-feature__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.rwa-feature__link:focus-visible {
  box-shadow: none;
}
.rwa-feature--link:focus-within {
  box-shadow: var(--focus-ring);
}
.rwa-feature__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-2);
  font: var(--type-label);
  color: var(--brand);
}
.rwa-feature--link {
  transition: border-color 160ms ease;
}
.rwa-feature--link:hover {
  border-color: var(--line-strong);
}
.rwa-feature--link:hover .rwa-feature__more .rwa-icon {
  transform: translateX(2px);
}
.rwa-feature__more .rwa-icon {
  transition: transform 160ms ease;
}

/* CheckList */
.rwa-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwa-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--ink);
}
.rwa-checklist--md .rwa-checklist__item {
  font: var(--type-body);
}
.rwa-checklist--sm .rwa-checklist__item {
  font: var(--type-body-sm);
  gap: 10px;
}
.rwa-checklist--sm {
  gap: 10px;
}
.rwa-checklist__icon {
  margin-top: 3px;
}
.rwa-checklist--sm .rwa-checklist__icon {
  margin-top: 2px;
}
.rwa-checklist--verified .rwa-checklist__icon {
  color: var(--verified);
}
.rwa-checklist--brand .rwa-checklist__icon {
  color: var(--brand);
}

/* Steps */
.rwa-steps {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each step opens with the section rule: 1px ink, then the numeral */
.rwa-steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink);
}
.rwa-steps__marker {
  font: var(--type-quote);
  letter-spacing: var(--tracking-quote);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}
.rwa-steps__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rwa-steps__title {
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading-md);
  color: var(--ink);
}
.rwa-steps__description {
  font: var(--type-body);
  color: var(--ink);
}
.rwa-steps__meta {
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--ink-muted);
}

/* Horizontal: steps side by side, each under its own rule; the count class sets the columns. */
.rwa-steps--horizontal.rwa-steps--n1 { grid-template-columns: minmax(0, 1fr); }
.rwa-steps--horizontal.rwa-steps--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rwa-steps--horizontal.rwa-steps--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rwa-steps--horizontal.rwa-steps--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rwa-steps--horizontal.rwa-steps--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rwa-steps--horizontal.rwa-steps--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Unnumbered: the same ink-ruled columns, no numeral. */
.rwa-steps:not(ol) .rwa-steps__item {
  gap: var(--space-2);
}

@media (max-width: 960px) {
  .rwa-steps--horizontal.rwa-steps--n3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .rwa-steps--horizontal:is(.rwa-steps--n4, .rwa-steps--n5, .rwa-steps--n6) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  /* :is() lifts this to the count classes' specificity, so every count stacks. */
  .rwa-steps--horizontal:is([class*='rwa-steps--n']) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* RecordCard */
.rwa-record {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  overflow: hidden;
}
.rwa-record__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-4);
}
.rwa-record__name {
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading-md);
  color: var(--ink);
}
.rwa-record__subtitle {
  font: var(--type-body-sm);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rwa-record__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0 var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.rwa-record__field {
  min-width: 0;
}
.rwa-record__label {
  font: var(--type-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--ink-muted);
}
.rwa-record__value {
  margin: 2px 0 0;
  font: var(--type-body-sm);
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rwa-record__channels {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 var(--space-6);
  list-style: none;
  border-top: 1px solid var(--line);
}
.rwa-record__channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 0;
}
.rwa-record__channel + .rwa-record__channel {
  border-top: 1px solid var(--line);
}
.rwa-record__channel-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rwa-record__channel-name {
  font: var(--type-body-sm);
  font-weight: 600;
  color: var(--ink);
}
.rwa-record__channel-detail {
  font: var(--type-caption);
  color: var(--ink-muted);
}
.rwa-record__footer {
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--line);
  font: var(--type-caption);
  color: var(--ink-muted);
}
@media (max-width: 420px) {
  .rwa-record__fields {
    grid-template-columns: 1fr;
  }
}

/* PricingCard */
.rwa-pricing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
  color: var(--ink);
  list-style: none;
}
.rwa-pricing--selected {
  border: 2px solid var(--ink);
  padding: calc(var(--space-8) - 1px);
}
.rwa-pricing__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rwa-pricing__name {
  font: var(--type-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--ink);
}
.rwa-pricing__description {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--space-2);
}
.rwa-pricing__amount {
  font: var(--type-display-sm);
  letter-spacing: var(--tracking-display-sm);
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.rwa-pricing__period {
  font: var(--type-body);
  color: var(--ink-muted);
}
.rwa-pricing__note {
  margin-top: calc(-1 * var(--space-2));
  font: var(--type-caption);
  color: var(--ink-muted);
}
.rwa-pricing__action {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2);
}
.rwa-pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.rwa-pricing__features-label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  .rwa-pricing {
    padding: var(--space-6);
  }
  .rwa-pricing--selected {
    padding: calc(var(--space-6) - 1px);
  }
}

/* PriceTable */
.rwa-pricetable {
  color: var(--ink);
}
.rwa-pricetable__table {
  width: 100%;
  border-collapse: collapse;
}
.rwa-pricetable__caption {
  caption-side: top;
  padding-bottom: var(--space-3);
  font: var(--type-body-sm);
  color: var(--ink-muted);
  text-align: left;
}
.rwa-pricetable__table th,
.rwa-pricetable__table td {
  padding: 22px var(--space-4);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.rwa-pricetable__table :is(th, td):first-child {
  padding-left: 0;
}
.rwa-pricetable__table thead th {
  padding-top: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.rwa-pricetable__table tbody tr + tr > * {
  border-top: 1px solid var(--line);
}
.rwa-pricetable__table tbody tr:last-child > * {
  border-bottom: 1px solid var(--ink);
}
.rwa-pricetable__level-header {
  width: 46%;
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
}
.rwa-pricetable__size {
  display: block;
  font: var(--type-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}
.rwa-pricetable__size-key {
  display: block;
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-pricetable__level-name {
  display: block;
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading-md);
}
.rwa-pricetable__level-summary {
  display: block;
  font: var(--type-body);
}
.rwa-pricetable__level-detail {
  display: block;
  margin-top: 6px;
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
/* The foot: one muted note group, the action beside it; it wraps below on phones. */
.rwa-pricetable__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6) var(--space-12);
  margin-top: var(--space-6);
}
.rwa-pricetable__notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: var(--measure);
}
.rwa-pricetable__note {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-pricetable__price {
  font: var(--type-display-sm);
  letter-spacing: var(--tracking-display-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Stacked, below 720px: the size key once, then each level under a 1px ink rule. */
.rwa-pricetable__stacked {
  display: none;
}
.rwa-pricetable__stacked dl {
  margin: 0;
}
.rwa-pricetable__stacked dd {
  margin: 0;
}
.rwa-pricetable__key {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ink);
}
.rwa-pricetable__key-note {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
}
.rwa-pricetable__key :is(dt, dd) {
  display: inline;
}
.rwa-pricetable__key dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.rwa-pricetable__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 20px 0;
  border-top: 1px solid var(--ink);
}
.rwa-pricetable__block:last-child {
  border-bottom: 1px solid var(--ink);
}
.rwa-pricetable__block .rwa-pricetable__level-detail {
  margin-top: 0;
}
.rwa-pricetable__list {
  margin-top: var(--space-3);
}
.rwa-pricetable__list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.rwa-pricetable__list dt {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
}

@media (max-width: 720px) {
  .rwa-pricetable__wide,
  .rwa-pricetable__note--wide {
    display: none;
  }
  .rwa-pricetable__stacked {
    display: block;
  }
}

/* DefinitionRows */
.rwa-defrows {
  margin: 0;
  border-top: 1px solid var(--line);
}
.rwa-defrows--ink {
  border-top-color: var(--ink);
}
.rwa-defrows__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-1) var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.rwa-defrows__term {
  font: var(--type-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--ink);
}
.rwa-defrows__description {
  margin: 0;
  font: var(--type-body);
  color: var(--ink);
}
@media (max-width: 720px) {
  .rwa-defrows__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* PersonCard */
.rwa-person {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-16);
  align-items: start;
  color: var(--ink);
}
.rwa-person__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 360px;
  margin: 0;
}
/* The portrait: 4:5 in a 1px line frame, no radius, no shadow. */
.rwa-person__portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-sunken);
}
.rwa-person__portrait > picture {
  display: block;
  height: 100%;
}
.rwa-person__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rwa-person__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rwa-person__name {
  font: var(--type-display-sm);
  letter-spacing: var(--tracking-display-sm);
}
.rwa-person__role {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-person__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
.rwa-person__note {
  max-width: 36em;
  font: var(--type-quote);
  letter-spacing: var(--tracking-quote);
}
.rwa-person__standards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.rwa-person__standards-label {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rwa-person__standards-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rwa-person__standards-list > li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink);
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading-md);
}
@media (max-width: 960px) {
  .rwa-person {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* Accordion */
.rwa-accordion {
  border-top: 1px solid var(--ink);
}
.rwa-accordion__item {
  border-bottom: 1px solid var(--line);
}
.rwa-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-6) 0;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}
.rwa-accordion__trigger::-webkit-details-marker {
  display: none;
}
.rwa-accordion__title {
  margin: 0;
  font: var(--type-heading-md);
  letter-spacing: var(--tracking-heading-md);
  text-align: left;
}
.rwa-accordion__trigger:hover .rwa-accordion__title {
  color: var(--brand);
}
.rwa-accordion__trigger:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
/* A bare chevron in ink: no tile, no fill (decisions #48). It turns over on [open]; under reduced motion it turns
   without animating, so the open state keeps its cue. */
.rwa-accordion__icon {
  flex: none;
  color: var(--ink);
  transition: transform 140ms ease;
}
.rwa-accordion__item[open] > .rwa-accordion__trigger .rwa-accordion__icon {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .rwa-accordion__icon {
    transition: none;
  }
}
.rwa-accordion__content {
  max-width: var(--measure);
  padding: 0 calc(20px + var(--space-4)) var(--space-6) 0;
  font: var(--type-body);
  color: var(--ink);
}
.rwa-accordion__content > * + * {
  margin-top: var(--space-3);
}
@media (max-width: 640px) {
  .rwa-accordion__trigger {
    padding: var(--space-4) 0;
  }
  .rwa-accordion__title {
    font: var(--type-heading-sm);
    letter-spacing: var(--tracking-heading-sm);
  }
  .rwa-accordion__content {
    padding-right: 0;
  }
}

/* Testimonial */
.rwa-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  color: var(--ink);
}
.rwa-testimonial--card {
  padding: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-raised);
}
.rwa-testimonial__quote {
  margin: 0;
  font: var(--type-quote);
  letter-spacing: var(--tracking-quote);
  color: var(--ink);
}
.rwa-testimonial--plain .rwa-testimonial__quote {
  font: var(--type-display-sm);
  letter-spacing: var(--tracking-display-sm);
  max-width: 30ch;
}
.rwa-testimonial__quote p::before {
  content: '\201C';
}
.rwa-testimonial__quote p::after {
  content: '\201D';
}
.rwa-testimonial__caption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.rwa-testimonial__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
}
.rwa-testimonial__avatar--initials {
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font: var(--type-label);
}
.rwa-testimonial__who {
  display: flex;
  flex-direction: column;
}
.rwa-testimonial__name {
  font: var(--type-heading-sm);
  color: var(--ink);
}
.rwa-testimonial__role {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
@media (max-width: 640px) {
  .rwa-testimonial--card {
    padding: var(--space-6);
  }
}

/* Navbar */
.rwa-navbar {
  position: relative;
  z-index: 50;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.rwa-navbar--sticky {
  position: sticky;
  top: 0;
}
.rwa-navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  max-width: calc(var(--container-lg) + 2 * var(--space-6));
  height: 72px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.rwa-navbar__brand {
  display: inline-flex;
  flex: none;
  border-radius: var(--radius-sm);
}
.rwa-navbar__nav--wide {
  flex: 1;
}
.rwa-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 44px tall: every control meets the target size (decisions #49). */
.rwa-navbar__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
}
.rwa-navbar__link:hover {
  background: var(--paper-sunken);
  text-decoration: none;
}
.rwa-navbar__link[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--brand);
  border-radius: 0;
}
.rwa-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* The second row: the links below 880px, plain, with no menu. */
.rwa-navbar__nav--narrow {
  display: none;
  border-top: 1px solid var(--line);
}
.rwa-navbar__row {
  flex-wrap: wrap;
  width: 100%;
  max-width: calc(var(--container-lg) + 2 * var(--space-6));
  margin-inline: auto;
  /* The first link's text lines up with the logo: 4px here plus the link's own 12px. */
  padding-inline: var(--space-1);
}

@media (max-width: 880px) {
  /* Two rows pinned would take 110px of a phone; below 880px the header scrolls with the page. */
  .rwa-navbar--sticky {
    position: relative;
  }
  .rwa-navbar__nav--wide {
    display: none;
  }
  .rwa-navbar__nav--narrow {
    display: block;
  }
  .rwa-navbar__inner {
    gap: var(--space-4);
    height: 64px;
    padding-inline: var(--space-4);
  }
}
@media (max-width: 720px) {
  .rwa-navbar__brand svg {
    height: 24px;
    width: auto;
  }
}

/* Hero */
.rwa-hero {
  background: var(--paper);
  color: var(--ink);
  padding-block: var(--space-16) var(--space-8);
}
.rwa-hero__inner {
  display: grid;
  align-items: start;
  gap: var(--space-12);
  width: 100%;
  max-width: calc(var(--container-lg) + 2 * var(--space-6));
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.rwa-hero--split .rwa-hero__inner {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (min-width: 961px) {
  .rwa-hero--split .rwa-hero__inner {
    gap: var(--space-16);
  }
}
.rwa-hero--centered .rwa-hero__copy {
  align-items: center;
  margin-inline: auto;
  max-width: 820px;
  text-align: center;
}
.rwa-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.rwa-hero__eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rwa-hero__title {
  font: var(--type-display-xl);
  letter-spacing: var(--tracking-display-xl);
  color: var(--ink);
  text-wrap: balance;
}
.rwa-hero__title em {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--seal);
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}
.rwa-hero__lead {
  max-width: 34em;
  font: var(--type-body-lg);
  color: var(--ink-muted);
  text-wrap: pretty;
}
.rwa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-2);
}
.rwa-hero--centered .rwa-hero__actions {
  justify-content: center;
}
.rwa-hero__note {
  max-width: 36em;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font: var(--type-body-sm);
  color: var(--ink);
}
/* The footnotes sit close under the actions, as one group with them. */
.rwa-hero__footnotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: calc(var(--space-3) - var(--space-6));
}
.rwa-hero--centered .rwa-hero__footnotes {
  align-items: center;
}
.rwa-hero__footnote {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}

/* The aside (the sample sheet) sits plainly in its column. */
.rwa-hero__aside {
  min-width: 0;
}

@media (max-width: 960px) {
  .rwa-hero--split .rwa-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .rwa-hero {
    padding-block: var(--space-12) var(--space-4);
  }
  .rwa-hero__inner {
    padding-inline: var(--space-4);
    gap: var(--space-8);
  }
  .rwa-hero__title {
    font: var(--type-display-lg);
    letter-spacing: var(--tracking-display-lg);
  }
  .rwa-hero__lead {
    font: var(--type-body);
  }
}

/* CTABanner */
.rwa-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--surface-inverse);
  color: var(--ink);
  overflow: hidden;
}
.rwa-cta__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 640px;
}
.rwa-cta__title {
  font: var(--type-display-lg);
  letter-spacing: var(--tracking-display-lg);
  color: var(--ink);
  text-wrap: balance;
}
.rwa-cta__description {
  font: var(--type-body-lg);
  color: var(--ink-muted);
}
.rwa-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-4);
}
.rwa-cta__footnote {
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
/* bleed: full width, square, the copy on the page column's edge (the Container's content edge). */
.rwa-cta--bleed {
  padding: var(--space-24) max(var(--space-6), calc((100% - var(--container-lg)) / 2));
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 880px) {
  .rwa-cta {
    padding: var(--space-12) var(--space-8);
  }
}
@media (max-width: 640px) {
  .rwa-cta {
    padding: var(--space-8) var(--space-6);
  }
  .rwa-cta--bleed {
    padding: var(--space-16) var(--space-4);
  }
  .rwa-cta__title {
    font: var(--type-display-sm);
    letter-spacing: var(--tracking-display-sm);
  }
  .rwa-cta__description {
    font: var(--type-body);
  }
}

/* Footer */
.rwa-footer {
  background: var(--surface-inverse);
  color: var(--ink);
}
.rwa-footer__inner {
  width: 100%;
  max-width: calc(var(--container-lg) + 2 * var(--space-6));
  margin-inline: auto;
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.rwa-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}
.rwa-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.rwa-footer__tagline {
  max-width: 28ch;
  font: var(--type-body-sm);
  color: var(--ink-muted);
}
.rwa-footer__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-8);
}
.rwa-footer__group-title {
  margin-bottom: var(--space-2);
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rwa-footer__links,
.rwa-footer__bottom-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each link is a 44px target (decisions #49); the rows' height is their spacing. */
.rwa-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: var(--type-body-sm);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.rwa-footer__link:hover {
  color: var(--brand);
  text-decoration: underline;
}
.rwa-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.rwa-footer__legal {
  font: var(--type-caption);
  color: var(--ink-muted);
}
.rwa-footer__bottom-links {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.rwa-footer__bottom-links .rwa-footer__link {
  font: var(--type-caption);
  color: var(--ink-muted);
}
@media (max-width: 720px) {
  .rwa-footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .rwa-footer__inner {
    padding: var(--space-12) var(--space-4) var(--space-6);
  }
}