/* ---------------------------------------------------------------
   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);
  /* Same fix as .solution-cta in pages.css: the rounded panel was
     sitting flush on the carriers band above it. */
  padding: 56px 0 100px;
}

@media (max-width: 768px) {
  .page-home .home-final-cta {
    padding-top: 40px;
  }
}

.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 {
  /* A MEASURE, not `none`, which is what this carried. The panels are
     two columns at desktop, where a cap wider than the column is inert,
     but they drop back to one column below 1082px and there the copy
     ran the panel's full 830px: 98 characters. This is the same
     --prose-measure-lg every other prose panel on the site uses, so the
     single-column state matches them exactly. */
  max-width: var(--prose-measure-lg);
}

/* BELOW 992px THE PANEL STAYS THE GRID IT ALREADY WAS, at one column.

   Not display:block. The grid applied at every width before, and
   dropping it outright changed two things under 768px, where the brief
   is that nothing moves: `row-gap: 18px` came off, shortening the
   homepage intro panel by 65px at 390px, and .eyebrow stopped being a
   stretched grid item, taking its box from 276px to its 100px of text.
   Neither is visible as a defect and both are real geometry changes, so
   the grid stays and the multicol block below overrides it at 992px.

   One column, not two. Two grid columns applied from 769px up before;
   the brief puts 768-991px single column, and 1fr is that. column-gap
   is `normal` to match exactly what the old max-width:768 override
   computed, so the sub-768 boxes are identical to the pixel. */
.page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p) {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: normal;
  row-gap: 18px;
  align-items: start;
}

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

/* TWO COLUMNS BY MULTICOL, not by grid.

   The grid this replaces assigned by POSITION: paragraphs 1 and 3 went
   left, 2 and 4 right, whatever their length. Multicol assigns by fit.
   `break-inside: avoid` below is what stops it slicing a paragraph
   mid-sentence, which was the original objection to it, and it is also
   why the columns land close rather than level. The measured trade is
   in the TWO-COLUMN PROSE SPLIT block in pages.css.

   `columns: 424px 2` carries the same "split only where one column
   would fill under 85% of the panel" rule the inner-page panels use;
   see the TWO-COLUMN PROSE SPLIT block in pages.css for the arithmetic.
   Keyed at 992px with everything else. */
@media (min-width: 992px) {
  .page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p):not(:has(form, input, textarea, select, button, iframe, video, embed, object, .cf-turnstile)) {
    display: block;
    columns: 424px 2;
    column-gap: clamp(48px, 4.4vw, 64px);
    column-rule: 1px solid var(--sk-hairline-soft);
  }

  .page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p) > p {
    break-inside: avoid;
    /* 16px over a 551px column is 78 characters, above the 45-70 a
       column should read at. 19px puts it at 65, and matches the panel
       copy on every inner page. */
    font-size: var(--prose-size-lg);
    line-height: 1.72;
  }

  .page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p) > :is(h2, .eyebrow) {
    column-span: all;
  }

  .page-home :is(.intro__inner, .depth__inner, .carriers__inner):has(p + p) > h3 {
    break-inside: avoid;
    break-after: avoid;
  }
}

/* ---------------------------------------------------------------
   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.
--------------------------------------------------------------- */

/* The rule that used to live here dropped these panels back to one
   column below 768px, undoing a grid that applied at every width. The
   split is now inside `@media (min-width: 992px)`, so below 992px there
   is nothing to undo and this is left as a note rather than a rule that
   restates the default. */

/* ===============================================================
   APPROVED CARD SYSTEM, HOMEPAGE

   This file loads after pages.css, and its existing .page-home .card
   rules outrank anything written there, so the homepage's share of the
   card system lives here rather than being repeated in pages.css and
   silently losing. Values are the reference's, identical to the ones
   pages.css applies to every other page type.
   =============================================================== */

.page-home .card-grid > .card {
  background: #fff;
  border: 1px solid rgba(11, 11, 69, 0.09);
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: none;
  transition: transform 0.45s var(--sk-ease), box-shadow 0.45s, border-color 0.45s;
}

.page-home .card-grid > .card:before {
  inset: 0;
  height: auto;
  background: linear-gradient(160deg, rgba(87, 123, 42, 0.06), transparent 55%);
  opacity: 0;
}

.page-home .card-grid > .card:hover {
  transform: translateY(-6px);
  border-color: rgba(11, 11, 69, 0.16);
  box-shadow: 0 28px 56px -24px rgba(11, 11, 69, 0.26);
}

.page-home .card-grid > .card:hover:before {
  opacity: 1;
}

.page-home .card-grid > .card:after {
  top: 28px;
  right: 28px;
  font-size: 12.5px;
  font-weight: 700;
  color: #A8B1C6;
}

.page-home .card-grid > .card:hover:after {
  color: #4E7024;
}

.page-home .icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 22px;
  transition: transform 0.45s var(--sk-ease);
}

.page-home .icon-tile--blue { background: #E8EFFB; color: #2B4A8A; }
.page-home .icon-tile--green { background: #EDF3E3; color: #4E7024; }
.page-home .card-grid > .card:hover .icon-tile { transform: scale(1.06); }

.page-home .card-grid > .card .card__title {
  font-family: var(--sk-heading);
  font-size: 19.5px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.24;
  margin-bottom: 10px;
  padding-right: 34px;
}

.page-home .card-grid > .card .card__text {
  font-size: 14.8px;
  line-height: 1.68;
  color: #5F6980;
  flex: 1;
}

/* Arrow link, not the filled pill. */
.page-home .card-grid > .card .card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  align-self: flex-start;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-navy);
}

