/* ---------------------------------------------------------------
   Homepage, redesigned to the approved reference.

   Loaded after home.css so these win. Structure and copy in index.php
   are unchanged: this file changes presentation only.

   Requires tokens.css.
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   SECTION RHYTHM
   Alternating white and the page wash, per the reference.
--------------------------------------------------------------- */

.page-home section {
  padding: 86px 0;
}

.page-home .alt-bg,
.page-home .trust-stats {
  background: var(--sk-wash);
}

/* .container now matches the nav globally, see main.css tokens */

/* ---------------------------------------------------------------
   HERO
   The video, scrim and copy are untouched. Type and buttons only.
--------------------------------------------------------------- */

.page-home .hero {
  padding: 0;
}

/* .hero__actions carries a 40px margin-bottom for a .hero__signals list
   this page does not render, so it was 40px of dead ground under the
   buttons at every width. Not inside a media query: the element is
   missing on a phone too. Matches the .solution-hero__inner rule in
   pages.css. */
.page-home .hero__inner > :last-child {
  margin-bottom: 0;
}

/* The homepage hero has the video behind it, so its right-hand side is
   never empty and it needs no measure change. It takes the same height
   as every other hero: see --hero-height in tokens.css. 78vh was close
   already, but it was its own number. Desktop only, for the same reason
   as the rule in pages.css. */
@media (min-width: 1024px) {
  .page-home .hero {
    min-height: var(--hero-height);
    padding: var(--hero-pad-lg) 0;
  }

  /* The inner carries 96px of its own vertical padding, which on every
     other hero is 0. Two nested paddings plus a min-height is three
     numbers deciding one gap; this leaves the hero's padding as the
     only floor, so the homepage centres on the same terms as the rest. */
  .page-home .hero__inner {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.page-home .hero__title {
  font-family: var(--sk-heading);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-weight: 700;
  /* Cap set in home.css, deliberately. */
}

.page-home .hero__lead {
  font-family: var(--sk-body);
  font-size: 19px;
  line-height: 1.6;
  /* Was 640px: 50% of a 1280px container, with the video filling the
     rest. See --hero-measure in tokens.css. */
  max-width: var(--hero-measure);
}

@media (min-width: 1024px) {
  .page-home .hero__lead {
    font-size: var(--hero-lead-size-lg);
    max-width: var(--hero-measure-lg);
  }
}

.page-home .hero__signals {
  font-family: var(--sk-body);
}

/* ---------------------------------------------------------------
   PILL BUTTONS
   The reference shape, applied to the existing .btn classes so no
   markup changes. Navy primary, white outlined secondary.
--------------------------------------------------------------- */

.page-home .btn {
  border-radius: var(--sk-radius-pill);
  font-family: var(--sk-body);
  font-size: 15.5px;
  font-weight: 500;
  padding: 16px 32px;
  border: 1px solid transparent;
  transition: background 0.3s var(--sk-ease), transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease), border-color 0.3s var(--sk-ease);
}

/* Button rules moved to the rollout block at the end of this file,
   where every state sets colour explicitly. */

/* ---------------------------------------------------------------
   STAT CARDS
   The four TRUST_BADGES with real depth: gradient fill, layered
   shadow, and a green light-bleed that fades in on hover.
--------------------------------------------------------------- */

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stat {
  display: block;
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 30px 26px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sk-shadow-rest);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s;
}

/* The bleed sits behind the content and only appears on hover. */
.stat:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: var(--sk-bleed);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.stat:hover {
  transform: translateY(-8px);
  box-shadow: var(--sk-shadow-lift);
}

.stat:hover:before { opacity: 1; }
.stat:hover .sidx { color: var(--sk-green); }

.shead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  position: relative;
  z-index: 2;
}

.slabel {
  font-family: var(--sk-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sk-label);
}

.sidx {
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--sk-idx);
  flex-shrink: 0;
  transition: color 0.5s;
}

.sval {
  display: block;
  font-family: var(--sk-heading);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--sk-navy);
  position: relative;
  z-index: 2;
}

/* A badge with no leading numeral prints as a phrase, so it needs the
   smaller size or it overflows the card. */
.sval--small {
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  padding-top: 6px;
}

.srule {
  display: block;
  height: 1px;
  background: var(--sk-hairline-soft);
  margin-top: 22px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------------- */

.page-home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-label);
  margin-bottom: 20px;
}

