/* ============================================================================
   gm-plans.css - page layer for the plan pages (hosting, pricing,
   content-updates). Loads AFTER scrollcraft.css + gs-motion.css.
   ----------------------------------------------------------------------------
   Everything is scoped under .gs-sc (the opt-in root) except the small
   "page chrome" block at the top, which only recolours the site header and the
   body ground on pages that load this file, so the header, the page and the
   footer read as one dark green-black surface.
   Rules: animate only transform / opacity / clip-path; no transition: all;
   hover motion gated to fine pointers; reduced motion gives a still page.
   Guide: docs/website/SCROLLCRAFT-DESIGN-SYSTEM.md
   ========================================================================== */

/* ----------------------------------------------------------- page chrome -- */
body { background: #070b09; }
.gs-header { background: rgba(7, 11, 9, 0.86); border-bottom-color: rgba(238, 243, 239, 0.08); }
.gs-mobile-menu { background: rgba(7, 11, 9, 0.97); }
.gs-site-footer { margin-top: 0; }

/* ---------------------------------------------------------- shared type -- */
.gs-sc .gm-eyebrow { display: inline-block; margin: 0 0 var(--sc-4); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-accent); }
.gs-sc .gm-head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.gs-sc .gm-head .gm-room-p { max-width: 52ch; }
.gs-sc .gm-link { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); transition: text-decoration-color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gs-sc .gm-link:hover { text-decoration-color: var(--sc-accent); } }
.gs-sc .gm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: var(--sc-6); }
.gs-sc .gm-btn svg, .gs-sc .gm-btn--ghost svg { width: 18px; height: 18px; flex: none; }

/* ------------------------------------------------------ hero, page tune --
   Inner-page heroes carry longer headlines than the homepage, so the copy
   column is wider and the title a step smaller. The far photo is dimmed on
   pages whose photo is a daylight shot. */
.gs-sc .gm-hero__copy { max-width: min(50rem, 64vw); }
.gs-sc .gm-hero__title--md { font-size: clamp(2.5rem, 1.1rem + 3.5vw, 4.6rem); }
.gs-sc .gm-hero__line { max-width: 36ch; }
.gs-sc .gm-hero--dim .gm-hero__far img { filter: brightness(.58) saturate(.9); }
.gs-sc .gm-hero--dusk .gm-hero__far img { filter: brightness(.74); }
.gs-sc .gm-hero__meta span { white-space: nowrap; }

/* -------------------------------------------------- split: head + body --
   A sticky room heading on the left, the room's content on the right. */
.gs-sc .gm-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.gs-sc .gm-split__head { position: sticky; top: calc(var(--gm-head-h) + var(--gm-index-h) + 28px); }
.gs-sc .gm-split__head .gm-pane { margin-top: var(--sc-7); }
.gs-sc .gm-split__head .gm-label { margin-top: 18px; }

/* -------------------------------------------- ledger: items on hairlines --
   Replaces the old icon-card grids. Plain type on space, two columns. */
.gs-sc .gm-ledger { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.gs-sc .gm-ledger--one { grid-template-columns: minmax(0, 1fr); }
.gs-sc .gm-ledger > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px 16px; padding: 22px 0 26px; border-top: 1px solid var(--gm-line); }
.gs-sc .gm-ledger svg { width: 22px; height: 22px; color: var(--sc-accent); grid-row: span 2; margin-top: 2px; display: block; }
.gs-sc .gm-ledger h3 { font-family: var(--sc-font-display); font-size: 1.22rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: var(--sc-ink); }
.gs-sc .gm-ledger p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.6; }

/* ------------------------------------------ bundle: step blocks + tiers -- */
.gs-sc .gm-stepblock { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--gm-line); }
.gs-sc .gm-stepblock__k { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-accent); padding-top: 6px; }
.gs-sc .gm-stepblock h3 { font-family: var(--sc-font-display); font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; color: var(--sc-ink); }
.gs-sc .gm-stepblock h3 small { display: block; margin-top: 6px; font: 400 .98rem/1.5 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
.gs-sc .gm-stepblock > div > p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); max-width: 62ch; }
.gs-sc .gm-stepblock .gm-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 20px; }
.gs-sc .gm-stepblock .gm-ticks li { color: var(--sc-ink); }