.page-home .card-grid > .card .card__link:hover {
  background: none;
  color: var(--sk-navy);
  transform: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The two families, counted across card sections only. */
.page-home :where(section:nth-child(odd of section:has(.card-grid))) .card-grid > .card {
  background: linear-gradient(165deg, #FCFDFF, #F4F8FD);
}
.page-home :where(section:nth-child(odd of section:has(.card-grid))) .card-grid > .card:hover {
  border-color: rgba(43, 74, 138, 0.24);
}
.page-home :where(section:nth-child(odd of section:has(.card-grid))) .card-grid > .card:before {
  background: linear-gradient(160deg, rgba(43, 74, 138, 0.07), transparent 55%);
}
.page-home :where(section:nth-child(even of section:has(.card-grid))) .card-grid > .card {
  background: linear-gradient(165deg, #FCFEFA, #F5F9F1);
}
.page-home :where(section:nth-child(even of section:has(.card-grid))) .card-grid > .card:hover {
  border-color: rgba(87, 123, 42, 0.26);
}

/* ---------------------------------------------------------------
   THE DARK BAND, Who We Serve

   The reference's own example, and the only section on the site with a
   class of its own to target. Everything below wins over the family
   rules above because it is later and carries an extra class.
--------------------------------------------------------------- */

.page-home .home-industries {
  background: linear-gradient(155deg, #080826 0%, #0B0B45 55%, #12124F 100%);
  position: relative;
  overflow: hidden;
}

.page-home .home-industries:after {
  content: "";
  position: absolute;
  top: -200px;
  right: -120px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 123, 42, 0.16), transparent 62%);
  pointer-events: none;
}

.page-home .home-industries > .container { position: relative; z-index: 2; }
.page-home .home-industries h2 { color: #fff; }
.page-home .home-industries .section-head p { color: #A9B6D6; }
.page-home .home-industries .eyebrow { color: #9FD45C; }
.page-home .home-industries .eyebrow:before { background: #9FD45C; }

.page-home .home-industries .card-grid > .card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

/* The light line catching the top edge, always on. */
.page-home .home-industries .card-grid > .card:before {
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 1;
}

.page-home .home-industries .card-grid > .card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(159, 212, 92, 0.3);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}

/* The green glow is a separate layer so it does not replace the line. */
.page-home .home-industries .card-grid > .card .card__body:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(159, 212, 92, 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}

.page-home .home-industries .card-grid > .card:hover .card__body:before { opacity: 1; }
.page-home .home-industries .card-grid > .card .card__body { position: relative; z-index: 2; }

.page-home .home-industries .icon-tile {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9FD45C;
}

.page-home .home-industries .card-grid > .card:after { color: rgba(255, 255, 255, 0.32); }
.page-home .home-industries .card-grid > .card:hover:after { color: #9FD45C; }
.page-home .home-industries .card-grid > .card .card__title { color: #fff; }
.page-home .home-industries .card-grid > .card .card__text { color: #A9B6D6; }
.page-home .home-industries .card-grid > .card .card__link { color: #9FD45C; }
.page-home .home-industries .card-grid > .card .card__link:hover { color: #9FD45C; }

/* Section rhythm, matching pages.css. */
.page-home section { padding: 56px 0 44px; }

@media (max-width: 768px) {
  .page-home section { padding: 40px 0 32px; }
}

/* The link that closes the section sits on the navy band too, and it
   inherited the navy it uses on a light ground: 1.01:1, invisible.
   Same green the dark cards use for their links. */
.page-home .home-industries .section-cta a {
  color: #9FD45C;
}

.page-home .home-industries .section-cta a:hover {
  color: #fff;
}

/* TWO index numbers were showing on every homepage card.

   An earlier homepage treatment put the index inline beside the title
   (.card__title:after, counting `pcard`) while a separate rule put one
   top right (.card:after, counting `hcard`). Both survived, so each
   card read "Home Health Agencies 01" with "02" in the corner: two
   counters, two numbers, odd and even. The reference has one number,
   top right. The inline one goes.
--------------------------------------------------------------- */
.page-home .card-grid > .card .card__title:after,
.page-home .feature-grid > .feature h3:after {
  content: none;
}

/* The title was a flex row only so the inline number could sit at its
   end. Back to a normal block, with room kept clear for the corner. */
.page-home .card-grid > .card .card__title {
  display: block;
  padding-right: 34px;
}

/* The corner number, restored on the homepage.

   An earlier pass had suppressed .card:after here (content: none) and
   moved the index inline into the heading row instead. That inline copy
   is now gone, per the reference, so the corner has to come back or the
   homepage carries no index at all. pcard is reset on .card-grid and
   incremented once on each .card, so it counts within its own grid. */
.page-home .card-grid > .card:after {
  content: counter(pcard, decimal-leading-zero);
}


/* Tile tint follows the section on the homepage too, and the dark band
   keeps its own translucent tile. */
.page-home :where(section:nth-child(odd of section:has(.card-grid))) .card-grid > .card .icon-tile {
  background: #E8EFFB;
  color: #2B4A8A;
}

.page-home :where(section:nth-child(even of section:has(.card-grid))) .card-grid > .card .icon-tile {
  background: #EDF3E3;
  color: #4E7024;
}

.page-home .home-industries .card-grid > .card .icon-tile {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #9FD45C;
}

.page-home .eyebrow:before { content: none; }
.page-home .eyebrow { gap: 0; }