/* ============================================================================
   eligibility-embed.css — the "pebble map" above-the-fold conversion funnel for
   SEO landing pages.  Light, Museum-Poster themed; ALL scoped under .gc-emb so it
   never collides with a host page's own styles (the SEO pages each have their own
   inlined CSS + tokens — this file is fully self-contained, defines its own vars).

   Design language (locked 2026-06-23): cream canvas · rounded inset "pebble" cells
   with thin gaps + within-region tonal shading · Museum Poster palette · chart LEFT
   / panel RIGHT in BOTH the question and results states · "lit by fit" reveal.

   Class contract (the controller builds this DOM inside .gc-emb):
     .gce              hydrated root
       .gce-head        kicker + title + sub
       .gce-stage       grid: .gce-chart | .gce-panel
         .gce-chart      .gce-counter · .gce-viz-wrap>svg.gce-viz · .gce-mapfoot
         .gce-panel      .gce-question  ->  .gce-end (results, same column)
   Cell/label classes inside the svg (.em-cells/.em-labels/.em-rims) come from the
   shared renderer; we theme them here.
   ============================================================================ */

/* host-page wrapper: a FULL-BLEED warm hero band. The bg spans edge-to-edge; the content
   (breadcrumb + the embed) is centred to a max width. Reusable across the ~280 SEO pages. */
.gc-emb-section {
  background: radial-gradient(135% 125% at 82% 16%, #f7f0e2 0%, #efe7d6 50%, #e5dbc8 100%);
  /* top padding clears the site's FIXED nav (~57px) — the embed is the first content, so it must
     reserve space itself (the old hero did). Scoped to the embed; no sitewide nav change. */
  padding: clamp(66px, 5vw, 78px) 0 clamp(28px, 3.4vw, 48px);
}
.gc-emb-section > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 48px); padding-right: clamp(16px, 4vw, 48px); }
.gc-emb-section .gce-crumb { font-family: 'DM Sans','Inter',system-ui,sans-serif; font-size: 13px; color: #76838a; margin: 0 auto 14px; }
.gc-emb-section .gce-crumb a { color: #4a5b63; text-decoration: none; }
.gc-emb-section .gce-crumb a:hover { color: #C4532B; text-decoration: underline; }
.gc-emb-section .gce-crumb span { margin: 0 6px; opacity: .6; }

.gc-emb {
  /* ---- Museum Poster tokens (chrome only; chart cell colours are JS/pebble-driven) ---- */
  --gce-cream:    #efe9dc;   /* canvas */
  --gce-cream-2:  #f6f1e7;   /* raised surfaces (panel, cards) */
  --gce-cream-3:  #faf6ee;   /* lightest (inputs/hover) */
  --gce-ink:      #21323c;   /* primary text (deep navy-slate) */
  --gce-ink-2:    #4a5b63;   /* secondary text */
  --gce-ink-3:    #76838a;   /* muted / captions */
  --gce-line:     #ddd3c2;   /* hairlines on cream */
  --gce-line-2:   #cabfa9;   /* stronger hairline */
  --gce-navy:     #2a4452;
  --gce-teal:     #3D8C84;
  --gce-teal-d:   #2f6f67;   /* deeper teal for white-on-teal surfaces (AA: white on #3D8C84 is only 3.98) */
  --gce-terra:    #B86F52;
  --gce-olive:    #6F7B52;
  --gce-ochre:    #B98B35;
  --gce-sienna:   #C4532B;   /* brand action colour */
  --gce-sienna-d: #a8431f;
  --gce-gold:     #b8892f;
  --gce-shadow:   0 1px 2px rgba(42,33,22,.05), 0 8px 28px -12px rgba(42,33,22,.22);
  --gce-shadow-lg:0 2px 6px rgba(42,33,22,.07), 0 22px 60px -22px rgba(42,33,22,.32);
  --gce-radius:   16px;
  --gce-font:     'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gce-serif:    'DM Serif Display', 'Fraunces', Georgia, 'Times New Roman', serif;

  display: block;
  box-sizing: border-box;
  font-family: var(--gce-font);
  color: var(--gce-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gc-emb *, .gc-emb *::before, .gc-emb *::after { box-sizing: border-box; }

/* ====================================================================
   V1 "HERO" LAYOUT — full-bleed, no card chrome. A 3-area grid:
   head + panel (copy + quiz) on the LEFT, chart (map) on the RIGHT.
   Mobile reflows to natural order: head → chart (map) → panel (quiz).
   ==================================================================== */
.gc-emb .gce {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head chart" "panel chart";
  column-gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
}

/* ---------- head (left, top) ---------- */
.gc-emb .gce-head { grid-area: head; max-width: 560px; margin: 0 0 clamp(18px,2.2vw,26px); }
.gc-emb .gce-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gce-terra); margin: 0 0 12px;
}
.gc-emb .gce-kicker::before {
  content: ""; width: 24px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gce-terra), rgba(184,111,82,.2));
}
.gc-emb .gce-title {
  font-family: var(--gce-serif); font-weight: 400;
  font-size: clamp(1.85rem, 1.15rem + 1.95vw, 2.8rem); line-height: 1.06;
  letter-spacing: -.015em; color: var(--gce-ink); margin: 0;
}
.gc-emb .gce-title em { font-style: italic; color: var(--gce-sienna); }
.gc-emb .gce-sub {
  font-size: clamp(1rem, .92rem + .3vw, 1.12rem); line-height: 1.5;
  color: var(--gce-ink-2); margin: 14px 0 0; max-width: 48ch;
}
/* trust chips */
.gc-emb .gce-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; font-size: 13.5px; color: var(--gce-ink-2); }
.gc-emb .gce-trust span { display: inline-flex; align-items: center; gap: 7px; }
.gc-emb .gce-trust span::before { content: "✓"; color: var(--gce-teal); font-weight: 800; }

