@charset "utf-8";

/* ==========================================================================
   E's Army — global stylesheet
   Reproduces the Figma comps in es-army-examples/ (1440px frame, exported @2x).
   All type sizes live in :root so they can be tuned against the comps in one
   place. See AGENTS.md before changing anything here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("../fonts/fira-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* palette — sampled from the comps */
  --cream: #fdfff9;
  --sage: #edf0e7;
  --header: #c4d2ab;
  --footer: #b4bfa0;
  --accent: #6d886d;
  --ink: #1b1b1b;
  --body: #3a3b3a;
  --line: #bbc5a9;
  --card-border: #d3d3d3;
  --input-border: #555555;
  --hero-border: rgba(253, 255, 249, 0.5);

  /* families */
  --display: "Gloock", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* type scale */
  --fs-hero-title: 146px;
  --fs-hero-lead: 26px;
  --fs-h2: 75px;
  --fs-h3: 37px;
  --fs-quote: 55px;
  --fs-quote-cite: 28px;
  --fs-lead: 28px;
  --fs-body: 17px;
  --fs-body-sm: 16px;
  --fs-eyebrow: 25px;
  --fs-nav: 20px;
  --fs-btn: 18px;
  --fs-footer-title: 27px;

  /* metrics */
  --container: 1184px;
  --gutter: 128px;
  --header-h: 119px;
  --section-pad: 158px;
  --col-gap: 40px;
  --radius: 8px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so an in-page jump (the skip link) would otherwise
     land its target underneath it. */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--cream);
  font-size: 16px;
  font-weight: 600;
}

.skip-link:focus {
  top: 16px;
}

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

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Figma text frames hug their ink; CSS line boxes overhang it. Where that
   makes a section a couple of pixels tall, --pad-b trims it back to the comp. */
.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--pad-b, calc(var(--section-pad) + 1px));
}

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

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

/* The three-part rule that opens every section:
   48px accent dash, then two hairlines. */
.rule {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 43px;
}

.rule::before {
  content: "";
  flex: 0 0 48px;
  height: 3px;
  background: var(--accent);
  opacity: 0.62;
}

.rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.rule span {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.rule--tight {
  margin-bottom: 27px;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-title {
  margin-top: 42px;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.187;
  letter-spacing: -0.030em;
}

.section-lead {
  margin-top: 39px;
  /* the statistics comp sets its heads 4px tighter than the other pages */
  max-width: 800px;
  font-size: var(--fs-lead);
  line-height: 1.36;
}

/* The comp places the card row 3.5px outside the container on each side and
   uses fixed 370px columns; reproduced literally. */
.cards {
  margin-top: 110px;
  margin-inline: -3.5px;
  grid-template-columns: repeat(3, 370px);
}

/* The values row does not carry that bleed, and its columns are unequal in the
   comp; reproduced literally. */
.cards--values {
  margin-top: 59px;
  margin-inline: 0;
  grid-template-columns: 402px 392px 390px;
  gap: 0;
}

.cards--values .feature__title {
  margin-top: 22px;
}

.cards--values .feature__text {
  max-width: 360px;
  font-size: 18px;
  line-height: 1.5;
}


.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--col-gap);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--col-gap);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  background: var(--header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 60px;
}

.site-header__logo img {
  display: block;
  width: 119px;
  height: 80px;
  margin-top: 1px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 37px;
}

.site-nav__link {
  color: var(--ink);
  font-size: var(--fs-nav);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  padding-top: 6px;
  padding-bottom: 2px;
}

.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--ink);
}

.site-social {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-left: 3px;
}

.site-social a {
  color: var(--ink);
}

.site-social svg {
  width: 35px;
  height: 35px;
}

.nav-toggle {
  display: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.btn--donate {
  height: 60px;
  padding-inline: 19px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: var(--fs-nav);
}

/* Hero primary: filled sage */
.btn--hero {
  height: 59px;
  padding-inline: 33px;
  background: var(--footer);
  color: var(--ink);
  font-weight: 600;
}

/* Hero secondary: outlined on the photo */
.btn--hero-ghost {
  height: 59px;
  padding-inline: 30px;
  background: transparent;
  border-color: var(--footer);
  color: var(--footer);
  font-weight: 500;
}

/* Card action: outlined on a light section */
.btn--outline {
  height: 61px;
  padding-inline: 24px;
  background: var(--cream);
  border-color: var(--card-border);
  color: var(--ink);
  font-weight: 400;
}

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

.hero {
  position: relative;
  padding: 60px 40px;
  background-color: #0a0a0a;
  /* Scrim + photo. The comp's scrim opacity ramps 0.934 -> 0.601 -> 0.843 and
     the stops are absolute: the 888px home hero and the 410px interior heroes
     use the same px ramp, the short ones simply clip it. Solved off the comps
     by fitting comp = k(y) * photo + (1 - k(y)) * #0A0A0A per row. */
  background-image:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.934) 0,
      rgba(10, 10, 10, 0.601) 514px,
      rgba(10, 10, 10, 0.843) 888px),
    url("../img/hero.jpg");
  background-repeat: no-repeat, no-repeat;
  /* The photo is 2:3 portrait, cover-fitted to the width and anchored 566px
     down its own scaled height -- not centred. */
  background-position: 0 0, center -566px;
  background-size: auto, cover;
}

