/* ============================================================
   AI GROWTH SCORE — product surface
   ============================================================
   Loaded only on /growth-score/. main.css is NOT modified.

   This page uses the SAME light brand palette as the rest of
   digitalwiththejas.online. Every colour resolves to a main.css
   token (--color-purple, --color-dark, --color-bg …) rather than
   a bespoke value, so the scanner never drifts from the brand.

   Reuses main.css for: --font-heading, --font-body, --space-*,
   --radius-*, --text-*, --container-*, .container, .sr-only.
   ============================================================ */

.gs-page {
  /* Surfaces — the site palette, not a bespoke one. Every value below
     is either a main.css token or derived from one, so the scanner
     reads as the same product as the rest of digitalwiththejas.online. */
  --gs-bg:            var(--color-bg);          /* #FAFAFA */
  --gs-surface:       var(--color-white);
  --gs-surface-2:     var(--color-purple-light); /* #F3EEFF */
  --gs-border:        var(--color-border);       /* #E8E8E8 */
  --gs-border-strong: #D9D9D9;

  /* Text */
  --gs-text:          var(--color-dark);         /* #111111 */
  --gs-text-muted:    var(--color-muted);        /* #6B6B6B */
  --gs-text-dim:      #6F6F78;              /* 4.5:1 on #FAFAFA — AA for small text */

  /* Brand purple, used exactly as the rest of the site uses it */
  --gs-accent:        var(--color-purple);       /* #6C3BFF */
  --gs-accent-soft:   var(--color-purple-dark);  /* #5528e0 — AA on light */
  --gs-accent-glow:   rgba(108,59,255,0.18);     /* == --shadow-purple */
  --gs-accent-faint:  rgba(108,59,255,0.10);

  /* Score bands — darkened so each passes contrast on a light ground.
     The dark-page versions (#FF6B6B, #4ADE80…) were too pale to read. */
  --gs-band-1: #DC2626;   /* Needs Attention */
  --gs-band-2: #C2410C;   /* Needs Improvement */
  --gs-band-3: #A16207;   /* Good Foundation */
  --gs-band-4: #16A34A;   /* Strong */
  --gs-band-5: #15803D;   /* Excellent */

  --gs-ok:   #16A34A;
  --gs-warn: #C2410C;
  --gs-bad:  #DC2626;

  background: var(--gs-bg);
  color: var(--gs-text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Ambient light. Subtle — not a neon AI gradient. */
.gs-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(108,59,255,0.07), transparent 62%),
    radial-gradient(40rem 30rem at 90% 10%, rgba(108,59,255,0.04), transparent 60%);
}

.gs-page > * { position: relative; z-index: 1; }

/* ============================================================
   NAV — minimal on purpose. This is a conversion page; every
   extra link is an exit.
   ============================================================ */
.gs-nav {
  border-bottom: 1px solid var(--gs-border);
  background: rgba(250,250,250,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.gs-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.gs-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--gs-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.gs-nav__brand svg { display: block; }
.gs-nav__back {
  color: var(--gs-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color 150ms ease;
}
.gs-nav__back:hover { color: var(--gs-text); }

/* ============================================================
   SHARED ATOMS
   ============================================================ */
.gs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-accent-soft);
  margin-bottom: var(--space-5);
}
.gs-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gs-accent);
}

.gs-h1 {
  font-family: var(--font-heading);
  text-wrap: balance;   /* keeps the question line from orphaning "well?" */
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-5);
  color: var(--gs-text);
}
.gs-h1 em {
  font-style: normal;
  color: var(--gs-accent-soft);
}

.gs-lede {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--gs-text-muted);
  max-width: 46ch;
  margin: 0 auto var(--space-8);
}

