/* Restaurant participation flow — /participate, /participate/sign, and
   /participate/welcome share this one stylesheet. Loaded after landing.css
   and leans on it for the canvas, buttons, inputs, stage-card paper scope,
   errors and footer; everything here is either a hero/section rule the
   investors page also needs (deliberately copied rather than pulling
   investors.css in behind it) or belongs to the letter, the signature pad,
   or the campaign cards. */

main {
  /* Wide enough for a three-card row; the form column below is pinned
     narrower so the letter stays a readable measure. */
  max-width: 52rem;
}

.hero-eyebrow {
  margin-bottom: 1.1rem;
}

.subtitle {
  max-width: 34rem;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

a.btn {
  text-decoration: none;
}

.hero-link {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  border-radius: 2px;
  transition:
    color 150ms ease,
    border-color 150ms ease;
}

.hero-link:hover,
.hero-link:focus-visible {
  color: var(--paper);
  border-bottom-color: currentColor;
}

.hero-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* On paper, --paper is the ground: the dark-canvas hover colour above
   would fade the link out instead of strengthening it. */
.stage-card .hero-link:hover,
.stage-card .hero-link:focus-visible {
  color: var(--ink);
}

/* The form and the letter card sit in their own, narrower column than the
   card rows around them. */
.stage {
  max-width: 42rem;
}

/* The welcome page's stage holds one card that only appears for someone
   arriving from a signed approval. With it hidden the hero would sit 6rem
   above the first section — the subtitle's own gap plus the section's —
   which reads as a missing block rather than as breathing room. */
.stage:has(> [hidden]) + .section {
  margin-top: 0;
}

/* ── Sections on the dark canvas ─────────────────────────────────────── */

.section {
  width: 100%;
  margin-top: 3.5rem;
  text-align: left;
}

.section-title {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}

.section-lede {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 38rem;
  margin: -0.4rem 0 1.2rem;
}

.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.card-row--two {
  grid-template-columns: 1fr 1fr;
}

.info-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem;
}

.info-card p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.info-card p + p {
  margin-top: 0.9rem;
}

.proof-line {
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-control);
  background: var(--accent-wash);
}

.info-card .proof-line {
  color: var(--accent-ink);
}

.proof-line a {
  color: inherit;
}

.closing-card .lede {
  margin-bottom: 1.3rem;
}

/* The app-store pills are a stacked column on the dark canvas by default;
   inside a card they read better as a row. */
.badges--row {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: none;
  gap: 0.6rem;
  margin-top: 1rem;
}

.badges--row .badge {
  flex: 1 1 9.5rem;
}

/* ── The form ────────────────────────────────────────────────────────── */

.optional-tag {
  font-weight: 400;
  color: var(--faint);
}

/* landing.css styles text and email inputs; the phone and menu fields are
   the same control and must match them exactly. */
input[type="tel"],
input[type="url"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper-bright);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-control);
}

/* The first numbered heading opens the card, so it carries no divider. */
.form-heading--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

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

.field-grid--two {
  grid-template-columns: 1fr 1fr;
}

.field-grid--address {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Row spacing comes from the grid, not from each label inside it. */
.field-grid .field-label {
  margin-top: 0;
}

.form-heading + .field-grid {
  margin-top: 0.7rem;
}

/* ── The letter ──────────────────────────────────────────────────────── */

.letter {
  margin-top: 1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-control);
  background: var(--paper-bright);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.65;
}

.letter p {
  margin: 0 0 0.9rem;
}

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

.letter-date {
  color: var(--faint);
  /* Filled by sign.js on load; holds its line so the letter does not jump. */
  min-height: 1.4em;
}

.letter-signoff {
  margin-top: 1.3rem;
}

.letter-footnote {
  font-size: 0.75rem;
  color: var(--faint);
  line-height: 1.5;
}

.letter-ack {
  margin-top: 1.1rem;
}

.letter-ack-heading {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.letter-ack p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ── The signature pad ───────────────────────────────────────────────── */

.sig-pad {
  position: relative;
  overflow: hidden;
  border: 1px dashed var(--paper-line);
  border-radius: var(--r-control);
  background: var(--paper-bright);
}

.sig-pad canvas {
  display: block;
  width: 100%;
  /* The logical signature box, so what is drawn maps 1:1 to what is sent. */
  aspect-ratio: 600 / 200;
  /* Without this a drag on a touchscreen scrolls the page instead of
     drawing, and the pointer events never arrive. */
  touch-action: none;
  cursor: crosshair;
}

/* The line you sign on. Sits under the ink and takes no pointer events, so
   it can never eat a stroke. */
.sig-pad::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  height: 1px;
  background: var(--paper-line-soft);
  pointer-events: none;
}

.sig-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 0.9rem;
  pointer-events: none;
}

.sig-pad.is-signed .sig-placeholder {
  display: none;
}

/* Still a text link, but a tappable one: .link-btn's padding: 0 left this at
   roughly 30×15px, under the 24×24 CSS-pixel target floor (WCAG 2.5.8), on
   the one control a signer reaches for with a thumb. The inset is pulled in
   to keep the padded box — and its focus ring — clear of the pad's rounded,
   overflow-hidden edge. */
.sig-clear {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  min-height: 24px;
}

/* The pad is only focused programmatically (tabindex="-1"), which is
   exactly when the signer needs to see where they were sent. */
.sig-pad:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sig-pad[aria-invalid="true"] {
  border-color: var(--error-ink);
  border-style: solid;
}

.signed-by {
  font-size: 0.8rem;
  color: var(--faint);
  margin: 0.9rem 0 0;
}

/* ── The success card ────────────────────────────────────────────────── */

.success-card .eyebrow,
.success-card h2,
.success-card .lede {
  text-align: center;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
}

.success-actions .btn {
  flex: 1 1 12rem;
}

.letter--signed {
  margin-top: 1.4rem;
}

/* The letter moves in from the form, where it was its own paper well; here
   it is part of a bigger one. */
.letter--signed > .letter {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.letter-brand {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0 0 0.9rem;
}

.letter-to {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 1.2rem;
}

.signed-mark {
  margin-top: 1.5rem;
  max-width: 16rem;
}

.signed-ink {
  display: block;
  width: 100%;
  height: auto;
}

.signed-name {
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.85rem;
}

.signed-date {
  font-size: 0.8rem;
  color: var(--faint);
  margin: 0.3rem 0 0;
}

/* ── The welcome page ────────────────────────────────────────────────── */

.letter-card {
  text-align: left;
}

.shot {
  margin: 0 0 0.9rem;
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-control);
  overflow: hidden;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* A QR code only scans off white; a tinted plate behind it kills the
   contrast (design/sticker/README.md). */
.qr-plate {
  display: inline-flex;
  margin: 0 0 0.9rem;
  padding: 0.75rem;
  border: 1px solid var(--paper-line-soft);
  border-radius: var(--r-control);
  background: #ffffff;
}

.qr-plate img {
  display: block;
  width: 160px;
  height: 160px;
}

.card-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.9rem;
  font-size: 0.85rem;
}

.card-links a {
  color: var(--accent-ink);
  text-decoration: none;
  text-underline-offset: 2px;
}

.card-links a:hover,
.card-links a:focus-visible {
  text-decoration: underline;
}

/* ── Responsive + motion ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .card-row,
  .card-row--two,
  .field-grid--two,
  .field-grid--address {
    grid-template-columns: 1fr;
  }

  .hero-ctas,
  .success-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }

  .success-actions .btn {
    flex: none;
  }

  .badges--row .badge {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-link {
    transition: none;
  }
}