/* ---------- chart (right, spans both rows) — the map is the hero visual ---------- */
.gc-emb .gce-chart { grid-area: chart; position: relative; align-self: center; width: 100%; max-width: 560px; margin: 0 auto; min-width: 0; }
/* results card is tall → STICKY map so it stays visible while you scroll the matches (top clears the fixed nav) */
.gc-emb .gce--end .gce-chart { align-self: start; position: sticky; top: 76px; }
/* counter sits ABOVE the map (was floating over it and covering a category label). center-align so a
   2-line label reads as a tidy unit beside the big number (baseline-align left it cramped at 3 lines). */
.gc-emb .gce-counter {
  display: flex; align-items: center; gap: 11px; margin: 0 0 12px;
}
.gc-emb .gce-counter__n {
  font-family: var(--gce-serif); font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1;
  color: var(--gce-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.gc-emb .gce-counter__label { font-size: 12.5px; font-weight: 500; color: var(--gce-ink-2); line-height: 1.3; max-width: 20ch; }

.gc-emb .gce-viz-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; }
.gc-emb .gce-viz { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- panel (left, bottom) = the quiz / results card ---------- */
.gc-emb .gce-panel { grid-area: panel; min-width: 0; }

/* ----- chart labels (rendered by the shared renderer; themed here) ----- */
/* in-cell program labels: cream type on the coloured pebbles, with a soft dark halo so
   they stay legible on any mid-tone pebble (museum-quality readability) */
.gc-emb .em-labels text {
  font-family: var(--gce-font); font-weight: 600;
  paint-order: stroke fill;
  stroke: rgba(18,28,36,.55); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;
}
/* region (rim) labels — the category names. Made clearly legible (was too subtle, blended into
   the pebbles): bold sans, larger, white fill with a strong dark halo so they pop on ANY cell. */
.gc-emb .em-rims .em-rim {
  font-family: var(--gce-font); font-weight: 800; letter-spacing: .07em; font-size: 15.5px;
  paint-order: stroke fill;
  stroke: rgba(12,20,28,.82); stroke-width: 3.6px; stroke-linejoin: round; stroke-linecap: round;
}

/* ----- map foot: colour-by caption + legend ----- */
.gc-emb .gce-mapfoot { margin-top: 14px; }
.gc-emb .gce-colorby {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gce-ink-3); margin: 0 0 8px;
}
/* the interaction half of the caption — a permanent "this is explorable" affordance (lower-case + warm so
   it reads as an invitation, not part of the all-caps label) */
/* sienna-d (not terra) so the small hint clears WCAG 4.5:1 on the cream canvas (terra was 3.19, fails) */
.gc-emb .gce-colorby__hint { text-transform: none; letter-spacing: .01em; color: var(--gce-sienna-d); font-weight: 600; }
/* every pebble is clickable/hoverable → make that obvious */
.gc-emb .em-cells path { cursor: pointer; }
.gc-emb .gce-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.gc-emb .em-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gce-ink-2); }
.gc-emb .em-leg i { width: 11px; height: 11px; border-radius: 3.5px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- panel (question + results) — a frosted card on the hero ---------- */
.gc-emb .gce-question, .gc-emb .gce-end {
  display: flex; flex-direction: column; outline: none;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--gce-line-2); border-radius: 16px;
  padding: clamp(18px, 2vw, 24px);
  box-shadow: var(--gce-shadow);
}
/* keep the QUESTION card a stable height across questions (different option counts) so the
   centred map doesn't jump as you answer; the nav pins to the bottom. (Not on .gce-end.) */
.gc-emb .gce-question { min-height: 360px; }

/* progress + running count */
.gc-emb .gce-q__count {
  align-self: flex-start;
  font-size: 12.5px; font-weight: 600; color: var(--gce-teal);
  background: rgba(61,140,132,.10); border: 1px solid rgba(61,140,132,.22);
  padding: 5px 11px; border-radius: 999px; margin: 0 0 14px;
}
.gc-emb .gce-q__count strong { font-weight: 700; }
.gc-emb .gce-q__progress { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gce-ink-3); margin: 0 0 8px; }
.gc-emb .gce-q__title {
  font-family: var(--gce-serif); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.12; letter-spacing: -.01em; color: var(--gce-ink); margin: 0;
}
.gc-emb .gce-q__sub { font-size: .92rem; color: var(--gce-ink-3); margin: 8px 0 0; line-height: 1.45; }

/* option tiles — visible, tappable, NEVER a <select> */
.gc-emb .gce-q__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.gc-emb .gce-q__opts--single { grid-template-columns: 1fr; }
.gc-emb .gce-opt {
  appearance: none; -webkit-appearance: none;
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 11px 14px;
  background: var(--gce-cream-3); color: var(--gce-ink);
  border: 1.5px solid var(--gce-line-2); border-radius: 12px;
  font-size: 14.5px; font-weight: 500; line-height: 1.25;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .08s;
}
.gc-emb .gce-opt:hover { border-color: var(--gce-terra); background: #fff; box-shadow: var(--gce-shadow); }
.gc-emb .gce-opt:focus-visible { outline: 3px solid rgba(196,83,43,.4); outline-offset: 2px; border-color: var(--gce-sienna); }
.gc-emb .gce-opt:active { transform: translateY(1px); }
.gc-emb .gce-opt.is-on {
  border-color: var(--gce-sienna); background: #fff;
  box-shadow: 0 0 0 1px var(--gce-sienna), var(--gce-shadow);
}
/* multi-select check affordance */
.gc-emb .gce-opt[aria-pressed] { padding-left: 12px; }
.gc-emb .gce-opt[aria-pressed]::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 6px;
  border: 1.5px solid var(--gce-line-2); background: #fff;
  transition: border-color .15s, background .15s;
}
.gc-emb .gce-opt[aria-pressed="true"]::before {
  border-color: var(--gce-sienna); background: var(--gce-sienna) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* nav row */
.gc-emb .gce-q__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-top: 18px; flex-wrap: wrap; }
.gc-emb .gce-back, .gc-emb .gce-skip {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--gce-ink-3); padding: 8px 4px;
  transition: color .15s;
}
.gc-emb .gce-back:hover, .gc-emb .gce-skip:hover { color: var(--gce-ink); }
.gc-emb .gce-back:focus-visible, .gc-emb .gce-skip:focus-visible { outline: 2px solid var(--gce-sienna); outline-offset: 3px; border-radius: 6px; }
.gc-emb .gce-next {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14.5px;
  color: #fff; background: var(--gce-sienna); border: none; border-radius: 10px;
  padding: 11px 20px; box-shadow: var(--gce-shadow); transition: background .15s, transform .08s, box-shadow .15s;
}
.gc-emb .gce-next:hover { background: var(--gce-sienna-d); box-shadow: var(--gce-shadow-lg); }
.gc-emb .gce-next:active { transform: translateY(1px); }
.gc-emb .gce-next:focus-visible { outline: 3px solid rgba(196,83,43,.45); outline-offset: 2px; }

