/* derecs.org. The deRECs app's brand tokens (apps/web/app/globals.css): brand blue #0e3a50,
   gold #ce9718 carrying navy text, never white (white on the gold is 2.6:1). The text is set
   in system fonts. Headings and the wordmark are set in Manrope, as the app sets them (its
   --font-display, next/font with display: swap): the variable latin file, self-hosted. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue: #0e3a50;
  --blue-deep: #082230;
  --navy: #061a25;
  --gold: #ce9718;
  --gold-bright: #e8b52e;
  --ink: #0e2a38;
  --muted: #4f6470;
  --line: #d5dee3;
  --tint: #f1f5f7;
  --paper: #ffffff;
  --error: #b42318;
  --ok: #146c43;
  --radius: 10px;
  --shell: 72rem;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", var(--font-text);
  --gutter: 1rem;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-text);
  overflow-wrap: break-word;
  /* The footer sits at the foot of a short page (the 404 and /thanks/) instead of above a blank band. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

main {
  flex: 1 0 auto;
}

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

a {
  color: var(--blue);
  text-underline-offset: 0.15em;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-width: 48rem;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  color: var(--blue);
  border-radius: 6px;
}

.skip:focus {
  top: 0.5rem;
}

/* On the dark surfaces the ring is the bright gold (7:1 on the blue; blue on white is 11:1). */
.hero-copy :focus-visible,
.short :focus-visible,
.foot :focus-visible {
  outline-color: var(--gold-bright);
}

/* Header */
.bar {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.wordmark span {
  color: var(--blue);
}

.bar-cta {
  color: var(--blue);
  font-weight: 600;
  padding: 0.6rem 0.25rem;
}

/* Hero: the form sits beside the words on a desktop and right under them on a phone. */
.hero {
  background: linear-gradient(160deg, var(--blue-deep), var(--blue));
  color: #fff;
  padding-block: 1.5rem 2.5rem;
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px; /* a true pill */
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.9rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 800;
}

.lede {
  font-size: 1.0625rem;
  color: #e3edf2;
  max-width: 36rem;
}

.chip {
  font-size: 0.875rem;
  color: #f0cd60;
  margin: 0;
}

.panel {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  scroll-margin-top: 1rem;
}

.panel h2 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.panel-lede {
  color: var(--muted);
  margin-bottom: 1rem;
}

/* Form */
.field {
  margin-bottom: 0.9rem;
}

.field-row {
  display: grid;
  gap: 0 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.req,
.opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.875rem;
}

input[type="text"],
input[type="email"],
textarea {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #6f818c; /* 4:1 on white, over the 3:1 a control needs */
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  min-height: 2.75rem;
}

textarea {
  resize: vertical;
  min-height: 5.5rem;
}

input:focus-visible,
textarea:focus-visible {
  border-color: var(--blue);
}

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

.check {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0 0.6rem;
  align-items: start;
}

.check input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--blue);
}

.check label {
  font-weight: 400;
}

.check .error {
  grid-column: 2;
}

.error {
  color: var(--error);
  font-size: 0.875rem;
  margin: 0.3rem 0 0;
}

.alert {
  border: 1px solid var(--error);
  background: #fdf0ef;
  color: var(--error);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  font-size: 0.9375rem;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--gold);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.panel .button {
  width: 100%;
}

.button:hover {
  background: var(--gold-bright);
}

.button[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.button-ghost {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

.button-ghost:hover {
  background: var(--tint);
}

.done {
  scroll-margin-top: 1.5rem;
  border-left: 4px solid var(--ok);
  padding: 0.25rem 0 0.25rem 1rem;
}

.done h3 {
  color: var(--ok);
  font-size: 1.25rem;
}

/* Sections */
.section {
  padding-block: 3rem;
}

.section h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
}

.tint {
  background: var(--tint);
}

.definition {
  font-size: 1.0625rem;
}

.cards {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

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

.card h3,
.steps h3 {
  font-size: 1.125rem;
}

.card p,
.steps p {
  margin: 0;
  color: var(--muted);
}

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 1rem;
}

.steps li {
  counter-increment: step;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px; /* a numbered disc */
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.note {
  color: var(--muted);
  border-left: 3px solid var(--gold);
  padding-left: 0.9rem;
}

/* Legal pages */
.prose {
  max-width: 48rem;
  padding-block: 2.5rem 3rem;
}

.prose h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.prose h2 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
}

.prose ul {
  padding-left: 1.25rem;
}

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

/* Short pages (the 404, /thanks/, the no-script error page): the space between the header and the
   footer is one brand panel, like the home hero, so the footer sits at the foot of the window with
   no blank band at any size. White on the lightest stop of the gradient (#0e3a50) is 12.1:1.
   The page also names its main (.short-main, set by pages.js), so browsers without :has() (Safari
   before 15.4, Firefox before 121) draw the same panel. The two stay separate rules: a browser that
   cannot read :has() drops every rule whose selector list holds it, .short-main and all. */
.short-main {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--blue-deep), var(--blue));
}

main:has(> .short) {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--blue-deep), var(--blue));
}

.short {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* With neither, the section still carries the panel, within the page's measure. */
  background: linear-gradient(160deg, var(--blue-deep), var(--blue));
  color: #fff;
}

.short-main > .short {
  background: none;
}

main:has(> .short) > .short {
  background: none;
}

.short a:not(.button) {
  color: #fff;
}

.short > :last-child {
  margin-bottom: 0;
}

/* Footer */
.foot {
  background: var(--navy);
  color: #c9d6dd;
  padding-block: 2rem;
  font-size: 0.9375rem;
}

.foot a {
  color: #fff;
}

.foot-note {
  max-width: 48rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-bottom: 1rem;
}

.foot-links a {
  display: inline-block;
  min-width: 2.75rem;
  padding-block: 0.65rem; /* 44.8px targets */
  text-align: center;
}

.foot-copy {
  margin: 0;
}

.nowrap {
  white-space: nowrap;
}

@media (min-width: 40rem) {
  :root {
    --gutter: 1.5rem;
  }

  .field-row,
  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .panel {
    padding: 1.75rem;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* Short phones: the hero tightens and drops its lede so the Name field stands above the fold at
   every phone size from 320 to 430 wide and 568 to 932 tall (Design QC, 2026-10-29). */
@media (max-width: 39.99rem) and (max-height: 45rem) {
  .hero {
    padding-block: 1rem 2rem;
  }

  .hero .lede {
    display: none;
  }

  .badge {
    margin-bottom: 0.6rem;
  }
}

@media (min-width: 64rem) {
  .hero {
    padding-block: 3.5rem 4rem;
  }

  .hero-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
  }

  .lede {
    font-size: 1.1875rem;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .section {
    padding-block: 4.5rem;
  }
}