.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, opacity 150ms ease;
  white-space: nowrap;
}
.gs-btn--primary {
  background: var(--gs-accent);
  color: #fff;
  box-shadow: 0 8px 28px var(--gs-accent-glow);
}
.gs-btn--primary:hover:not(:disabled) {
  background: var(--color-purple-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px var(--gs-accent-glow);
}
.gs-btn--ghost {
  background: transparent;
  color: var(--gs-text);
  border-color: var(--gs-border-strong);
}
.gs-btn--ghost:hover { background: rgba(17,17,17,0.04); }
.gs-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.gs-btn--block { width: 100%; }

/* ============================================================
   STATE MACHINE — one section visible at a time
   ============================================================ */
.gs-state { display: none; }
.gs-state.is-active { display: block; animation: gs-fade 400ms ease both; }

@keyframes gs-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.gs-shell {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

/* ============================================================
   1. INPUT
   ============================================================ */
.gs-hero { text-align: center; }
.gs-hero__inner { max-width: 720px; margin: 0 auto; }

.gs-form {
  display: flex;
  gap: var(--space-3);
  /* Wider than the field alone needs: the CTA label is long and
     .gs-btn never wraps, so the input would otherwise be squeezed. */
  max-width: 640px;
  margin: 0 auto;
}
.gs-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-full);
  padding: 0 var(--space-5);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gs-field:focus-within {
  border-color: var(--gs-accent);
  box-shadow: 0 0 0 4px var(--gs-accent-faint);
}
.gs-field svg { flex-shrink: 0; color: var(--gs-text-dim); }
.gs-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--gs-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-4) 0;
}
.gs-field input::placeholder { color: var(--gs-text-dim); }

.gs-trust {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--gs-text-dim);
}

.gs-error-msg {
  margin-top: var(--space-4);
  color: var(--gs-bad);
  font-size: var(--text-sm);
  min-height: 1.2em;
}

/* What we check — set expectations before the scan */
.gs-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-16);
  text-align: left;
}
.gs-preview__item {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.gs-preview__item h3 {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--gs-text);
}
.gs-preview__item p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--gs-text-muted);
}

/* ============================================================
   2. SCANNING
   ============================================================ */
.gs-scanning { text-align: center; max-width: 520px; margin: 0 auto; }

.gs-scanning__target {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gs-text);
  margin: 0 0 var(--space-2);
  word-break: break-all;
}
.gs-scanning__label {
  color: var(--gs-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-10);
}

.gs-steps { list-style: none; margin: 0; padding: 0; text-align: left; }
.gs-step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  color: var(--gs-text-dim);
  font-size: var(--text-sm);
  transition: color 250ms ease, background 250ms ease;
}
.gs-step[data-state="active"] {
  color: var(--gs-text);
  background: var(--gs-surface);
}
.gs-step[data-state="done"] { color: var(--gs-text-muted); }
.gs-step[data-state="skipped"] { color: var(--gs-text-dim); }

.gs-step__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.gs-step__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}
.gs-step[data-state="active"] .gs-step__dot {
  opacity: 1;
  background: var(--gs-accent-soft);
  animation: gs-pulse 1.1s ease-in-out infinite;
}
@keyframes gs-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.7); opacity: 0.45; }
}
.gs-step__check { color: var(--gs-ok); display: none; }
.gs-step[data-state="done"] .gs-step__check { display: block; }
.gs-step[data-state="done"] .gs-step__dot { display: none; }

.gs-step__note {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
}

/* ============================================================
   3. RESULT
   ============================================================ */
.gs-result__head {
  text-align: center;
  margin-bottom: var(--space-12);
}
.gs-result__site {
  font-size: var(--text-sm);
  color: var(--gs-text-muted);
  margin: 0 0 var(--space-8);
  word-break: break-all;
}

/* --- Score ring --- */
.gs-ring-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto var(--space-6);
}
.gs-ring { transform: rotate(-90deg); display: block; }
.gs-ring__track { stroke: rgba(17,17,17,0.09); }
.gs-ring__fill {
  stroke: var(--gs-band, var(--gs-accent));
  stroke-linecap: round;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1), stroke 400ms ease;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gs-band, var(--gs-accent)) 45%, transparent));
}
.gs-ring__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.gs-ring__score {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--gs-text);
  font-variant-numeric: tabular-nums;
}
.gs-ring__outof {
  font-size: var(--text-sm);
  color: var(--gs-text-dim);
  margin-top: var(--space-1);
}

.gs-grade {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gs-band, var(--gs-accent-soft));
  margin-bottom: var(--space-3);
}
.gs-opp-count {
  font-size: var(--text-base);
  color: var(--gs-text-muted);
  margin: 0;
}
.gs-opp-count strong { color: var(--gs-text); font-weight: 700; }

/* --- At a glance (weakest first) --- */
/* A class-level display beats the UA [hidden] rule, so restate it. */
.gs-glance[hidden] { display: none; }