.gs-sc .gm-tiers { --n: 5; list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  border-block: 1px solid var(--gm-line); }
.gs-sc .gm-tier { padding: 20px 18px 22px; display: grid; align-content: start; gap: 2px; }
.gs-sc .gm-tier + .gm-tier { border-left: 1px solid var(--gm-line); }
.gs-sc .gm-tier__name { margin: 0; font: 600 .8rem/1.3 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.gs-sc .gm-tier__price { margin: 10px 0 0; font-family: var(--sc-font-display); font-size: clamp(1.7rem, 1.1rem + 1.3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--sc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-sc .gm-tier__unit { font-size: .8rem; color: var(--sc-ink-soft); }
.gs-sc .gm-tier__note { margin: 12px 0 0; font-size: .9rem; color: var(--sc-ink); }
/* message-volume bar: the width is the tier's real message allowance */
.gs-sc .gm-tier__bar { height: 3px; margin-top: 14px; border-radius: 2px; background: var(--gm-line); overflow: hidden; }
.gs-sc .gm-tier__bar i { display: block; height: 100%; width: 100%; background: var(--sc-accent); transform-origin: left; transform: scaleX(var(--w, 0)); }
.gs-sc .gm-tier--lead { background: linear-gradient(180deg, color-mix(in oklab, var(--sc-accent) 8%, transparent), transparent 70%); }

/* ------------------------------------------------ rows: priced add-ons -- */
.gs-sc .gm-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gm-line); }
.gs-sc .gm-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 6px 32px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--gm-line); }
.gs-sc .gm-row h3 { margin: 0; font-family: var(--sc-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--sc-ink); }
.gs-sc .gm-row__price { margin: 0; }
.gs-sc .gm-row__price b { display: block; font-family: var(--sc-font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.gs-sc .gm-row__price > span { display: block; font-size: .8rem; color: var(--sc-ink-soft); }
.gs-sc .gm-row p:last-child { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; }
.gs-sc .gm-row a { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------ steps: a route -- */
.gs-sc .gm-route { position: relative; }
.gs-sc .gm-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.gs-sc .gm-steps__line { position: absolute; left: 22px; right: 0; top: 22px; height: 1px; background: linear-gradient(90deg, var(--sc-accent), var(--gm-line) 70%); pointer-events: none; }
.gs-sc .gm-step { position: relative; }
.gs-sc .gm-step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sc-accent);
  background: var(--sc-canvas); color: var(--sc-accent); font: 700 1.05rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; }
.gs-sc .gm-step h3 { margin: 20px 0 8px; font-family: var(--sc-font-display); font-size: 1.22rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--sc-ink); }
.gs-sc .gm-step p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; max-width: 30ch; }
.gs-sc .gm-section--deep .gm-step__n { background: var(--gm-deep); }

/* ---------------------------------------------------- FAQ, restyled -----
   Keeps the page's existing .gs-faq-* markup and its onclick toggles. The
   old max-height animation (a layout property) is switched off. */
.gs-sc .gs-faq-list { display: block; max-width: 52rem; border-top: 1px solid var(--gm-line); }
.gs-sc .gs-faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--gm-line); border-radius: 0; overflow: visible; }
.gs-sc .gs-faq-item.open { border-color: var(--gm-line); border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 60%, transparent); }
.gs-sc .gs-faq-q { padding: 22px 0; gap: 20px; font-family: var(--sc-font-display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--sc-ink); transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gs-sc .gs-faq-q:hover { color: var(--sc-accent); } }
.gs-sc .gs-faq-q:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 6px; }
.gs-sc .gs-faq-toggle { width: 30px; height: 30px; background: transparent; border: 1px solid var(--gm-line); color: var(--sc-ink-soft); font-family: var(--sc-font-text);
  transition: transform 200ms var(--sc-ease-out), color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.gs-sc .gs-faq-item.open .gs-faq-toggle { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); color: var(--sc-accent); }
.gs-sc .gs-faq-a { transition: none; }
.gs-sc .gs-faq-item.open .gs-faq-a { max-height: none; }
.gs-sc .gs-faq-a-inner { padding: 0 0 24px; font-size: 1rem; line-height: 1.7; color: var(--sc-ink-soft); max-width: 62ch; }

