/* =========================================================================
   Page-scoped layout glue, lifted verbatim from the <style> block in the
   approved HTML build. Only layout the shared design system does not cover
   (hero grid, pricing card, cohort cards, framework grid, thank-you page).
   No tokens or components are overridden here.
   ========================================================================= */

/* Hero two-column on desktop */
.fnd-hero__grid{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.fnd-hero__grid{grid-template-columns:1.1fr .9fr;gap:var(--s8)}}
.fnd-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.fnd-byline{font-weight:600}
.fnd-byline em{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--cobalt-700)}

/* Framework reveal grid: diagram + family cards */
.fnd-framework__grid{display:grid;gap:var(--s6)}
@media (min-width:1024px){.fnd-framework__grid{grid-template-columns:1fr 1fr;align-items:start}}
.fnd-family{padding:var(--s4);border-left:3px solid var(--teal)}
.fnd-family__title{font-weight:700;color:#FFFFFF;margin-bottom:var(--s2)}

/* Cohort date cards left-accent */
.fnd-cohort--1{border-left:4px solid var(--cobalt)}
.fnd-cohort__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);justify-content:space-between}
.fnd-cohort__date{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:28px;color:var(--cobalt-700);line-height:1.2}

.badge-green{
  display:inline-flex;align-items:center;gap:var(--s2);
  background:rgba(21,115,71,.16);color:#0F5132;
  border-radius:var(--r-pill);padding:var(--s2) var(--s4);
  font-weight:600;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;line-height:1.2;
}
@media (min-width:768px){.badge-green{font-size:14px}}

/* Mid-page countdown band layout */
.fnd-midband{display:flex;flex-direction:column;align-items:center;gap:var(--s5);text-align:center}
@media (min-width:900px){.fnd-midband{flex-direction:row;justify-content:space-between;text-align:left}}
.fnd-midband__label{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:28px;color:var(--cream-100);line-height:1.2}
@media (min-width:768px){.fnd-midband__label{font-size:36px}}

/* Pricing card */
.fnd-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--s2)}
.fnd-price__num{font-family:var(--font-body);font-weight:700;font-size:48px;line-height:1;color:var(--dark)}
@media (min-width:768px){.fnd-price__num{font-size:56px}}
.fnd-price__unit{font-size:16px;color:#5b5b5b}
.fnd-total-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--s2)}
.fnd-qty{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}

/* Testimonial quote card */
.fnd-quote{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:22px;line-height:1.4;color:var(--cobalt-700)}
@media (min-width:768px){.fnd-quote{font-size:26px}}
.fnd-quote__cite{font-style:normal;font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--dark);margin-top:var(--s4)}
.fnd-quote__cite span{color:#5b5b5b;font-weight:400}

/* About layout */
.fnd-about__grid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:768px){.fnd-about__grid{grid-template-columns:320px 1fr;gap:var(--s8)}}
.fnd-tm-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Final CTA top rule */
.fnd-rule{width:64px;height:3px;background:var(--teal);border:0;margin:0 auto var(--s5);border-radius:var(--r-pill)}

/* Enterprise footer line */
.fnd-ent{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);justify-content:space-between;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-card);padding:var(--s4) var(--s5)}

/* Hide the inline calendar slot until "BOOK A CALL FIRST" reveals it */
.fnd-calendar-wrap[hidden]{display:none!important}

/* =========================================================================
   RESPONSIVE QA
   ========================================================================= */

/* ---- 0. No horizontal scroll, anywhere. --------------------------------
   Uses `clip`, NOT `hidden`. `overflow-x:hidden` on html/body makes them a
   scroll container, and that silently kills `position:sticky` on everything
   inside — the header stops sticking on scroll. `clip` crops the same overflow
   without creating a scroll container, so the sticky nav keeps working. */
html,body{max-width:100%;overflow-x:clip}
/* Anything that can't shrink is the usual culprit: media and embeds. */
img,svg,video,iframe,canvas{max-width:100%}
img,video{height:auto}