.gs-glance {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}
.gs-glance__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-full);
  background: var(--gs-surface);
  font-size: var(--text-sm);
  line-height: 1.2;
  white-space: nowrap;
}
.gs-glance__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gs-band, var(--gs-border-strong));
  flex: none;
}
.gs-glance__name {
  font-weight: 600;
  color: var(--gs-text);
}
.gs-glance__status {
  color: var(--gs-text-muted);
}
.gs-glance__item--unverified { opacity: 0.65; }

.gs-disclaimer {
  margin: var(--space-6) auto 0;
  max-width: 52ch;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--gs-text-dim);
}

/* --- Summary --- */
.gs-summary {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-sm);
}
.gs-summary__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gs-accent-soft);
  margin: 0 0 var(--space-4);
}
.gs-summary__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--gs-text);
}

/* --- Category bars --- */
.gs-cats {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}
.gs-cat__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.gs-cat__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--gs-text);
}
.gs-cat__pts {
  font-size: var(--text-sm);
  color: var(--gs-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gs-cat__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(17,17,17,0.08);
  overflow: hidden;
}
.gs-cat__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gs-cat-color, var(--gs-accent));
  width: 0;
  transition: width 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gs-cat__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
}
.gs-cat--unverified .gs-cat__bar { opacity: 0.4; }

/* --- PageSpeed detail (display only, never scored) ---------
   Google's Lighthouse run cannot finish inside Netlify's 10s
   function cap on a first scan, so it is fetched separately and
   shown here as supplementary evidence. It contributes nothing to
   the score, which keeps the score instant and reproducible. */
.gs-psi {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--gs-border);
}

.gs-psi__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  line-height: 1.5;
}

.gs-psi__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.gs-psi__chip {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gs-text-muted);
  background: var(--gs-surface-2);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- Client-rendered (JavaScript) notice ------------------- */
.gs-note {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--gs-surface-2);
  border: 1px solid var(--color-purple-mid);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gs-text);
}
.gs-note strong { color: var(--gs-accent-soft); }

/* --- Opportunities --- */
.gs-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
  color: var(--gs-text);
}

.gs-opps { display: grid; gap: var(--space-4); }