.page-home .eyebrow:before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--sk-green);
  flex-shrink: 0;
}

.page-home h2 {
  font-family: var(--sk-heading);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--sk-navy);
}

.page-home h3 {
  font-family: var(--sk-heading);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--sk-navy);
}

.page-home .section-head {
  max-width: 760px;
  margin-bottom: 44px;
}

.page-home .section-head p,
.page-home .intro__inner p,
.page-home .depth__inner p,
.page-home .carriers__inner p {
  font-family: var(--sk-body);
  color: var(--sk-body-text);
  line-height: 1.7;
}

.page-home .intro__inner,
.page-home .depth__inner,
.page-home .carriers__inner {
  /* No max-width override here: these elements also carry .container,
     and overriding it is what made them span the viewport. */
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 26px;
  padding: 52px 56px;
  box-shadow: var(--sk-shadow-panel-soft);
}

/* Multiple paragraphs run as two balanced columns inside the panel.
   CSS columns rather than a grid, so index.php markup is untouched;
   break-inside keeps each paragraph whole. */
.page-home .intro__inner p,
.page-home .depth__inner p,
.page-home .carriers__inner p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--sk-prose);
}

.page-home .intro__inner h2,
.page-home .depth__inner h2 {
  max-width: 760px;
}

.page-home .intro__prose,
.page-home .depth__prose,
.page-home .intro__inner > p:first-of-type {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   CONTENT CARDS
   Same language as the stat cards: index in a header row, green bleed
   on hover, 8px lift, arrow that slides on the link. The index comes
   from a CSS counter, so index.php needs no per-card markup.
--------------------------------------------------------------- */

.page-home .card-grid,
.page-home .feature-grid {
  gap: 20px;
  counter-reset: hcard;
}

.page-home .card,
.page-home .feature,
.page-home .process-steps li {
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 11, 69, 0.04);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s, border-color 0.5s;
}

.page-home .card:before,
.page-home .feature:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: var(--sk-bleed-soft);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.page-home .card:hover,
.page-home .feature:hover,
.page-home .process-steps li:hover {
  transform: translateY(-8px);
  border-color: rgba(11, 11, 69, 0.14);
  box-shadow: 0 34px 66px -24px rgba(11, 11, 69, 0.28);
}

.page-home .card:hover:before,
.page-home .feature:hover:before { opacity: 1; }

/* Index number, top right, counting within its own grid. */
.page-home .card:after,
.page-home .feature:after {
  counter-increment: hcard;
  content: counter(hcard, decimal-leading-zero);
  position: absolute;
  top: 30px;
  right: 28px;
  font-family: var(--sk-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--sk-idx);
  transition: color 0.5s;
  z-index: 2;
}

.page-home .card:hover:after,
.page-home .feature:hover:after { color: var(--sk-green); }

.page-home .card h3,
.page-home .card .card__title,
.page-home .feature h3,
.page-home .process-steps h3 {
  font-family: var(--sk-heading);
  font-size: 20px;
  padding-right: 0;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin-bottom: 11px;
  padding-right: 34px;
  position: relative;
  z-index: 2;
}

.page-home .card p,
.page-home .feature p,
.page-home .process-steps p {
  font-family: var(--sk-body);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--sk-card-text);
  margin: 0;
  position: relative;
  z-index: 2;
}

.page-home .card__link {
  margin-top: 20px;
  font-family: var(--sk-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--sk-navy);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 2;
}

.page-home .card__link:after {
  content: "\2192";
  transition: transform 0.4s var(--sk-ease);
}

.page-home .card:hover .card__link:after { transform: translateX(4px); }

/* ---------------------------------------------------------------
   PROCESS
--------------------------------------------------------------- */

.page-home .process-steps {
  gap: 16px;
}

.page-home .process-steps__num {
  font-family: var(--sk-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--sk-navy);
  color: var(--sk-white);
}

/* ---------------------------------------------------------------
   STATES STRIP
--------------------------------------------------------------- */

.page-home .home-states__list a {
  font-family: var(--sk-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--sk-navy);
  background: var(--sk-white);
  border: 1px solid var(--sk-hairline);
  border-radius: var(--sk-radius-pill);
  transition: border-color 0.24s, transform 0.24s;
}