/* ---------- end state (results) — same right column, chart stays left ---------- */
.gc-emb .gce-end__reward { font-size: 13px; font-weight: 600; color: var(--gce-teal); margin: 0 0 6px; }
.gc-emb .gce-end__reward strong { color: var(--gce-ink); font-weight: 800; }
.gc-emb .gce-end__n {
  font-family: var(--gce-serif); font-size: clamp(2.4rem, 1.4rem + 3.2vw, 3.4rem); line-height: 1;
  color: var(--gce-sienna); letter-spacing: -.02em; margin: 2px 0 0;
}
.gc-emb .gce-end__lead { font-size: 1rem; line-height: 1.45; color: var(--gce-ink-2); margin: 8px 0 0; max-width: 42ch; }

/* the dominant guided next step */
.gc-emb .gce-next-step {
  margin: 18px 0 0; padding: 18px; border-radius: 14px;
  background: linear-gradient(160deg, #fff 0%, var(--gce-cream-2) 100%);
  border: 1.5px solid var(--gce-line-2); box-shadow: var(--gce-shadow);
  position: relative; overflow: hidden;
}
.gc-emb .gce-next-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--gce-sienna), var(--gce-terra));
}
.gc-emb .gce-next-step__label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gce-terra); margin: 0 0 6px; }
.gc-emb .gce-next-step__body { font-size: .96rem; line-height: 1.45; color: var(--gce-ink); margin: 0 0 14px; }
.gc-emb .gce-next-step__body strong { font-weight: 700; }
.gc-emb .gce-cta {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font-weight: 800; font-size: 1.02rem; color: #fff; background: var(--gce-sienna);
  border-radius: 11px; padding: 14px 18px; box-shadow: 0 8px 22px -8px rgba(196,83,43,.6);
  transition: background .15s, transform .08s, box-shadow .15s;
}
.gc-emb .gce-cta:hover { background: var(--gce-sienna-d); transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(196,83,43,.65); }
.gc-emb .gce-cta:active { transform: translateY(0); }
.gc-emb .gce-cta:focus-visible { outline: 3px solid rgba(196,83,43,.5); outline-offset: 3px; }
.gc-emb .gce-next-step__trust { font-size: 12.5px; color: var(--gce-ink-3); text-align: center; margin: 10px 0 0; }

/* F2 (2026-07-03): set-level actions under the CTA — save the ranked top 3 in one tap + share */
.gc-emb .gce-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.gc-emb .gce-actbtn {
  flex: 1 1 130px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  color: var(--gce-teal-d); background: var(--gce-cream-3); border: 1.5px solid var(--gce-line-2);
  border-radius: 10px; padding: 10px 12px; text-align: center; transition: background .15s, border-color .15s, color .15s;
}
.gc-emb .gce-actbtn:hover { border-color: var(--gce-teal-d); background: #fff; }
.gc-emb .gce-actbtn:focus-visible { outline: 2px solid var(--gce-teal-d); outline-offset: 2px; }
.gc-emb .gce-actbtn__ico { display: inline-flex; }
.gc-emb .gce-actbtn__ico svg { width: 15px; height: 15px; }
.gc-emb .gce-actbtn--share { color: var(--gce-ink-2); }
.gc-emb .gce-actbtn--share:hover { border-color: var(--gce-ink-2); }
.gc-emb .gce-actbtn--save.is-done { color: #fff; background: var(--gce-teal-d); border-color: var(--gce-teal-d); cursor: default; }
.gc-emb .gce-actbtn--save.is-done:hover { background: var(--gce-teal-d); }

/* F3 (2026-07-03): returning-completer resume card (renders in the question panel instead of Q1) */
.gc-emb .gce-resume {
  margin: 4px 0 0; padding: 22px 22px 20px; border-radius: 16px;
  background: linear-gradient(160deg, #fff 0%, var(--gce-cream-2) 100%);
  border: 1.5px solid var(--gce-line-2); box-shadow: var(--gce-shadow); text-align: center;
}
.gc-emb .gce-resume__kick { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gce-teal-d); margin: 0 0 8px; }
.gc-emb .gce-resume__title { font-family: var(--gce-serif); font-size: 1.5rem; line-height: 1.2; color: var(--gce-ink); margin: 0 0 8px; }
.gc-emb .gce-resume__sub { font-size: 13.5px; color: var(--gce-ink-2); line-height: 1.5; margin: 0 0 16px; }
.gc-emb .gce-resume__sub strong { color: var(--gce-ink); font-weight: 700; }
.gc-emb .gce-resume .gce-cta { max-width: 340px; margin: 0 auto; }
.gc-emb .gce-resume__alt { display: flex; gap: 16px; justify-content: center; margin: 12px 0 0; flex-wrap: wrap; }
.gc-emb .gce-resume__alt button {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--gce-ink-3); text-decoration: underline; padding: 4px; transition: color .15s;
}
.gc-emb .gce-resume__alt button:hover { color: var(--gce-ink); }
.gc-emb .gce-resume__alt button:focus-visible { outline: 2px solid var(--gce-sienna); outline-offset: 3px; border-radius: 6px; }

/* preview of top matches (supporting, not competing) */
.gc-emb .gce-preview { margin: 18px 0 0; }
.gc-emb .gce-preview__h { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--gce-ink-3); margin: 0 0 10px; }
.gc-emb .gce-matches { display: flex; flex-direction: column; gap: 8px; }
/* the save button is now PART of the card (top-right, over the link) — not a detached box */
.gc-emb .gce-match { position: relative; }
.gc-emb .gce-match__link {
  min-width: 0; text-decoration: none; color: inherit;
  display: block; padding: 12px 50px 12px 14px;   /* right room for the bookmark */
  background: var(--gce-cream-3); border: 1px solid var(--gce-line); border-radius: 11px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gc-emb .gce-match__link:hover { border-color: var(--gce-terra); background: #fff; box-shadow: var(--gce-shadow); }
.gc-emb .gce-match__link:focus-visible { outline: 3px solid rgba(196,83,43,.4); outline-offset: 2px; }
.gc-emb .gce-match__fit { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--gce-teal); background: rgba(61,140,132,.1); border-radius: 5px; padding: 2px 7px; margin: 0 6px 7px 0; }
.gc-emb .gce-match__fit--alt { color: var(--gce-ochre); background: rgba(185,139,53,.12); }
/* the single #1 "Top match" badge — solid brand fill so the strongest fit stands out from the rest
   (sienna-d, not sienna: white-on-sienna was a borderline 4.55; sienna-d = 6.02 for a safe AA margin on 11px) */
.gc-emb .gce-match__fit--top { color: #fff; background: var(--gce-sienna-d); letter-spacing: .02em; }
.gc-emb .gce-match__t { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.2; color: var(--gce-ink); }
.gc-emb .gce-match__m { display: block; font-size: 12.5px; color: var(--gce-ink-3); margin-top: 3px; }
/* the funding TYPE shown plainly in the meta (grant / tax credit / …) — slightly stronger than the rest of
   the line so a visitor instantly sees what each match IS (e.g. why a top match is a tax credit, not a grant),
   but neutral (not colour-coded) so it never visually contradicts the ranking */
.gc-emb .gce-match__type { font-weight: 600; color: var(--gce-ink-2); }
.gc-emb .gce-match__locked { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--gce-ink-3); margin-top: 7px; opacity: .85; }
.gc-emb .gce-match__save {
  position: absolute; top: 9px; right: 9px; z-index: 2; cursor: pointer;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); border: 1px solid var(--gce-line); border-radius: 9px; color: var(--gce-ink-3);
  transition: color .15s, border-color .15s, background .15s;
}
.gc-emb .gce-match__save:hover { color: var(--gce-sienna); border-color: var(--gce-terra); background: #fff; }
.gc-emb .gce-match__save.is-on { color: var(--gce-sienna); border-color: var(--gce-sienna); }
.gc-emb .gce-match__save.is-on svg { fill: var(--gce-sienna); }
.gc-emb .gce-match__save:focus-visible { outline: 3px solid rgba(196,83,43,.4); outline-offset: 2px; }
.gc-emb .gce-more { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--gce-sienna); text-decoration: none; }
.gc-emb .gce-more:hover { text-decoration: underline; }