.hero__frame {
  display: flex;
  align-items: flex-end;
  height: 100%;
  border: 1px solid var(--hero-border);
  padding: 40px;
}

.hero--home {
  height: 888px;
}

.hero--home .hero__frame {
  padding-bottom: 60px;
}

.hero--home .hero__title {
  margin-bottom: 5px;
}

.hero--page {
  height: 410px;
}

.hero--page .hero__frame {
  align-items: center;
}

.hero__title {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: var(--fs-hero-title);
  font-weight: 400;
  line-height: 1.1575;
}

.hero--page .hero__title {
  line-height: 1;
  transform: translateY(-2px);
}

.hero__grid {
  display: grid;
  grid-template-columns: 868px 1fr;
  align-items: end;
  width: 100%;
}

.hero__aside {
  padding-top: 4px;
}

.hero__claims {
  display: flex;
  flex-direction: column;
  gap: 28.5px;
  margin: 0 0 68px;
  color: var(--footer);
  font-size: var(--fs-hero-lead);
  font-weight: 500;
  line-height: 1;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

/* --------------------------------------------------------------------------
   Icon tile
   -------------------------------------------------------------------------- */

/* Figma source SVG: the 68x64 rounded tile and the glyph are one asset. */
.icon-tile {
  display: block;
  width: 68px;
  height: 64px;
}

/* --------------------------------------------------------------------------
   Feature cards (home "Our goal", about "Our values")
   -------------------------------------------------------------------------- */

.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature__title {
  margin-top: 24px;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.feature__text {
  margin-top: 23px;
  max-width: 340px;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.feature__action {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Make a plan (home)
   -------------------------------------------------------------------------- */

.plan__lead {
  margin: 24px 0 0;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.36;
  color: var(--ink);
}

.plan__body {
  margin-top: 23px;
  max-width: 818px;
  font-size: var(--fs-lead);
  line-height: 1.36;
  /* --ink at 85% over --cream, which is what the comp measures. */
  color: #3d3d3c;
}

.plan__body p {
  margin: 0 0 38px;
}

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

.plan__body strong {
  font-weight: 700;
}

.plan-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 49px 0 0;
  padding: 0;
  list-style: none;
}

.plan-step {
  padding: 38px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: var(--cream);
}

.plan-step__num {
  margin: 0;
  font-family: var(--display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.plan-step__title {
  margin: 21px 0 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.plan-step__text {
  margin: 27.5px 0 0;
  font-size: var(--fs-body);
  line-height: 26px;
  color: var(--ink);
}

.plan-net {
  margin-top: 48.5px;
  padding: 44px 40px 45px;
  border-radius: 12px;
  background: var(--ink);
  text-align: center;
}

.plan-net__title {
  margin: 0;
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
}

.plan-net__text {
  margin: 24.5px 0 0;
  font-size: 18px;
  line-height: 1;
  color: rgba(253, 255, 249, 0.85);
}

/* --------------------------------------------------------------------------
   News & events
   -------------------------------------------------------------------------- */

/* This page's Figma frame uses a 1190px container on 125px gutters, 3px wider
   each side than every other page. Measured off the section rule; below the
   comp width the shared gutters take over. */
@media (min-width: 1440px) {
  .page-news {
    --container: 1190px;
    --gutter: 125px;
  }
}

.news-list {
  display: grid;
  gap: 79px;
  margin-top: 42px;
}

.news-item {
  display: grid;
  /* The text frame is 683 wide, not the 688 left over in the container --
     solved from where the comp's lines wrap. */
  grid-template-columns: 424px 683px;
  gap: 78px;
  align-items: start;
}

.news-item__image {
  display: block;
  width: 424px;
  height: 330px;
  object-fit: cover;
  border-radius: 12px;
}

/* This page uses its own greys rather than --ink / --body. */
.news-item__date {
  margin: 6.5px 0 0;
  font-size: 20.4px;
  font-weight: 700;
  line-height: 1;
  color: #555555;
}

.news-item__title {
  margin: 18.5px 0 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: #111111;
}

.news-item__text {
  margin: 15px 0 0;
  font-size: 17.7px;
  line-height: 31px;
  color: #444444;
}

.news-item__text + .news-item__text {
  margin-top: 7px;
}

/* Forever Blue's mark stands in for the event photo on the Cookies entry. The
   slot cover-crops, which is right for photographs and wrong for a logo, so
   this one is contained on the white the artwork was drawn on. Keying that
   white out is not an option: the badge's own interior is white too. */
.news-item__image--logo {
  object-fit: contain;
  background: #ffffff;
}


/* --------------------------------------------------------------------------
   Contact page — no comp exists for this; built from the shared furniture
   -------------------------------------------------------------------------- */

.contact__crisis {
  max-width: 800px;
  margin-top: 34px;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
  background: var(--cream);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-body);
  line-height: 1.6;
}

.contact__crisis strong {
  color: var(--ink);
}

.contact__crisis a {
  color: var(--accent);
  font-weight: 600;
}

.contact-form {
  max-width: 701px;
  margin-top: 48px;
}

.field + .field {
  margin-top: 24px;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink);
}

.field__input {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.45;
  color: var(--body);
}

.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.field__input--area {
  resize: vertical;
  min-height: 160px;
}

.contact-form__submit {
  margin-top: 28px;
}

.contact-form__note {
  position: static;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Pull quote band
   -------------------------------------------------------------------------- */

.quote-band {
  padding-top: 160px;
  padding-bottom: 165px;
  text-align: center;
}

.quote-band--tall {
  padding-top: 149px;
  padding-bottom: 222px;
}

.quote-band__text {
  margin-inline: auto;
  max-width: 1120px;
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--fs-quote);
  font-weight: 400;
  line-height: 1.2;
}

.quote-band__cite {
  display: block;
  margin-top: 44px;
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-quote-cite);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.mission {
  display: grid;
  grid-template-columns: 700px 393px;
  gap: 48px;
  align-items: start;
}

.mission__body .section-lead {
  max-width: none;
}

.mission__body .section-lead ~ p {
  margin-top: 30px;
  font-size: 17.8px;
  line-height: 1.74;
}

.mission__mark {
  align-self: start;
  width: 393px;
  height: auto;
  margin-top: -6px;
}

.memory {
  display: grid;
  grid-template-columns: 1fr 482px;
  gap: 60px;
  align-items: start;
  margin-top: 38px;
}

.memory__body {
  padding-top: 36px;
}

.memory__body .section-lead {
  max-width: none;
}

.memory__body .section-lead + p {
  margin-top: 29px;
  font-size: 17.6px;
  line-height: 1.76;
}

.memory__pledge {
  margin-top: 24px;
  padding: 6px 0 6px 20px;
  border-left: 3px solid var(--accent);
  color: var(--accent);
  font-size: 35.7px;
  font-weight: 600;
  line-height: 1.148;
}

.memory__figure {
  margin: 3px 0 0;
}

.memory__figure img {
  width: 482px;
  height: 564px;
  object-fit: cover;
  border-radius: 12px;
}

.memory__caption {
  margin-top: 19px;
  max-width: 330px;
  font-size: 16.5px;
  line-height: 1.45;
}

.memory__caption strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Resources
   -------------------------------------------------------------------------- */

.hotlines {
  display: grid;
  grid-template-columns: repeat(2, 560px);
  /* Was 313px 390px for a 2x2. OK2SAY was removed at the client's request,
     so the second row holds one card and sizes to it. */
  grid-template-rows: 313px auto;
  gap: 49px 47px;
  margin-top: 48px;
}

.hotline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--cream);
}

.hotline__name {
  color: var(--ink);
  font-family: var(--display);
  font-size: 29px;
  font-weight: 400;
  line-height: 1.2;
}

.hotline__desc {
  margin-top: 23.5px;
  max-width: 450px;
  font-size: 19px;
  line-height: 1.474;
}

.hotline__contacts {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.hotline__contact {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.2;
}

.hotline__contact svg {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.hotline__hours {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.2;
}

.orgs {
  margin-top: 49px;
}

/* Card heights are content-driven in the comp and land on four different
   values; --h reproduces them. */
.org {
  display: grid;
  grid-template-columns: 274px 1fr 180px;
  align-items: center;
  gap: 0;
  height: var(--h, 194px);
  padding-inline: 40px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(27, 27, 27, 0.06);
}

.org--2,
.org--3 {
  --h: 188px;
}

.org--4 {
  --h: 171px;
}

.org + .org {
  margin-top: 40px;
}

.org__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.org__logo img {
  max-height: 112px;
  width: auto;
}

.org__name {
  color: var(--ink);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.org__desc {
  margin-top: 9px;
  max-width: 580px;
  font-size: 17.5px;
  line-height: 1.77;
}

.org__action {
  justify-self: end;
  width: 180px;
  padding-inline: 0;
  font-size: 21px;
}

.coping-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 22px;
  margin-top: 38px;
}

.coping {
  padding: 42px 38px;
  border-radius: 12px;
  background: var(--cream);
  box-shadow: 0 4px 14px rgba(27, 27, 27, 0.06);
}

.coping__title {
  color: var(--accent);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
}

.coping__text {
  margin-top: 12.5px;
  max-width: 296px;
  font-size: 18.25px;
  line-height: 1.223;
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 378px);
  gap: 25px;
  margin-top: 48px;
}

.stat-card {
  padding: 41px 38px;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: var(--cream);
}

.stat-card__value {
  color: var(--accent);
  font-family: var(--display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.stat-card__label {
  margin-top: 20px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
}

/* 2px wider than the padding box, which is what the comp's line breaks need */
.stat-card__text {
  width: 300px;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.53;
}

.callout {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 47px;
  padding: 40px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--cream);
}

.callout .icon-tile {
  flex: 0 0 68px;
}

.callout__title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.callout__text {
  margin-top: 11px;
  font-size: 18px;
  line-height: 1.583;
}

.callout__text strong {
  color: var(--ink);
  font-weight: 700;
}

/* Young-adult panels */
.young-adults {
  display: grid;
  grid-template-columns: 660px 499px;
  grid-template-rows: auto auto;
  gap: 26px 25px;
  margin-top: 48px;
}

.young-adults > :nth-child(3) {
  grid-column: 2;
  grid-row: 1 / 3;
}

.panel {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 35px 40px;
  border-radius: 12px;
  background: var(--sage);
}

.panel--stacked {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 0;
  height: 100%;
}

.panel__value {
  flex: 0 0 auto;
  color: var(--accent);
  font-family: var(--display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

.panel__title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 24.6px;
  font-weight: 400;
  line-height: 1.2;
}

.panel--stacked .panel__title {
  margin-top: 34px;
}

.panel--stacked .panel__text {
  margin-top: 23px;
}

.panel__text {
  margin-top: 5.5px;
  max-width: 419px;
  font-size: 17px;
  line-height: 1.56;
}

/* Comparison table */
.compare {
  width: 100%;
  table-layout: fixed;
  margin-top: 48px;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--cream);
  text-align: left;
}

.compare th,
.compare td {
  padding: 23px 24px;
  vertical-align: middle;
  font-size: 18px;
  line-height: 1.3;
}

.compare col:nth-child(1) {
  width: 305px;
}

.compare col:nth-child(2) {
  width: 428px;
}

.compare thead th {
  padding-block: 22.5px;
  background: var(--accent);
  color: var(--cream);
  font-size: 19.3px;
  font-weight: 600;
}

.compare tbody th {
  color: var(--ink);
  font-weight: 700;
}

.compare tbody tr + tr {
  border-top: 1px solid #e3e5e0;
}

.compare td:not(.compare__plain) {
  color: var(--accent);
  font-weight: 700;
}

.compare .compare__plain {
  color: var(--body);
  font-weight: 400;
}

/* Warning signs */
.signs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 44px;
}

.signs li {
  display: flex;
  align-items: center;
  gap: 21.5px;
  height: 80px;
  padding-inline: 24px;
  border-radius: 10px;
  background: var(--sage);
  font-size: 18px;
}

.signs__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
}

/* Action cards */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 378px);
  gap: 25px;
  margin-top: 44px;
}