.page-home .home-states__list a:hover,
.page-home .home-states__list a:focus-visible {
  border-color: var(--sk-navy);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------
   SECTION CTA LINK AND FINAL CTA
--------------------------------------------------------------- */

.page-home .section-cta a {
  font-family: var(--sk-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--sk-navy);
}

.page-home .home-final-cta {
  background: var(--sk-footer-light);
  color: var(--sk-navy);
  padding-bottom: 96px;
}

.page-home .home-final-cta h2,
.page-home .home-final-cta h3 {
  color: var(--sk-navy);
}

.page-home .home-final-cta p {
  font-family: var(--sk-body);
  color: var(--sk-prose);
  line-height: 1.7;
}

.page-home .home-final-cta .btn--primary {
  background: var(--sk-green-cta);
  border-color: var(--sk-green);
  color: var(--sk-white);
}

.page-home .home-final-cta .btn--primary:hover,
.page-home .home-final-cta .btn--primary:focus-visible {
  background: #5a7f2b;
  border-color: #5a7f2b;
  color: var(--sk-white);
}

.page-home .home-final-cta .btn--secondary {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.16);
}

.page-home .home-final-cta .btn--secondary:hover,
.page-home .home-final-cta .btn--secondary:focus-visible {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: var(--sk-navy);
}

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

.page-home .home-faq .accordion__trigger {
  font-family: var(--sk-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sk-navy);
}

.page-home .home-faq .accordion__panel p,
.page-home .home-faq p {
  font-family: var(--sk-body);
  color: var(--sk-body-text);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .page-home section { padding: 56px 0; }
  /* .container now matches the nav globally, see main.css tokens */
  .page-home .section-head { margin-bottom: 30px; }
}

/* ===============================================================
   APPROVED DESIGN ROLLOUT, HOMEPAGE
   =============================================================== */

/* Hero stat cards. The four TRUST_BADGES already render as a
   4-across grid with a label, an index and a value, which is exactly
   the reference's .hstat shape, so this is a restyle rather than new
   markup. */
.page-home .stats {
  gap: 16px;
}

.page-home .stat {
  background: var(--sk-white);
  border: 1px solid rgba(11, 11, 69, 0.08);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: 0 1px 2px rgba(11, 11, 69, 0.04), 0 12px 32px -20px rgba(11, 11, 69, 0.2);
  transition: transform 0.5s var(--sk-ease), box-shadow 0.5s;
}

.page-home .stat:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(11, 11, 69, 0.28);
}

.page-home .shead {
  margin-bottom: 20px;
}

.page-home .slabel {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  color: var(--sk-stat-label);
}

.page-home .sidx {
  font-size: 12px;
  font-weight: 700;
  color: var(--sk-stat-num);
}

.page-home .stat:hover .sidx {
  color: var(--sk-num-hover);
}

.page-home .sval {
  font-size: 36px;
  letter-spacing: -0.045em;
}

.page-home .sval--small {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.page-home .srule {
  display: none;
}

/* Eyebrow and lede match the new hero treatment. */
.page-home .eyebrow {
  color: var(--sk-eyebrow);
  letter-spacing: 0.17em;
  gap: 11px;
}

.page-home .eyebrow:before {
  width: 26px;
}

/* Card CTAs go green and full width, same as every other page type. */
.page-home .card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 32px;
}

.page-home .card__text,
.page-home .card p {
  flex: 1;
  margin-bottom: 26px;
}

.page-home .card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: auto;
  padding: 13px 22px;
  border-radius: var(--sk-radius-pill);
  border: 1px solid var(--sk-green);
  background: var(--sk-green-cta);
  color: var(--sk-white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s var(--sk-ease), border-color 0.3s var(--sk-ease), color 0.3s, transform 0.3s var(--sk-ease), box-shadow 0.3s var(--sk-ease);
}

.page-home .card__link:hover,
.page-home .card__link:focus-visible {
  background: var(--sk-green-cta-hover);
  border-color: var(--sk-green-cta-hover);
  color: var(--sk-white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(108, 153, 52, 0.5);
}

.page-home .card__link:after {
  content: none;
}

/* Index numbers, readable. */
.page-home .card:after,
.page-home .feature:after {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sk-num);
  top: 32px;
  right: 30px;
}

.page-home .card:hover:after,
.page-home .feature:hover:after {
  color: var(--sk-num-hover);
}