/* ------------------------------------------------------- closing room -- */
.gs-sc .gm-close { padding-block: clamp(96px, 16vh, 180px); background: radial-gradient(60% 70% at 50% 100%, hsl(145 55% 10% / .75), transparent 72%), var(--gm-deep); }
.gs-sc .gm-close .gm-room-h { max-width: 16ch; }
.gs-sc .gm-close .gm-room-p { max-width: 46ch; }

/* ===================================================== SAMPLE DASHBOARD ==
   hosting.html "Leads" room. Clearly labelled SAMPLE DATA on screen; the
   business is a made-up example. Every moving part reads one value per beat,
   derived from the pinned act's --sc-p:
     --wake  the dashboard comes up     --land  the new lead drops in
     --saved it is filed to contacts    --draw  the search chart draws  */
.gs-sc .gm-leads { --wake: clamp(0, calc(var(--sc-p, 0) * 5), 1); --land: clamp(0, calc((var(--sc-p, 0) - .26) * 7), 1);
  --saved: clamp(0, calc((var(--sc-p, 0) - .5) * 8), 1); --draw: clamp(0, calc((var(--sc-p, 0) - .7) * 4.5), 1); }
.gs-sc .gm-leads__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: calc(var(--gm-top) + 2vh) var(--sc-gutter) 4vh; max-width: 84rem; margin-inline: auto; }
.gs-sc .gm-leads__story .gm-room-p { max-width: 36ch; }
.gs-sc .gm-beats { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: 14px; }
.gs-sc .gm-beat { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 14px; }
.gs-sc .gm-beat::before { content: ""; grid-row: span 2; width: 12px; height: 12px; margin: 6px 0 0 6px; border-radius: 50%; border: 1px solid var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 30%, transparent); }
.gs-sc .gm-beat b { font-family: var(--sc-font-display); font-size: 1.1rem; letter-spacing: -0.01em; line-height: 1.3; color: var(--sc-ink); }
.gs-sc .gm-beat span { color: var(--sc-ink-soft); font-size: .93rem; line-height: 1.55; }

.gs-sc .gm-dash { position: relative; border-radius: 18px; border: 1px solid var(--gm-line); background: #0b100e; overflow: hidden;
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 8%, transparent), 0 40px 80px -30px hsl(150 60% 2% / .85);
  opacity: calc(.45 + var(--wake) * .55); transform: translateY(calc((1 - var(--wake)) * 18px)); }