/* refine — made prominent (was a buried, too-subtle row): a clear bordered group, higher up */
.gc-emb .gce-refine { margin: 16px 0 0; padding: 13px 16px; background: rgba(255,255,255,.5); border: 1px solid var(--gce-line); border-radius: 12px; }
.gc-emb .gce-refine__h { font-size: 13px; font-weight: 700; color: var(--gce-ink); margin: 0 0 10px; }
.gc-emb .gce-refine__row { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-emb .gce-refine__b {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--gce-ink-2); background: var(--gce-cream-3); border: 1.5px solid var(--gce-line-2);
  border-radius: 999px; padding: 8px 15px; transition: all .15s;
}
.gc-emb .gce-refine__b:hover { border-color: var(--gce-terra); color: var(--gce-ink); background: #fff; }
.gc-emb .gce-refine__b.is-on { color: #fff; background: var(--gce-teal-d); border-color: var(--gce-teal-d); }   /* teal-d for AA on the white label (3.98 -> 5.85) */
/* live faceted count on each filter — makes the effect on the set tangible */
.gc-emb .gce-refine__n { font-weight: 700; opacity: .6; margin-left: 3px; font-variant-numeric: tabular-nums; }
.gc-emb .gce-refine__b.is-on .gce-refine__n { opacity: .85; }
/* a filter that would empty the list is disabled (no dead-end) */
.gc-emb .gce-refine__b.is-disabled { opacity: .4; cursor: not-allowed; }
.gc-emb .gce-refine__b.is-disabled:hover { border-color: var(--gce-line-2); color: var(--gce-ink-2); background: var(--gce-cream-3); }
/* demographic opt-in — unlock reserved programs when the ownership question was skipped (2026-06-30) */
.gc-emb .gce-optin { margin: 16px 0 0; padding: 13px 16px; background: rgba(185,139,53,.07); border: 1px solid var(--gce-gold); border-radius: 12px; }
.gc-emb .gce-optin__h { font-size: 13.5px; font-weight: 700; color: var(--gce-ink); margin: 0 0 4px; }
.gc-emb .gce-optin__sub { font-size: 12.5px; color: var(--gce-ink-2); margin: 0 0 10px; line-height: 1.45; }
.gc-emb .gce-optin__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-emb .gce-optin__b {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--gce-ink-2); background: var(--gce-cream-3); border: 1.5px solid var(--gce-line-2);
  border-radius: 999px; padding: 8px 15px; transition: all .15s;
}
.gc-emb .gce-optin__b:hover { border-color: var(--gce-gold); color: var(--gce-ink); background: #fff; }
.gc-emb .gce-optin__b.is-on { color: #fff; background: var(--gce-teal-d); border-color: var(--gce-teal-d); }
.gc-emb .gce-optin__n { font-weight: 700; margin-left: 3px; font-variant-numeric: tabular-nums; color: var(--gce-gold); }
.gc-emb .gce-optin__b.is-on .gce-optin__n { color: #fff; }
/* F10 (2026-07-03): explicit decline + truthful privacy line + collapsed reversible one-liner */
.gc-emb .gce-optin__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 11px 0 0; }
.gc-emb .gce-optin__none {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--gce-teal-d); text-decoration: underline; padding: 2px 0;
}
.gc-emb .gce-optin__none:hover { color: var(--gce-ink); }
.gc-emb .gce-optin__none:focus-visible { outline: 2px solid var(--gce-teal-d); outline-offset: 2px; border-radius: 4px; }
.gc-emb .gce-optin__priv { font-size: 11.5px; color: var(--gce-ink-3); }
.gc-emb .gce-optin--mini { padding: 10px 14px; background: var(--gce-cream-3); border-color: var(--gce-line); }
.gc-emb .gce-optin__mini-t { font-size: 12.5px; color: var(--gce-ink-3); line-height: 1.5; }
.gc-emb .gce-optin__expand {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--gce-teal-d); text-decoration: underline; padding: 0;
}
.gc-emb .gce-optin__expand:hover { color: var(--gce-ink); }
.gc-emb .gce-optin__expand:focus-visible { outline: 2px solid var(--gce-teal-d); outline-offset: 2px; border-radius: 4px; }

/* guest save → clear, persistent signup affordance (replaces the too-subtle toast) */
.gc-emb .gce-saved-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 13px 16px;
  background: linear-gradient(135deg, rgba(61,140,132,.12), rgba(184,111,82,.09));
  border: 1px solid var(--gce-line-2); border-radius: 12px;
}
.gc-emb .gce-saved-cta[hidden] { display: none; }   /* element rule beats [hidden] UA rule — must restate */
.gc-emb .gce-saved-cta__t { font-size: 13.5px; color: var(--gce-ink-2); line-height: 1.4; flex: 1 1 200px; }
.gc-emb .gce-saved-cta__t strong { color: var(--gce-ink); font-weight: 700; }
.gc-emb .gce-saved-cta__btn {
  flex: none; text-decoration: none; font-weight: 700; font-size: 13.5px; color: #fff;
  background: var(--gce-sienna); border-radius: 9px; padding: 9px 16px; white-space: nowrap; transition: background .15s;
}
.gc-emb .gce-saved-cta__btn:hover { background: var(--gce-sienna-d); }
.gc-emb .gce-saved-cta__btn:focus-visible { outline: 3px solid rgba(196,83,43,.45); outline-offset: 2px; }
.gc-emb .gce-end__foot { display: flex; gap: 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--gce-line); }
.gc-emb .gce-end__foot button {
  appearance: none; background: none; border: none; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; color: var(--gce-ink-3); padding: 4px; transition: color .15s;
}
.gc-emb .gce-end__foot button:hover { color: var(--gce-ink); }
.gc-emb .gce-end__foot button:focus-visible { outline: 2px solid var(--gce-sienna); outline-offset: 3px; border-radius: 6px; }