.action-card {
  padding: 39px 38px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--cream);
}

.action-card--dark {
  border-color: var(--ink);
  background: var(--ink);
}

/* The comp keeps these titles on one line even where that overruns the card's
   text column; reproduced literally. */
.action-card__title {
  color: var(--accent);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.action-card--dark .action-card__title {
  color: var(--cream);
}

.action-card__text {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.53;
}

.action-card--dark .action-card__text {
  color: var(--sage);
}

.action-card--dark .action-card__text strong {
  color: var(--accent);
  font-weight: 700;
}

/* At-a-glance tiles */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 47px;
}

.glance {
  padding: 34.5px 32px;
  border-radius: 12px;
  background: var(--sage);
}

.glance__value {
  color: var(--accent);
  font-family: var(--display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
}

.glance__text {
  margin-top: 20.5px;
  font-size: 15px;
  line-height: 1.45;
}

/* Sources */
.sources {
  counter-reset: src;
  margin-top: 67px;
  display: flex;
  flex-direction: column;
}

.sources li {
  position: relative;
  overflow-wrap: anywhere;
  padding-left: 18.5px;
  font-size: 13.9px;
  line-height: 2.014;
  counter-increment: src;
}

.sources li::before {
  content: counter(src) ".";
  position: absolute;
  left: 0;
}

.sources a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.site-footer {
  background: var(--footer);
  color: var(--ink);
  padding: 121px 80px 73px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 40px;
  align-items: start;
}

.site-footer__brand img {
  width: 215px;
  height: auto;
}

.site-footer__title {
  margin-top: 82px;
  font-size: var(--fs-footer-title);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.006em;
  text-transform: uppercase;
}

.site-footer__text {
  margin-top: 30px;
  max-width: 700px;
  font-size: 16.7px;
  line-height: 1.55;
}

.signup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 701px;
  max-width: 100%;
  margin-top: 27px;
  padding: 19px 19px 19px 20px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  background: #fff;
}

