/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · pages/consultation.css
   Consultation (done with you): the Strategic Bundle and the Growth Bundle on one landing,
   one apply.html with an option selector and one thank-you.html.
   Part A: Strategic Bundle components (sb-*), part B: Growth Bundle components (gb-*), both carried over
   unchanged from the two old pages; part C: the merged page (option cards, helper, comparison table).
   ===================================================================== */

/* ---------- A. Strategic Bundle components ---------- */
/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · Strategic Bundle (page styles)
   Loaded after site.css + services.css on strategic-bundle/*.html only.
   Tokens only (--y --ink --n* --r-* --gap --ease-out --spring-pop).

   Contents
    1  Landing hero: H1 measure (the ring, deal tile and phone order are shared: services.css §2)
    2  Fit pair: inline links on ink
    3  Your month: four week tiles + twelve call stamps (the page's one authored motion)
    4  Price fold: card anchor row, pay box, single-calls calculator
    5  Case, testimonials (+ teaching photo), how it works (4 steps), closing slide, safety net
    6  apply.html: header help label, summary extras
    7  thank-you.html: route-aware hero, 12-slot card, route C offer
    8  Motion + reduced motion
   ===================================================================== */

/* ---------- 1. Landing hero ---------- */
/* the service name is longer than "strategy call": a slightly smaller measure keeps each authored line on one line */
.sb-hero .svc-hero__sub { max-width: 46ch; }
@media (min-width: 1200px) {
  .sb-hero .svc-hero__trust { max-width: none; }
}

/* ---------- 2. Fit pair ---------- */
.sb-fit .lead { max-width: 58ch; }

/* ---------- 3. Your month ---------- */
.sb-month__ph { margin-top: 16px; }
.sb-month__grid { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: var(--gap); }
.sb-wk { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 24px; }
.sb-wk > p { font-size: 15px; line-height: 1.55; color: var(--ink-3); max-width: 40ch; }
.sb-wk.tile--ink > p { color: var(--n300); }
.sb-wk__t { display: grid; gap: 2px; margin-top: 8px; }
.sb-wk__w { font-size: 14px; font-weight: 700; color: var(--n600); }
.sb-wk.tile--ink .sb-wk__w { color: var(--y); }
.sb-wk.tile--sun .sb-wk__w { color: var(--ink-3); }

