/* "Get my free growth plan" button: arrow chip. Reece picked it 15 Oct 2026 (round 3, card 1, 5/5;
   mockups/cta-wording-2026-10-14/make3.py). tools/add_growth_chip.py adds class "gp" and this sheet to
   every page; sizes are in em so one rule fits the header, hero, section, footer and form buttons. */
.gp{display:inline-flex!important;align-items:center;justify-content:space-between;gap:.75em;white-space:nowrap;
  padding:.38em .38em .38em 1.5em!important;line-height:1.2!important;min-height:0!important;box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -18px rgba(20,20,18,.6)}
.gp::after{content:"";flex:none;width:2.3em;height:2.3em;border-radius:50%;
  background:#FAFAF7 url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M3%208h9.5M8.5%203.8%2012.7%208l-4.2%204.2%27%20fill%3D%27none%27%20stroke%3D%27%23141412%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/42% no-repeat;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gp:hover::after,.gp:focus-visible::after{transform:translateX(3px)}
/* the Newcastle hero adds its own hover arrow; the chip replaces it */
.gp .arw{display:none!important}.gp:hover .lbl{transform:none!important}
/* cream buttons on dark bands and footers: the chip flips to ink */
html body footer.inner .foot-cta.gp::after,.zf1 .fbtn.gp::after,.band .btn.gp::after{background:#141412 url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M3%208h9.5M8.5%203.8%2012.7%208l-4.2%204.2%27%20fill%3D%27none%27%20stroke%3D%27%23FAFAF7%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/42% no-repeat}
html body footer.inner .foot-cta.gp,.zf1 .fbtn.gp,.band .btn.gp{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 30px -18px rgba(0,0,0,.6)}
/* small header buttons keep a smaller chip */
.header-quote.gp,.nav-cta.gp{padding:.3em .3em .3em 1.2em!important;gap:.6em}
.header-quote.gp::after,.nav-cta.gp::after{width:2.1em;height:2.1em}
/* paid landing-page hero row: the growth plan button keeps its natural width, the second button takes the rest */
.lp-hero .hero-cta.gp{flex:0 0 auto!important;height:auto!important}
.lp-hero .hero-ghost{height:auto!important;min-height:3.15rem}
/* full-width form buttons: label and chip sit together in the middle */
.form .btn.gp{justify-content:center;min-height:56px!important;padding-left:1em!important}
/* phone sticky bar: Call shrinks to fit its word, the growth plan button gets the room */
.sticky .btn.gp{font-size:16px!important;padding-left:1em!important;gap:.5em}
.sticky .btn.gp::after{width:2.1em;height:2.1em}
.sticky .btn-ghost{flex:0 0 auto!important;padding:12px 20px!important}
@media(min-width:761px){
  /* desktop hero row: the chip grows so the button matches Contact us in height */
  .hero-ctas{align-items:stretch!important}
  .hero-ctas .gp{padding:.42em .42em .42em 1.75em!important}
  .hero-ctas .gp::after{width:2.75em;height:2.75em}
  .hero-ctas .hero-ghost{display:inline-flex!important;align-items:center;justify-content:center}
}
@media(max-width:760px){
  /* hero row on a phone: the growth plan button takes what its label needs, Contact us fills the
     rest, and the row ends exactly at the text column (measured at 360, 390 and 412 wide) */
  .hero-ctas{grid-template-columns:auto 1fr!important;align-items:stretch!important;width:100%}
  .hero-ctas .hero-ghost{display:inline-flex!important;align-items:center;justify-content:center;padding-left:.6rem!important;padding-right:.6rem!important;font-size:.86rem!important;min-width:0}
  .hero-ctas .gp,.lp-hero .hero-cta.gp{font-size:.86rem!important;padding-left:1.05em!important;gap:.6em}
  .hero-ctas .gp::after{width:2.15em;height:2.15em}
}
@media(max-width:380px){
  .hero-ctas{gap:.5rem!important}
  .hero-ctas .gp,.lp-hero .hero-cta.gp{font-size:.8rem!important;padding-left:1em!important;gap:.6em}
  .hero-ctas .hero-ghost{font-size:.8rem!important}
}
@media(max-width:700px){
  /* a phone header has no room for the chip: plain compact pill */
  .header-quote.gp,.nav-cta.gp{padding:.75em 1.1em!important}
  .header-quote.gp::after,.nav-cta.gp::after{display:none}
}
@media(prefers-reduced-motion:reduce){.gp::after{transition:none}}

/* "Contact us" beside it: white pill, hairline edge and its own outlined circle with a phone, so the
   two read as a matched pair. Reece picked it 15 Oct 2026 (round 4, card 2, 5/5; make4.py). */
.cu{display:inline-flex!important;align-items:center;justify-content:space-between!important;gap:.6em;white-space:nowrap;
  padding:.38em .38em .38em 1.3em!important;line-height:1.2!important;box-sizing:border-box;
  background:#fff!important;color:#141412!important;border:1px solid rgba(20,20,18,.22)!important;box-shadow:0 10px 24px -18px rgba(20,20,18,.45);
  transition:border-color .3s ease,box-shadow .3s ease}
.cu::after{content:"";flex:none;width:2.3em;height:2.3em;border-radius:50%;box-sizing:border-box;border:1px solid rgba(20,20,18,.25);
  background:transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M5.2%202.5%203.4%202.6c-.6.1-1%20.6-.9%201.2.5%205%204.5%209%209.5%209.5.6.1%201.1-.3%201.2-.9l.1-1.8-2.7-1.2-1.3%201.3a7%207%200%200%201-3.3-3.3l1.3-1.3z%27%20fill%3D%27none%27%20stroke%3D%27%23141412%27%20stroke-width%3D%271.3%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/40% no-repeat;transition:background-color .3s ease,border-color .3s ease}
.cu:hover,.cu:focus-visible{border-color:#141412!important}
.cu:hover::after,.cu:focus-visible::after{background:#141412 url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Cpath%20d%3D%27M5.2%202.5%203.4%202.6c-.6.1-1%20.6-.9%201.2.5%205%204.5%209%209.5%209.5.6.1%201.1-.3%201.2-.9l.1-1.8-2.7-1.2-1.3%201.3a7%207%200%200%201-3.3-3.3l1.3-1.3z%27%20fill%3D%27none%27%20stroke%3D%27%23FAFAF7%27%20stroke-width%3D%271.3%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/40% no-repeat;border-color:#141412}
.nav-ghost.cu{padding:.3em .3em .3em 1.1em!important;gap:.5em}.nav-ghost.cu::after{width:2.1em;height:2.1em}
@media(min-width:761px){.hero-ctas .cu::after{width:2.75em;height:2.75em}.hero-ctas .cu{padding-left:1.5em!important}}
@media(max-width:760px){.hero-ctas .cu{padding:.3em .3em .3em .8em!important;gap:.4em}.hero-ctas .cu::after{width:1.8em;height:1.8em}}
@media(prefers-reduced-motion:reduce){.cu,.cu::after{transition:none}}
/* phones: the header Contact us stays hidden (it was before), and the hero row is rebalanced so
   both labels sit on one line with room before their circles (measured at 360, 390 and 412 wide) */
@media(max-width:700px){.nav-ghost.cu{display:none!important}}
@media(max-width:760px){
  .hero-ctas{gap:.45rem!important}
  .hero-ctas .gp,.lp-hero .hero-cta.gp{padding-left:.9em!important;gap:.5em}
  .hero-ctas .gp::after{width:2em;height:2em}
  .hero-ctas .cu{padding-left:.75em!important;gap:.45em}
  .hero-ctas .cu::after{width:1.75em;height:1.75em}
}
@media(max-width:380px){
  .hero-ctas .gp,.lp-hero .hero-cta.gp,.hero-ctas .cu{font-size:.78rem!important}
}
@media(max-width:760px){
  .hero-ctas .cu::after{background-size:50%}
  /* stacked section buttons on a phone: both the same width */
  .begin-ctas .gp,.begin-ctas .cu{width:17.5rem;max-width:100%;min-width:0!important}
}

/* Contact us beside every header, footer and ad-page growth plan button (Reece 15 Oct: "every page
   on the entire site ... the 2 new buttons for all") */
.header-ghost.cu{font-size:14px;min-height:44px;padding:.3em .3em .3em 1.1em!important;gap:.5em;text-decoration:none;border-radius:999px}
.header-ghost.cu::after{width:2.1em;height:2.1em}
.header-actions:has(.header-ghost){gap:12px}
.header-actions:has(.header-ghost) .header-phone{margin-right:12px}
@media(max-width:1100px){.header-actions:has(.header-ghost) .header-phone{display:none}}
@media(max-width:700px){.header-ghost.cu{display:none!important}.header-actions:has(.header-ghost) .header-phone{display:inline}}
.foot-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.foot-ctas .foot-cta{margin:0!important}
html body footer.inner .foot-ghost.cu{font-size:16px;text-decoration:none;border-radius:999px;padding:.38em .38em .38em 1.3em!important;
  background:transparent!important;color:#F4F2EC!important;border-color:rgba(244,242,236,.35)!important;box-shadow:none}
html body footer.inner .foot-ghost.cu::after{border-color:rgba(20,20,18,.45)!important;filter:invert(1)}
html body footer.inner .foot-ghost.cu:hover,html body footer.inner .foot-ghost.cu:focus-visible{border-color:#F4F2EC!important}
.lp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lp-ctas .btn{margin:0!important}
.lp-ctas .btn.cu{min-height:56px;font-size:18px;padding:.38em .38em .38em 1.3em!important}
/* phones: the two ad-page hero buttons sit side by side like the web design page, not two full-width
   slabs (Reece 15 Oct: "on mobile they look weird both full width"); growth plan takes what its label
   needs, Contact us fills the rest, measured at 360, 390 and 412 wide */
@media(max-width:700px){.lp-ctas{flex-wrap:nowrap;align-items:stretch;gap:.5rem}
  .lp-ctas .btn{width:auto!important;min-height:52px!important;font-size:.86rem!important}
  .lp-ctas .btn.gp{flex:0 0 auto;padding-left:.9em!important;gap:.5em}
  .lp-ctas .btn.gp::after{width:2.3em;height:2.3em}
  .lp-ctas .btn.cu{flex:1 1 auto;min-width:0;padding-left:.75em!important;gap:.45em}
  .lp-ctas .btn.cu::after{width:2em;height:2em;background-size:48%}}
@media(max-width:380px){.lp-ctas .btn{font-size:.78rem!important}.lp-ctas{gap:.4rem}}
.pair-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-centered .pair-ctas{justify-content:center}
.pair-ctas .button.cu{min-height:56px}
@media(max-width:700px){.pair-ctas{flex-direction:column;align-items:flex-start}.hero-centered .pair-ctas{align-items:center}
  .pair-ctas .button{width:17.5rem;max-width:100%;justify-content:space-between}}
.lp-head .nav-cta.gp{background:#141412!important;color:#FAFAF7!important}
.lp-head .nav-cta.cu{font-size:.85rem}
html body footer.inner .foot-ghost.cu{font-size:14px;min-height:48px}
.foot-ctas:has(.foot-cta-short){margin-bottom:28px}
@media(max-width:700px){.foot-ctas{flex-direction:column;align-items:flex-start}.foot-ctas .foot-cta,.foot-ctas .foot-ghost{width:17.5rem;max-width:100%;justify-content:space-between}}