/* Hire A Cold Caller: shared additions on top of the repo's styles.css */

/* "How much we handle" meter: the logo's stepped bars, filled to the level of service */
.meter{display:flex;flex-direction:column;align-items:center;gap:4px;width:44px;flex:none}
.meter i{display:block;height:5px;border-radius:2px;background:#D5E2DB;transition:background .3s ease}
.meter i:nth-child(1){width:100%}
.meter i:nth-child(2){width:72%}
.meter i:nth-child(3){width:45%}
.meter--1 i:nth-child(1),
.meter--2 i:nth-child(-n+2),
.meter--3 i{background:#059669}
.meter--dark i{background:rgba(255,255,255,.16)}
.meter--dark.meter--1 i:nth-child(1),
.meter--dark.meter--2 i:nth-child(-n+2),
.meter--dark.meter--3 i{background:#10B981}
.meter--lg{width:96px;gap:7px}
.meter--lg i{height:10px;border-radius:3px}
.meter-cap{margin:14px 0 0;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:#A9BACE}

/* homepage service rows: meter column replaces the big numerals */
.dial__meter{display:flex;flex-direction:column;align-items:flex-start;padding-top:8px}
.dial__step{transition:background .2s ease}
@media(hover:hover){.dial__step:hover{background:rgba(255,255,255,.025)}}
@media(max-width:640px){
  .dial__step{grid-template-columns:minmax(0,1fr) auto !important;row-gap:18px;align-items:center}
  .dial__meter{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:14px;padding-top:0}
  .dial__meter .meter-cap{margin:0}
  .dial__out{grid-column:2 !important;grid-row:1;text-align:right !important;padding-top:0}
  .dial__body{grid-column:1 / -1;grid-row:2}
}

/* pricing track: meter + plain-language level instead of 01 / 02 / 03 */
.offers .start__step{gap:12px;letter-spacing:.14em}
.offers .start__step .meter{margin-right:2px}

/* price panels on service pages */
.price-panel .meter{margin:0 0 18px}
.price-panel__level{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.price-panel__level .meter{margin:0}
.price-panel__level span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#047857}
.hero--navy .price-panel__level span,.hero--green .price-panel__level span{color:#10B981}

/* the meter caption leads the panel; the fee label steps back */
.price-panel__label{color:#5B6878 !important}
.hero--navy .price-panel__label,.hero--green .price-panel__label{color:#A9BACE !important}

/* one container width everywhere: founder and FAQ no longer sit narrower */
.ask .wrap,.behind .wrap{max-width:var(--container-main)}

/* nav: secondary text action beside the button */
.nav-actions .nav-text{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-supporting);font-weight:600;color:#047857;text-decoration:none;white-space:nowrap}
.nav-actions .nav-text:hover{color:#000F26}
@media(max-width:1180px){.nav-actions .nav-text{display:none}}

/* small labels on navy read a touch brighter */
.dial__out small{color:#C9D3DF !important}

/* footer: three columns, email given weight */
.foot__grid{grid-template-columns:minmax(0,1.5fr) minmax(170px,1fr) minmax(170px,1fr) !important}
.foot__mail{font-size:17px;font-weight:600}
@media(max-width:840px){.foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}.foot__brand{grid-column:1 / -1}}
@media(max-width:480px){.foot__grid{grid-template-columns:minmax(0,1fr) !important}}

/* industry ticker: pausable, and static for reduced motion */
.ticker__label{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.ticker__toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:1px solid #CBD5DE;border-radius:3px;background:#FFFFFF;color:#48586B;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ticker__toggle:hover{border-color:#000F26;color:#000F26}
.ticker.is-paused .ticker__track,.ticker__strip:hover .ticker__track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .ticker__track{animation:none !important;width:auto;flex:1}
  .ticker__seq[aria-hidden="true"]{display:none}
  .ticker__seq{flex-wrap:wrap;justify-content:center;row-gap:14px;padding:0 var(--gut)}
  .ticker__toggle{display:none}
}

/* service pages: one-line link back to the comparison */
.cmp{background:#F1F6F3;border-top:1px solid #DDE8E2;border-bottom:1px solid #DDE8E2;padding:clamp(22px,2.4vw,30px) 0}
.cmp__in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px}
.cmp__lead{margin:0;font-size:16px;font-weight:600;color:#000F26}
.cmp__list{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none}
.cmp__list li{font-size:15px;color:#48586B}
.cmp__list b{color:#000F26;font-weight:700;margin-right:4px}
.cmp__list li.is-here b{color:#047857}
.cmp__go{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#047857;text-decoration:none;white-space:nowrap}
.cmp__go:hover{color:#000F26}

/* ===== round 2: section polish ===== */
/* mobile nav: menu on the right, booking button always visible */
@media(max-width:1080px){.nav-actions{margin-left:auto}.nav-toggle{border-color:transparent}}
@media(max-width:420px){
  .nav-actions{display:flex !important}
  .navlinks .navlinks__cta{display:none !important}
  .nav-actions .btn-nav{min-width:0;height:44px;padding:0 14px;font-size:13.5px}
  .nav-actions .btn-nav::after{display:none}
  .nav__in{gap:8px}
}
/* one eyebrow colour per background */
.who__eyebrow,.model__eyebrow,.ramp__eyebrow,.ask__eyebrow,.behind__eyebrow,.start__eyebrow{color:#047857 !important}
.plate__eyebrow{color:#10B981 !important}
.who__col--no{border-left-color:#B9B2A6 !important}
/* FAQ: lighter open state, text link after the questions */
.ask__item[open]{border-bottom:1px solid var(--line) !important;box-shadow:inset 3px 0 0 #047857}
.ask__a a{color:#047857;font-weight:600}
.ask__more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#047857;text-decoration:none}
.ask__more:hover{color:#000F26}
/* final CTA */
.ready p:not([class]){font-size:18px;font-weight:500}
.ready__last{display:block}
.ready__h{text-wrap:balance}
.ready__cta{min-width:220px}
@media(max-width:640px){.ready__h{margin-bottom:28px}}
/* service heroes on mobile: price before the buttons */
@media(max-width:1000px){
  .hero--split .hero__grid{gap:0 !important}
  .hero--split .hero-copy{display:contents}
  .hero--split .svc-eyebrow{order:1}
  .hero--split h1{order:2}
  .hero--split .hero__sub{order:3}
  .hero--split .price-panel{order:4;margin-top:28px}
  .hero--split .hero-ctas{order:5;margin-top:24px !important}
}
/* compare strip */
.cmp__list a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;text-decoration:none}
.cmp__list a:hover b{text-decoration:underline;text-underline-offset:3px}
.cmp__list li.is-here a{pointer-events:none}
@media(max-width:640px){
  .cmp__in{gap:4px}
  .cmp__list{flex-direction:column;gap:0;width:100%}
  .cmp__list li{border-top:1px solid #DDE8E2}
  .cmp__list li:last-child{border-bottom:1px solid #DDE8E2}
}
/* footer */
.foot__reg,.foot__terms{font-size:12px !important;color:#A9BACE !important}
@media(max-width:480px){.foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:30px 20px !important}}

/* ===== round 3 ===== */
/* FAQ: no inset accent (it clipped text on mobile) */
.ask__item[open]{box-shadow:none !important}
/* buttons: one style */
.btn-nav{text-transform:uppercase;letter-spacing:.11em;font-size:13px !important;font-weight:700}
.btn-primary{box-shadow:none !important}
/* compare strip: links read as links */
.cmp__list a::after{content:"\2192";color:#047857;font-weight:700}
.cmp__list li.is-here{display:flex;align-items:center;gap:8px;min-height:44px}
.cmp__here{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#047857}
/* final CTA copy wraps evenly */
.ready p:not([class]){text-wrap:balance}
/* footer links */
.foot__nav a:hover{text-decoration:underline;text-underline-offset:3px}
/* service heroes: price card aligned to the headline on desktop */
@media(min-width:1001px){.hero--split .price-panel{align-self:center;margin-top:0}}
/* About hero on mobile: portrait after the buttons */
@media(max-width:1000px){.hero--split .portrait{order:6;margin-top:36px}}
/* fit sections: next step link */
.fit__go{margin:clamp(26px,3vw,38px) 0 0}
.fit__go a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#047857;text-decoration:none}
.fit__go a:hover{color:#000F26}
.who__col li a{color:#047857;font-weight:600}
/* round 4 */
@media(max-width:860px){footer a[href$="/terms"],footer a[href$="/privacy"]{display:inline-block;padding:12px 0}}
@media(min-width:861px){.cmp__in{justify-content:flex-start;column-gap:48px}.cmp__go{margin-left:auto}}
.footer__legal,footer small{font-size:13px}

/* production QA additions: none of these change the approved design at 390px and up */
/* 44px tap targets without moving anything: the logo grows around its centre, and the
   footer email keeps its underline while an invisible layer takes the taps */
.nav .logo{min-height:44px}
/* consent banner buttons do not inherit the page font on their own */
#stcm-wrapper button{font-family:inherit}
/* footer column labels are h2 for heading order; same look as .foot h4 with the
   pages' sentence-case override */
.foot h2.foot__h{font-family:inherit;font-size:13.5px;font-weight:600;line-height:inherit;letter-spacing:.01em;text-transform:none;margin:0 0 18px;color:#6E829B}
.foot__mail{position:relative}
.foot__mail::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* below 372px the logo, booking button and menu toggle no longer fit on one row */
@media(max-width:371px){
  .nav__in{padding-left:16px !important;padding-right:16px !important;gap:6px}
  .nav-actions .btn-nav{padding:0 10px !important;letter-spacing:.02em !important}
}
@media(max-width:339px){
  .nav-actions{display:none !important}
  .navlinks .navlinks__cta{display:inline-flex !important}
  .nav-toggle{margin-left:auto}
}

/* "Talk to Kai" booking card, restyled for the v2 type: Montserrat heading in sentence
   case (Anton is no longer loaded) and a pill button like the rest of the site. The CTA
   is now a link to /book-a-call, so it needs the flex centring a <button> had for free. */
.booking-card__h{font-family:Montserrat,Inter,system-ui,sans-serif;font-weight:700;text-transform:none;letter-spacing:-.03em;font-size:24px;line-height:1.12}
.booking-card__cta{display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;text-transform:none;letter-spacing:.01em;font-weight:600;font-size:15px}

/* sticky header: stays at the top while the page scrolls. z-index 50 keeps it above the
   page but under the booking launcher (80), Kai's card (100), the cookie banner and the
   Calendly popup. [id]{scroll-margin-top:78px} in styles.css already clears it for anchors.
   The light blur keeps the nav readable over the content passing under its 92% background. */
.nav{position:sticky !important;top:0;z-index:50;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}