/* A full first screen, followed by a separate experience section. */
body.home-refresh .buyer-hero,
body.services-page .services-hero,
body.pricing-page .commercial-hero,
body.about-page .about-opening {
  box-sizing:border-box;
  min-height:100svh;
  padding-top:clamp(144px,18svh,184px);
  padding-bottom:48px;
  align-content:center;
  align-items:center;
}
body.home-refresh .buyer-hero .buyer-hero-copy {align-self:center;}
body.home-refresh .buyer-hero + .experience {margin-top:0;}
body.home-refresh .validation-preview .validation-note {font:400 16px/24px var(--sans);}

/* Viewport height belongs to the section, not to blank space inside its copy. */
body.services-page .services-hero > div:first-child,
body.pricing-page .commercial-hero > div:first-child,
body.about-page .about-opening-copy {align-self:center;}
body.services-page .services-hero h1,
body.pricing-page .commercial-hero h1,
body.about-page .about-opening h1 {min-height:0;margin:0;}
body.services-page .services-hero .services-intro,
body.pricing-page .commercial-hero .commercial-lead {
  min-height:0;margin:24px 0 0;
}
body.services-page .services-hero .hero-actions,
body.pricing-page .commercial-hero .hero-actions,
body.about-page .about-opening .hero-actions {margin-top:24px;}
body.about-page .about-opening h1 + .about-opening-lead {margin-top:24px;}
body.about-page .about-opening-lead + .about-opening-lead {margin-top:16px;}

/* Keep the journey heading, tabs and demonstration together as one screen. */
body.home-refresh #how-it-works {
  min-height:calc(100svh - 104px);
  padding-block:32px;
  justify-content:center;
}
body.home-refresh #how-it-works .cj-heading {margin-bottom:24px;}
body.home-refresh #how-it-works .cj-heading > p {padding-top:0;}

/* Centred introductions keep the full-width demonstrations below them. */
body.home-refresh .cj-heading,
body.services-page .service-package .sd-intro {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:16px;
}
body.home-refresh .cj-heading > p,
body.services-page .service-package .sd-intro > p {
  max-width:560px;
  margin:0;
}

/* The accent column has its own continuous, gently rounded silhouette. */
#comparison .approach-table {border-collapse:separate;border-spacing:0;}
#comparison .approach-table thead .represent-column {
  border-radius:var(--ui-corner,6px) var(--ui-corner,6px) 0 0;
}
#comparison-summary .represent-column,
#comparison-details tr:last-child .represent-column {
  border-radius:0 0 var(--ui-corner,6px) var(--ui-corner,6px);
}

/* Model selection resolves visibly after the reel stops. */
.cj-model-routing .cj-model-window {
  transition:background-color .3s ease,border-color .3s ease;
}
.cj-model-routing .cj-model-reel > span {transition:color .3s ease;}
.cj-model-routing.is-matched .cj-model-window {
  background:rgba(0,133,63,.07);
  border-color:rgba(0,133,63,.28);
}
.cj-model-routing.is-matched .cj-model-reel > span,
.cj-model-routing.is-matched > svg {color:#00853f;}

/* Reveal the action beside its fixed plus, without shifting the card. */
#security .trust-card summary > span:nth-child(2) {
  opacity:0;
  transform:translateX(12px);
  clip-path:inset(0 0 0 100%);
  transition:opacity .24s ease,transform .3s ease,clip-path .3s ease;
}
#security .trust-card:hover summary > span:nth-child(2),
#security .trust-card:focus-within summary > span:nth-child(2),
#security .trust-card details[open] summary > span:nth-child(2) {
  opacity:1;transform:translateX(0);clip-path:inset(0);
}
@media (hover:none) {
  #security .trust-card summary > span:nth-child(2) {
    opacity:1;transform:none;clip-path:none;
  }
}

@media (min-width:880px) {
  body.home-refresh #transformation .benefit-section-heading {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;
  }
  body.home-refresh #transformation .benefit-section-heading h2 {
    grid-column:2;margin:0;text-align:right;
  }
  #security .trust-heading {
    grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;
  }
  #security .trust-heading h2 {grid-column:2;grid-row:1;text-align:right;}
  #security .trust-heading .trust-lead {grid-column:2;grid-row:2;text-align:right;justify-self:end;}
  #security .trust-heading .trust-gdpr {
    grid-column:1;grid-row:1 / span 2;align-self:start;justify-self:start;
  }

  /* Alternate editorial passages, with centred breaks for the data and offer. */
  body.about-page .about-editorial-row {
    grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;
  }
  body.about-page .about-editorial-row:is(
    [aria-labelledby="about-foundation-title"],
    [aria-labelledby="about-knowledge-title"]
  ) > h2 {grid-column:2;grid-row:1;margin-top:0;text-align:right;}
  body.about-page .about-editorial-row:is(
    [aria-labelledby="about-foundation-title"],
    [aria-labelledby="about-knowledge-title"]
  ) > .about-prose {grid-column:1;grid-row:1;}
  body.about-page .benchmark-intro {
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:24px;max-width:760px;margin-inline:auto;
  }
  body.about-page .benchmark-intro > div {width:100%;}
  body.about-page .benchmark-intro p {max-width:none;}
  body.about-page .about-relationship-heading {
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:24px;max-width:760px;margin-inline:auto;
  }
  body.about-page .about-relationship-heading > div > p {max-width:600px;margin-inline:auto;}
  body.about-page .about-relationship-heading > a {margin:0;align-self:center;}
}

@media (max-width:879px) {
  body.home-refresh .buyer-hero,
  body.services-page .services-hero,
  body.pricing-page .commercial-hero,
  body.about-page .about-opening {padding-top:var(--hero-start);padding-bottom:48px;}
  body.home-refresh #how-it-works {min-height:0;padding-block:48px;}
}
@media (prefers-reduced-motion:reduce) {
  .cj-model-routing .cj-model-window,
  .cj-model-routing .cj-model-reel > span,
  #security .trust-card summary > span:nth-child(2) {transition:none;}
}