.gs-opp {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.gs-opp__num {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--gs-text-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.gs-opp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.gs-opp__cat {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gs-text-muted);
}
.gs-pill {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid;
}
.gs-pill--high   { color: var(--gs-bad);  border-color: rgba(220,38,38,0.30);  background: rgba(220,38,38,0.07); }
.gs-pill--medium { color: var(--gs-warn); border-color: rgba(234,88,12,0.30);   background: rgba(234,88,12,0.07); }
.gs-pill--low    { color: var(--gs-text-muted); border-color: var(--gs-border-strong); background: rgba(17,17,17,0.03); }

.gs-opp__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--gs-text);
  line-height: 1.35;
}
.gs-opp__finding {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gs-text-muted);
}
.gs-opp__rec {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--gs-border);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--gs-text);
}
.gs-opp__rec strong { color: var(--gs-accent-soft); font-weight: 700; }
.gs-opp__evidence {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

/* The related findings we counted but did not detail. An honest
   edge on the free result: it says how many, it does not blur out
   something we have already told them. */
.gs-opp__more {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
}

/* ============================================================
   KEY STRENGTHS / KEY PROBLEMS
   ------------------------------------------------------------
   Two columns on desktop, stacked on mobile. The opportunity list
   below can only contain failures, so without this the free
   result reads as though nothing on the site is right.
   ============================================================ */
.gs-highlights {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: var(--space-10);
}
.gs-hl {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.gs-hl__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.gs-hl__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
}
.gs-hl--good .gs-hl__mark { background: var(--gs-ok); }
.gs-hl--bad  .gs-hl__mark { background: var(--gs-bad); }

.gs-hl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gs-hl__item {
  display: grid;
  gap: 2px;
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--gs-border);
}
.gs-hl__list > .gs-hl__item:last-child { border-bottom: 0; padding-bottom: 0; }
.gs-hl__label { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.gs-hl__ev {
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.gs-hl__more,
.gs-hl__empty {
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  line-height: 1.5;
}

/* ============================================================
   FULL REPORT CTA — the bridge to the paid plans
   ============================================================ */
.gs-fullcta {
  margin-top: var(--space-12);
  background: linear-gradient(180deg, var(--gs-surface-2), var(--gs-surface));
  border: 1px solid var(--color-purple-mid);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  text-align: center;
}
.gs-fullcta__eyebrow { justify-content: center; }
.gs-fullcta__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-3);
}
.gs-fullcta__lede {
  margin: 0 auto var(--space-6);
  max-width: 46ch;
  color: var(--gs-text-muted);
  font-size: var(--text-base);
  line-height: 1.6;
}
.gs-fullcta__list {
  list-style: none;
  margin: 0 auto var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
  text-align: left;
  max-width: 34rem;
}
.gs-fullcta__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--text-sm);
  line-height: 1.55;
}
.gs-fullcta__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--gs-accent);
}
.gs-fullcta__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.gs-fullcta__chip {
  border: 1px solid var(--gs-border-strong);
  background: var(--gs-surface);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.gs-fullcta__chip strong { font-family: var(--font-heading); font-weight: 800; }
.gs-fullcta__note {
  margin: var(--space-4) auto 0;
  max-width: 48ch;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  line-height: 1.6;
}

/* ============================================================
   OPTIONAL EMAIL COPY — not a gate, and it must not look like one
   ============================================================ */
.gs-emailcopy {
  margin-top: var(--space-12);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
}
.gs-emailcopy__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0 0 var(--space-2);
}
.gs-emailcopy__sub {
  margin: 0 0 var(--space-6);
  color: var(--gs-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.gs-emailcopy__fineprint {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--gs-text-dim);
  line-height: 1.6;
}
.gs-emailcopy__done {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gs-ok);
  font-weight: 600;
}
.gs-inputs {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--space-5);
}
.gs-input-group { display: flex; flex-direction: column; gap: var(--space-2); }
.gs-input-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gs-text-muted);
}
.gs-input-group input {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--gs-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
.gs-input-group input::placeholder { color: var(--gs-text-dim); }
.gs-input-group input:focus {
  border-color: var(--gs-accent);
  box-shadow: 0 0 0 3px var(--gs-accent-faint);
}
.gs-input-group input[aria-invalid="true"] { border-color: var(--gs-bad); }
.gs-input-error {
  font-size: var(--text-xs);
  color: var(--gs-bad);
  min-height: 1em;
}
/* ============================================================
   PRICING — free score → ₹499 audit → ₹999 action plan
   ============================================================ */
.gs-pricing {
  margin-top: var(--space-16);
}
/* The report column is 820px — comfortable for reading, tight for three
   plans side by side. On desktop the plans break out of it, centred on
   the same axis; below that they stay inside and stack. */
@media (min-width: 1000px) {
  .gs-pricing {
    width: min(1080px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.gs-pricing__title {
  text-align: center;
  margin-bottom: var(--space-3);
}
.gs-pricing__lede {
  margin: 0 auto var(--space-8);
  max-width: 56ch;
  text-align: center;
  color: var(--gs-text-muted);
  line-height: 1.65;
}
.gs-pricing__lede em { font-style: normal; color: var(--gs-text); font-weight: 600; }

.gs-plans {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}
.gs-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-xl);
  /* Room at the top for the absolutely-placed badge, so plan names line
     up across all three cards whether or not a card carries one. */
  padding: calc(var(--space-12) + var(--space-2)) var(--space-6) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.gs-plan--paid { border-color: var(--gs-border-strong); }
.gs-plan--feature {
  border-color: var(--color-purple-mid);
  background: linear-gradient(180deg, var(--gs-surface-2), var(--gs-surface));
  box-shadow: var(--shadow-md);
}
.gs-plan__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gs-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.gs-plan__badge--now {
  background: transparent;
  color: var(--gs-text-dim);
  border: 1px solid var(--gs-border-strong);
}
.gs-plan__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--gs-text);
}
.gs-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.gs-plan__amount {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gs-text);
}
.gs-plan__once { font-size: var(--text-xs); color: var(--gs-text-dim); }
.gs-plan__for {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gs-border);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--gs-text-muted);
}
.gs-plan__from {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gs-text-dim);
}
.gs-plan__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.gs-plan__list li {
  position: relative;
  padding-left: 24px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--gs-text);
}
.gs-plan__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gs-accent);
  border-bottom: 2px solid var(--gs-accent);
  transform: rotate(-45deg);
}
/* Plan labels carry the price, so they must be allowed to wrap inside
   a narrow card rather than overflow it. */
.gs-plan__cta {
  margin-top: auto;
  white-space: normal;
  text-align: center;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.gs-plan__cta.is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.gs-plans__note {
  margin: var(--space-6) auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--gs-text-dim);
}

