/* One homepage hierarchy: hero, section headings, then card titles.
   Keep these shared rules after the component styles so new sections inherit
   the same typography and spacing instead of acquiring a separate scale. */
.home-page{
  --home-title-size:clamp(28px,3vw,40px);
  --home-card-title-size:22px;
  --home-section-space:56px;
  --home-heading-gap:28px;
  --home-surface:var(--white);
  --home-surface-soft:var(--pale);
  --home-page-gutter:max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter)));
  background:var(--home-surface);
}
/* Alternate the light content sections. Navy marks the business selector
   and company proof; both use the same solid brand colour. */
.home-page :is(.connected-hero-trust,.home-customer-band,.agent-home-team,.closing,.story-carousel-viewport){background:var(--home-surface)}
.home-page :is(.home-stories,.setup-section){background:var(--home-surface-soft)}
.home-page :is(.business-picker,.home-independence){background:var(--ink)}
.home-page .home-independence::before{background:none}
.home-page .connected-hero-trust,.home-page .home-customer-band,.home-page .home-stories{border-color:var(--line)}
.home-page .home-customer-band{border-top:0}
.home-page :is(h1,h2,h3){font-family:var(--sans);font-style:normal}
#main.home-page h2{
  font-size:var(--home-title-size);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.025em;
  text-align:left;
  text-transform:none;
  text-wrap:pretty;
  hyphens:none;
  overflow-wrap:normal;
}
.home-page h3,.home-page .independence-record-label{
  font-size:var(--home-card-title-size);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.015em;
  text-transform:none;
}
.home-page .home-stories-inner{max-width:1600px}
.home-page :is(.home-stories-heading,.section-head){
  text-align:left;
  margin-bottom:var(--home-heading-gap);
}
.home-page :is(.business-picker-inner,.home-stories,.agent-home-team,.home-independence,.setup-section,.closing){
  padding-top:var(--home-section-space);
  padding-bottom:var(--home-section-space);
}
.home-page .business-picker-inner{gap:var(--home-heading-gap)}
.home-page .customer-band-top{align-items:center;gap:12px}
.home-page .home-customer-band{padding-top:24px;padding-bottom:20px}
.home-page .customer-story-line{font-size:24px;line-height:1.35;font-weight:500;letter-spacing:-.015em;max-width:34ch}
/* Give every section title the same page gutter, including the dark panel. */
.home-page .home-independence{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  margin-top:0;
  margin-bottom:0;
  border-width:1px 0;
  border-radius:0;
}
.home-page .home-independence::after{left:var(--home-page-gutter)}
.home-page .independence-copy h2{max-width:480px}
.home-page .independence-copy>.eyebrow{margin-bottom:12px}
.home-page .setup-section h2{margin-bottom:var(--home-heading-gap)}
.home-page .closing{position:relative}
.home-page .closing::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--home-page-gutter);
  right:var(--home-page-gutter);
  border-top:1px solid var(--line);
}
/* Section colour spans the viewport; content keeps the shared page gutter. */
.home-page>.wrap{
  max-width:none;
  padding-left:var(--home-page-gutter);
  padding-right:var(--home-page-gutter);
}
@media(max-width:620px){
  .home-page{
    --home-title-size:28px;
    --home-card-title-size:18px;
    --home-section-space:32px;
    --home-heading-gap:20px;
  }
  .home-page .customer-story-line{font-size:20px}
  .home-page .home-customer-band{padding-top:24px;padding-bottom:20px}
  .home-page .independence-record-label{max-width:150px}
  .home-page .closing{gap:20px}
}