/* ---------- loading / error veil ---------- */
.gc-emb .em-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; border-radius: 50%;
  font-size: 13.5px; font-weight: 500; color: var(--gce-ink-2);
  background: radial-gradient(circle at 50% 45%, rgba(246,241,231,.92), rgba(239,233,220,.86));
  backdrop-filter: blur(1px);
}
.gc-emb .em-loading.is-error { color: var(--gce-sienna-d); }
.gc-emb .em-loading__retry { margin-left: 8px; font: inherit; font-weight: 700; color: var(--gce-sienna); background: none; border: none; cursor: pointer; text-decoration: underline; }
/* skeleton pulse before hydrate */
.gc-emb .gce-skeleton { position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 0deg, #e7e0d0, #efe9dc, #e7e0d0, #efe9dc, #e7e0d0); opacity: .7; animation: gce-spin 2.6s linear infinite; }
.gc-emb .gce-skeleton::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--gce-cream); }
@keyframes gce-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gc-emb .gce-skeleton { animation: none; } }

/* "hover/tap to explore" hint pill */
.gc-emb .em-hint {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  background: rgba(33,50,60,.9); color: #fbf7ef; font-size: 12px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.4); transition: opacity .3s, transform .3s;
}
.gc-emb .em-hint.is-gone { opacity: 0; transform: translate(-50%, 6px); }

/* ---------- tooltip (desktop) — absolute within the viz wrap ---------- */
.gc-emb .gce-tooltip {
  position: absolute; z-index: 12; top: 0; left: 0; max-width: 250px;
  background: #1c2c34; color: #f3efe6; border-radius: 10px; padding: 11px 13px;
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.5); pointer-events: none; opacity: 0;
  transition: opacity .12s; font-size: 13px; line-height: 1.4;
}
.gc-emb .gce-tooltip b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.gc-emb .em-tip-meta { display: block; font-size: 11.5px; color: rgba(243,239,230,.72); }
.gc-emb .em-tip-amt { display: block; font-size: 13px; font-weight: 700; color: #e8c98a; margin-top: 4px; }
.gc-emb .em-tip-ctx { display: block; font-size: 11.5px; color: rgba(243,239,230,.8); margin-top: 4px; }
.gc-emb .em-tip-ctx b { display: inline; }
.gc-emb .em-tip-hint { display: block; font-size: 11px; color: rgba(243,239,230,.6); margin-top: 6px; }

/* ---------- mobile info card (tap) ---------- */
.gc-emb .gce-mcard {
  position: absolute; z-index: 13; left: 12px; right: 12px; bottom: 12px;
  background: #fff; border: 1px solid var(--gce-line-2); border-radius: 13px; padding: 15px 16px;
  box-shadow: var(--gce-shadow-lg); transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.gc-emb .gce-mcard.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.gc-emb .gce-mcard__x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border: none; background: none; font-size: 22px; line-height: 1; color: var(--gce-ink-3); cursor: pointer; }
.gc-emb .gce-mcard__t { font-size: 15px; font-weight: 700; color: var(--gce-ink); padding-right: 28px; line-height: 1.25; }
.gc-emb .gce-mcard__m { font-size: 12.5px; color: var(--gce-ink-3); margin-top: 3px; }
.gc-emb .gce-mcard__amt { font-size: 14px; font-weight: 700; color: var(--gce-sienna); margin-top: 6px; }
.gc-emb .gce-mcard__ctx { display: block; font-size: 12px; color: var(--gce-ink-2); margin-top: 6px; }
.gc-emb .gce-mcard__go { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--gce-sienna); text-decoration: none; }