.gs-sc .gm-dash__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gm-line); }
.gs-sc .gm-dash__title { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.gs-sc .gm-dash__title small { display: block; font-weight: 400; color: var(--sc-ink-soft); font-size: .74rem; }
.gs-sc .gm-dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--gm-line); }
.gs-sc .gm-kpi { padding: 14px 18px; position: relative; }
.gs-sc .gm-kpi + .gm-kpi { border-left: 1px solid var(--gm-line); }
.gs-sc .gm-kpi b { display: block; font-family: var(--sc-font-display); font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gs-sc .gm-kpi span { font-size: .74rem; color: var(--sc-ink-soft); }
.gs-sc .gm-kpi--leads b { color: var(--sc-accent); display: grid; }
.gs-sc .gm-kpi--leads b i { grid-area: 1 / 1; font-style: normal; }
.gs-sc .gm-kpi--leads b i:first-child { opacity: calc(1 - var(--land)); }
.gs-sc .gm-kpi--leads b i:last-child { opacity: var(--land); }
.gs-sc .gm-dash__chart { padding: 12px 18px 2px; }
.gs-sc .gm-dash__chart p { margin: 0 0 4px; font-size: .72rem; color: var(--sc-ink-soft); }
.gs-sc .gm-dash__chart svg { display: block; width: 100%; height: 64px; clip-path: inset(0 calc((1 - var(--draw)) * 100%) 0 0); }
.gs-sc .gm-dash__leads { list-style: none; margin: 0; padding: 8px 10px 12px; display: grid; gap: 6px; }
.gs-sc .gm-lead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: .82rem; line-height: 1.4; background: #101714; border: 1px solid transparent; }
.gs-sc .gm-lead__src { font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: #1a231e; color: var(--sc-ink-soft); }
.gs-sc .gm-lead__what { color: var(--sc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sc .gm-lead__when { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.gs-sc .gm-lead--new { border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); background: color-mix(in oklab, var(--sc-accent) 9%, #101714);
  opacity: var(--land); transform: translate3d(calc((1 - var(--land)) * -40%), calc((1 - var(--land)) * 40px), 0) scale(calc(.92 + var(--land) * .08)); }
.gs-sc .gm-lead--new .gm-lead__src { background: var(--sc-accent); color: var(--sc-accent-ink); }
.gs-sc .gm-lead__detail { grid-column: 2 / -1; color: var(--sc-ink-soft); font-size: .76rem; }
.gs-sc .gm-lead__saved { grid-column: 2 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; color: #86efac;
  opacity: var(--saved); transform: translateY(calc((1 - var(--saved)) * 6px)); }
.gs-sc .gm-lead__saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.gs-sc .gm-dash__note { margin: 14px 0 0; }
/* still states: reduced motion (calm) and phones (flowed) show the end frame */
.gs-sc [data-gm-calmed].gm-leads, .gs-sc [data-gm-calmed] .gm-leads { --wake: 1; --land: 1; --saved: 1; --draw: 1; }
.gs-sc [data-gm-calmed] .gm-leads__stage { padding-block: var(--sc-section); }

/* ========================================================= CONFIGURATOR ==
   pricing.html Build Your Bundle. Only colour, type and state styling change;
   the markup, ids and the script that computes the totals are untouched. */
.gs-sc .gs-bndl-group-title { font-family: var(--sc-font-display); font-size: 1.3rem; letter-spacing: -0.015em; color: var(--sc-ink); }
.gs-sc .gs-bndl-group-hint { font-size: .88rem; color: var(--sc-ink-soft); }
.gs-sc .gs-bndl-group-badge { color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); border-color: color-mix(in oklab, var(--sc-accent) 30%, transparent); }
.gs-sc .gs-bndl-locked-card { background: color-mix(in oklab, var(--sc-accent) 7%, var(--sc-surface)); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); border-radius: 14px; }
.gs-sc .gs-bndl-option-label { background: var(--sc-surface); border: 1px solid var(--gm-line); border-radius: 14px; padding: 14px 16px;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gs-sc .gs-bndl-option-label:hover { border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); background: color-mix(in oklab, var(--sc-accent) 5%, var(--sc-surface)); } }
.gs-sc .gs-bndl-option-label:active { transform: scale(.98); }
.gs-sc .gs-bndl-option-label.selected { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 11%, var(--sc-surface)); box-shadow: inset 0 0 0 1px var(--sc-accent); }
.gs-sc .gs-bndl-opt-name { font-family: var(--sc-font-display); font-size: 1.02rem; color: var(--sc-ink); }
.gs-sc .gs-bndl-opt-sub { font-size: .76rem; color: var(--sc-ink-soft); }
.gs-sc .gs-bndl-opt-price { font-size: .84rem; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.gs-sc .gs-bndl-stepper-btn { border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); background: color-mix(in oklab, var(--sc-accent) 12%, transparent); color: var(--sc-accent); transition: background-color 160ms var(--sc-ease-out); }
.gs-sc .gs-bndl-stepper-btn:active { transform: scale(.94); }
.gs-sc #gs-seo-hours, .gs-sc #gs-content-hours { color: var(--sc-ink); font-variant-numeric: tabular-nums; }

.gs-sc .gs-bndl-summary { top: calc(var(--gm-head-h) + 24px); border-radius: 20px; border: 1px solid var(--gm-line); padding: 28px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface)), var(--sc-surface) 55%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 7%, transparent), 0 40px 80px -40px hsl(150 60% 2% / .9); }
.gs-sc .gs-bndl-total-price { font-family: var(--sc-font-display); font-size: 3.2rem; font-weight: 700; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.gs-sc .gs-bndl-total-period, .gs-sc .gs-bndl-billing-note { color: var(--sc-ink-soft); }
.gs-sc .gs-bndl-billing-note { font-size: .76rem; }
.gs-sc .gs-bndl-line-item { color: var(--sc-ink-soft); font-size: .84rem; }
.gs-sc .gs-bndl-line-item span:last-child { color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.gs-sc .gs-bndl-divider { border-top-color: var(--gm-line); }
.gs-sc .gs-bndl-fee-row { color: var(--sc-ink-soft); }
.gs-sc .gs-bndl-lock-btn { border-radius: 999px; min-height: 48px; white-space: nowrap; font-size: .92rem; padding-inline: 18px; background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-text);
  box-shadow: 0 1px 0 hsl(145 80% 70% / .5) inset, 0 8px 22px -8px hsl(145 70% 30% / .7);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gs-sc .gs-bndl-lock-btn:hover { background: var(--gm-green-hover); box-shadow: 0 1px 0 hsl(145 80% 70% / .5) inset, 0 8px 22px -8px hsl(145 70% 30% / .7); transform: none; } }
.gs-sc .gs-bndl-lock-btn:active { transform: scale(.97); }
.gs-sc .gs-bndl-billing-toggle { background: var(--sc-surface); border-color: var(--gm-line); }
.gs-sc .gs-bndl-billing-btn { color: var(--sc-ink-soft); min-height: 42px; transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.gs-sc .gs-bndl-billing-btn.active { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
.gs-sc .gs-bndl-billing-btn.active .gs-save-badge { background: rgba(3, 20, 10, .16); color: var(--sc-accent-ink); }
.gs-sc .gs-bndl-billing-help { margin-top: 12px; font-size: .84rem; color: var(--sc-ink-soft); }
.gs-sc .gs-bndl-billing-help strong { color: var(--sc-accent); font-weight: 600; }
.gs-sc .gs-bndl-mobile-bar { background: rgba(7, 11, 9, .96); border-top-color: var(--gm-line); }
.gs-sc .gs-bndl-mobile-bar .gs-bndl-lock-btn { min-height: 44px; }


/* pricing: the payment modal (position fixed, z 200) lives inside this root,
   so the root must not isolate, or the fixed site header (z 100) would sit
   over the modal. */
.gs-sc.gm-page--open { isolation: auto; }
.gs-sc .gm-config__billing { margin: 0 0 clamp(32px, 4vw, 48px); }
.gs-sc .gs-bndl-layout { gap: clamp(28px, 4vw, 56px); }
@media (min-width: 1025px) { .gs-sc .gs-bndl-layout { grid-template-columns: minmax(0, 1fr) 320px; } }

/* payment-terms modal, restyled to the canvas */
.gs-sc .gs-pt-overlay { background: rgba(2, 5, 3, .74); }
.gs-sc .gs-pt-dialog { background: #0c1310; border-color: var(--gm-line); }
.gs-sc .gs-pt-title { font-family: var(--sc-font-display); color: var(--sc-ink); }
.gs-sc .gs-pt-sub, .gs-sc .gs-pt-m-desc, .gs-sc .gs-pt-cad-setup { color: var(--sc-ink-soft); }
.gs-sc .gs-pt-cad-card, .gs-sc .gs-pt-method, .gs-sc .gs-pt-firstpay { background: var(--sc-surface); border-color: var(--gm-line); }
.gs-sc .gs-pt-cad-card.is-selected, .gs-sc .gs-pt-method.is-selected { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 11%, var(--sc-surface)); box-shadow: inset 0 0 0 1px var(--sc-accent); }
.gs-sc .gs-pt-submit { border-radius: 999px; background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: 0 1px 0 hsl(145 80% 70% / .5) inset, 0 8px 22px -8px hsl(145 70% 30% / .7);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .gs-sc .gs-pt-submit:hover { background: var(--gm-green-hover); transform: none; box-shadow: 0 1px 0 hsl(145 80% 70% / .5) inset, 0 8px 22px -8px hsl(145 70% 30% / .7); } }
.gs-sc .gs-pt-submit:active { transform: scale(.97); }
.gs-sc .gs-bndl-input { background: #0f1714; border-color: var(--gm-line); color: var(--sc-ink); border-radius: 10px; }
.gs-sc .gs-bndl-input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
.gs-sc .gs-pt-fineprint { color: var(--sc-ink-soft); }

/* ================================================================= phones == */
@media (max-width: 900px) {
  .gs-sc .gm-split { grid-template-columns: minmax(0, 1fr); }
  .gs-sc .gm-split__head { position: static; }
  .gs-sc .gm-leads__stage { grid-template-columns: minmax(0, 1fr); }
  .gs-sc .gm-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-sc .gm-tier:nth-child(4) { border-left: 0; }
  .gs-sc .gm-tier:nth-child(n+4) { border-top: 1px solid var(--gm-line); }
  .gs-sc .gm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .gs-sc .gm-steps__line { display: none; }
}
@media (max-width: 760px) {
  .gs-sc .gm-hero__copy { max-width: none; }
  .gs-sc .gm-hero__title--md { font-size: clamp(2.2rem, 9.4vw, 2.9rem); }
  .gs-sc .gm-hero__meta { gap: 6px 12px; }
  .gs-sc .gm-hero--dusk .gm-hero__far img { filter: brightness(.55); }
  .gs-sc .gm-hero__meta > * + *::before { margin-right: 12px; }
  .gs-sc .gm-hero__actions .gm-btn { flex: 1 1 auto; }

  .gs-sc .gm-ledger { grid-template-columns: minmax(0, 1fr); }
  .gs-sc .gm-stepblock { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gs-sc .gm-stepblock .gm-ticks { grid-template-columns: minmax(0, 1fr); }

  /* tiers become a priced list: name + note left, price + unit right */
  .gs-sc .gm-tiers, .gs-sc .gm-tiers[style] { grid-template-columns: minmax(0, 1fr) !important; }
  .gs-sc .gm-tier { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "note unit" "bar bar"; column-gap: 16px; padding: 16px 0; }
  .gs-sc .gm-tier__name { grid-area: name; } .gs-sc .gm-tier__price { grid-area: price; } .gs-sc .gm-tier__unit { grid-area: unit; }
  .gs-sc .gm-tier__note { grid-area: note; } .gs-sc .gm-tier__bar { grid-area: bar; }
  .gs-sc .gm-tier + .gm-tier, .gs-sc .gm-tier:nth-child(4) { border-left: 0; border-top: 1px solid var(--gm-line); }
  .gs-sc .gm-tier__price { margin: 0; font-size: 1.6rem; text-align: right; }
  .gs-sc .gm-tier__unit { text-align: right; }
  .gs-sc .gm-tier__note { margin: 2px 0 0; }
  .gs-sc .gm-tier__bar { margin-top: 10px; }
  .gs-sc .gm-tier--lead { background: none; }

  .gs-sc .gm-row { grid-template-columns: minmax(0, 1fr) auto; }
  .gs-sc .gm-row__price { text-align: right; }
  .gs-sc .gm-row p:last-child { grid-column: 1 / -1; }

  .gs-sc .gm-steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .gs-sc .gm-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
  .gs-sc .gm-step__n { grid-row: span 2; }
  .gs-sc .gm-step h3 { margin-top: 8px; }
  .gs-sc .gm-step p { max-width: none; }

  .gs-sc .gs-faq-q { font-size: 1.05rem; }
  .gs-sc .gm-dash__kpis .gm-kpi:nth-child(3) { display: none; }
  .gs-sc .gm-dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gs-sc .gs-bndl-summary { padding: 22px; }
  .gs-sc .gs-bndl-total-price { font-size: 2.6rem; }
}

/* The pricing page's sticky "Your bundle" bar (shown up to 1024px) owns the
   bottom 76px of the screen. Lift the chatbot bubble above it so the two
   never overlap (widget.css places the bubble 16-24px from the bottom). */
@media (max-width: 1024px) {
  body:has(#gs-bndl-mobile-bar) .gs-chatbot { bottom: 100px; }
}
@media (max-width: 575px) {
  body:has(#gs-bndl-mobile-bar) .gs-chatbot__trigger { bottom: 92px; }
}

/* ===================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .gs-sc .gm-leads { --wake: 1; --land: 1; --saved: 1; --draw: 1; }
  .gs-sc .gm-tier__bar i { transform: scaleX(var(--w, 0)); }
  .gs-sc .gs-faq-toggle, .gs-sc .gs-bndl-option-label, .gs-sc .gs-bndl-lock-btn { transition: none; }
}