/* ---------------------------------------------------------------------------
   HaulTech Pros — public site stylesheet
   Shared by the marketing pages, the signup/sign-in forms, the account portal
   and the legal pages.

   Palette is taken verbatim from the product's own tokens (FrontEnd
   src/app/index.css) so the site and the app read as one thing.

   No gradients anywhere, by design: flat fills, 1px rules and honest blocks of
   colour. The brand mark is angular and high-contrast, and gradients muddy it.
--------------------------------------------------------------------------- */

:root {
  /* Brand */
  --ink: #1e2432;
  --ink-raised: #2a3242;
  --ink-line: #3a4356;
  --amber: #ffc100;
  --amber-strong: #e0aa00;
  --blue: #2573fa;
  --blue-strong: #1a5bb5;

  /* Surfaces */
  --paper: #f8fafb;
  --card: #ffffff;
  --neutral: #f1f1f1;
  --line: #e3e8ef;

  /* Text */
  --text: #1e2432;
  --text-muted: #5b6577;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #aeb7c7;

  /* Feedback */
  --ok: #17794c;
  --ok-bg: #e7f5ee;
  --warn: #8a6100;
  --warn-bg: #fff5d6;
  --err: #b3261e;
  --err-bg: #fdecea;

  --radius: 10px;
  --radius-sm: 6px;
  --shell: 1160px;
  --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue-strong);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
}
h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.4em;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--neutral);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* --- Layout ------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.shell-narrow {
  max-width: 780px;
}

.section {
  padding: 84px 0;
}

.section-tight {
  padding: 56px 0;
}

.section-dark {
  background: var(--ink);
  color: var(--text-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--text-on-dark);
}

.section-dark p {
  color: var(--text-on-dark-muted);
}

.section-neutral {
  background: var(--neutral);
}

.section-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-strong);
  margin-bottom: 12px;
}

.section-dark .eyebrow {
  color: var(--amber);
}

/* A second, quieter line under an eyebrow. Same family and uppercase treatment so the
   pair reads as one unit, but stepped down on every axis — size, weight and tracking —
   so it supports the line above instead of competing with it. */
.eyebrow-sub {
  display: block;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
  max-width: 46em;
}

.hero .eyebrow-sub,
.section-dark .eyebrow-sub {
  color: var(--text-on-dark-muted);
}

/* The pair carries the spacing, not the eyebrow on its own. Progressive: without
   :has() support the gap is simply the eyebrow's usual 12px, which still reads fine. */
.eyebrow:has(+ .eyebrow-sub) {
  margin-bottom: 4px;
}

.lead {
  font-size: 1.12rem;
  color: var(--text-muted);
}

.section-dark .lead {
  color: var(--text-on-dark-muted);
}

.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

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

.btn-primary {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}

.btn-primary:hover:not([disabled]) {
  background: var(--amber-strong);
  border-color: var(--amber-strong);
}

