/* Growth Review page (/growth-review). The split hero, stack mechanics, checklist, report sheet and fit cards are in site.css. */

/* ---------- 01 Hero: a priority report, the call and the follow-up, as glass cards at three depths ---------- */
/* The longer title needs a wider measure to settle into three balanced lines: "Find the part of / your system that's / holding growth back." */
.gr-hero__title { max-width: 18ch; }
.stack__layer--page { left: 0; top: 0; width: 86%; transform: translateZ(10px); }
.stack__layer--call { right: 0; top: 50%; width: 64%; transform: translateZ(60px); }
.stack__layer--inbox { left: 4%; bottom: 4%; width: 72%; transform: translateZ(110px); }
.stack__layer--call .stack__card { animation-delay: -2.7s; }
.stack__layer--inbox .stack__card { animation-delay: -5.3s; }
.gr-page__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.gr-page__title { font-size: 0.9375rem; font-weight: var(--sf-fw-bold); }
.gr-page__for { font-size: 0.75rem; color: rgba(255, 255, 255, 0.66); }
.gr-page__list { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.gr-page__list li { display: flex; align-items: flex-start; gap: 12px; }
.gr-page__n { flex: none; font-size: 0.75rem; font-weight: var(--sf-fw-bold); letter-spacing: 0.08em; color: #B9C8FF; }
.gr-page__body { flex: 1; display: grid; gap: 6px; }
.gr-page__layer { font-size: 0.8125rem; font-weight: var(--sf-fw-semibold); color: rgba(255, 255, 255, 0.86); }
.gr-page__body i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.gr-page__body i.short { width: 62%; }
.gr-note { display: flex; align-items: center; gap: 12px; }
.gr-note__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(70, 119, 255, 0.18); color: #B9C8FF; }
.gr-note__icon--ok { background: rgba(63, 191, 135, 0.16); color: #3FBF87; }
.gr-note__icon .sf-icon { width: 18px; height: 18px; }
.gr-note__text { display: grid; gap: 2px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }
.gr-note__text strong { font-size: 0.9375rem; color: var(--sf-white); }
/* Phones: a taller stack, so the call card sits below the third priority instead of over it. */
@media (max-width: 559px) {
  .stack { aspect-ratio: 1 / 1.2; }
  .stack__layer--page { width: 94%; }
  .stack__layer--call { top: 52%; width: 74%; }
  .stack__layer--inbox { left: 6%; bottom: 0; width: 84%; }
  .stack__card { padding: 12px 14px; }
}
/* The narrowest phones: taller still, with a lower, wider call card, so its title stays on one line and it clears the third priority. */
@media (max-width: 374px) {
  .stack { aspect-ratio: 1 / 1.4; }
  .stack__layer--call { top: 57%; width: 84%; }
}

/* ---------- 02 What we review: three across, then two wider cards ---------- */
.review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .review-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .review-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .review-grid > * { grid-column: span 2; }
  .review-grid > :nth-child(n + 4) { grid-column: span 3; }
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card .sf-icon-tile { color: var(--sf-fg-accent); }
.review-card__layer { font: 600 0.75rem/1 var(--sf-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); }
.review-card__title { margin-top: 20px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.review-card__text { margin-top: 8px; color: var(--sf-fg-body); }

/* ---------- 03 What you get: the sample report's insides (shapes only, no content) ---------- */
.gr-report__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.gr-report__summary > div { padding: 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.gr-report__summary strong { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.8125rem; }
.gr-report__summary .sf-icon { width: 16px; height: 16px; }
.gr-report__ok { color: var(--sf-fg-success); }
.gr-report__fix { color: var(--sf-fg-accent); }
.gr-report i { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: var(--sf-border-strong); opacity: 0.6; }
.gr-report i.short { width: 60%; }
.gr-report__list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.gr-report__list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.gr-report__n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sf-gradient-brand); color: var(--sf-white); font-size: 0.8125rem; font-weight: var(--sf-fw-bold); }
/* Light theme AA: white on the raw brand gradient was 4.3:1 at 13px; the CTA pair is 4.6:1. */
:root[data-theme="light"] .gr-report__n { background: var(--sf-gradient-cta); }
.gr-report__body { flex: 1; min-width: 0; }
.gr-report__body strong { display: block; font-size: 0.875rem; }
.gr-report__body i { width: 80%; }
.gr-report__next { margin-top: 16px; padding: 14px; border-radius: var(--sf-radius-sm); background: var(--sf-hover); }
.gr-report__next strong { font-size: 0.8125rem; }
@media (max-width: 559px) { .gr-report__summary { grid-template-columns: minmax(0, 1fr); } .gr-report__list .sf-chip { display: none; } }

/* ---------- 04 Two ways to start ---------- */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Print: a flex column, so the two offers can break onto separate pages instead of leaving the heading alone (as .steps). */
@media print { .ways { display: flex; flex-direction: column; } }
.way { display: flex; flex-direction: column; }
.way__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.way__title { font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); font-weight: var(--sf-fw-bold); letter-spacing: -0.01em; }
.way__price { margin-top: 14px; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 1; font-weight: var(--sf-fw-extrabold); letter-spacing: -0.03em; }
.way__text { margin-top: 16px; max-width: 46ch; color: var(--sf-fg-body); }
.way__list { flex: 1; align-content: start; margin-top: 22px; font-size: 1rem; }
.way__cta { margin-top: 28px; }
/* Light theme: the section is the page's Midnight chapter band (.sf-band), and the offer uses emphasis by inversion.
   The free review is the one bright sheet (the featured card); the $500 audit is dark glass, with a white outline
   button whose edge holds 3:1 on the band. Print goes back to paper edges. */
:root[data-theme="light"] .sf-section.sf-dark.sf-band .sf-card--outline { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
:root[data-theme="light"] .sf-section.sf-dark.sf-band .sf-card--outline :is(.sf-btn--secondary, .sf-btn--whatsapp) { background-color: transparent; border-color: rgba(255, 255, 255, 0.5); box-shadow: none; }
:root[data-theme="light"] .sf-section.sf-dark.sf-band .sf-card--outline :is(.sf-btn--secondary, .sf-btn--whatsapp):is(:hover, .is-hover) { background-color: var(--sf-hover); border-color: rgba(255, 255, 255, 0.7); }
@media print {
  :root[data-theme="light"] .sf-section.sf-dark.sf-band .sf-card--outline { border-color: var(--sf-hairline); }
  :root[data-theme="light"] .sf-section.sf-dark.sf-band .sf-card--outline :is(.sf-btn--secondary, .sf-btn--whatsapp) { border-color: var(--sf-hairline-strong); }
}

/* ---------- 08 Booking ---------- */
.book__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) {
  .book__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .book__aside { position: sticky; top: calc(var(--sf-header-height) + 32px); }
}
.book__aside .sf-lead { margin-top: 18px; }
/* Buttons and error lines set their own display, so the hidden attribute needs help to win. */
.book [hidden] { display: none !important; }
.gr-form__status { display: grid; gap: 14px; margin-bottom: 22px; }
.gr-form__count { margin: 0; }
.gr-step + .gr-step { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--sf-border); }
.gr-step__title { outline: none; }
.gr-step .gr-step__title + .sf-field { margin-top: 20px; }
.gr-field .sf-field__label { margin-bottom: 10px; }
fieldset.gr-field + .sf-field, .sf-field + fieldset.gr-field { margin-top: 22px; }
/* Choice chips show the error colour too, not only the text inputs. */
.sf-field--error .sf-choice__label { border-color: var(--sf-fg-error); }
.gr-form__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.gr-form__nav [data-gr-next], .gr-form__nav [data-gr-confirm] { margin-left: auto; }
@media (max-width: 559px) { .gr-form__nav .sf-btn { flex: 1 1 auto; } }
.gr-form__note { margin-top: 14px; }
/* Once the script is running, one step shows at a time. Without it, all three stack and submit together. */
.gr-form[data-gr-ready] .gr-step:not(.is-current) { display: none; }
.gr-form[data-gr-ready] .gr-step + .gr-step { margin-top: 0; padding-top: 0; border-top: 0; }
.gr-form:not([data-gr-ready]) .gr-form__status { display: none; }
.gr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gr-turnstile { display: flex; align-items: center; min-height: 64px; margin-top: 22px; padding: 0 16px; border: 1px dashed var(--sf-border-strong); border-radius: var(--sf-radius-sm); font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.gr-consent { margin-top: 16px; }

.gr-result { outline: none; }
.gr-cal__tz { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.gr-cal__tz .sf-icon { width: 16px; height: 16px; }
.gr-cal .sf-field { margin-top: 22px; }
.gr-done__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%; background: var(--sf-gradient-brand); color: var(--sf-white); }
.gr-done__icon .sf-icon { width: 26px; height: 26px; stroke-width: 2.5; }
/* Printers drop backgrounds by default, which would leave a white tick (or number) on white paper. */
@media print { .gr-done__icon, .gr-report__n { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
.gr-done__when { margin-top: 10px; font-size: var(--sf-fs-body-lg); font-weight: var(--sf-fw-semibold); }
.gr-done__text { margin-top: 12px; color: var(--sf-fg-body); }
.gr-done__steps { display: grid; gap: 8px; margin: 16px 0 24px; padding-left: 1.25em; }
/* The reply panel has no list, so its link needs the same gap the list gives the booked panel. */
.gr-done__text + .sf-link-arrow { margin-top: 24px; }