/* campaign.css - the free-check campaign landing page.
   Loads after the shared site sheet.

   FIRST RULE, AND THE REASON FOR IT. The shared sheet defines a display-face token on
   :root and points it at a serif family, and 38 of its own selectors read that token.
   A page cannot escape that by naming the token with a fallback beside it: a var()
   fallback fires only when the token is UNSET, and this one is set, so the fallback is
   dead text and the page paints the serif anyway. The display serif is banned on every
   surface, so this sheet repoints the token itself and every carrier follows it. Same
   ruling, readable floor: body never below 16px, labels never below 13px, and nothing
   in this sheet goes under 0.85rem. */

:root {
  --serif: Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------------ bar */

.fchk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  padding-block: 14px;
  border-bottom: 1px solid #2a2a28;
}

.fchk-bar__brand { font-size: 1.05rem; font-weight: 700; text-decoration: none; }

.fchk-bar__call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.fchk-bar__call:hover, .fchk-bar__call:focus-visible { text-decoration: underline; }

/* ----------------------------------------------------------------- head */

.fchk-head {
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  padding-block: clamp(32px, 5vw, 72px) clamp(26px, 3.5vw, 44px);
}

.fchk-head__h {
  margin: 10px 0 0;
  max-width: 22ch;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
}

.fchk-head__lede {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: #d7d6d1;
  color: var(--gray-1, #d7d6d1);
}

.fchk-head__acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

.fchk-head__fine {
  margin: 18px 0 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

/* ----------------------------------------------------------------- acts */

.fchk-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #f1f0eb;
  border-color: var(--paper, #f1f0eb);
  border-radius: 2px;
  background: transparent;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}

/* Exactly one filled action per view, and on a campaign page it is always the same one. */
.fchk-act--first {
  background: #f1f0eb;
  background: var(--paper, #f1f0eb);
  color: #0a0a0a;
  color: var(--ink, #0a0a0a);
}

.fchk-act:hover, .fchk-act:focus-visible { background: #d7d6d1; background: var(--gray-1, #d7d6d1); color: #0a0a0a; }
.fchk-act:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 3px; }

/* ------------------------------------------------------------- sections */

.fchk-sec {
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  border-top: 1px solid #2a2a28;
}

.fchk-sec--open  { padding-block: 48px 42px; }
.fchk-sec--mid   { padding-block: 40px 34px; }
.fchk-sec--tight { padding-block: 32px 26px; }
.fchk-sec--close { padding-block: 28px 56px; }

.fchk-h {
  margin: 0 0 14px;
  max-width: 24ch;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.fchk-sub {
  margin: 0 0 20px;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.fchk-p {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #d7d6d1;
  color: var(--gray-1, #d7d6d1);
}

.fchk-p strong { color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* ----------------------------------------------------------- the four */

/* A ruled list, not four identical tinted cards in a row. */
.fchk-four { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.fchk-four > li {
  display: grid;
  gap: 6px;
  padding: 18px 0 18px 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
}

@media (min-width: 820px) {
  .fchk-four > li { grid-template-columns: 19rem minmax(0, 1fr); gap: 28px; align-items: baseline; }
}

.fchk-four__k { font-size: 1.05rem; font-weight: 700; color: #f1f0eb; color: var(--paper, #f1f0eb); }

.fchk-four__d {
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

/* --------------------------------------------------------------- not */

.fchk-not { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; max-width: 74ch; }

.fchk-not > li {
  padding-left: 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.fchk-not strong { display: block; margin-bottom: 4px; color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* ------------------------------------------------------------- towns */

.fchk-towns { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; }

.fchk-towns a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-radius: 2px;
}

.fchk-towns a:hover, .fchk-towns a:focus-visible { background: #161616; text-decoration: underline; }
.fchk-towns a:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 2px; }

/* -------------------------------------------------------------- form */

.fchk-form { display: grid; gap: 16px; max-width: 62ch; }

@media (min-width: 700px) {
  .fchk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fchk-field--wide, .fchk-form__act, .fchk-form__fine { grid-column: 1 / -1; }
}

.fchk-field { display: grid; gap: 7px; min-width: 0; }

.fchk-field > span {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.fchk-field input,
.fchk-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  background: #0a0a0a;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-radius: 2px;
}

.fchk-field textarea { min-height: 96px; resize: vertical; }
.fchk-field input::placeholder { color: #7a7a76; color: var(--gray-3, #7a7a76); }
.fchk-field input:focus-visible,
.fchk-field textarea:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 2px; }

.fchk-form__act { margin: 6px 0 0; }

.fchk-form__fine {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #7a7a76;
  color: var(--gray-3, #7a7a76);
}

.fchk-form__fine a { color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* -------------------------------------------------------------- foot */

.fchk-foot {
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  padding-block: 30px 44px;
  border-top: 1px solid #2a2a28;
}

.fchk-foot__brand { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }

.fchk-foot__line {
  margin: 0 0 10px;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.fchk-foot__line a { color: #f1f0eb; color: var(--paper, #f1f0eb); }

.fchk-foot__base { margin: 0; font-size: 0.9rem; color: #7a7a76; color: var(--gray-3, #7a7a76); }

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fchk-act, .fchk-towns a { transition: none; }
}


/* ------------------------------------------------------- the readable floor */

/* His 08-30 ruling puts the label floor at 13px. The shared site sheet paints both of
   these at 12px, and both appear on this page. This sheet loads after it, so these two
   declarations are what actually decide the rendered size. Measured at 375px after the
   change: nothing on the page renders below 13px. */
/* The shared sheet pins .eyebrow with a triple-class hack (.eyebrow.eyebrow.eyebrow)
   at 0.75rem = 12px, which is under his 13px label floor and which a single-class rule
   cannot beat at any load position. This selector out-specifies it. Measured rendered at
   375px after the change, not assumed. */
body.fchk .eyebrow.eyebrow { font-size: 0.85rem; }
body.fchk .disclosure { font-size: 0.85rem; }