.btn-secondary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.btn-secondary:hover:not([disabled]) {
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-outline:hover:not([disabled]) {
  background: var(--ink);
  color: #fff;
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-outline-light:hover:not([disabled]) {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.btn-quiet {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--line);
  font-weight: 600;
}

.btn-quiet:hover:not([disabled]) {
  border-color: var(--text-muted);
  color: var(--text);
}

.btn-danger {
  background: transparent;
  color: var(--err);
  border-color: var(--err);
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.site-header {
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  height: 26px;
  width: auto;
}

/* Holds the links and the sign-in/create-account buttons. It has to declare its
   own row here: left to the default `display: block` its two children stack, and
   the buttons drop onto a second line under the links. The mobile breakpoint
   below overrides this back to a stacked panel. */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 28px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-links a {
  color: var(--text-on-dark-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: #fff;
  text-decoration: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-actions .btn {
  padding: 9px 16px;
  font-size: 0.9rem;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  color: #fff;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    padding: 18px 24px 24px;
  }

  .nav-menu.open {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-actions .btn {
    width: 100%;
    padding: 12px 16px;
  }
}

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

.hero {
  position: relative;
  background-color: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: 92px 0 84px;
}

/* The brand tile pattern, dimmed. A pseudo-element rather than an overlay so
   the flat navy underneath stays a flat navy — no gradient scrim. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../haultech-texture.webp");
  background-size: 760px auto;
  background-repeat: repeat;
  opacity: 0.16;
  pointer-events: none;
}

.hero .shell {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
}

@media (max-width: 940px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.hero h1 {
  margin-bottom: 20px;
}

.hero h1 .accent {
  color: var(--amber);
}

.hero-sub {
  font-size: 1.16rem;
  color: var(--text-on-dark-muted);
  max-width: 34em;
  margin-bottom: 28px;
}

.hero-note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text-on-dark-muted);
}

/* --- Cards -------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

.card h3 {
  margin-bottom: 8px;
}

.card p:last-child {
  margin-bottom: 0;
}

.card-dark {
  background: var(--ink-raised);
  border-color: var(--ink-line);
  color: var(--text-on-dark);
}

.card-dark p {
  color: var(--text-on-dark-muted);
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

/* A module card: a coloured accent bar on top instead of an icon.
 *
 * The bar is an absolutely-positioned strip clipped by the card's own radius,
 * not a `border-top`. A thick top border gets mitred into the 1px side borders
 * at each rounded corner, so the accent colour hooks down around the curve and
 * bleeds into the grey — visible and ugly at 3px. Clipping a plain rectangle
 * instead keeps the ends clean.
 *
 * This mirrors the in-app notification card (NotificationItem.tsx), which does
 * the same thing on its left edge:
 *   relative rounded-lg overflow-hidden before:absolute before:inset-y-0 before:w-1
 */
.module {
  position: relative;
  /* Clips the accent bar to the card's rounded corners. Required, not cosmetic:
     the bar is only 6px tall, so it can render at most ~3px of corner radius of
     its own, while the card curves at 10px. Left unclipped it stays full width
     through the corner the card has already curved away from, and overhangs. */
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Top padding carries the bar's height so the heading sits where it did. */
  padding: 28px 22px 22px;
}

.module::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--amber);
}

.module.blue::before {
  background: var(--blue);
}

.module.ink::before {
  background: var(--ink);
}

.module h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.module p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

/* --- Steps -------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin: 0;
}

.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--amber);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 14px;
}

.steps h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.steps p {
  font-size: 0.94rem;
  color: var(--text-muted);
  margin: 0;
}

/* --- Plans -------------------------------------------------------------- */

.plans {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px;
}

.plan.featured {
  border: 2px solid var(--ink);
}

.plan-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--amber);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.plan h3 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.plan .plan-for {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.plan .plan-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 0.94rem;
  flex-grow: 1;
}

.plan ul li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.plan ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--amber);
}

.plan ul li.plus {
  color: var(--text);
  font-weight: 600;
}

.plan ul li.plus::before {
  background: var(--blue);
}

/* --- Facts / stats ------------------------------------------------------ */

.facts {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.fact {
  background: var(--ink);
  padding: 24px 22px;
}

.fact strong {
  display: block;
  font-size: 1.5rem;
  color: var(--amber);
  line-height: 1.2;
  margin-bottom: 4px;
}

.fact span {
  font-size: 0.92rem;
  color: var(--text-on-dark-muted);
}

/* --- Checklist ---------------------------------------------------------- */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 16px;
  height: 9px;
  border-left: 3px solid var(--amber);
  border-bottom: 3px solid var(--amber);
  transform: rotate(-45deg);
}

/* --- FAQ ---------------------------------------------------------------- */

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 0 20px;
}

.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--blue-strong);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details > p {
  margin: 0 0 18px;
  color: var(--text-muted);
}

/* --- Forms -------------------------------------------------------------- */

.form-shell {
  max-width: 520px;
  margin: 0 auto;
}

.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.field .hint {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.input,
select.input,
textarea.input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 115, 250, 0.16);
}

.input[aria-invalid="true"] {
  border-color: var(--err);
}

textarea.input {
  min-height: 96px;
  resize: vertical;
}

.field-error {
  display: block;
  font-size: 0.85rem;
  color: var(--err);
  margin-top: 6px;
}

.field-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.input-affix {
  display: flex;
  align-items: stretch;
}