.signup input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  color: var(--body);
}

.signup input::placeholder {
  color: var(--body);
  opacity: 1;
}

.signup button {
  flex: 0 0 auto;
  height: 44px;
  padding-inline: 20px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: var(--cream);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

.site-footer__meta {
  text-align: right;
  font-size: 13px;
  line-height: 1.9;
  padding-top: 437px;
}

.site-footer__meta p {
  margin: 0;
}

.site-footer__links {
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  margin-top: 18px;
}

.site-footer__dedication {
  margin-top: 29px;
  font-size: 13.5px;
}

.signup__note {
  position: absolute;
  margin: 8px 0 0;
  max-width: 701px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}

.signup__note:empty {
  display: none;
}

.signup__note[data-state="error"] {
  font-weight: 500;
}

.site-footer__rule {
  height: 1px;
  margin-top: 27px;
  background: var(--ink);
  opacity: 0.83;
}

/* --------------------------------------------------------------------------
   Donate tooltip
   -------------------------------------------------------------------------- */

.donate-wrap {
  position: relative;
  display: inline-flex;
  margin-left: 1px;
}

.donate-tip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.donate-tip[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Responsive — our own work; the comps only specify 1440px.
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  :root {
    --gutter: 64px;
    --section-pad: 110px;
    --fs-hero-title: 104px;
    --fs-h2: 56px;
    --fs-quote: 42px;
  }

  .hero__grid {
    grid-template-columns: 1fr 380px;
  }

  .memory {
    grid-template-columns: 1fr 400px;
    gap: 64px;
  }

  .memory__figure img {
    width: 100%;
    height: 470px;
  }

  .news-item {
    grid-template-columns: 360px 1fr;
    gap: 56px;
  }

  .news-item__image {
    width: 100%;
    height: 280px;
  }
}

@media (max-width: 1024px) {
  /* Below the comp width the cover-fitted photo is shorter than 2160px, so the
     comp's absolute -566px anchor would run off its bottom edge. Switch to a
     proportional anchor; only the 1440px case has to match the comps. */
  .hero {
    background-position: 0 0, center 30%;
  }

  :root {
    --gutter: 40px;
    --section-pad: 84px;
    --fs-hero-title: 76px;
    --fs-hero-lead: 22px;
    --fs-h2: 44px;
    --fs-h3: 30px;
    --fs-quote: 34px;
    --fs-quote-cite: 22px;
    --fs-lead: 22px;
    --fs-eyebrow: 18px;
    --fs-nav: 17px;
    --fs-footer-title: 22px;
  }

  .site-header__inner {
    padding-inline: 32px;
  }

  .site-social {
    gap: 22px;
    margin-left: 24px;
  }

  .site-social svg {
    width: 28px;
    height: 28px;
  }

  .btn--donate {
    height: 48px;
    margin-left: 22px;
  }

  .hero--home {
    height: auto;
    min-height: 620px;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .news-item {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .news-item__image {
    height: 260px;
  }

  .news-list {
    gap: 56px;
  }

  .plan-net {
    padding: 32px 24px;
  }


  .hero__claims {
    gap: 20px;
    margin-bottom: 44px;
  }

  .grid-3,
  .cards,
  .mission,
  .memory,
  .org {
    grid-template-columns: 1fr;
  }

  /* These four never stacked anywhere, so they overflowed the viewport at
     every width below the comp -- 1024 and 768 included, not only phones. */
  .hotlines,
  .stat-grid,
  .action-grid,
  .young-adults {
    grid-template-columns: 1fr;
  }

  /* Rows were pinned for the 2x2; in one column they must follow content. */
  .hotlines {
    grid-template-rows: none;
  }

  /* The third panel is explicitly placed in column 2, which in a one-column
     grid conjures an implicit second column and puts it off the screen. */
  .young-adults {
    grid-template-rows: none;
  }

  .young-adults > :nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }

  .cards {
    margin-inline: 0;
  }

  .org {
    gap: 24px;
    text-align: left;
  }

  .org__action {
    justify-self: start;
  }

  .memory__figure img {
    width: 100%;
    height: auto;
  }

  .mission__mark {
    width: 280px;
    justify-self: start;
  }

  .site-footer {
    padding: 84px 40px 48px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .site-footer__meta {
    padding-top: 0;
    text-align: left;
  }

  .site-footer__links {
    justify-content: flex-start;
  }

  .site-footer__title {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  :root {
    scroll-padding-top: 113px;   /* measured: the mobile header's own height */
    /* Solved from ink widths measured off the mobile comps, the same way the
       desktop scale was: tools/calibrate.py. */
    /* The comps disagree: the home page runs a 24px gutter, every other page
       runs 16. Reproduced literally, as the desktop comps were. */
    --gutter: 16px;
    --section-pad: 55px;      /* comp: section rule sits 55px below the edge */
    --fs-eyebrow: 14.5px;
    --fs-body-sm: 15px;       /* "Access crisis resources, hotlines, and" -> 15.05 */
    --fs-hero-title: 45.5px;  /* "You are not" -> 45.49 */
    --fs-hero-lead: 18px;     /* "Thoughts are not always truths." -> 18.01 */
    --fs-h2: 32px;            /* "those with depression" -> 32.06 */
    --fs-h3: 24px;            /* "Mental health support" -> 24.03 */
    --fs-quote: 24px;         /* "The Lord is my strength and" -> 24.02 */
    --fs-quote-cite: 16px;    /* "- Psalm 28:7" -> 16.22 */
    --fs-footer-title: 27px;  /* "HELP US BUILD E'S ARMY." -> 26.92 */
    --fs-btn: 16px;
    --fs-lead: 16px;          /* comp ink ~17 on a 24px line */
    --fs-body: 15px;          /* "professional support services..." -> 15.06 */
  }

  .site-footer {
    padding: 35px 16px 40px;
  }

  /* `1fr` is `minmax(auto, 1fr)`, and the signup's 701px width set the track's
     min-content size -- so the column could not shrink and dragged the whole
     footer past the viewport on every page. This is the +366px. */
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Fixed widths inside cards that now have less room than they assume. */
  .stat-card__text {
    width: auto;
    max-width: 300px;
  }

  /* The comp holds these on one line; there is no room for that on a phone. */
  .action-card__title {
    white-space: normal;
  }

  /* Three columns still fit at tablet widths; on a phone they are shredded
     down to ~180px and overflow anyway. */
  .coping-grid,
  .glance-grid {
    grid-template-columns: 1fr;
  }

  /* Icon beside text: 68px tile + 40px gap + 80px padding leaves ~130px for
     the copy at 320, which its longest word will not fit into. */
  .callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 24px;
  }

  /* A 64px figure beside its text has a min-content width of ~418px, which is
     wider than the phone. Stack the two. */
  .panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px 24px;
  }

  /* The third panel is centre-aligned and spaced with desktop margins (34px
     and 23px), so it reads as a different component from the two above it.
     Left-aligned, on the same 10px/5.5px rhythm as .panel. */
  .panel--stacked {
    align-items: flex-start;
    text-align: left;
    height: auto;
    gap: 0;
  }

  .panel--stacked .panel__title {
    margin-top: 10px;
  }

  .panel--stacked .panel__text {
    margin-top: 5.5px;
  }

  .site-header {
    height: auto;
    /* Open, this element is the nav. Cap it at the viewport and let it scroll
       internally, or the last links sit below the fold unreachable. */
    max-height: 100dvh;
    overflow-y: auto;
  }

  .site-header__inner {
    flex-wrap: wrap;
    padding: 16px 24px;
    /* Row gap: the comp puts the first link's ink 101px down, 33px below the
       logo's wordmark. */
    gap: 23px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  /* Comp: logo ink 80px wide, 24px in from the edge. */
  .site-header__logo img {
    width: 80px;
    height: auto;
  }

  /* The 1024 block puts 40px between the footer's two columns. Stacked, that
     40 lands between the dedication and the meta rule, where the comp wants
     the border to do the spacing instead. */
  .site-footer__inner {
    gap: 0;
  }

  /* Comp: the interior hero is 163px tall, not the 240 this was carrying. */
  .hero--page {
    height: 163px;
  }

  /* Comp: link ink tops sit on a 51px pitch. The box is 6 + 17 + 4 + 3 = 30,
     so the gap carries the remaining 21. */
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    padding-bottom: 12px;
  }

  /* Comp underlines the current page 4px below the text and 3px thick.
     Box is then 6 + 17 + 2 + 3 = 28, and the 23px gap makes the 51px pitch. */
  .site-nav__link {
    padding-bottom: 2px;
    border-bottom-width: 3px;
  }

  /* Both carry indents meant for the horizontal tablet bar; in the stacked
     menu everything lines up on the same 24px edge as the links. */
  .site-social {
    margin-left: 0;
  }

  /* Height and padding from the 1024 block already match the comp; only the
     horizontal-bar indent has to go. */
  .btn--donate {
    margin-left: 0;
  }

  .site-nav[hidden] {
    display: none;
  }

  /* Comp: the frame's border box is x23-351, y107-722, inside an 83px header,
     so the hero's own padding is 24 on every side. */
  .hero {
    padding: 24px;
  }

  .hero__frame {
    padding: 52px 16px 13px;
  }

  .hero__title {
    line-height: 1.143;   /* comp line pitch 52 at 45.5px */
  }

  /* Comp ink pitch is 28 and the line box is 18, so the gap carries 10 --
     not the 28.5 the desktop grid uses. */
  .hero__claims {
    gap: 10px;
    margin-bottom: 68px;
  }

  .hero__actions {
    gap: 14px;
  }

  .btn--hero,
  .btn--hero-ghost {
    height: 50px;
    padding-inline: 24px;
  }

  /* Comp: 61px of air above the quote, 60 below -- not the 160/165 the desktop
     band uses, which was most of this section's 274px overrun. */
  .quote-band {
    padding-top: 59px;
    padding-bottom: 57px;
  }

  .quote-band__text {
    line-height: 1.333;   /* comp pitch 32 at 24px */
  }

  .quote-band__cite {
    margin-top: 14px;
  }

  /* Section furniture. Every one of these was carrying a desktop value that
     the comp halves or better -- together they were most of this page's
     overrun, not the type sizes. */
  .rule {
    margin-bottom: 18px;
  }

  .section-title {
    margin-top: 17px;
  }

  .section-lead {
    margin-top: 16px;
  }

  .cards {
    margin-top: 33px;
    row-gap: 60px;
  }

  /* The titles carry a hard <br> because the desktop comp's 370px column
     forced two lines. There is one column here and room for one line. */
  .feature__title br {
    display: none;
  }

  .feature__title {
    margin-top: 19px;
  }

  .feature__text {
    margin-top: 16px;
    line-height: 1.4;   /* comp pitch 21 at 15px */
  }

  .feature__action {
    margin-top: 14px;
  }

  /* "Make a plan" -- the whole block is a smaller instrument on a phone. */
  .plan__lead {
    margin-top: 12px;
    font-size: 18px;
  }

  .plan__body {
    margin-top: 18px;
    font-size: 14px;      /* "When dark thoughts come, you deserve..." -> 13.84 */
    line-height: 1.72;    /* comp line pitch 24 */
  }

  .plan__body p {
    margin-bottom: 12px;  /* comp: a paragraph break adds 12 to the 24 pitch */
  }

  .plan-steps {
    gap: 16px;
    margin-top: 39px;
  }

  .plan-step {
    padding: 22px;
  }

  .plan-step__num {
    font-size: 52px;      /* comp digit ink is 38 tall */
  }

  .plan-step__title {
    margin-top: 12px;
    font-size: 20px;      /* "Name 3 people" -> 19.6 */
  }

  .plan-step__text {
    margin-top: 12px;
    font-size: 15px;      /* "Think of three people who care about" -> 15.01 */
    line-height: 22px;    /* comp pitch */
  }

  .plan-net {
    margin-top: 32px;
    padding: 22px 20px 24px;
  }

  .plan-net__title {
    font-size: 22px;      /* "That's it. You just built your" -> 22.13 */
    line-height: 1.3;     /* comp pitch 29 */
  }

  .plan-net__text {
    margin-top: 16px;
    font-size: 14px;      /* "When harmful thoughts come..." -> 14.03 */
    line-height: 1.5;     /* comp pitch 21 */
  }

  /* The home comp is a smaller instrument throughout: 24px gutters and a 16px
     section lead where the interior pages use 16 and 20. */
  /* Several sections carry an inline `--pad-b` with a desktop value (156px,
     158px, 168px...). Overriding padding-bottom itself, rather than the
     variable, is the only way past an inline custom property. */
  .section {
    padding-bottom: var(--section-pad);
  }

  .page-home {
    --gutter: 24px;
    --fs-lead: 16px;      /* "strength, and that no one should..." -> 16.06 */
  }

  /* About runs a larger mission statement than the other pages' leads. */
  .page-about {
    --fs-lead: 20px;
  }

  .page-about .section-lead {
    margin-top: 36px;
  }

  /* The memory block: a 38px grid margin on top of the lead's own 36 puts 116
     between the heading and the text where the comp wants 41. */
  .memory {
    margin-top: 0;
    gap: 24px;
  }

  .memory__pledge {
    margin-top: 24px;
    font-size: 25px;
  }

  /* The comp crops this to 343x362; at natural aspect it comes out 403 tall. */
  .memory__figure img {
    height: 362px;
    object-fit: cover;
  }

  /* Organisation cards carry a fixed height (194px, and per-card overrides)
     sized for a three-column desktop row. Stacked, the content overflows it. */
  .org {
    height: auto;
    padding: 22px;
    /* The 1024 block adds a 24px grid gap; stacked that lands on top of the
       margins below and counts three times. */
    gap: 0;
  }

  .org + .org {
    margin-top: 16px;
  }

  .org__logo {
    justify-content: flex-start;
  }

  .org__logo img {
    max-height: 80px;
  }

  .org__name {
    margin-top: 22px;
  }

  .org__desc {
    margin-top: 23px;
    font-size: 15px;
    line-height: 1.45;    /* comp pitch 22 */
  }

  .org__action {
    justify-self: start;
    width: auto;
    height: 50px;
    margin-top: 18px;
    padding-inline: 20px;
    font-size: 16px;
  }

  /* Crisis-line cards: 40px of desktop padding in a 327px column. */
  .hotline {
    padding: 22px;
  }

  .hotline__name {
    font-size: 22.5px;    /* "988 Suicide & Crisis Lifeline" -> 22.66 */
  }

  .hotline__desc {
    margin-top: 14px;
    font-size: 14px;      /* "Free, confidential support for people in" -> 14.07 */
  }

  .hotline__contacts {
    margin-top: 14px;
  }

  /* Mission prose: 17.8px/1.74 is a desktop measurement; the comp runs it at
     the body size on a 24px line. */
  .mission__body .section-lead ~ p {
    margin-top: 21px;
    font-size: 15px;
    line-height: 1.6;
  }

  /* The comp centres the mark under the prose rather than hanging it left. */
  .mission__mark {
    justify-self: center;
  }

  .news-list {
    margin-top: 39px;
    gap: 53px;
  }

  .news-item {
    gap: 21px;
  }

  .news-item__image {
    height: 268px;
  }

  .news-item__date {
    font-size: 14px;      /* "July 19, 2026" -> 14.12 */
  }

  .news-item__title {
    margin-top: 16px;
    font-size: 27px;      /* "Mason Varsity Soccer's" -> 26.98 */
    line-height: 1.04;    /* comp line pitch 28 */
  }

  .news-item__text {
    margin-top: 13px;
    font-size: 16px;      /* "First event sponsored (we are just one of" -> 16.08 */
    line-height: 22px;    /* comp pitch */
  }

  .news-item__text + .news-item__text {
    margin-top: 13px;
  }

  /* The .page-statistics rules sit after every media query in this file, so
     matching their specificity is not enough -- these need one more element
     selector to win. */
  body.page-statistics .section-title {
    margin-top: 17px;
  }

  body.page-statistics .section-lead {
    margin-top: 16px;
  }

  /* Comp: 12px between cards on statistics, 17 between the coping cards. */
  .stat-grid,
  .action-grid,
  .glance-grid {
    gap: 12px;
  }

  .coping-grid {
    gap: 17px;
  }

  .callout {
    margin-top: 32px;
  }

  /* Cards. Every one of these was carrying ~40px of desktop padding into a
     327px-wide column. Comp content sits 22-24px inside each card edge. */
  .stat-card {
    padding: 22px;
  }

  .stat-card__value {
    font-size: 45px;      /* comp ink 32 tall */
  }

  .stat-card__label {
    margin-top: 17px;
    font-size: 20px;
  }

  .stat-card__text {
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.33;    /* comp pitch 20 */
  }

  .callout {
    gap: 20px;
    padding: 24px;
  }

  .callout .icon-tile {
    flex: 0 0 48px;
    height: 48px;
  }

  .callout__title {
    font-size: 24px;
  }

  .callout__text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
  }

  .panel__value {
    font-size: 40px;
  }

  .panel__title {
    font-size: 20px;
  }

  .panel__text {
    font-size: 15px;
    line-height: 1.4;
  }

  .coping {
    padding: 22px;
  }

  .coping__title {
    font-size: 17px;
  }

  .coping__text {
    font-size: 15px;
  }

  .action-card {
    padding: 22px;
  }

  .action-card__text {
    font-size: 15px;
  }

  .glance {
    padding: 20px;
  }

  .glance__value {
    font-size: 30px;
  }

  .glance__text {
    margin-top: 12px;
    font-size: 14px;
  }

  .site-footer__brand img {
    width: 119px;
  }

  .site-footer__title {
    margin-top: 48px;
  }

  .site-footer__text {
    margin-top: 21px;
  }

  .signup {
    margin-top: 28px;
    padding: 12px 12px 12px 16px;
  }

  .signup button {
    height: 50px;
  }

  .site-footer__dedication {
    margin-top: 30px;
  }

  /* The comp rules off the meta block rather than the whole footer, and the
     standalone rule element sits after it in the DOM -- so borrow a border. */
  .site-footer__rule {
    display: none;
  }

  .site-footer__meta {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(27, 27, 27, 0.25);
    font-size: 14px;
    line-height: 2.1;
  }

  .site-footer__links {
    margin-top: 0;
  }

  /* The comp keeps this a row on mobile: field left, button right, one pill. */
  .signup {
    width: 100%;
    padding: 8px 8px 8px 16px;
    gap: 8px;
  }

  /* height: 80px is sized for one line of desktop text; at 375 these wrap to
     three or four and spill straight out of the box. */
  .signs li {
    gap: 18px;
    align-items: flex-start;
    height: auto;
    padding: 16px 20px;
  }

  /* The comp turns each row into its own card: the row header in accent caps
     over a hairline, then each value under its own label. The labels come from
     data-label on the cells rather than CSS content strings, so the wording
     stays in the markup where a screen reader and a translator can reach it. */
  .compare,
  .compare tbody,
  .compare th,
  .compare td,
  .compare tr {
    display: block;
  }

  .compare thead {
    display: none;
  }

  /* The table still carries the border, background and rounded overflow clip
     it needs as a desktop grid. Around cards that reads as an outer container
     the cards bleed into, so it steps back and lets each row be the card. */
  .compare {
    margin-top: 24px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }

  .compare tbody tr {
    margin-bottom: 17px;
    padding: 15px 16px 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--cream);
  }

  .compare tbody tr + tr {
    border-top: 1px solid var(--line);
  }

  .compare tbody th {
    width: auto;
    padding: 0 0 11px;
    border-bottom: 1px solid var(--line);
    color: var(--accent);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .compare td {
    padding: 13px 0 0;
    font-size: 16px;
    line-height: 1.3;
  }

  /* On desktop the figures are accent green against the column headers; in
     the card layout the comp sets them in ink. */
  .compare td:not(.compare__plain) {
    color: var(--ink);
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    color: var(--body);
    font-size: 14px;
    font-weight: 400;
  }

  /* Sources: line-height 2.014 is a desktop measurement and doubles the height
     of citations that wrap four lines on a phone. */
  .sources {
    margin-top: 24px;
  }

  .sources li {
    font-size: 13px;
    line-height: 1.45;
  }
}

/* --------------------------------------------------------------------------
   Statistics page — the comp sets its section heads a few pixels tighter
   than the other pages.
   -------------------------------------------------------------------------- */

.page-statistics .section-title {
  margin-top: 38px;
}

.page-statistics .section-lead {
  margin-top: 35px;
  max-width: 852px;
}