/* Shared UI rules, loaded last on every page.
   1) one button geometry for all calls to action, 2) one accent green on light backgrounds,
   3) section heading alignment, 4) calmer text rhythm in the "objective testing" block.
   Colours of individual buttons stay with their page CSS; only size and type are unified here. */

/* 1) Buttons: same height, type and corners everywhere. */
.button,.cta,.form-submit,.test-profile-link,.approach a,.faq-wrap .contact-box a{
  display:inline-flex!important;align-items:center;justify-content:center;gap:14px!important;
  min-height:52px!important;padding:0 28px!important;margin-bottom:0;box-sizing:border-box;
  border-radius:0!important;box-shadow:none!important;
  font-family:Arial,Helvetica,sans-serif!important;font-size:.76rem!important;font-weight:900!important;
  letter-spacing:.1em!important;line-height:1!important;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,transform .2s,border-color .2s
}
.button b,.cta b,.test-profile-link b,.approach a b,.faq-wrap .contact-box a b{margin:0!important;font-size:1.25em!important;font-weight:400!important;line-height:1}
.button:hover,.cta:hover,.form-submit:hover,.faq-wrap .contact-box a:hover{transform:translateY(-2px)}
.test-profile-link,.approach a{border:1px solid var(--color-navy)}
.test-profile-link:hover,.approach a:hover{transform:translateY(-2px)}
@media(max-width:760px){.button{display:flex!important;width:100%}}

/* 2) One accent green on light backgrounds (the darkest one already used for links). */
.insight h2 span,.faq-section h2 span{color:var(--color-link)}
.how-it-works h2 span{color:var(--color-accent)}

/* 3) Heading split over two lines: the second line gets its own row and the glyph side-bearing is corrected,
   so both lines start on the same edge. */
.insight h2 span,.how-it-works h2 span{display:block;margin-left:-.045em}

/* 4) Text rhythm next to the heading. */
.insight .insight-copy p{margin:0 0 16px;line-height:1.6}
.insight .insight-copy p:first-child{margin-bottom:22px;line-height:1.5}
.insight .insight-copy p:last-of-type{margin-bottom:0}

/* 6) Players & clubs: one page rhythm. Gutters equal the header gutter; hero, headings and closing bar are shared. */
main{--g:calc((100% - min(1440px,91vw))/2)}
main>.hero{min-height:620px}
main>.hero .copy,main>.hero .hero-copy{max-width:850px;padding:105px var(--g)}
main>.hero h1{max-width:none;font-size:clamp(3.3rem,6vw,6.6rem);line-height:.86;letter-spacing:-.075em}
main>.hero .lead,main>.hero .hero-copy>p:not(.eyebrow){max-width:510px;margin:27px 0;color:#dce4e9;font-size:1.14rem;line-height:1.55}
main>.steps,main>.package,main>.bottom,main>.closing{padding-left:var(--g);padding-right:var(--g)}
main>.deliverables .wrap,main>.package{box-sizing:border-box}
main h2{font-size:clamp(2.8rem,5vw,5.2rem);line-height:.86;letter-spacing:-.075em}

/* Same closing bar on both pages: one sentence, one button, never wrapping. */
main>.bottom,main>.closing{display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:0;padding-top:64px;padding-bottom:64px;background:var(--color-accent);color:var(--color-navy)}
main>.bottom p,main>.closing p{max-width:760px;margin:0;font-size:clamp(1.7rem,3vw,2.8rem);font-weight:900;line-height:1.08;letter-spacing:-.055em}
main>.bottom .cta,main>.closing .cta{flex:none;margin:0;white-space:nowrap;background:var(--color-navy);color:var(--color-white)}
@media(max-width:760px){main>.bottom,main>.closing{flex-direction:column;align-items:flex-start;gap:24px;padding-top:48px;padding-bottom:48px}}

/* Equal hero height on both pages (content centred), and a closing sentence that uses the free width so it wraps the same way. */
main>.hero{min-height:700px;display:flex;align-items:center}
main>.bottom p,main>.closing p{flex:1;max-width:none;font-size:clamp(1.7rem,2.8vw,2.6rem)}
@media(max-width:760px){main>.hero{min-height:620px}}
@media(max-width:760px){main>.hero .data-readout{display:none}}

/* Hero headline: wide enough that each sentence of the players headline stays on one line; clubs uses the same size. */
main>.hero .copy,main>.hero .hero-copy{max-width:960px}
main>.hero h1{font-size:clamp(3rem,5.4vw,6rem)}

main>.hero h1{text-wrap:balance}
/* Players headline only: second sentence is its own balanced block. */
main>.hero .copy h1 em{display:block;text-wrap:balance}
main>.hero .copy h1 br{display:none}