.input-affix .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-affix .affix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--neutral);
  border: 1px solid var(--line);
  border-left: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  font-size: 0.94rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
}

.checkbox input {
  margin-top: 0.28em;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--blue);
}

.form-foot {
  margin-top: 20px;
  font-size: 0.93rem;
  color: var(--text-muted);
  text-align: center;
}

/* Chosen-logo preview on the workspace form. */
.logo-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--neutral);
}

.logo-preview img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}

/* Module picker used on the workspace form. */
.picker {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.picker label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
}

.picker label:has(input:checked) {
  border-color: var(--blue);
  background: #f4f8ff;
}

.picker input {
  margin-top: 0.2em;
  accent-color: var(--blue);
  flex-shrink: 0;
}

/* --- Alerts / status ---------------------------------------------------- */

.alert {
  border: 1px solid var(--line);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  background: var(--card);
}

.alert p:last-child {
  margin-bottom: 0;
}

.alert-error {
  border-left-color: var(--err);
  background: var(--err-bg);
  color: #7a1a15;
}

.alert-ok {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: #0f5233;
}

.alert-info {
  border-left-color: var(--blue);
  background: #eef4ff;
  color: #123a78;
}

.alert-warn {
  border-left-color: var(--amber-strong);
  background: var(--warn-bg);
  color: var(--warn);
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-pending {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge-granted {
  background: var(--ok-bg);
  color: var(--ok);
}
.badge-active {
  background: #e7f0ff;
  color: var(--blue-strong);
}
.badge-declined {
  background: var(--err-bg);
  color: var(--err);
}
.badge-muted {
  background: var(--neutral);
  color: var(--text-muted);
}

/* --- Provisioning progress --------------------------------------------- */

.progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.progress-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}

.progress-steps li:last-child {
  border-bottom: 0;
}

.progress-steps .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
}

.progress-steps li[data-state="RUNNING"] .dot {
  border-color: var(--blue);
  background: #fff;
  animation: pulse 1.2s ease-in-out infinite;
}

/* Step states come from ProvisioningStepDTO: PENDING / RUNNING / DONE / FAILED. */
.progress-steps li[data-state="DONE"] .dot {
  border-color: var(--ok);
  background: var(--ok);
}

.progress-steps li[data-state="FAILED"] .dot {
  border-color: var(--err);
  background: var(--err);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* --- Definition rows ---------------------------------------------------- */

.rows {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.rows div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.rows div:last-child {
  border-bottom: 0;
}

.rows dt {
  color: var(--text-muted);
  margin: 0;
}

.rows dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

/* --- Prose (legal pages) ------------------------------------------------ */

.prose {
  max-width: 760px;
}

.prose h2 {
  font-size: 1.35rem;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
}

.prose h2:first-of-type {
  margin-top: 1em;
}

.prose h3 {
  font-size: 1.05rem;
  margin-top: 1.6em;
}

.prose p,
.prose li {
  color: #333a49;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 0.94rem;
}

.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--neutral);
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.doc-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--line);
}

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

.site-footer {
  background: var(--ink);
  color: var(--text-on-dark-muted);
  padding: 56px 0 28px;
  font-size: 0.94rem;
}

.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ink-line);
}

.footer-grid h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 9px;
  /* The contact column holds an email address long enough to push the page
     sideways on a narrow phone. Let it break rather than overflow. */
  overflow-wrap: anywhere;
}

.footer-grid a {
  color: var(--text-on-dark-muted);
}

.footer-grid a:hover {
  color: #fff;
}

.footer-blurb {
  max-width: 32em;
  margin: 14px 0 0;
  color: var(--text-on-dark-muted);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.88rem;
}

/* --- Utilities ---------------------------------------------------------- */

.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mt-24 {
  margin-top: 24px;
}
.mt-32 {
  margin-top: 32px;
}
.hidden {
  display: none !important;
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: 0.88rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amber);
  color: var(--ink);
  padding: 12px 18px;
  font-weight: 700;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

.spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .section {
    padding: 60px 0;
  }

  .hero {
    padding: 64px 0 60px;
  }

  .form-card {
    padding: 24px 20px;
  }

  .rows div {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .rows dd {
    text-align: left;
  }
}