/* ============================================================
   SERVICE CTA
   ============================================================ */
.gs-cta {
  margin-top: var(--space-16);
  text-align: center;
  padding: clamp(var(--space-8), 5vw, var(--space-16)) var(--space-6);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.gs-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  color: var(--gs-text);
}
.gs-cta__sub {
  margin: 0 auto var(--space-8);
  max-width: 48ch;
  color: var(--gs-text-muted);
  line-height: 1.65;
}
.gs-cta__actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ERROR
   ============================================================ */
.gs-fail {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-10) 0;
}
.gs-fail__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-6);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.25);
  color: var(--gs-bad);
}
.gs-fail__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0 0 var(--space-3);
  color: var(--gs-text);
}
.gs-fail__msg {
  color: var(--gs-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-4);
}
.gs-fail__reasons {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  font-size: var(--text-sm);
  color: var(--gs-text-dim);
  display: grid;
  gap: var(--space-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.gs-foot {
  border-top: 1px solid var(--gs-border);
  padding-block: var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gs-text-dim);
}
.gs-foot a { color: var(--gs-text-muted); text-decoration: none; }
.gs-foot a:hover { color: var(--gs-text); text-decoration: underline; }
.gs-foot__social { margin-top: var(--space-2); }

/* ============================================================
   FOCUS — visible on a dark ground
   ============================================================ */
.gs-page a:focus-visible,
.gs-page button:focus-visible,
.gs-page input:focus-visible {
  outline: 2px solid var(--gs-accent-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Secondary trust line, under the bullet row --- */
.gs-trust--sub {
  margin-top: var(--space-2);
  color: var(--gs-text-muted);
}

/* --- "What will we check?" heading over the preview grid --- */
.gs-preview__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gs-text);
  margin: var(--space-16) 0 var(--space-6);
}
.gs-preview__title + .gs-preview { margin-top: 0; }

/* ============================================================
   SAMPLE REPORT — static preview of the result screen, shown
   on the input state so a first-time visitor sees the payoff
   before typing a URL. Reuses .gs-ring / .gs-grade so the demo
   can never drift from the real result.
   ============================================================ */
.gs-demo { margin-top: var(--space-16); }

.gs-demo__title { margin-bottom: var(--space-6); }

.gs-demo__card {
  position: relative;
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6) var(--space-8);
  box-shadow: var(--shadow-sm);
}

.gs-demo__badge {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gs-accent-soft);
  background: var(--gs-surface-2);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.gs-demo__ring {
  width: 180px;
  height: 180px;
  margin-bottom: var(--space-4);
}
.gs-demo__ring .gs-ring__score { font-size: 3rem; }

.gs-demo__grade { margin-bottom: var(--space-8); }

/* --- Per-category bars --- */
.gs-demo__bars {
  list-style: none;
  margin: 0 auto var(--space-8);
  padding: 0;
  max-width: 420px;
  display: grid;
  gap: var(--space-3);
  text-align: left;
}
.gs-demo__bar {
  display: grid;
  /* Fixed label column so every track starts at the same x and the
     five scores read as one meter, not five ragged ones. */
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}
.gs-demo__bar-label {
  font-size: var(--text-sm);
  color: var(--gs-text);
}
.gs-demo__bar-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(17,17,17,0.09);
  overflow: hidden;
}
.gs-demo__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gs-band-5);
}
.gs-demo__bar-val {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gs-text-muted);
  font-variant-numeric: tabular-nums;
}

.gs-demo__ask {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gs-text);
  margin: 0 0 var(--space-5);
}
.gs-demo__ask strong { color: var(--gs-accent-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .gs-form { flex-direction: column; }
  .gs-demo__card { padding: var(--space-10) var(--space-4) var(--space-6); }
  .gs-demo__bar { grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--space-3); }
  .gs-demo__bar-label { font-size: var(--text-xs); }
  .gs-form .gs-btn { width: 100%; }
  .gs-field { border-radius: var(--radius-lg); }
  .gs-ring-wrap { width: 200px; height: 200px; }
  .gs-ring__score { font-size: 3.25rem; }
  .gs-opp { grid-template-columns: 1fr; gap: var(--space-3); }
  .gs-opp__num { display: none; }
  .gs-summary { padding: var(--space-6); }
  .gs-inputs { grid-template-columns: 1fr; }
  .gs-cta__actions .gs-btn { width: 100%; }
}