/* ---- 1. Header: 768px -> 1440px ---------------------------------------- */
/* The nav flips to desktop at 900px. Between 900px and ~1100px the logo, three
   links and a long CTA ("Book a call first") compete for one row, so the CTA
   used to push past the container. Let the middle column absorb the pressure
   and never let the logo or the CTA shrink away. */
.site-nav__inner{gap:var(--s3);flex-wrap:nowrap}

.site-nav__logo{flex:0 0 auto}
.site-nav__logo img{
  display:block;
  width:auto;
  height:24px;                 /* fixed height keeps the mark legible... */
  max-width:none;              /* ...and stops the global max-width:100% squashing it */
}
@media (min-width:1024px){
  .site-nav__logo img{height:28px}
}

.site-nav__links{
  flex:1 1 auto;
  min-width:0;                 /* allows the row to compress instead of overflowing */
  justify-content:flex-end;
}
.site-nav__cta{
  flex:0 0 auto;
  white-space:nowrap;          /* the CTA must never wrap to two lines */
}
@media (min-width:900px) and (max-width:1099px){
  /* Tighten only where it is actually tight. */
  .site-nav__links{gap:var(--s4)}
  .site-nav__link{font-size:14px}
  .site-nav__cta{padding-inline:var(--s4);font-size:14px}
}

/* The menu list itself (the walkers emit a <ul>). */
.site-nav__menu{
  display:flex;align-items:center;gap:var(--s5);
  list-style:none;margin:0;padding:0;
}
@media (min-width:900px) and (max-width:1099px){
  .site-nav__menu{gap:var(--s4)}
}
.site-nav__item{position:relative;display:flex;align-items:center;gap:4px}

/* ---- 2. Desktop dropdowns (so a nested item is never unreachable) ------- */
.site-nav__caret{display:inline-flex;color:var(--dark);transition:transform var(--m-fast)}
.site-nav__caret svg{width:16px;height:16px}
.site-nav__item--has-children:hover > .site-nav__caret{transform:rotate(180deg)}

.site-nav__submenu{
  position:absolute;top:100%;left:0;z-index:900;
  min-width:220px;margin:0;padding:var(--s2);
  list-style:none;
  background:var(--cream-100);
  border:1px solid rgba(39,39,39,.08);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-hover);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity var(--m-fast),transform var(--m-fast),visibility var(--m-fast);
}
/* Nested levels fly out sideways. */
.site-nav__submenu .site-nav__submenu{top:0;left:100%}
.site-nav__item:hover > .site-nav__submenu,
.site-nav__item:focus-within > .site-nav__submenu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.site-nav__submenu .site-nav__item{display:block}
.site-nav__submenu .site-nav__link{
  display:block;padding:10px 12px;border-radius:var(--r-input);font-size:14px;
}
.site-nav__submenu .site-nav__link:hover{background:rgba(16,89,229,.07);color:var(--cobalt)}
/* A submenu near the right edge must not push the page wider. */
.site-nav__item:last-child > .site-nav__submenu{left:auto;right:0}
.site-nav__item:last-child .site-nav__submenu .site-nav__submenu{left:auto;right:100%}

/* ---- 3. Mobile drawer: nested, collapsible, unlimited depth ------------ */
.nav-drawer__menu,
.nav-drawer__submenu{list-style:none;margin:0;padding:0}

.nav-drawer__menu{display:flex;flex-direction:column;gap:0}

/* A separator between each menu item. The rule belongs to the item, not to the
   list, so it survives items being added/removed — and the LAST item never draws
   one, so the menu doesn't end on a dangling line. */
.nav-drawer__menu > .nav-drawer__item{
  border-bottom:1px solid rgba(39,39,39,.06);
}
.nav-drawer__menu > .nav-drawer__item:last-child{
  border-bottom:0;
}
/* Nested items get an even fainter divider, so the hierarchy still reads. */
.nav-drawer__submenu > .nav-drawer__item{
  border-bottom:1px solid rgba(39,39,39,.04);
}
.nav-drawer__submenu > .nav-drawer__item:last-child{
  border-bottom:0;
}