.page-home .process-steps__num {
  background: none;
  color: var(--sk-num);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Buttons. */
.page-home .btn--primary {
  background: var(--sk-green-cta);
  border-color: var(--sk-green);
  color: var(--sk-white);
}

.page-home .btn--primary:hover,
.page-home .btn--primary:focus-visible {
  background: var(--sk-green-cta-hover);
  border-color: var(--sk-green-cta-hover);
  color: var(--sk-white);
  box-shadow: 0 14px 32px -10px rgba(108, 153, 52, 0.5);
}

.page-home .btn--secondary {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: rgba(11, 11, 69, 0.18);
}

.page-home .btn--secondary:hover,
.page-home .btn--secondary:focus-visible {
  background: var(--sk-navy);
  color: var(--sk-white);
  border-color: var(--sk-navy);
}

/* The video hero is dark, so its buttons take the on-dark treatment. */
.page-home .hero .btn--secondary {
  /* SOLID, never translucent. This was rgba(255,255,255,0.08), so the
     hero photograph showed straight through the button and it read as
     broken glass rather than a control. White fill, navy label, alpha 1. */
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.page-home .hero .btn--secondary:hover,
.page-home .hero .btn--secondary:focus-visible {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* Final CTA becomes the dark rounded panel. */
.page-home .home-final-cta {
  background: var(--sk-section-wash);
  padding: 0 0 100px;
}

.page-home .home-final-cta > .home-final-cta__inner,
.page-home .home-final-cta .container {
  background: var(--sk-cta-dark);
  border-radius: 28px;
  padding: 72px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-home .home-final-cta h2 {
  color: var(--sk-white);
}

.page-home .home-final-cta h2:before {
  content: none;
}

.page-home .home-final-cta p {
  color: #A9B6D6;
  font-size: 17px;
  line-height: 1.65;
}

.page-home .home-final-cta .btn--secondary {
  /* SOLID, never translucent. This was rgba(255,255,255,0.08), so the
     hero photograph showed straight through the button and it read as
     broken glass rather than a control. White fill, navy label, alpha 1. */
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.page-home .home-final-cta .btn--secondary:hover,
.page-home .home-final-cta .btn--secondary:focus-visible {
  background: var(--sk-white);
  color: var(--sk-navy);
  border-color: var(--sk-white);
}

/* ===============================================================
   BUG FIXES, HOMEPAGE
   Same three fixes as pages.css, for the homepage's own classes.
   =============================================================== */

/* BUG 2: number in the heading row, not layered over it. */
.page-home .card:after,
.page-home .feature:after {
  content: none;
}

.page-home .card-grid,
.page-home .feature-grid {
  counter-reset: pcard;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.page-home .card-grid > .card,
.page-home .feature-grid > .feature {
  counter-increment: pcard;
}

.page-home .card-grid > .card .card__title,
.page-home .feature-grid > .feature h3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-right: 0;
}

.page-home .card-grid > .card .card__title:after,
.page-home .feature-grid > .feature h3:after {
  content: counter(pcard, decimal-leading-zero);
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--sk-num);
  flex-shrink: 0;
  padding-top: 4px;
  transition: color 0.5s;
}

.page-home .card:hover .card__title:after,
.page-home .feature:hover h3:after {
  color: var(--sk-num-hover);
}

.page-home .process-steps li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 20px;
  align-items: start;
}

.page-home .process-steps li > h3 { grid-column: 1; grid-row: 1; }
.page-home .process-steps li > p  { grid-column: 1 / -1; grid-row: 2; }

.page-home .process-steps__num {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sk-num);
  background: none;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 4px 0 0;
  border-radius: 0;
  display: block;
}

/* BUG 3: 3 across, then 2, then 1. */
@media (max-width: 1100px) {
  .page-home .card-grid,
  .page-home .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .page-home .card-grid,
  .page-home .feature-grid { grid-template-columns: 1fr; }
}

.page-home .card__link {
  white-space: nowrap;
  font-size: 13.5px;
  padding: 13px 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
  line-height: 1.3;
}

/* ---------------------------------------------------------------
   ROUND 2 FIX: HOMEPAGE PROCESS GRID COLUMN COUNT

   THE RULE THAT CAUSED IT: home.css line 184,
     .process-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

   components.css was fixed for `.card-grid`, but this is a different
   grid in a different file and was never covered. With a 240px track
   floor the auto-fit maths produces FOUR columns in the 1280px content
   box and FIVE from 1366px up, for a list that only ever holds four
   steps, so the last track sat empty and the four cards were squeezed to
   roughly 250px each.

   Replaced with explicit counts. Four steps in four columns is one clean
   row with no orphan track.
--------------------------------------------------------------- */

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

@media (max-width: 1240px) {
  .page-home .process-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .page-home .process-steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   ROUND 2 FIX: HOMEPAGE CARD HEADINGS WRAPPING

   At three columns the card is 413px wide. Minus padding and the number
   sitting in the heading row, a title had about 320px to work with,
   which pushed "Sexual Abuse and Molestation" and "Hired and Non-Owned
   Auto" onto a second line.

   The heading text now takes the space the number is not using
   (`min-width: 0` so the flex item may shrink below its content width is
   not needed here; the number is the one that must not shrink), and the
   type steps down just enough to fit the longest title on one line. No
   copy was changed.
--------------------------------------------------------------- */

.page-home .card-grid > .card .card__title,
.page-home .feature-grid > .feature h3 {
  font-size: 16px;
  letter-spacing: -0.022em;
  gap: 10px;
}

/* ---------------------------------------------------------------
   ROUND 2 FIX: TRAILING LINK AND BUTTON ALIGNMENT, HOMEPAGE

   Same structural fix as pages.css: the body flexes, the trailing
   element is pinned to the bottom edge, so links and buttons line up
   across a row regardless of how long each card's copy runs.
--------------------------------------------------------------- */

.page-home .card-grid > .card {
  display: flex;
  flex-direction: column;
}

.page-home .card-grid > .card > .card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* THE RULE THAT BROKE THIS: `.page-home .card__link { margin-top: 20px }`
   earlier in this file overrode the `margin-top: auto` that
   components.css puts on `.card__link`, so the link sat directly under
   the copy and moved with it. Rather than fight that back to `auto`,
   the copy itself now flexes: the 20px gap is preserved and the link
   still lands on the bottom edge. */
.page-home .card-grid > .card .card__text,
.page-home .card-grid > .card > .card__body > p {
  flex: 1 1 auto;
}

.page-home .card-grid > .card .card__link,
.page-home .card-grid > .card > .card__body > .btn {
  align-self: flex-start;
}

/* Process step headings sit in a ~250px column once the number takes
   its place in the row, so they step down to match the card titles. */
.page-home .process-steps h3 {
  font-size: 16px;
  letter-spacing: -0.022em;
  padding-right: 0;
}

.page-home .feature-grid > .feature h3 {
  font-size: 16px;
  gap: 10px;
}

/* ---------------------------------------------------------------
   ORPHANED PROSE, HOMEPAGE PANELS

   `chrome.css:803` caps `.intro__inner > p` and `.depth__inner > p` at
   `max-width: 72ch`. Both panels are 1358px wide and hold three
   paragraphs each, so the copy ran as a 727px column with 631px of dead
   space beside it — inside a panel, but reading exactly like the bare
   orphaned prose elsewhere.

   Inside a contained panel the measure is already controlled by the
   panel, so the cap comes off and multi-paragraph blocks take the same
   two-column split the inner-page panels use.
--------------------------------------------------------------- */

.page-home :is(.intro__inner, .depth__inner, .carriers__inner) > p {
  max-width: none;
}

/* Two columns by GRID, not multicol. Multicol flows text and slices a
   paragraph across the column break mid-sentence; grid places whole
   paragraphs, so a paragraph can never be split. */
.page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  row-gap: 18px;
  align-items: start;
}

.page-home :is(.intro__inner, .depth__inner, .carriers__inner) > :is(h2, h3, .eyebrow) {
  grid-column: 1 / -1;
}


/* ---------------------------------------------------------------
   MOBILE: PROSE PANELS DROP TO ONE COLUMN

   Homepage prose panels. At 430px the panel is about 485px wide, so a
   two-column split gave roughly 20 characters per line, which is
   unreadable. Below 768px the split collapses.

   These repeat the exact selectors that set `columns: 2` above. A
   media query adds no specificity, so matching the original
   selector and coming later in the file is what makes them win.
--------------------------------------------------------------- */

@media (max-width: 768px) {
  .page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p) {
    grid-template-columns: 1fr;
    column-gap: normal;
  }
}