/* ---------- toast (save nudge) ---------- */
.gc-emb-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  z-index: 9999; max-width: 92vw;
  background: #1c2c34; color: #fbf7ef; font-family: var(--gce-font); font-size: 14px; font-weight: 600;
  padding: 13px 18px; border-radius: 12px; box-shadow: 0 18px 50px -14px rgba(0,0,0,.5);
  text-decoration: none; opacity: 0; transition: opacity .3s, transform .3s;
}
.gc-emb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.gc-emb-toast--cta { border: 1px solid rgba(196,83,43,.5); }

/* ============================================================================
   RESPONSIVE — single column, reordered to head → MAP → quiz (map above the
   question box), with a smaller/tighter map so more fits on a phone screen.
   ============================================================================ */
@media (max-width: 900px) {
  .gc-emb .gce {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "chart" "panel";   /* map (chart) ABOVE the quiz (panel) */
    column-gap: 0; row-gap: 4px;
  }
  /* tightened header rhythm so the MAP + the first QUESTION fit higher up the phone screen — the whole
     point is an above-the-fold interactive funnel; the question must be visible (or nearly) on landing. */
  .gc-emb .gce-head { max-width: none; margin: 0 0 8px; }
  .gc-emb .gce-title { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.3rem); }
  .gc-emb .gce-sub { font-size: .92rem; margin-top: 8px; max-width: none; }
  .gc-emb .gce-trust { margin-top: 8px; gap: 6px 14px; font-size: 12.5px; }
  .gc-emb .gce-chart { max-width: 320px; margin: 2px auto 8px; }   /* smaller map → see more at once */
  .gc-emb .gce--end .gce-chart { position: static; }   /* no sticky map on mobile (single column) */
  .gc-emb .gce-counter { justify-content: center; margin: 0 auto 6px; }
  .gc-emb .gce-mapfoot { text-align: center; margin-top: 8px; }
  .gc-emb .gce-colorby { margin-bottom: 5px; }
  .gc-emb .gce-legend { justify-content: center; gap: 4px 11px; }
  .gc-emb .em-leg { font-size: 11.5px; }
}
@media (max-width: 480px) {
  .gc-emb .gce-chart { max-width: 240px; }                          /* tighter still → question clears the fold */
  .gc-emb .gce-q__opts { grid-template-columns: 1fr; }
  .gc-emb .gce-counter { padding: 0; }
  .gc-emb .gce-counter__n { font-size: 1.5rem; }
  .gc-emb .gce-counter__label { max-width: 16ch; font-size: 11.5px; }
  .gc-emb .gce-colorby__hint { display: block; margin-top: 1px; }   /* wrap the explore hint to its own line */
  .gc-emb .gce-end__foot { flex-direction: column; gap: 8px; }
}

/* ── Phase B `deep_questions_v1` variant (2026-07-01): "why it dropped" receipts + verdict tiers ── */
.gc-emb .gce-dropfeed { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.gc-emb .gce-drop {
  display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--gce-ink-2);
  background: var(--gce-cream-3); border: 1px solid var(--gce-line); border-left: 3px solid var(--gce-terra);
  border-radius: 8px; padding: 7px 11px;
}
.gc-emb .gce-drop b { color: var(--gce-terra); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }
.gc-emb .gce-drop--soft { border-left-color: var(--gce-gold); }
.gc-emb .gce-drop--soft b { color: var(--gce-ochre); }