.nav-drawer__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  min-height:44px;                       /* WCAG 2.5.5 touch target */
}
.nav-drawer__row .nav-drawer__link{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;
  padding-block:var(--s2);
  word-break:break-word;                 /* a long label wraps, never overflows */
}

/* The caret is its own button, so the parent link stays followable. */
.nav-drawer__toggle{
  flex:0 0 auto;
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--dark);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background-color var(--m-fast);
}
.nav-drawer__toggle:hover{background:rgba(39,39,39,.06)}
.nav-drawer__toggle:focus-visible{outline:none;box-shadow:var(--ring-cobalt)}
.nav-drawer__toggle svg{width:20px;height:20px;transition:transform var(--m-fast)}
.nav-drawer__item.is-open > .nav-drawer__row > .nav-drawer__toggle svg{transform:rotate(180deg)}

/* Collapsed branch. JS animates height; [hidden] is the no-JS/base state. */
.nav-drawer__submenu{
  overflow:hidden;
  height:0;
  transition:height var(--m-default);
  padding-left:var(--s3);
  margin-left:var(--s2);
  border-left:2px solid rgba(16,89,229,.18);
}
.nav-drawer__submenu[hidden]{display:none}

/* Depth de-emphasis — the hierarchy should be readable, not shouty. */
.nav-drawer__submenu .nav-drawer__link{font-size:16px;font-weight:500}
.nav-drawer__submenu .nav-drawer__submenu .nav-drawer__link{font-size:15px}

/* Without JS every branch must still be reachable, so show them all. */
.no-js .nav-drawer__submenu{height:auto}
.no-js .nav-drawer__submenu[hidden]{display:block}
.no-js .nav-drawer__toggle{display:none}

/* ---- 4. Drawer shell on small phones ----------------------------------- */
.nav-drawer__panel{
  width:min(88vw,360px);
  overscroll-behavior:contain;           /* scrolling the menu must not scroll the page */
  -webkit-overflow-scrolling:touch;
}
@media (max-width:360px){
  .nav-drawer__panel{width:100vw;padding:var(--s5) var(--s3)}
}
/* The close (X) must always be reachable, even in a long scrolling menu. */
.nav-drawer__close{
  position:sticky;top:0;z-index:2;
  background:var(--cream-100);
  flex:0 0 auto;
}

/* ---- 5. Embeds: GoHighLevel forms, calendars, maps, video --------------- */
/* The GHL embeds ship height:100% inline, which collapses or overflows depending
   on the parent. Give them a real, scalable box instead. */
.modal iframe,
.fnd-calendar-wrap iframe,
.footer-grid iframe{
  display:block;
  width:100%;
  max-width:100%;
  border:0;
  border-radius:8px;
}
.modal iframe{min-height:min(745px,72vh)}
.fnd-calendar-wrap iframe{min-height:min(700px,80vh)}
.footer-grid iframe{min-height:434px}

/* Any other embed (map, video) stays inside its column. */
.embed-responsive{position:relative;width:100%;aspect-ratio:16/9}
.embed-responsive > iframe{position:absolute;inset:0;width:100%;height:100%}

/* ---- 6. Card grids: equal heights + consistent spacing on mobile -------- */
.grid > *{min-width:0}                   /* grid children may shrink below content */
.grid .card{height:100%}                 /* boxes in a row match height */
.card{overflow-wrap:anywhere}            /* a long word can't widen the card */

/* Stat/price numbers are the usual overflow source on a 320px screen. */
.stat-big,.price-anchor__num,.proof-credbar__num{overflow-wrap:normal}
@media (max-width:380px){
  .price-anchor__num{font-size:40px}
  .fnd-cohort__date{font-size:24px}
}

/* ---- 6a. Hero "book time with us" box ---------------------------------- */
/* Sits below the hero grid and fills the container, instead of being squeezed
   into the hero's left column. Text left, button right on desktop; stacked on
   phones so the button stays a full-width tap target. */