.sb-stamps { list-style: none; padding: 0; margin: 0; display: flex; gap: 12px; }
.sb-stamp {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--y); color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  transform: rotate(var(--rot, 0deg));
}
.sb-wk.tile--ink .sb-stamp { border-color: var(--y); box-shadow: 3px 3px 0 #fff; }
.sb-wk.tile--sun .sb-stamp { background: #fff; }

.sb-month__foot { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.sb-month__note { max-width: 56ch; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--n600); }
.sb-month__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sb-month__cta .btn { margin: 0 4px 4px 0; }
.sb-month__micro { font-size: 14px; font-weight: 700; }
@media (max-width: 559px) {
  .sb-month__cta { width: 100%; }
  .sb-month__cta .btn { display: flex; width: calc(100% - 4px); }
}
@media (min-width: 768px) {
  .sb-month__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-wk { padding: 26px 24px 28px; min-height: 280px; }
}
@media (min-width: 1200px) {
  .sb-month__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sb-wk { min-height: 330px; }
  .sb-stamp { width: 54px; height: 54px; }
}

/* ---------- 4. Price fold ---------- */
.sb-card__name { font-size: var(--t-h4); font-weight: 800; letter-spacing: -0.01em; }
.price__card .price__big { margin-top: -6px; }
.sb-card__anchor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; font-weight: 600; }
.sb-card__was s { text-decoration-thickness: 2px; }
.sb-card__anchor b {
  display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border-radius: 999px;
  background: var(--ink); color: var(--y); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sb-card__per { flex-basis: 100%; font-size: 14px; color: var(--ink-3); }
.sb-card__pay { display: grid; gap: 8px; }
.sb-card__pay p { font-size: 14px; line-height: 1.5; font-weight: 600; }
.sb-card__pay b { font-weight: 800; }
.sb-card__ph { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-card__intl { color: var(--ink-3); }

/* the calculator: input on top, the two totals drawn to scale under it, the verdict inline (the homepage calculator's order) */
.sb-calc {
  display: grid; gap: 18px; padding: 24px 20px 22px; margin-right: 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-tile); box-shadow: 8px 8px 0 var(--ink);
  grid-template-areas: "h" "in" "cmp" "v" "note";
}
.sb-calc__h { grid-area: h; max-width: 20ch; }
.sb-calc__in { grid-area: in; }
.sb-cmp { grid-area: cmp; }
.sb-calc__verdict { grid-area: v; }
.sb-calc__note { grid-area: note; }
.sb-calc__label { display: block; font-size: 14px; font-weight: 700; }
.sb-calc__value { margin: 8px 0 12px; font-size: clamp(34px, 1.2vw + 28px, 46px); letter-spacing: -0.035em; }
.sb-calc__value small { margin-left: 6px; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.sb-range { --p: 100%; }
.sb-cmp { display: grid; gap: 16px; align-content: start; }
.sb-cmp__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; }
.sb-cmp__k { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sb-cmp__v { font-size: 20px; letter-spacing: -0.02em; }
.sb-cmp__track { grid-column: 1 / -1; display: block; height: 28px; }
.sb-cmp__bar { display: block; height: 100%; border-radius: 6px; transform-origin: left; }
.sb-cmp__bar--ink { background: var(--ink); transition: transform 160ms var(--ease-out); }
.sb-cmp__bar--sun { width: 62.5%; background: var(--y); border: 2px solid var(--ink); }   /* legacy calls calculator, not on any Round 7 page */
.sb-calc__verdict { display: grid; gap: 2px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: var(--r-in); background: var(--y-100); }
.sb-calc__verdict p { font-size: 15px; font-weight: 700; line-height: 1.45; }
.sb-calc.is-singles .sb-calc__verdict { background: var(--paper); border-style: dashed; border-color: var(--n500); }
.sb-calc__alt .link { padding-block: 6px; }
.sb-calc__note { font-size: 13px; font-weight: 600; color: var(--n600); }
html:not(.js) .sb-calc__in { display: none; }   /* without JS the tile shows the 12-call comparison as a static fact */
@media (min-width: 768px) { .sb-calc { padding: 32px 32px 28px; } }
@media (min-width: 1200px) {
  .sb-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; grid-template-areas: "h h" "in cmp" "v v" "note note"; }
}
@media (min-width: 1024px) { .sb-price-fold .price__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* narrow phones: the full CTA label fits one line inside a padded tile (no arrow, tighter padding); below ~360px it may wrap */
@media (max-width: 419px) {
  .case__go .btn--lg, .price__card .btn--lg { --bp: 12px; --bf: 16px; }
  .case__go .btn--lg .btn__arrow, .price__card .btn--lg .btn__arrow { display: none; }
}

/* ---------- 5. Case, testimonials, how it works, closing, safety net ---------- */
.sb-case__bridge { margin-top: -10px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-3); max-width: 44ch; }

/* Taha's full four-sentence quote: set a size lighter than the homepage's one-line lead so it reads as a paragraph,
   and let his key sentence carry the yellow (yellow text on ink passes contrast; the words stay verbatim) */
.sb-quotes .quote--lead blockquote p { font-size: clamp(18px, 0.45vw + 14px, 22px); font-weight: 600; line-height: 1.5; letter-spacing: -0.005em; color: var(--n300); max-width: 48ch; }
.sb-q-key { color: var(--y); font-weight: 800; }

/* Nimra's one-sentence quote sits in a short cell beside Saqib's: set it as a pull quote so the cell reads full */
.sb-quotes .quotes__grid > .quote:nth-child(3) blockquote p { font-size: clamp(18px, 0.5vw + 15px, 22px); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }

@media (min-width: 768px) { .sb-how .how2__step:last-child { grid-column: auto; } }
@media (min-width: 1200px) {
  .sb-how .how2__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sb-how .how2__step { padding: 28px 24px 30px; }
}


.sb-safety .safety__row { flex-direction: column; align-items: flex-start; gap: 2px; }
.sb-safety__item { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.sb-safety__item .ph-inline { font-size: 12px; }
@media (min-width: 1024px) {
  .sb-safety .safety__row { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 32px; }
  .sb-safety .safety__label { flex-basis: 100%; }
}

/* ---------- 6. apply.html ---------- */
.sb-help-long { display: none; }
@media (min-width: 1100px) { .sb-help-long { display: inline; } .sb-help-short { display: none; } }
.sum__anchor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: -6px; font-size: 14px; font-weight: 600; color: var(--n300); }
.sum__anchor s { text-decoration-thickness: 2px; }
.sum__anchor b {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border-radius: 999px;
  background: var(--y); color: var(--ink); font-size: 13px; font-weight: 800;
}
.sum__answers { display: grid; gap: 4px; }
.fx-opts--stack { grid-template-columns: minmax(0, 1fr); }
.sb-lead { margin: -12px 0 22px; font-size: 15px; font-weight: 600; color: var(--n600); }

/* ---------- 7. thank-you.html ---------- */
.sb-ty .ty-sub b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-start { display: grid; gap: 12px; }
.sb-slots .h4 { max-width: 22ch; }
.sb-community__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-top: 4px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--y);
}
.sb-community__icon .i { width: 24px; height: 24px; }
.sb-offer .btn, .sb-community .btn { margin: 6px 4px 4px 0; }
.sb-offer__price span:last-child { font-size: 15px; font-weight: 700; color: var(--ink-3); }
.sb-slots { display: grid; gap: 14px; }
.sb-slots > p { font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.sb-slots__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 400px; }
.sb-slots__grid li {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed var(--n500); background: var(--paper); color: var(--n600);
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sb-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sb-offer .sticker { height: auto; min-height: 32px; white-space: normal; padding-block: 4px; }
.sb-offer > p:not(.sticker) { color: var(--ink-3); }
.sb-offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.sb-offer__price .cur { font-weight: 800; }
.sb-offer__price .num { font-size: 44px; letter-spacing: -0.04em; }
.sb-community { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sb-community > p:not(.sticker) { color: var(--ink-3); }

/* ---------- 8. Motion (transform / opacity only) ---------- */
/* Each week's calls stamp onto the tile like a rubber stamp: in from a larger, tilted scale, settling with the brand spring.
   Phones: per tile (tiles enter one by one). Four across: 01 to 12 in one left-to-right pass. */
@media (prefers-reduced-motion: no-preference) {
  .js .sb-wk .sb-stamp { opacity: 0; }
  .js .sb-wk.is-in .sb-stamp { animation: sbStamp 340ms var(--spring-pop) both; animation-delay: calc(240ms + var(--j, 0) * 70ms); }
  /* the 12 slots wait for the card to enter (the shared reveal adds .is-in), so the stagger is seen, not spent at load */
  .js .sb-slots:not(.is-in) .sb-slots__grid li { opacity: 0; }
  .js .sb-slots.is-in .sb-slots__grid li { animation: sbSlot 260ms var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 35ms); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  .js .sb-wk.is-in .sb-stamp { animation-delay: calc(260ms + var(--i, 0) * 55ms); }
}
@keyframes sbStamp {
  from { opacity: 0; transform: rotate(calc(var(--rot, 0deg) - 14deg)) scale(1.35); }
  to { opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1); }
}
@keyframes sbSlot { from { opacity: 0; transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) {
  .sb-cmp__bar--ink { transition: none; }
}

/* route C has no prep / community block: the closing band only carries the help line */
.sb-ty[data-route="c"] .ty2-more { padding-block: 36px 44px; }
.sb-ty[data-route="c"] .ty2-more .help-line { margin-top: 0; }


/* ---------- B. Growth Bundle components ---------- */
/* =====================================================================
   Ask Moiz · v3 Kinetic Bento · pages/growth-bundle.css
   Page styles for the Growth Bundle journey only (index, apply, thank-you).
   Loads after services.css. Uses site.css tokens only; every class is ib-*.

   Contents
    1  Landing hero (nothing page-specific: shared in services.css §2)
    2  Fit fold (lead, CTA band)
    3  Deliverables bento ("five things your team walks away with")
    4  Sprint calendar (22 weekday calls, stamped week by week)
    5  Price: anchor math drawn to scale + Strategic vs Growth table
    6  Proof gallery, testimonials tag, how-it-works (4 steps), about proof, closing stats
    7  Apply page: summary "after you apply", soft website check
    8  Thank-you: route headlines, hand-off box, next-offer cards
    9  Motion + reduced motion
   ===================================================================== */

/* ---------- 1. Landing hero ---------- */
/* nothing page-specific: the ring (116px / 92px), the deal tile and the phone order are shared (services.css §2) */

/* ---------- 2. Fit ---------- */
.gb-fit__lead { max-width: 62ch; }
/* inline links inside the "not for you" sentences stay inline (WCAG 2.5.8 inline exception) */
.gb-fit__foot { margin-top: 16px; display: grid; gap: 16px; }
.gb-fit__cta {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px;
  padding: 24px 22px; border-radius: var(--r-tile); background: var(--y); border: 2px solid var(--ink); --focus: var(--ink);
}
.gb-fit__ask { max-width: 16ch; }
.gb-fit__micro { font-size: 15px; font-weight: 700; }
@media (max-width: 559px) { .gb-fit__cta .btn { display: flex; width: calc(100% - 4px); } }
@media (min-width: 768px) {
  /* one band: the ask on the left, the button and its micro-line on the right */
  .gb-fit__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; }
  .gb-fit__ask { grid-row: 1 / 3; max-width: 22ch; }
}
@media (min-width: 1024px) { .gb-fit__cta { padding: 28px 36px; } }

/* ---------- 3. Deliverables bento ---------- */
.gb-kit__grid { list-style: none; padding: 0; margin: 44px 0 0; }
.gb-kit__cell { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gb-kit__cell > p { color: var(--ink-3); max-width: 46ch; }
.tile--ink.gb-kit__cell > p { color: var(--n300); }
.tile--ink.gb-kit__cell .ph-inline { background: var(--n900); color: var(--n400); border-color: var(--n600); }
.tile--sun.gb-kit__cell .ph-inline { background: #fff; color: var(--ink-3); border-color: var(--ink-3); }
.gb-kit__cell .h3 { margin-top: 2px; }
.gb-kit__icon { width: 30px; height: 30px; }
.gb-kit__sticker { height: auto; min-height: 30px; padding-block: 4px; white-space: normal; }
.gb-kit__cell > .sticker { justify-self: start; }
.gb-kit__art { width: min(220px, 62%); height: auto; }
@media (max-width: 767px) { .gb-kit__art { display: none; } }   /* decorative: phones get the icon and the words */
/* tiles that carry a drawn object do not also need the small icon */
.gb-kit__audit .gb-kit__icon, .gb-kit__tpl .gb-kit__icon { display: none; }
.gb-kit__meta { list-style: none; padding: 12px 0 0; margin-top: auto; display: grid; gap: 8px; width: 100%; border-top: 1px solid var(--n200); font-size: 14px; font-weight: 600; color: var(--ink-3); }

/* the calls tile: the count is the headline, the week strip shows the rhythm */
.gb-kit__calls { gap: 16px; }
.gb-kit__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.gb-kit__big .num { font-size: clamp(72px, 4.4vw + 48px, 128px); letter-spacing: -0.055em; line-height: 0.82; }
.gb-kit__unit { font-size: 16px; font-weight: 700; color: #fff; }
/* the strip sizes its day labels to its own width, so "WED" never spills out of its chip in the narrow
   left column of the tile (768 to 1199); browsers without container units keep the 12px fallback */
.gb-strip {
  list-style: none; padding: 0; margin: 0; width: 100%; max-width: 440px; container-type: inline-size;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; gap: clamp(3px, 1.4cqi, 6px);
}
.gb-strip li {
  display: grid; place-items: center; height: 38px; border: 2px solid var(--y); border-radius: 10px;
  background: var(--y); color: var(--ink); font-size: 12px; font-size: clamp(10px, 3.6cqi, 12px);
  font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.gb-strip li.is-off { background: transparent; border: 2px dashed var(--n700); color: var(--n400); }

/* the roadmap tile: three check-ins on one dashed line */
.gb-road { list-style: none; padding: 0; margin: auto 0 0; width: 100%; max-width: 420px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gb-road li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; font-size: 14px; font-weight: 800; }
.gb-road li::before {
  content: ""; position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--ink); background: #fff;
}
.gb-road li:last-child::before { background: var(--ink); box-shadow: inset 0 0 0 4px #fff; }
.gb-road li:not(:last-child)::after { content: ""; position: absolute; left: 22px; right: 0; top: 12px; border-top: 2px dashed var(--ink); }

@media (min-width: 768px) {
  .gb-kit__cell { padding: 28px; }
  .gb-kit__audit { grid-column: 1 / -1; }
  .gb-kit__calls, .gb-kit__wa { grid-column: 1 / 4; }
  .gb-kit__roadmap, .gb-kit__tpl { grid-column: 4 / 7; }
}
@media (min-width: 1024px) {
  .gb-kit__audit { grid-column: 1 / 6; grid-row: 1 / 3; }
  .gb-kit__calls { grid-column: 6 / 13; grid-row: 1; }
  .gb-kit__roadmap { grid-column: 6 / 13; grid-row: 2; }
  .gb-kit__wa { grid-column: 1 / 6; grid-row: 3; }
  .gb-kit__tpl { grid-column: 6 / 13; grid-row: 3; }
  .gb-kit__cell { padding: 32px; }
  .gb-kit__audit .gb-kit__art { width: min(300px, 78%); align-self: center; margin: 8px 0 18px; }
  /* wide tiles: copy on the left, the object on the right */
  .gb-kit__calls, .gb-kit__roadmap, .gb-kit__tpl {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); column-gap: 28px; row-gap: 12px; align-content: start;
  }
  .gb-kit__calls > *, .gb-kit__roadmap > *, .gb-kit__tpl > * { grid-column: 1; }
  .gb-kit__calls .gb-kit__big { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; flex-direction: column; align-items: flex-end; text-align: right; }
  .gb-kit__calls .gb-kit__big .num { font-size: clamp(96px, 7vw, 150px); }
  .gb-kit__calls .gb-strip { grid-row: 3; }
  .gb-kit__roadmap .gb-road { grid-column: 2; grid-row: 1 / 5; align-self: end; margin: 0; }
  .gb-kit__roadmap > .sticker { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
  .gb-kit__tpl .gb-kit__art { grid-column: 2; grid-row: 1 / 5; align-self: center; justify-self: center; width: min(230px, 100%); }
}
.gb-kit__foot { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.gb-kit__foot .cta-proof { flex-basis: 100%; margin-top: 0; }
@media (min-width: 1024px) { .gb-kit__foot .cta-proof { flex-basis: auto; margin-left: auto; } }
.gb-kit__note { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; }
@media (max-width: 559px) { .gb-kit__foot .btn { display: flex; width: calc(100% - 4px); } }

/* ---------- 4. Sprint calendar (black) ---------- */
.gb-sprint { background: var(--ink); color: #fff; --focus: var(--y); --halo: transparent; padding-block: var(--sec); }
.gb-sprint .ph-inline { background: var(--n900); color: var(--n400); border-color: var(--n600); }
.gb-sprint__note { margin-top: 16px; }
.gb-cal { margin-top: 40px; padding: 8px 16px; border: 2px solid var(--n700); border-radius: var(--r-tile); background: var(--ink-2); }
.gb-cal__head { display: none; }
.gb-cal__weeks { list-style: none; padding: 0; margin: 0; }
.gb-wk { display: grid; gap: 14px; padding: 18px 0 20px; }
.gb-wk + .gb-wk { border-top: 1px solid var(--n800); }
.gb-wk__when { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--y); }
.gb-wk__what { margin-top: 6px; font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; text-transform: uppercase; }
.gb-wk__text { margin-top: 8px; max-width: 42ch; font-size: 15px; line-height: 1.5; color: var(--n300); }
.gb-wk__days { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-content: start; }
.gb-day {
  display: grid; place-items: center; min-height: 52px; border: 2px solid var(--n600); border-radius: 12px;
  background: var(--ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.gb-day--mark { background: var(--y); border-color: var(--y); color: var(--ink); }
.gb-day--handover {
  grid-column: span 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding: 8px 12px; background: var(--y); border-color: var(--y); color: var(--ink); text-align: left;
}
.gb-day--handover b { font-size: 14px; font-weight: 800; line-height: 1.15; }
.gb-day--handover span { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ink-3); }
.gb-cal__legend { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 12px; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--n300); }
.gb-cal__swatch { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; background: var(--y); }
.gb-sprint__close { margin-top: 36px; max-width: 34ch; font-size: clamp(20px, 0.9vw + 15px, 28px); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
@media (min-width: 768px) {
  .gb-cal { padding: 8px 28px; }
  .gb-wk { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; padding: 24px 0; }
  .gb-wk__days { gap: 8px; }
  .gb-day { min-height: 60px; font-size: 20px; }
  .gb-day--handover b { font-size: 16px; }
  .gb-day--handover span { font-size: 13px; }
  .gb-cal__head {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: end;
    padding: 18px 0 14px; border-bottom: 1px solid var(--n800);
  }
  .gb-cal__corner { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n400); }
  .gb-cal__dow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .gb-cal__dow span { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n400); }
  .gb-cal__legend { margin: 6px 0 20px; }
}
@media (min-width: 1024px) {
  .gb-cal { padding: 8px 36px; }
  .gb-wk, .gb-cal__head { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
  .gb-day { min-height: 68px; font-size: 22px; }
}

/* ---------- 5. Price ---------- */
.gb-price__lead { max-width: 64ch; }
.gb-price__name { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gb-price__quiet { align-self: flex-start; font-size: 15px; }
.gb-math { display: flex; flex-direction: column; gap: 18px; }
.gb-math__save { font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
.gb-math__save b { color: var(--ink); font-weight: 800; }

/* Strategic vs Growth: a real table, the Growth Bundle column carries the tint */
.gb-compare { margin-top: 40px; border: 2px solid var(--ink); border-radius: var(--r-tile); background: #fff; overflow: hidden; }
/* one tap away (a disclosure), so the price fold stays one screen: the table spans the whole card when open */
.gb-compare > summary { padding-inline: 22px; }
.gb-compare .qa__a { padding: 0; max-width: none; color: var(--ink); border-top: 2px solid var(--ink); }
.gb-compare__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.4; }
.gb-compare__table th, .gb-compare__table td { padding: 12px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--n200); overflow-wrap: anywhere; }
.gb-compare__table thead th, .gb-compare__table thead td { border-top: 0; padding-block: 16px 14px; vertical-align: bottom; }
.gb-compare__corner { width: 31%; }
.gb-compare__table thead th { font-size: 14px; font-weight: 800; line-height: 1.2; }
.gb-compare__ib { background: var(--ink); color: #fff; }
.gb-compare__table tbody td:last-child, .gb-compare__table tfoot td:last-child { background: var(--y-100); }
.gb-compare__table tbody tr + tr td:last-child { border-top-color: #f3e2a6; }
.gb-compare__table tbody th { font-weight: 700; color: var(--ink-3); }
.gb-compare__table tbody td { font-weight: 600; }
.gb-compare__badge {
  display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 3px 9px;
  border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.25; text-transform: uppercase;
}
.gb-compare__ib .gb-compare__badge { background: var(--y); border-color: var(--y); }
.gb-yes, .gb-no .i { width: 16px; height: 16px; margin: -2px 6px 0 0; stroke-width: 3; }
.gb-yes { color: var(--ink); }
.gb-no { color: var(--n600); }
.gb-compare .ph-inline { display: inline-block; line-height: 1.4; }
.gb-compare__table tfoot td { border-top: 2px solid var(--ink); padding-block: 14px 16px; vertical-align: middle; }
.gb-compare__table tfoot .link { padding-block: 4px; font-size: 14px; }
/* phones: three narrow columns cannot hold a button; the price card above carries the same two actions */
@media (max-width: 599px) {
  .gb-compare__table tfoot { display: none; }
  .gb-compare__badge { padding: 2px 7px; font-size: 10px; letter-spacing: 0.03em; }
}
@media (min-width: 768px) {
  .gb-compare__table { font-size: 15px; }
  .gb-compare__table th, .gb-compare__table td { padding: 14px 20px; }
  .gb-compare__table thead th { font-size: 17px; padding-block: 22px 18px; }
  .gb-compare__corner { width: 28%; }
  .gb-compare__badge { display: inline-block; margin: 0 0 0 10px; vertical-align: 2px; }
}

/* ---------- 6. Proof, quotes, how, about, closing ---------- */
.case__lead { max-width: 60ch; }
.gb-gallery { margin-top: var(--gap); display: grid; gap: var(--gap); align-items: start; }
/* phones: the two extra screenshots swipe sideways, so the proof fold costs one screenshot of height */
@media (max-width: 767px) {
  .gb-gallery {
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px;
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: thin; flex-wrap: nowrap;
  }
  .gb-gallery > .gb-shot { flex: 0 0 86%; scroll-snap-align: start; }
  .gb-gallery > .gb-proof__small { flex: 0 0 70%; align-self: center; }
  .js .gb-gallery > .reveal { opacity: 1; transform: none; transition: none; }
}
.gb-proof__small { grid-column: 1 / -1; padding: 4px 6px 0; font-size: 13px; line-height: 1.5; color: var(--n400); }
@media (min-width: 768px) { .gb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gb-quote__tag { align-self: flex-start; height: auto; min-height: 28px; padding-block: 3px; font-size: 11px; }

/* four steps, not five: two by two on tablets, one row on wide screens */
@media (min-width: 768px) { .gb-how .how2__step:last-child { grid-column: auto; } }
@media (min-width: 1200px) { .gb-how .how2__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.gb-about__proof { display: grid; gap: var(--gap); }
.gb-about__teach { margin: 0; padding: 0; min-height: 280px; background: var(--n100); }
.gb-about__teach img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.gb-about__review { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.gb-about__review blockquote { margin: 0; }
.gb-about__review blockquote p { font-size: clamp(18px, 0.5vw + 15px, 21px); font-weight: 700; line-height: 1.38; letter-spacing: -0.01em; }
.gb-about__review figcaption { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.gb-about__review figcaption b { font-size: 15px; }
.gb-about__review figcaption span { font-size: 13px; color: var(--n300); }
.gb-stars { display: flex; gap: 3px; }
.gb-stars .i { width: 18px; height: 18px; fill: var(--y); stroke: var(--y); stroke-width: 1.5; }
@media (min-width: 560px) { .gb-about__proof { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .svc-about__grid > .gb-about__proof { grid-column: 4 / 7; grid-row: 2; grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
}
@media (min-width: 1024px) {
  .svc-about__grid > .gb-about__proof { grid-column: 6 / 13; grid-row: 2; padding-left: 28px; }
  .gb-about__teach { min-height: 300px; }
}

.gb-about + .faq { padding-top: 0; }
/* 1024 to 1279: the 4-column FAQ aside (253px inside) is narrower than "Message Moiz on WhatsApp";
   give it five columns so the button never spills past the tile (site.css keeps 1/5 for other pages) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gb-faq .faq__side { grid-column: 1 / 6; }
  .gb-faq .faq__list { grid-column: 6 / 13; }
}

/* ---------- 7. Apply page ---------- */
.gb-sum-save { font-size: 14px; font-weight: 700; color: var(--y); }
.gb-sum-next { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--n800); }
.gb-sum-next__h { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n400); }
.gb-sum-next ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: ibn; }
.gb-sum-next li { position: relative; padding-left: 34px; font-size: 14px; font-weight: 600; line-height: 1.45; color: #fff; counter-increment: ibn; }
.gb-sum-next li::before {
  content: counter(ibn); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--y); color: var(--ink); font-size: 13px; font-weight: 800;
}
/* the summary sits on ink: its quote role line needs the light grey (services.css leaves it at n600, 2.6:1) */
.sum .quote__by span span { color: var(--n300); }
/* four short team-size chips stay on one row at 390 */
@media (max-width: 479px) { .gb-chips--tight { gap: 8px; } .gb-chips--tight .fx-chip__face { padding-inline: 14px; } }
.gb-soft { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--err); }
.gb-soft .i { width: 16px; height: 16px; }

/* ---------- 8. Thank-you ---------- */
.gb-ty-prep { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* route B (no checklist): the next-offer card has the band to itself */
body:not([data-route="a"]) .gb-ty-more .next-offer { grid-column: 1 / -1; }
.gb-ty-prep > p { color: var(--ink-3); }
.gb-ty-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gb-ty-offer .sticker { height: auto; min-height: 32px; padding-block: 4px; white-space: normal; }
.gb-ty-offer__price { display: flex; align-items: baseline; gap: 8px; }
.gb-ty-offer__price .cur { font-size: 16px; font-weight: 800; }
.gb-ty-offer__price .num { font-size: clamp(44px, 2.4vw + 30px, 64px); letter-spacing: -0.045em; }
.gb-ty-offer > p:not(.sticker):not(.gb-ty-offer__price) { color: var(--ink-3); max-width: 52ch; }
.gb-ty-c { margin-top: 40px; display: grid; gap: 16px; }
.prep .ph-inline { background: var(--n900); color: var(--n400); border-color: var(--n600); }
.gb-ty-help { margin: 28px 0 40px; }
@media (min-width: 1024px) {
  .gb-ty-c { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
  .gb-ty-offer { padding: 36px; }
}
.gb-ty-c__side { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.gb-ty-c__side > p { color: var(--n300); }

/* ---------- 9. Motion (transform / opacity only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the month fills up: each weekday stamps in, week by week, on one diagonal wave */
  .js .gb-cal .gb-day { opacity: 0; transform: scale(0.86); }
  .js .gb-cal.is-in .gb-day {
    opacity: 1; transform: none;
    transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out);
    transition-delay: calc(120ms + var(--i, 0) * 55ms);
  }
  /* the anchor math draws itself to scale */
  .js .gb-math .hbar__bar { transform: scaleX(0); transition: transform 600ms var(--ease-out); }
  .js .gb-math .hbar__row + .hbar__row .hbar__bar { transition-duration: 700ms; transition-delay: 140ms; }
  .js .gb-math.is-in .hbar__bar { transform: none; }
}


/* ---------- C. The merged page ---------- */
/* hero deal tile: both options in the price slot, each a link to its card */
.cons-deal { list-style: none; padding: 0; display: grid; gap: 8px; }
.cons-deal a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline;
  padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none;
  transition: background-color 140ms ease, transform 160ms var(--ease-out);
}
.cons-deal li:last-child a { background: var(--ink); color: #fff; }
.cons-deal__n { font-size: 15px; font-weight: 800; }
.cons-deal__p { grid-row: 1 / 3; grid-column: 2; align-self: center; white-space: nowrap; }
.cons-deal__p .cur { font-size: 13px; font-weight: 800; }
.cons-deal__p .num { font-size: clamp(24px, 0.8vw + 18px, 30px); letter-spacing: -0.04em; }
.cons-deal li:last-child .cons-deal__p .num { color: var(--y); }
.cons-deal__f { font-size: 13px; font-weight: 600; color: var(--n600); }
.cons-deal li:last-child .cons-deal__f { color: var(--n300); }
.cons-deal a:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .cons-deal li:first-child a:hover { background: var(--y-100); }
  .cons-deal li:last-child a:hover { background: var(--ink-3); }
}

/* the comparison table, out in the open (the Growth page had it in a disclosure) */
.cons-compare__box { margin-top: 40px; box-shadow: 6px 6px 0 var(--ink); margin-right: 6px; }

/* payment, in one place: split / ways / small print */
.cons-pay__grid { margin-top: 40px; display: grid; gap: var(--gap); }
.cons-pay__grid > .tile { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; }
.cons-pay__big { display: flex; align-items: baseline; gap: 10px; font-weight: 700; }
.cons-pay__big .num { font-size: clamp(40px, 2vw + 28px, 56px); letter-spacing: -0.045em; }
.cons-pay__split > p:last-child { color: var(--ink-3); max-width: 34ch; }
.cons-pay__fine .tick { background: var(--y); color: var(--ink); }
.cons-pay__ways .link { margin-top: auto; }
@media (min-width: 768px) {
  .cons-pay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cons-pay__split { grid-row: span 2; }
}
@media (min-width: 1024px) {
  .cons-pay__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); }
  .cons-pay__split { grid-row: auto; }
}

/* the proof fold's big number is the 12-year average (text, not a count-up) */
.cons-hero ~ .case .case__num, #case .case__num { letter-spacing: -0.05em; }

/* apply.html: the summary follows the option picked; each option's block joins the summary's own grid and gaps */
.sum__body > div[data-show-if] { display: contents; }

/* ---------- Round 7: "Most people start here" (Caveat + the looping-arrow motif) on the Strategic Bundle card ----------
   Phones and tablets: a line above the card, the arrow dropping into it. 1100px+: beside the card's top-right corner,
   above the gap between the two cards. The arrow draws in once (am-extras.js adds .is-drawn); reduced motion: static. */
.cons-hand {
  grid-column: 1 / -1; position: relative; z-index: 2; display: flex; flex-direction: row-reverse; justify-content: flex-end;
  align-items: flex-end; gap: 2px; margin: 0 0 -34px 10px; pointer-events: none; color: var(--ink);
}
.cons-hand__t {
  font-family: var(--script); font-weight: 700; font-size: clamp(27px, 1vw + 22px, 34px); line-height: 1;
  transform: rotate(-4deg); transform-origin: left bottom; padding-bottom: 38px; white-space: nowrap;
}
.cons-hand .cons-hand__arrow { position: static; flex: none; width: 74px; margin-bottom: -6px; }
@media (min-width: 1100px) {
  .optpair { position: relative; margin-top: 72px; }
  .cons-hand {
    position: absolute; left: calc(50% - 52px); bottom: calc(100% - 30px); flex-direction: row; align-items: flex-start;
    gap: 6px; margin: 0;
  }
  .cons-hand__t { padding: 6px 0 0; transform: rotate(-5deg); }
  .cons-hand .cons-hand__arrow { width: 104px; margin: 0; }
}

/* the Strategic Bundle's 8 calls as two rows of four */
.sb-slots__grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 280px; }