/* ============================================================
   REDUCED MOTION
   Matches main.css §19: final state, no journey.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gs-state.is-active { animation: none; }
  .gs-ring__fill { transition: none; }
  .gs-cat__fill { transition: none; }
  .gs-step[data-state="active"] .gs-step__dot { animation: none; }
  .gs-btn { transition: none; }
  .gs-btn--primary:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   FREE TOOLS — cross-link on the input screen
   ------------------------------------------------------------
   Added alongside the free tools hub at /free-tools/. It reuses
   the gs-* tokens and the same card treatment as .gs-preview, so
   it reads as part of this page rather than a bolt-on.
   ============================================================ */
.gs-tools {
  margin-top: var(--space-20);
  text-align: left;
}

.gs-tools__lede {
  color: var(--gs-text-muted);
  line-height: 1.7;
  margin: calc(var(--space-6) * -1 + var(--space-2)) 0 var(--space-6);
  max-width: 60ch;
}

.gs-tools__grid {
  display: grid;
  /* min() so the floor collapses rather than overflowing a small phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gs-tools__grid a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.gs-tools__grid a:hover {
  border-color: var(--gs-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.gs-tools__grid strong {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gs-text);
}

.gs-tools__grid span {
  font-size: var(--text-sm);
  color: var(--gs-text-muted);
  line-height: 1.6;
}

.gs-tools__more {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
}

.gs-tools__more a {
  color: var(--gs-accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .gs-tools { margin-top: var(--space-16); }
}

/* ============================================================
   MARKET / CURRENCY SELECTOR
   ============================================================
   Two markets, one product: India (INR) at /growth-score/ and the
   single international English version (USD) at /growth-score/en/.

   The selector sits in the nav so it is reachable from every state
   of the page — a visitor who realises they are on the wrong
   currency halfway through a result should not have to hunt for it.

   The nav now carries three children, so it is allowed to wrap: on
   a narrow phone the selector drops to its own line rather than
   crushing the brand or forcing the page to scroll sideways.
   ============================================================ */
.gs-nav__inner {
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  /* Was a fixed 64px. A wrapped nav has to be allowed to grow —
     a fixed height would clip the second row. */
  height: auto;
  min-height: 64px;
  padding-block: var(--space-3);
}

.gs-market {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-full);
  background: var(--gs-surface);
  /* Never a source of horizontal overflow, whatever the labels say. */
  max-width: 100%;
  flex-wrap: wrap;
}

.gs-market__label {
  padding-inline: var(--space-3) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gs-text-dim);
  white-space: nowrap;
}

.gs-market__opt {
  padding: 6px var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gs-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.gs-market__opt:hover { color: var(--gs-text); background: rgba(17,17,17,0.04); }

.gs-market__opt.is-active {
  background: var(--gs-accent);
  color: #fff;
}
.gs-market__opt.is-active:hover { background: var(--gs-accent-soft); color: #fff; }

/* ---- The suggestion strip -------------------------------- */
/* Shown only when the browser's own timezone disagrees with the
   version being viewed, or when this visitor previously chose the
   other one. It is a link, never a redirect — see the header
   comment in growth-score-market-ui.js. */
.gs-market-hint {
  background: var(--gs-surface-2);
  border-bottom: 1px solid var(--color-purple-mid);
}
.gs-market-hint__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.gs-market-hint__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gs-text);
  text-align: center;
}
.gs-market-hint__text a {
  margin-left: var(--space-2);
  color: var(--gs-accent-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gs-market-hint__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--gs-text-muted);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}
.gs-market-hint__close:hover { background: rgba(17,17,17,0.06); color: var(--gs-text); }

/* ============================================================
   CONSULTATION
   ============================================================
   The point of this funnel is a qualified conversation, not only a
   report sale. This block is deliberately quieter than the pricing
   cards above it — an invitation, not a squeeze.
   ============================================================ */
.gs-consult {
  margin-top: var(--space-16);
  padding: clamp(var(--space-8), 5vw, var(--space-12)) var(--space-6);
  text-align: center;
  background: var(--gs-surface-2);
  border: 1px solid var(--color-purple-mid);
  border-radius: var(--radius-xl);
}
.gs-consult__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--gs-text);
}
.gs-consult__sub {
  margin: 0 auto var(--space-6);
  max-width: 58ch;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gs-text-muted);
}