.hero-enterprise{margin-top:var(--s6)}

/* The hero carries a 128px bottom pad, and the next section adds 96px on top.
   With the box now closing the hero, that stacked 240px reads as a dead band.
   Trim the hero's own padding — the box IS the section's ending. */
.section--hero-split:has(.hero-enterprise){padding-bottom:var(--s5)}
/* Fallback for browsers without :has() — same result, applied unconditionally
   to this one section, which only ever renders with the box or without it. */
@supports not selector(:has(*)){
  .section--hero-split{padding-bottom:var(--s5)}
}
.hero-enterprise .team-cta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s5);
  padding:var(--s5) var(--s6);
}
.hero-enterprise .team-cta__text{flex:1 1 auto;min-width:0}
.hero-enterprise .team-cta__btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:767px){
  .hero-enterprise .team-cta{
    flex-direction:column;
    align-items:flex-start;
    padding:var(--s4);
    gap:var(--s4);
  }
  .hero-enterprise .team-cta__btn{width:100%;justify-content:center}
}

/* ---- 6b. Decorative squiggles ------------------------------------------ */
/* The ribbon is offset outside its figure by design. On phones that offset puts
   it past the left edge of the viewport, where overflow-x clips it and it reads
   as a cut-off graphic. Pull it back inside below 480px. */
@media (max-width:480px){
  .img-figure__ribbon{
    left:0;
    transform:none;
    width:44%;
    max-width:150px;
  }
}

/* ---- 7. FAQ accordion -------------------------------------------------- */
.accordion__trigger{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  text-align:left;
  min-height:44px;
}
.accordion__q{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.accordion__chevron{flex:0 0 auto;width:20px;height:20px}
.accordion__answer,.accordion__panel p{overflow-wrap:anywhere}

/* =========================================================================
   FOOTER
   ========================================================================= */

/* The grid is authored for four columns. Columns are individually switchable in
   Theme Settings, so re-balance rather than leave an empty track behind. */
@media (min-width:768px){
  .footer-grid--4{grid-template-columns:1.4fr 1fr 1fr 1.4fr}
  .footer-grid--3{grid-template-columns:1.6fr 1fr 1fr}
  .footer-grid--2{grid-template-columns:1.6fr 1fr}
  .footer-grid--1{grid-template-columns:1fr}
}

/* The legal block.
   Each line used to be a bare .footer-legal <p>, and that class carries its own
   margin-top + padding-top + border-top — so two lines produced two separate
   rules and a big dead gap. One divider belongs to the block, not to each line. */
.footer-legal-bar{
  margin-top:var(--s8);
  padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s2);
  text-align:center;
}
.footer-legal-bar .footer-legal{
  /* Neutralise the stacked rules/spacing the base class adds. */
  margin:0;
  padding:0;
  border-top:0;
  max-width:76ch;          /* keep the trademark line readable, not full-bleed */
  line-height:1.6;
}
/* The copyright/trademark line is the fine print of the fine print. */
.footer-legal-bar .footer-legal:last-child{
  font-size:12px;
  color:#8a8a8a;
}
.footer-legal-bar a{
  color:#c9c9c9;
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-legal-bar a:hover,
.footer-legal-bar a:focus-visible{color:#fff}

/* =========================================================================
   Thank You page — from the <style> block in thank-you.html
   ========================================================================= */
.ty{display:flex;align-items:flex-start;justify-content:center;text-align:center;padding-block:clamp(32px,8vh,96px)}
.ty__card{max-width:640px;margin:0 auto}
.ty__check{width:72px;height:72px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;background:rgba(21,115,71,.14);color:#0F5132;margin-bottom:var(--s5)}
.ty__check svg{width:38px;height:38px}
.ty__accent{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--cobalt-700)}
.ty__steps{text-align:left;max-width:520px;margin:var(--s7) auto 0;display:grid;gap:var(--s4)}
.ty__step{display:flex;gap:var(--s4);align-items:flex-start}
.ty__num{flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-pill);background:var(--cobalt);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.ty__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s7)}