.gc-emb .gce-tiers { margin: 16px 0 2px; display: flex; flex-direction: column; gap: 10px; }
.gc-emb .gce-tier { background: var(--gce-cream-3); border: 1px solid var(--gce-line); border-radius: 12px; padding: 12px 15px; }
.gc-emb .gce-tier__row { display: flex; align-items: baseline; gap: 10px; }
.gc-emb .gce-tier__n { font-family: var(--gce-serif); font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
.gc-emb .gce-tier__t { font-weight: 700; font-size: 14px; color: var(--gce-ink); }
.gc-emb .gce-tier__d { font-size: 12.5px; color: var(--gce-ink-3); margin-top: 4px; line-height: 1.45; }
.gc-emb .gce-tier--q { border-left: 4px solid var(--gce-teal-d); }
.gc-emb .gce-tier--q .gce-tier__n { color: var(--gce-teal-d); }
.gc-emb .gce-tier--b { border-left: 4px solid var(--gce-gold); }
.gc-emb .gce-tier--b .gce-tier__n { color: var(--gce-ochre); }
.gc-emb .gce-tier--r { border-left: 4px solid var(--gce-line-2); }
.gc-emb .gce-tier--r .gce-tier__n { color: var(--gce-ink-3); }
.gc-emb .gce-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gc-emb .gce-whychip {
  font-size: 11.5px; font-weight: 600; background: rgba(185,139,53,.08);
  border: 1px solid rgba(185,139,53,.45); color: #7a5a1a; border-radius: 999px; padding: 4px 10px;
}
.gc-emb .gce-whychip--r { background: var(--gce-cream); border-color: var(--gce-line-2); color: var(--gce-ink-3); }

/* ── competing conversion chrome stands down on embed pages (UX review 2026-07-02) ──
   The map IS this page's quiz. Without this, seo-conversion's injected dropdown quiz widget
   duplicates the funnel mid-article, and the two bottom-fixed quiz bars (sticky-cta.js
   .gc-sticky-cta, seo-conversion .gc-sticky-bar) invite users to "take the quiz" ON TOP of
   their own map results (mobile occlusion verified live). body.gc-emb-page is set by
   eligibility-embed.js autoInit only when a .gc-emb exists on the page. */
body.gc-emb-page .gc-sticky-cta,
body.gc-emb-page .gc-sticky-bar,
body.gc-emb-page .gc-quiz-widget { display: none !important; }

/* ── results-panel v2 (2026-07-02) ─────────────────────────────────────────────
   Hero #1 card + why-receipts, rank badges, demoted ruled-out line, sticky map. */
.gc-emb .gce-match--hero {
  border: 1.5px solid var(--gce-sienna, #b65c38); border-radius: var(--gce-radius, 12px);
  background: linear-gradient(180deg, rgba(182,92,56,.045), rgba(182,92,56,0) 55%), var(--gce-cream, #fdfaf3);
  box-shadow: var(--gce-shadow, 0 1px 3px rgba(0,0,0,.06)); position: relative;
}
.gc-emb .gce-match--hero .gce-match__t { font-size: 1.12em; font-weight: 700; }
.gc-emb .gce-match__rank {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--gce-ink-3);
  margin-right: 6px; letter-spacing: .02em;
}
.gc-emb .gce-match__why {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 14px 2px; margin-top: -2px;
}
.gc-emb .gce-match__whylab {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gce-ink-3); margin-right: 2px; flex-shrink: 0;
}
.gc-emb .gce-rcpt {
  font-size: 11.5px; font-weight: 600; color: #2f5d47;
  background: rgba(47,93,71,.07); border: 1px solid rgba(47,93,71,.28);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.gc-emb .gce-rcpt--alt { color: #7a5a1a; background: rgba(185,139,53,.08); border-color: rgba(185,139,53,.45); }
.gc-emb .gce-rcpt--more {
  cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--gce-ink-2); background: var(--gce-cream-2, #f4eee0); border: 1px dashed var(--gce-line-2);
  min-height: 24px;
}
.gc-emb .gce-rcpt--more:hover, .gc-emb .gce-rcpt--more:focus-visible { border-style: solid; color: var(--gce-ink); }
.gc-emb .gce-rcpt-rest { display: contents; }
/* display:contents would silently defeat the [hidden] attribute (the documented gotcha) —
   the collapsed state must win: */
.gc-emb .gce-rcpt-rest[hidden] { display: none; }
.gc-emb .gce-match--hero .gce-match__locked {
  display: block; padding: 8px 14px 12px; margin-top: 0;
  border-top: 1px dashed var(--gce-line-2);
}

/* ruled-out: one-line expandable — interesting, not prime-slot (v2 review) */
.gc-emb .gce-ruled { margin: 10px 0 2px; }
.gc-emb .gce-ruled summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--gce-ink-2);
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--gce-line-2); background: var(--gce-cream-2, #f4eee0);
  min-height: 32px;
}
.gc-emb .gce-ruled summary::-webkit-details-marker { display: none; }
.gc-emb .gce-ruled summary::after { content: '▾'; font-size: 11px; color: var(--gce-ink-3); transition: transform .15s ease; }
.gc-emb .gce-ruled[open] summary::after { transform: rotate(180deg); }
.gc-emb .gce-ruled__n { font-weight: 800; color: var(--gce-ink); }
.gc-emb .gce-ruled .gce-why { margin-top: 8px; }
.gc-emb .gce-end__checks { color: var(--gce-ink-2); }

/* np-template pages set body{overflow-x:hidden}, which makes <body> a scroll container and
   silently kills position:sticky for every descendant (the map never stuck there — caught by
   Khalid on live, 2026-07-02). overflow-x:clip prevents the same horizontal overflow WITHOUT
   creating a scroll container. body.gc-emb-page is set by the embed's autoInit. */
body.gc-emb-page { overflow-x: clip; }

/* the map stays alongside while the results panel scrolls (desktop only — mobile stacks) */
@media (min-width: 880px) {
  .gc-emb .gce--end .gce-chart { position: sticky; top: 24px; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .gc-emb .gce-ruled summary::after { transition: none; }
}

/* ── interactivity + tooltip polish (2026-07-02 evening round) ──────────────── */
.gc-emb { position: relative; }   /* tooltip positioning context */

/* tooltip card — dark, calm, arrowless (clamped positioning makes arrows lie) */
.gc-emb .gce-tip {
  position: absolute; z-index: 60; pointer-events: none;
  background: #1f3d30; color: #f5efe2;
  font-size: 12.5px; line-height: 1.45; font-weight: 500;
  padding: 9px 12px; border-radius: 10px; max-width: 280px;
  box-shadow: 0 10px 30px -8px rgba(31,61,48,.5);
  animation: gce-tip-in .14s ease-out;
}
@keyframes gce-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gc-emb .gce-tip { animation: none; } }

/* tipped elements advertise themselves */
.gc-emb [data-gce-tip] { cursor: help; }
.gc-emb .gce-rcpt[data-gce-tip]:hover, .gc-emb .gce-rcpt[data-gce-tip]:focus-visible {
  border-style: solid; box-shadow: 0 2px 8px -2px rgba(47,93,71,.35); background: #fff;
}
.gc-emb .gce-match__fit[data-gce-tip]:hover { box-shadow: 0 2px 8px -2px rgba(47,93,71,.3); }
.gc-emb .gce-whychip[data-gce-tip]:hover { background: rgba(185,139,53,.14); }
.gc-emb .gce-match__locked[data-gce-tip]:hover { opacity: 1; color: var(--gce-ink-2); }
.gc-emb [data-gce-tip]:focus-visible { outline: 2px solid rgba(196,83,43,.4); outline-offset: 2px; border-radius: 8px; }

/* cards lift on hover — the results read as interactive, not print */
.gc-emb .gce-match { transition: transform .16s ease, box-shadow .16s ease; }
.gc-emb .gce-match:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(31,61,48,.28); }
.gc-emb .gce-match--hero { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.gc-emb .gce-match--hero:hover { transform: translateY(-2px); border-color: var(--gce-sienna-d); box-shadow: 0 14px 34px -12px rgba(196,83,43,.38); }
@media (prefers-reduced-motion: reduce) {
  .gc-emb .gce-match, .gc-emb .gce-match--hero { transition: none; }
  .gc-emb .gce-match:hover, .gc-emb .gce-match--hero:hover { transform: none; }
}

/* ruled-out line responds */
.gc-emb .gce-ruled summary { transition: background .15s ease, border-color .15s ease; }
.gc-emb .gce-ruled summary:hover { background: #fff; border-color: var(--gce-terra); }
.gc-emb .gce-ruled summary:focus-visible { outline: 2px solid rgba(196,83,43,.4); outline-offset: 2px; }

/* ── floating save bar (2026-07-02 — replaces the buried inline saved-CTA) ────── */
.gce-savebar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;   /* above page chrome; embed pages suppress the competing sticky bars */
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 24px); max-width: 470px;
  background: #1f3d30; color: #f5efe2;
  padding: 11px 12px 11px 16px; border-radius: 14px;
  box-shadow: 0 14px 40px -10px rgba(31,61,48,.55);
  animation: gce-savebar-in .22s ease-out;
}
.gce-savebar[hidden] { display: none; }
@keyframes gce-savebar-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .gce-savebar { animation: none; } }
.gce-savebar__t { flex: 1 1 auto; font-size: 13.5px; line-height: 1.35; font-family: 'DM Sans','Inter',system-ui,sans-serif; }
.gce-savebar__t strong { font-weight: 700; color: #fff; }
.gce-savebar__btn {
  flex-shrink: 0; background: var(--gce-sienna, #C4532B); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; white-space: nowrap;
  font-family: 'DM Sans','Inter',system-ui,sans-serif;
}
.gce-savebar__btn:hover { background: var(--gce-sienna-d, #a8431f); }
.gce-savebar__btn:focus-visible { outline: 3px solid rgba(255,255,255,.5); outline-offset: 2px; }
.gce-savebar__x {
  flex-shrink: 0; background: none; border: 0; color: rgba(245,239,226,.7); cursor: pointer;
  font-size: 14px; padding: 8px; line-height: 1; border-radius: 8px; min-width: 32px; min-height: 32px;
}
.gce-savebar__x:hover { color: #fff; background: rgba(255,255,255,.08); }
.gce-savebar__x:focus-visible { outline: 2px solid rgba(255,255,255,.5); }

/* ── mobile-first flattening (2026-07-02 — Khalid: desktop boxes squeezed into 390px) ──
   ONE card layer, not three: the results div nested inside the question card doubled the
   chrome everywhere; on phones the wrappers go fully flat and the interaction cards sit
   straight on the section background, recovering ~50px of usable width + visual calm. */
.gc-emb .gce-question .gce-end {   /* all widths: the inner results div never needs its own box */
  background: none; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (max-width: 900px) {
  .gc-emb .gce-question, .gc-emb .gce-end {
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 6px 0 0; border-radius: 0;
  }
  .gc-emb .gce-question { min-height: 0; }
  /* interaction cards get solid (not translucent) backgrounds now that they sit on the gradient */
  .gc-emb .gce-match, .gc-emb .gce-next-step, .gc-emb .gce-tier, .gc-emb .gce-optin,
  .gc-emb .gce-refine, .gc-emb .gce-ruled summary, .gc-emb .gce-resume { background-color: #fffdf8; }
  .gc-emb .gce-match--hero { background-color: #fffaf4; }
  /* tighter card rhythm at phone widths */
  .gc-emb .gce-next-step { padding: 15px 14px; }
  .gc-emb .gce-match__link { padding: 13px 13px 11px; }
  .gc-emb .gce-match__why { padding: 7px 13px 2px; }
  .gc-emb .gce-match--hero .gce-match__locked { padding: 7px 13px 11px; }
  .gc-emb .gce-match__fit { font-size: 10.5px; padding: 2px 8px; }
  .gc-emb .gce-rcpt { font-size: 11px; padding: 3px 8px; }
  .gc-emb .gce-end__n { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .gc-emb .gce-end__lead { font-size: .95rem; }
  /* the floating save bar owns the bottom edge — keep the last content clear of it */
  .gc-emb .gce-end__foot { margin-bottom: 6px; }
}

/* ── GC Arts bridge (2026-07-03) — AB2 results lane + AB7 ping. Namespaced gc-artsb-*; block is
   IDENTICAL across eligibility-embed.css / eligibility-map.css / gameplan.css. Inline content only
   (never position:fixed). Light tint card is intentional on the dark map too (distinct GC Arts brand). */
.gc-artsb-ping,
.gc-artsb-lane {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: #f7f3fb;
  border: 1px solid #ddd0ee;
  border-left: 3px solid #6C3FA5;
  border-radius: 9px;
  padding: 10px 12px;
  margin: 12px 0;
  font-size: .85rem;
  line-height: 1.4;
  color: #4a3b60;
  box-sizing: border-box;
}
.gc-artsb-lane { margin: 14px 0; }
.gc-artsb-ping-txt,
.gc-artsb-lane-txt { flex: 1 1 200px; min-width: 0; color: #4a3b60; }
.gc-artsb-ping-txt strong,
.gc-artsb-lane-txt strong { color: #3c2660; font-weight: 700; }
.gc-artsb-dot {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: conic-gradient(#6C3FA5 0 30%, #E8A838 30% 55%, #b98ae0 55% 80%, #f3d9a4 80% 100%);
  box-shadow: inset 0 0 0 3px #fff;   /* white inner ring */
}
/* Pin link colours across ALL states — embed/host pages carry a sitewide a:hover{color:var(--sienna)}
   that would otherwise recolour the CTA/link (0,0,2,0 beats a:hover's 0,0,1,1). */
.gc-artsb-cta,
.gc-artsb-cta:link,
.gc-artsb-cta:visited,
.gc-artsb-cta:hover,
.gc-artsb-cta:focus,
.gc-artsb-cta:active {
  flex: 0 0 auto;
  display: inline-block;
  background: #6C3FA5;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .82rem;
  white-space: nowrap;
}
.gc-artsb-cta:hover,
.gc-artsb-cta:focus { background: #5a3389; color: #fff; }
.gc-artsb-cta:focus-visible { outline: 2px solid #3c2660; outline-offset: 2px; }
.gc-artsb-x {
  flex: 0 0 auto;
  min-width: 40px; min-height: 40px;
  margin: -8px -6px -8px 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #7a6b93;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.gc-artsb-x:hover,
.gc-artsb-x:focus { color: #3c2660; background: rgba(108,63,165,.08); }