/* A plan arrived at from /pricing/?plan=… — ringed so the visitor
   lands on the card they actually came for. */
.gs-plan--wanted {
  outline: 2px solid var(--gs-accent);
  outline-offset: 3px;
}

/* ============================================================
   THE FOUR-LEVEL LADDER
   ============================================================
   discovery -> information -> decision -> implementation, one line
   each. Used on the pricing pages, and above the fold on the
   international scanner where the plans themselves sit inside the
   result state and are not visible yet.
   ============================================================ */
.gs-ladder-wrap { margin-top: var(--space-16); }

.gsp-ladder {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.gsp-ladder li {
  padding: var(--space-5);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  /* A grid item defaults to min-width:auto, which lets a long word
     push the track wider than its share. This is what keeps the
     row from overflowing on a narrow phone. */
  min-width: 0;
}
.gsp-ladder strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gs-text);
  overflow-wrap: anywhere;
}
.gsp-ladder span {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--gs-text-muted);
}

/* ============================================================
   PRICING PAGE  (/pricing/ and /pricing/en/)
   ============================================================
   Generated by tools/growth-score/build.js. It reuses the whole
   .gs-* surface above so it reads as the same product; only the
   page head, the ordering note and the cross-links below need
   anything of their own.
   ============================================================ */
.gsp-head {
  text-align: center;
  padding-top: var(--space-12);
}
.gsp-head__h1 { margin-inline: auto; }
.gsp-head__lede {
  margin: var(--space-5) auto 0;
  max-width: 58ch;
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--gs-text-muted);
}

/* These plans are not inside a scan result, so they do not need the
   820px-column breakout the result page uses. */
.gs-pricing--page { margin-top: var(--space-12); }

.gsp-note {
  margin-top: var(--space-12);
  padding: var(--space-6);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
}
.gsp-note__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 0 0 var(--space-3);
  color: var(--gs-text);
}
.gsp-note p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--gs-text-muted);
}

.gsp-cross {
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gs-text-muted);
}
.gsp-cross p { margin: 0 0 var(--space-3); }
.gsp-cross a {
  color: var(--gs-accent-soft);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  /* Stack the hint so a long label never pushes the dismiss button
     off the edge of the screen. */
  .gs-market-hint__inner {
    align-items: flex-start;
    gap: var(--space-2);
  }
  .gs-market-hint__text { text-align: left; }
  .gs-market-hint__text a { display: block; margin-left: 0; margin-top: 2px; }

  /* ---- The nav on a phone ----------------------------------
     Adding the selector pushed this header to three wrapped rows
     — measured at 173px on a 390px-wide screen. Sticky, that is a
     fifth of the viewport permanently gone, which is far too much
     to pay for a currency switch.

     Two changes fix it:
       1. Drop the "Pricing for" label. The options already read
          "India (INR)" and "International (USD)"; the label is
          only orientation for a wider layout.
       2. Stop the header sticking. Every state change in
          growth-score.js scrolls back to the top, so the selector
          is on screen exactly when a visitor is deciding
          anything — it does not have to follow them down a
          result page to be reachable.
     -------------------------------------------------------- */
  .gs-nav { position: static; }
  .gs-nav__inner { row-gap: var(--space-2); }
  .gs-market__label { display: none; }
  .gs-market {
    width: 100%;
    justify-content: center;
    order: 3;   /* below brand and back-link, never between them */
  }
  .gs-market__opt { padding-inline: var(--space-3); }

  .gs-consult { margin-top: var(--space-12); }
  .gsp-head { padding-top: var(--space-8); }
}

/* ---- Pricing-page-only card copy -------------------------
   The `benefits` and `audience` fields render on /pricing/ and
   /pricing/en/ only — not on the scanner, where the cards sit under
   a finished report and a third list would push the CTA off screen.
   ---------------------------------------------------------- */
.gs-plan__list--benefits li::before {
  /* Outcomes, not a spec sheet: an arrow rather than a tick, so the
     two lists in one card are never mistaken for each other. */
  content: "";
  left: 3px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-left: 0;
  border-bottom: 2px solid var(--gs-accent);
  border-right: 2px solid var(--gs-accent);
  transform: rotate(-45deg);
}
.gs-plan__list--benefits li { font-weight: 600; }

.gs-plan__audience {
  margin: 0 0 var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--gs-border);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--gs-text-dim);
}
.gs-plan__audience strong { color: var(--gs-text-muted); }