/* ==========================================================================
   SPECIALIZED GOOGLE ADS SOLUTIONS — the independent CTA + its panel
   --------------------------------------------------------------------------
   Two parts, and nothing else on the page changes:

   1 · #gss-cta — the band itself.  MOVED 2026-09-08: it is no longer its own
       <section> between "Our Google Ads System" and "Why Choose Us"; it is
       now the right half of that system's closing row, opposite "Every
       account we run goes through the same system."  The .gss-band rules
       below still draw it, unchanged.  The .gss-cta section-ground rules
       that follow are what the standalone shell needed and are now unused;
       they are left in place so nothing that reads this file loses the
       record of how the band was framed.  The row's own layout, and the
       four cascade collisions moving it into .w8 caused, are in
       gads-spec-panel/gss-in-close.css.
       Its card is the .sv-next presentation the "Help Me Choose a Campaign"
       banner already uses — same white card, same radius, same shadow — so
       the two CTAs read as the same kind of thing in two places.

   2 · #gss-panel — the popup. It carries the .gfc classes verbatim, so the
       overlay, the ease, the duration, the widths, the phone sheet, the
       scroll lock and the close affordances are literally the existing
       popup's, not a copy of its numbers. gads-fit-c5/chooser.css is not
       touched, and neither is the chooser's own CTA.

   The body of the panel is /gads-specialized-s9/v03.html, ported whole:
   _base.css + v03.css follow below, every selector scoped to #gss-panel so
   nothing escapes into the page, with two edits made mechanically —
     · the 08-scale model's `.sc` family became `.szc`, because
       gads-services/gsvc.css already owns a global `.sc` (the service card)
       and it would otherwise have styled the model;
     · v03's three viewport breakpoints became @container queries on the
       panel body, because the width that decides that layout is now the
       panel's (~380-950px), not the window's.

   Loaded after gads-fit-c5/chooser.css.
   ========================================================================== */

/* ---------- 1 · the independent CTA band ---------- */
.gss-cta{
  --maxw: 1400px;
  padding: clamp(40px, 4.2vw, 72px) 0 clamp(44px, 4.6vw, 78px);
  background: var(--mist);
  border-top: 1px solid var(--line-b);
}
.gss-cta .k-wrap{ width: min(var(--maxw), 100% - 2*var(--pad)); }

/* the same card as .sv-next under the service grid */
.gss-band{
  display: flex; align-items: center; gap: clamp(18px, 3vw, 48px);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px);
  border-radius: 20px; background: #fff; border: 1px solid #E4E9F1;
  box-shadow: 0 1px 2px rgba(15, 27, 61, .05), 0 14px 30px -16px rgba(15, 27, 61, .24);
}
.gss-band-t{ flex: 1; min-width: 0; }
.gss-band-t b{
  display: block; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800;
  letter-spacing: -.036em; line-height: 1.18; color: var(--ink);
}
.gss-band-t p{
  margin-top: 8px; max-width: 56ch; font-size: 14.4px; line-height: 1.55;
  color: var(--ink-2);
}
.gss-band-a{ flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.gss-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border: 0; border-radius: 13px;
  background: var(--brand); color: #fff; font-family: inherit; font-size: 15px;
  font-weight: 750; letter-spacing: -.012em; white-space: nowrap; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  box-shadow: 0 8px 20px -6px rgba(11, 87, 245, .5);
  transition: filter .18s var(--ease), transform .16s var(--ease);
}
.gss-btn:hover{ filter: brightness(1.08); }
.gss-btn:active{ transform: translateY(1px); }
.gss-btn svg{
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.gss-note{ text-align: center; font-size: 12.6px; color: var(--ink-3); }

@media (max-width: 860px){
  .gss-cta{ --pad: var(--gut); padding: 34px 0 40px; }
  .gss-band{ flex-direction: column; align-items: stretch; }
  .gss-band-a{ width: 100%; }
  .gss-btn{ width: 100%; }
}
@media (max-width: 620px){
  /* the label wraps rather than pushing the button past the card edge */
  .gss-btn{ height: auto; min-height: 52px; padding: 13px 20px; white-space: normal;
    text-align: center; line-height: 1.25; }
}

/* Shared foundation: tokens, section shell, and the eight operational visuals.
   Version-specific architecture lives in v01.css / v02.css / v03.css. */

#gss-panel .sx,
#gss-panel .sx *,
#gss-panel .sx *::before,
#gss-panel .sx *::after{ box-sizing: border-box; }
#gss-panel .sx :where(h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,dl,dd,dt){ margin: 0; padding: 0; }
#gss-panel .sx :where(ul,ol){ list-style: none; }
#gss-panel .sx :where(button){ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
#gss-panel .sx [hidden]{ display: none !important; }

#gss-panel .sx{
  --ink: #0d1117;
  --ink-2: #33404d;
  --mute: #5d6874;
  --line: #e3e7ec;
  --line-soft: #eef1f5;
  --paper: #ffffff;
  --ground: #f4f6f8;
  --accent: #1a4fd6;
  --accent-ink: #123a9e;
  --accent-soft: #eef2fd;
  --accent-line: #c6d4f2;
  --warn: #9c4f1b;
  --good: #146b4d;
  --r: 12px;
  --vzh: 336px;
  --wpad: clamp(16px, 4.4vw, 40px);
  --maxw: 1220px;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink-2);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  padding: clamp(34px, 6vw, 72px) var(--wpad) clamp(40px, 7vw, 84px);
  font-size: 15px;
  line-height: 1.5;
}

@container gssb (max-width: 560px) { #gss-panel .sx{ --vzh: 348px; } }

#gss-panel .sx-in{ max-width: var(--maxw); margin: 0 auto; }

/* ---- section heading ---- */
#gss-panel .sx-head{ max-width: 760px; margin-bottom: clamp(20px, 3.4vw, 38px); }
#gss-panel .sx-eyebrow{
  font-size: 11px; font-weight: 620; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px;
}
#gss-panel .sx-title{
  font-size: clamp(24px, 4.2vw, 40px); line-height: 1.14; letter-spacing: -.021em;
  font-weight: 660; color: var(--ink); text-wrap: balance;
}
#gss-panel .sx-deck{
  margin-top: 12px; font-size: clamp(13.5px, 1.35vw, 16px);
  color: var(--mute); max-width: 62ch; text-wrap: pretty;
}

/* ---- shared type roles inside a solution view ---- */
#gss-panel .sx-lab{ font-size: 10.5px; font-weight: 640; letter-spacing: .11em; text-transform: uppercase; color: var(--mute); }
#gss-panel .sx-name{ font-size: clamp(18px, 2.5vw, 26px); line-height: 1.2; letter-spacing: -.017em; font-weight: 650; color: var(--ink); text-wrap: balance; }
#gss-panel .sx-problem{ font-size: clamp(13.5px, 1.5vw, 15.5px); line-height: 1.45; color: var(--ink); font-weight: 520; }
#gss-panel .sx-explain{ font-size: clamp(12.8px, 1.25vw, 14.5px); line-height: 1.55; color: var(--mute); text-wrap: pretty; }

#gss-panel .sx-acts{ display: grid; gap: 7px; }
#gss-panel .sx-acts li{
  position: relative; padding-left: 24px; font-size: clamp(12.5px, 1.2vw, 14px);
  line-height: 1.4; color: var(--ink-2);
}
/* the mark before an action.  It used to be 01/02/03, which read as a
   sequence the reader had to follow; the actions are things we do, so the
   mark is now a plain rule. */
#gss-panel .sx-acts li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; border-radius: 1px; background: var(--accent);
}

#gss-panel .sx-out{ display: grid; gap: 4px; }
#gss-panel .sx-out dt{ font-size: 10.5px; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
#gss-panel .sx-out dd{ font-size: clamp(12.6px, 1.2vw, 14px); line-height: 1.45; color: var(--ink); }
#gss-panel .sx-out .is-good{ color: var(--good); }

#gss-panel .sx-more{ display: grid; gap: 6px; }
#gss-panel .sx-more li{ position: relative; padding-left: 15px; font-size: 12.6px; line-height: 1.45; color: var(--mute); }
#gss-panel .sx-more li::before{ content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 1px; background: #b9c2cb; }
#gss-panel .sx-note-line{ font-size: 12px; line-height: 1.45; color: var(--mute); border-left: 2px solid var(--line); padding-left: 10px; }
#gss-panel .sx-cond{
  font-size: 12.2px; line-height: 1.45; color: var(--accent-ink); font-weight: 560;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 8px 11px;
}

/* buttons */
#gss-panel .sx-btn{
  display: inline-flex; align-items: center; gap: 9px; min-height: 42px;
  padding: 0 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
}
#gss-panel .sx-btn.is-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
#gss-panel .sx-btn .sx-btn-i{
  width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg); opacity: .8;
}
#gss-panel .sx-btn[aria-expanded="true"] .sx-btn-i{ transform: rotate(45deg); }
#gss-panel .sx :where(button):focus-visible,
#gss-panel .sx :where(a):focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ---------------------------------------------------------------
   The visual frame — identical for every solution, every version
   --------------------------------------------------------------- */
#gss-panel .sx-frame{
  container: vzf / inline-size;
  height: var(--vzh); background: var(--ground); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 13px 9px; overflow: hidden;
}
#gss-panel .vz{ height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 7px; }
#gss-panel .vz-body{ min-height: 0; display: grid; align-content: center; }
#gss-panel .vz-note{ font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #6f7a85; }

/* 01 rescue ------------------------------------------------------ */
#gss-panel .rs{ display: grid; gap: 7px; align-content: center; }
#gss-panel .rs-stage{ background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; display: grid; gap: 6px; align-content: start; }
#gss-panel .rs-cap{ font-size: 11px; font-weight: 640; color: var(--ink); }
#gss-panel .rs-map{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
#gss-panel .rs-root{ width: 5px; height: 100%; min-height: 24px; border-radius: 3px; background: #cfd6dd; }
#gss-panel .rs-bars{ display: grid; gap: 4px; }
#gss-panel .rs-bar{ height: 5px; width: var(--w); border-radius: 3px; background: #cfd6dd; }
#gss-panel .rs-bar.is-dup{ background: repeating-linear-gradient(90deg, #e0c4b1 0 5px, #efdcd0 5px 10px); }
#gss-panel .rs-bar.is-dead{ background: #ded4cd; }
#gss-panel .rs-bar.is-flag{ background: #dda877; }
#gss-panel .rs-bar.is-ok{ background: #9cb3e5; }
#gss-panel .rs-tag{ font-size: 10.5px; color: var(--mute); }
#gss-panel .rs-stage.is-found{ border-color: #e6d3c2; }
#gss-panel .rs-stage.is-fixed{ border-color: var(--accent-line); }
#gss-panel .rs-stage.is-fixed .rs-root{ background: #9cb3e5; }
#gss-panel .rs-link{ position: relative; height: 11px; }
#gss-panel .rs-link::before{ content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 11px; background: #cdd5dd; }
#gss-panel .rs-link::after{
  content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px;
  border-right: 1px solid #a9b4bf; border-bottom: 1px solid #a9b4bf;
  transform: translate(-50%, 1px) rotate(45deg);
}
@container vzf (min-width: 390px) {
  #gss-panel .rs{ grid-auto-flow: column; grid-template-columns: minmax(0,1fr) 16px minmax(0,1fr) 16px minmax(0,1fr); align-items: stretch; gap: 0; }
  #gss-panel .rs-link{ height: auto; }
  #gss-panel .rs-link::before{ left: 0; top: 50%; width: 100%; height: 1px; }
  #gss-panel .rs-link::after{ left: auto; right: 0; top: 50%; bottom: auto; transform: translate(1px, -50%) rotate(-45deg); }
}

/* 02 lead filter ------------------------------------------------- */
#gss-panel .lf{ display: grid; gap: 6px; justify-items: center; align-content: center; }
#gss-panel .lf-step{
  width: var(--w); max-width: 100%; background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px; text-align: center;
}
#gss-panel .lf-step b{ display: block; font-size: 11.5px; font-weight: 640; color: var(--ink); }
#gss-panel .lf-step span{ display: block; font-size: 10.5px; line-height: 1.35; color: var(--mute); margin-top: 1px; }
#gss-panel .lf-step.is-out{ border-color: #bed5c8; background: #f4f9f6; }
#gss-panel .lf-loop{
  margin-top: 9px; display: flex; gap: 7px; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--mute); text-align: center;
}
#gss-panel .lf-loop i{
  width: 6px; height: 6px; border-left: 1.3px solid #96a2ad; border-top: 1.3px solid #96a2ad;
  transform: rotate(45deg); flex: none;
}
@container vzf (min-width: 498px) { #gss-panel .lf-step{ padding: 8px 14px; } #gss-panel .lf-step b{ font-size: 12.5px; } #gss-panel .lf-step span{ font-size: 11.5px; } }

/* 03 conversion path --------------------------------------------- */
#gss-panel .cp{ display: grid; justify-items: center; align-content: center; }
#gss-panel .cp-node{ background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 7px 13px; text-align: center; min-width: 156px; }
#gss-panel .cp-node b{ display: block; font-size: 11.5px; font-weight: 640; color: var(--ink); }
#gss-panel .cp-node span{ display: block; font-size: 10px; color: var(--mute); margin-top: 1px; }
#gss-panel .cp-node.is-end{ border-color: var(--accent-line); background: var(--accent-soft); }
#gss-panel .cp-node.is-end b{ color: var(--accent-ink); }
#gss-panel .cp-link{ position: relative; width: 1px; height: 15px; background: #cdd5dd; }
#gss-panel .cp-link::after{
  content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px;
  border-right: 1px solid #a9b4bf; border-bottom: 1px solid #a9b4bf; transform: translate(-50%, 1px) rotate(45deg);
}
#gss-panel .cp-branch{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
#gss-panel .cp-branch li{ font-size: 10.5px; color: var(--ink-2); background: var(--paper); border: 1px dashed #ccd4dd; border-radius: 999px; padding: 4px 10px; }
@container vzf (min-width: 590px) {
  #gss-panel .cp{ grid-auto-flow: column; align-items: center; justify-items: stretch; grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr) 22px auto 22px minmax(0,1fr); }
  #gss-panel .cp-link{ width: 100%; height: 1px; }
  #gss-panel .cp-link::after{ left: auto; right: 0; top: 50%; bottom: auto; transform: translate(1px, -50%) rotate(-45deg); }
  #gss-panel .cp-branch{ flex-direction: column; gap: 5px; }
  #gss-panel .cp-node{ min-width: 0; }
}

/* 04 local intent ------------------------------------------------ */
#gss-panel .lo{ display: grid; gap: 13px; justify-items: center; align-content: center; }
#gss-panel .lo-map{ position: relative; width: 128px; height: 128px; display: grid; place-items: center; flex: none; }
#gss-panel .lo-ring{ position: absolute; border-radius: 50%; }
#gss-panel .lo-r3{ inset: 0; border: 1px dashed #d3dae1; background: #fbfcfd; }
#gss-panel .lo-r2{ inset: 17%; border: 1px solid #cddcf3; background: #edf2fc; }
#gss-panel .lo-r1{ inset: 35%; border: 1px solid #9db6e6; background: #dce6fa; }
#gss-panel .lo-pin{ position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #fff; }
#gss-panel .lo-key{ display: grid; gap: 7px; justify-self: stretch; }
#gss-panel .lo-key li{ position: relative; padding-left: 17px; }
#gss-panel .lo-key li::before{ content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; }
#gss-panel .lo-key .k1::before,
#gss-panel .lo-key li.k1::before{ background: #9db6e6; }
#gss-panel .lo-key li.k2::before{ background: #cddcf3; }
#gss-panel .lo-key li.k3::before{ background: #fff; border: 1px dashed #c2cbd4; }
#gss-panel .lo-key b{ display: block; font-size: 11px; font-weight: 640; color: var(--ink); }
#gss-panel .lo-key span{ font-size: 10.5px; color: var(--mute); }
@container vzf (min-width: 390px) {
  #gss-panel .lo{ grid-auto-flow: column; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; justify-items: start; }
  #gss-panel .lo-map{ width: 150px; height: 150px; }
}
@container vzf (min-width: 540px) { #gss-panel .lo-map{ width: 172px; height: 172px; } }

/* 05 multi-location ---------------------------------------------- */
#gss-panel .ml{ display: grid; gap: 7px; align-content: center; }
#gss-panel .ml-head{ display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #6f7a85; }
#gss-panel .ml-rows{ display: grid; gap: 6px; }
#gss-panel .ml-row{
  display: grid; grid-template-columns: minmax(74px, auto) minmax(0, 1fr) 32px; gap: 9px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid #bfd0ee;
  border-radius: 7px; padding: 7px 10px;
}
#gss-panel .ml-row b{ font-size: 11px; font-weight: 640; color: var(--ink); }
#gss-panel .ml-bar{ display: block; height: 6px; border-radius: 4px; background: #edf0f4; overflow: hidden; }
#gss-panel .ml-bar i{ display: block; height: 100%; width: var(--v); border-radius: 4px; background: #6f92dd; }
#gss-panel .ml-pct{ font-size: 10.5px; color: var(--ink-2); text-align: right; }
#gss-panel .ml-note{ grid-column: 2 / 4; font-size: 10px; color: var(--mute); }
#gss-panel .ml-foot{ font-size: 10px; color: var(--mute); }
@container vzf (max-width: 415px) {
  #gss-panel .ml-row{ padding: 5px 9px; }
  #gss-panel .ml-rows{ gap: 5px; }
  #gss-panel .ml-note{ font-size: 9.5px; }
}
@container vzf (min-width: 416px) {
  #gss-panel .ml-row{ grid-template-columns: minmax(92px, auto) minmax(0, 1fr) 34px minmax(88px, auto); }
  #gss-panel .ml-note{ grid-column: auto; text-align: right; }
}

/* 06 profit-aware budget ----------------------------------------- */
#gss-panel .pb{ display: grid; gap: 8px; align-content: center; }
#gss-panel .pb-head{ display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #6f7a85; }
#gss-panel .pb-rows{ display: grid; gap: 9px; }
#gss-panel .pb-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, auto) minmax(0, 1fr); gap: 9px; align-items: center; }
#gss-panel .pb-row b{ font-size: 10.6px; font-weight: 600; color: var(--ink); text-align: center; }
#gss-panel .pb-l{ display: flex; justify-content: flex-end; }
#gss-panel .pb-l i{ display: block; height: 9px; width: var(--v); background: #ccd6e8; border-radius: 4px 0 0 4px; }
#gss-panel .pb-r i{ display: block; height: 9px; width: var(--v); background: #3a68dd; border-radius: 0 4px 4px 0; }
#gss-panel .pb-foot{ font-size: 10px; color: var(--mute); }
@container vzf (min-width: 498px) { #gss-panel .pb-row b{ font-size: 12px; } #gss-panel .pb-row{ grid-template-columns: minmax(0,1fr) minmax(150px,auto) minmax(0,1fr); } }

/* 07 search-term protection -------------------------------------- */
#gss-panel .st{ display: grid; gap: 9px; align-content: center; }
#gss-panel .st-col{ background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
#gss-panel .st-col.is-keep{ border-color: #c6dccf; }
#gss-panel .st-col.is-cut{ border-color: #e6d6c8; }
#gss-panel .st-head{ font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
#gss-panel .st-col ul{ display: grid; gap: 5px; }
#gss-panel .st-col li{ position: relative; padding-left: 13px; font-size: 11.2px; line-height: 1.35; color: var(--ink-2); }
#gss-panel .st-col li::before{ content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 1px; }
#gss-panel .st-col.is-keep li::before{ background: #3f8f6b; }
#gss-panel .st-col.is-cut li{ color: var(--mute); text-decoration: line-through; text-decoration-color: #d9c4b4; }
#gss-panel .st-col.is-cut li::before{ background: #c08a63; }
#gss-panel .st-col li em{ font-style: normal; font-weight: 640; color: var(--ink); }
#gss-panel .st-col.is-cut li em{ color: var(--mute); }
@container vzf (min-width: 366px) { #gss-panel .st{ grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 11px; } }
@container vzf (min-width: 498px) { #gss-panel .st-col li{ font-size: 12.5px; } }

/* 08 controlled scaling ------------------------------------------ */
#gss-panel .szc{ display: grid; align-content: center; }
#gss-panel .szc-step{ background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
#gss-panel .szc-step b{ display: block; font-size: 11.5px; font-weight: 640; color: var(--ink); }
#gss-panel .szc-step span{ display: block; font-size: 10.5px; line-height: 1.35; color: var(--mute); }
#gss-panel .szc-gate{ background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 9px; padding: 9px 11px; }
#gss-panel .szc-gate-h{ font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 640; color: var(--accent-ink); }
#gss-panel .szc-gate ul{ display: grid; gap: 4px; margin-top: 6px; }
#gss-panel .szc-gate li{ position: relative; padding-left: 16px; font-size: 10.8px; line-height: 1.3; color: var(--ink-2); }
#gss-panel .szc-gate li::before{
  content: ""; position: absolute; left: 1px; top: 3px; width: 8px; height: 4px;
  border-left: 1.4px solid var(--accent); border-bottom: 1.4px solid var(--accent); transform: rotate(-45deg);
}
#gss-panel .szc > li + li{ margin-top: 15px; position: relative; }
#gss-panel .szc > li + li::before{ content: ""; position: absolute; left: 50%; top: -15px; width: 1px; height: 15px; background: #cdd5dd; }
@container vzf (min-width: 470px) {
  #gss-panel .szc{ grid-auto-flow: column; grid-template-columns: minmax(0,1fr) 1.3fr minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
  #gss-panel .szc > li + li{ margin-top: 0; margin-left: 14px; }
  #gss-panel .szc > li + li::before{ left: -14px; top: 50%; width: 14px; height: 1px; }
}
@container vzf (min-width: 590px) {
  #gss-panel .szc > li + li{ margin-left: 20px; }
  #gss-panel .szc > li + li::before{ left: -20px; width: 20px; }
  #gss-panel .szc-gate ul{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
}

/* reduced motion is the default; transitions are opt-in */
@media (prefers-reduced-motion: no-preference){
  #gss-panel .sx-btn,
#gss-panel .sx .sx-anim{ transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; }
}

/* density trim while a model is still stacked (each matches its own
   layout breakpoint, not the phone breakpoint) */
@container vzf (max-width: 389px){
  #gss-panel .rs{ gap: 6px; }
  #gss-panel .rs-stage{ padding: 7px 9px; gap: 5px; }
  #gss-panel .rs-cap{ font-size: 10.8px; }
  #gss-panel .rs-bars{ gap: 3px; }
  #gss-panel .rs-bar{ height: 4px; }
  #gss-panel .rs-tag{ font-size: 10px; line-height: 1.3; }
  #gss-panel .rs-link{ height: 9px; }
  #gss-panel .rs-link::before{ height: 9px; }
}
@container vzf (max-width: 469px) {
  #gss-panel .szc > li + li{ margin-top: 10px; }
  #gss-panel .szc > li + li::before{ top: -10px; height: 10px; }
  #gss-panel .szc-step{ padding: 6px 11px; }
  #gss-panel .szc-gate{ padding: 8px 10px; }
  #gss-panel .szc-gate ul{ gap: 2px; margin-top: 5px; }
  #gss-panel .szc-gate li{ line-height: 1.25; }
}

/* a wide frame gets the larger type and denser rows */
@container vzf (min-width: 498px){
  #gss-panel .rs-stage{ padding: 11px 13px; gap: 8px; }
  #gss-panel .rs-cap{ font-size: 12.5px; }
  #gss-panel .rs-bar{ height: 6px; }
  #gss-panel .rs-bars{ gap: 5px; }
  #gss-panel .rs-tag{ font-size: 11.5px; }
  #gss-panel .cp-node{ padding: 10px 15px; }
  #gss-panel .cp-node b{ font-size: 13px; }
  #gss-panel .cp-node span{ font-size: 11px; }
  #gss-panel .cp-branch li{ font-size: 11.5px; padding: 6px 12px; }
  #gss-panel .ml-row{ padding: 9px 13px; }
  #gss-panel .ml-row b,
#gss-panel .ml-pct,
#gss-panel .ml-note{ font-size: 12.5px; }
  #gss-panel .ml-bar{ height: 8px; }
  #gss-panel .lo-key b{ font-size: 12.5px; }
  #gss-panel .lo-key span{ font-size: 11.5px; }
  #gss-panel .lo-key{ gap: 11px; }
  #gss-panel .szc-step{ padding: 11px 13px; }
  #gss-panel .szc-step b{ font-size: 13px; }
  #gss-panel .szc-step span{ font-size: 11.5px; }
  #gss-panel .szc-gate li{ font-size: 12px; }
  #gss-panel .st-head,
#gss-panel .ml-head,
#gss-panel .pb-head{ font-size: 10.5px; }
  #gss-panel .st-col{ padding: 12px 14px; }
  #gss-panel .st-col ul{ gap: 7px; }
  #gss-panel .pb-l i,
#gss-panel .pb-r i{ height: 11px; }
  #gss-panel .pb-rows{ gap: 12px; }
  #gss-panel .vz-note{ font-size: 10px; }
}

/* models grow into the frame instead of floating in the middle of it */
@container vzf (min-width: 390px){
  /* every model keeps its natural height and sits centred in the shared frame;
     panels in a row equalise, so their captions stay on one line */
  #gss-panel .rs-stage{ gap: 9px; }
  #gss-panel .st-col{ display: grid; align-content: start; }
  #gss-panel .ml-rows{ gap: 8px; }
  #gss-panel .pb-rows{ gap: 11px; }
}
@container vzf (min-width: 590px) {
  #gss-panel .cp-node{ display: grid; align-content: center; }
  #gss-panel .cp-link{ align-self: center; }
  #gss-panel .cp-branch{ justify-content: center; }
}
@container vzf (min-width: 470px) {
  #gss-panel .szc-step,
#gss-panel .szc-gate{ display: grid; align-content: center; }
}
@container vzf (min-width: 498px) {
  #gss-panel .lf{ gap: 8px; }
  #gss-panel .lo-key{ gap: 13px; }
}

/* the three-stage account model in a narrow frame: smaller type, wider stages */
@container vzf (min-width: 390px) and (max-width: 469px){
  #gss-panel .rs{ grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr); }
  #gss-panel .rs-stage{ padding: 6px 8px; gap: 6px; }
  #gss-panel .rs-cap{ font-size: 10.2px; line-height: 1.2; }
  #gss-panel .rs-tag{ font-size: 9.5px; line-height: 1.25; }
  #gss-panel .rs-bar{ height: 4px; }
  #gss-panel .rs-bars{ gap: 3px; }
}


/* V03 — Specialized Solutions Playbook.
   Architecture: a controlled navigator of playbooks over one visual-led spread.
   Desktop shows the active playbook only; phones browse the same cards as a
   snap rail with the next playbook peeking. */

#gss-panel .v3{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }

/* ---------- navigator ---------- */
#gss-panel .v3-nav-h{ margin-bottom: 9px; }
#gss-panel .v3-nav{
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; padding: 0 0 1px;
}
#gss-panel .v3-nav::-webkit-scrollbar{ display: none; }
#gss-panel .v3-nav > li{ flex: none; scroll-snap-align: start; }
/* one line per tab now that the numeral above the name is gone: the folder
   tab and the selected state carry which one you are on */
#gss-panel .v3-tab{
  display: grid; gap: 2px; padding: 11px 14px 12px; white-space: nowrap;
  border-radius: 10px 10px 0 0; border: 1px solid transparent; border-bottom: 0;
  color: var(--mute);
}
#gss-panel .v3-tab .v3-tt{ font-size: 12.8px; font-weight: 570; }
#gss-panel .v3-tab:hover{ background: #eaeef2; }
#gss-panel .v3-tab[aria-selected="true"]{
  background: var(--paper); border-color: var(--line); color: var(--ink);
  position: relative; z-index: 2; margin-bottom: -1px; padding-bottom: 13px;
}
#gss-panel .v3-tab[aria-selected="true"] .v3-tt{ font-weight: 660; }

/* ---------- deck ---------- */
#gss-panel .v3-deck{
  background: var(--paper); border: 1px solid var(--line); border-radius: 0 var(--r) var(--r) var(--r);
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-inline: contain;
}
#gss-panel .v3-deck::-webkit-scrollbar{ display: none; }
#gss-panel .v3-card{
  flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "vis" "plays" "foot";
  gap: clamp(14px, 3vw, 20px); padding: clamp(16px, 3.4vw, 30px);
  border-right: 1px solid var(--line-soft);
}
#gss-panel .v3-card:last-child{ border-right: 0; }
#gss-panel .v3-head{ grid-area: head; display: grid; gap: 8px; align-content: start; }
#gss-panel .v3-vis{ grid-area: vis; }
#gss-panel .v3-plays{ grid-area: plays; display: grid; gap: 10px; align-content: start; }
#gss-panel .v3-foot{ grid-area: foot; display: grid; gap: 14px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
#gss-panel .v3-facts{ display: grid; gap: 13px; }
#gss-panel .v3-detail{ display: grid; gap: 12px; padding: 14px 15px; border-radius: 10px; background: #f8fafb; border: 1px solid var(--line-soft); }
#gss-panel .v3-kicker{ display: flex; align-items: center; gap: 8px; }
#gss-panel .v3-kicker span{ width: 20px; height: 1px; background: var(--accent-line); }

#gss-panel .v3-cta{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#gss-panel .v3-next{
  display: none; align-items: center; gap: 10px; justify-self: end; min-height: 42px;
  padding: 0 15px; border-radius: 9px; border: 1px solid var(--line); font-size: 13.2px; font-weight: 570; color: var(--ink-2);
}
#gss-panel .v3-next b{ font-weight: 640; color: var(--ink); }
#gss-panel .v3-next i{ width: 6px; height: 6px; border-right: 1.4px solid var(--mute); border-bottom: 1.4px solid var(--mute); transform: rotate(-45deg); }
#gss-panel .v3-next:hover{ background: #f4f6f8; }

@container gssb (min-width: 560px) {
  #gss-panel .v3-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  #gss-panel .v3-foot{ grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px; }
  #gss-panel .v3-detail{ grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
}

/* ---------- the playbook below the navigator is FIXED ----------
   v03 browsed the playbooks as a horizontal snap rail under 1040px of window.
   Inside the panel that put a second, sideways scroll underneath the panel's
   own, and it is the wrong gesture for a drawer. Here the deck is a stack at
   every width, phone included: one playbook, chosen from the navigator, and
   nothing below the tabs moves sideways. */
#gss-panel .v3-deck{ display: block; overflow: visible; scroll-snap-type: none; }

/* ---------- the navigator freezes while the playbook scrolls ----------
   A playbook can be taller than the panel — much taller on the phone sheet
   — and the tabs were the first thing to leave the screen. They stay.

   .v3 has to stop being a grid for that: a sticky GRID item is pinned
   inside its own grid area, which is exactly the row it already fills, so
   it cannot move. A sticky FLEX item is constrained by the flex container's
   content box instead — the whole of .v3 — so it travels the full block.

   The background is the panel's own ground (.gfc is #FBFCFE), because the
   tabs are transparent apart from the selected one and the card would
   otherwise be seen through the gaps between them. */
#gss-panel .v3{ display: flex; flex-direction: column; }
#gss-panel .v3-nav-h{ flex: none; }
#gss-panel .v3-nav{
  flex: none;
  position: sticky; top: 0; z-index: 3;
  background: #FBFCFE;
  /* the tab that is open still meets the deck below it; while the deck is
     scrolling underneath, that 1px overlap lands on the card instead */
  scroll-snap-type: none;   /* spec.js scrolls the chosen tab to a measured
                               position; a proximity snap pulled that to the
                               nearest tab start and left the tab it had just
                               revealed 13px past the edge */
}

/* Chrome pins a sticky child below the scroll container's own top padding,
   and .gfc-body carries 24-36px of it (20px on the phone sheet). That left a
   band above the frozen tabs with the card visibly sliding past in it. The
   padding moves off the scroller and onto the content: identical spacing at
   rest, and the scrollport now starts where the panel header ends, so there
   is nothing above the tabs to see. The two values mirror gads-fit-c5/
   chooser.css §4 and §8 — if the panel's padding changes there, change it
   here too. */
#gss-panel .gfc-body{ padding-top: 0; }

/* the edge only exists once the card is passing underneath; at rest the open
   tab is joined to the deck and a line there would cut that join */
#gss-panel .v3.is-stuck .v3-nav{
  box-shadow: 0 10px 18px -14px rgba(15, 27, 61, .55);
}
#gss-panel .v3-card{ display: none; border-right: 0; }
#gss-panel .v3-card.is-on{ display: grid; }

/* ---------- above a phone: v03's visual-led spread ----------
   Brought down from 1040px of window to 620px of panel. Two reasons, both
   from looking at it: the panel is never wider than about 950px, so at v03's
   own threshold the spread would never once have appeared; and a single
   column is worse here than the spread, because it hands the picture the
   full width, every model then lays itself out in a row, and the row sits
   marooned in the middle of a frame that is still 336px tall. */
@container gssb (min-width: 620px){
  #gss-panel .v3-card.is-on{
    grid-template-columns: minmax(0, 1fr) minmax(300px, 1.04fr);
    grid-template-areas: "vis head" "vis plays" "foot foot";
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(22px, 3vw, 40px); row-gap: clamp(14px, 2vw, 20px);
  }
  /* The picture takes the height the words take, rather than a fixed 336.
     Its width is capped: every model has a stacked layout under about 390px
     of frame and a row layout above it, and the row layout is the one that
     leaves the frame hollow. Kept portrait, a model fills the whole picture
     at any panel width, and the width the cap gives back goes to the words. */
  #gss-panel .v3-vis{ display: grid; justify-items: center; align-self: stretch; min-height: 0; }
  #gss-panel .sx-frame{
    width: 100%; max-width: 380px;
    height: 100%; min-height: var(--vzh); max-height: 560px;
  }
  #gss-panel .v3-plays{ align-content: start; }
  #gss-panel .v3-next{ display: inline-flex; }
  #gss-panel .v3-foot{ margin-top: 4px; }

  /* the lab's type was sized for a 1220px section; in a 620-950px panel the
     same clamps all sit at their maxima and read a step small. */
  #gss-panel .sx-deck{ font-size: 16.5px; }
  #gss-panel .sx-name{ font-size: clamp(23px, 3.3cqi, 31px); }
  #gss-panel .sx-problem{ font-size: 16.2px; line-height: 1.42; }
  #gss-panel .sx-explain{ font-size: 15px; }
  #gss-panel .sx-acts{ gap: 9px; }
  #gss-panel .sx-acts li{ font-size: 14.8px; padding-left: 26px; }
  #gss-panel .sx-out dd{ font-size: 14.4px; }
}

@container gssb (min-width: 900px){
  /* the picture is already at its cap, so the wide panel's extra width is
     the words'. v03 gives the picture the larger share here; at 380px of
     frame that would only have added a gutter beside it. */
  #gss-panel .v3-card.is-on{ grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr); }
}

/* ---------- the models fill their frame ----------
   Every model root centres its rows in .vz-body. That was right in the lab,
   where the frame was always about as tall as the model. Here the frame is
   as tall as the words beside it, so a centred model floats in the middle
   with dead space above and below. The rows stretch instead; the fixed-height
   connectors between them keep their own size, so only the cards grow. */
#gss-panel .vz-body{ align-content: stretch; }
#gss-panel .vz-body > *{ align-content: stretch; }

/* Three of the eight need more than that. 05 and 06 are caption / body /
   footnote, and stretching all three tracks opened a gap under the caption:
   only the body grows, and its rows sit in the middle of it. 07 is two boxes
   of terms whose lists sat at the top, so the box grew empty underneath: the
   caption stays put and the terms centre in what is left. Centring, not
   space-between: spread across a 460px frame, four rows read as four
   unrelated things. */
#gss-panel .ml,
#gss-panel .pb{ grid-template-rows: auto minmax(0, 1fr) auto; }
#gss-panel .ml-rows,
#gss-panel .pb-rows{ align-content: center; }

#gss-panel .st-col{ display: grid; grid-template-rows: auto minmax(0, 1fr); }
#gss-panel .st-col ul{ align-content: center; }

/* ---------- 2 · the panel's own two additions ----------
   Everything else about the shell is inherited from the .gfc classes.   */

/* the width that drives the ported layout. A wrapper, not .gfc-body
   itself: the body is a stretched flex item, and container-type on one of
   those is where a 0px-wide container comes from. */
#gss-panel .gss-fit{ container-type: inline-size; container-name: gssb; }

/* the ported section becomes panel content: the panel already pads and
   scrolls, and the page's own light theme replaces the lab's palette so the
   panel matches the page it opens over. */
#gss-panel .sx{
  /* the top padding is the panel body's, moved here — see the sticky
     navigator above. Set in the same declaration as the rest of the
     padding, or that `0` would win by coming later. */
  padding: clamp(24px, 2.8vw, 36px) 0 0; background: transparent;
  font-family: var(--sans);

  --ink:   #0B0D12;
  --ink-2: #3A414C;
  --mute:  #767E8B;
  --line:      #E3E6EB;
  --line-soft: #EFF1F4;
  --paper:  #FFFFFF;
  --ground: #F6F8FC;
  --accent:      #1A73E8;
  --accent-ink:  #1663CE;
  --accent-soft: #EAF1FE;
  --accent-line: #CFE0FD;
  --good: #188038;
  --warn: #E37400;
  --r: 16px;
}
/* Written by value, not as var(--ink) etc: a custom property that refers to
   itself on the element that defines it is a self-reference, and resolves to
   the guaranteed-invalid value. These are the ds.css tokens, verbatim. */

/* the deck line sits where the section's title used to; the title and
   eyebrow moved up into the panel's fixed header, the same place the
   campaign chooser keeps its own. */
#gss-panel .sx-deck{ margin-top: 0; }
#gss-panel .v3{ margin-top: clamp(18px, 2.4vw, 26px); }

/* The foot puts two fact columns beside two buttons. Below 900px of panel
   that leaves each fact about 190px, so up to there the facts stack and take
   the whole of their side of the row. */
@container gssb (min-width: 620px) and (max-width: 899px){
  #gss-panel .v3-facts{ grid-template-columns: minmax(0, 1fr); gap: 13px; }
}

/* The card fills the panel, rather than sitting in the top two thirds of it
   with the rest of the drawer empty. .gfc-body is a flex item with a definite
   height, so a min-height:100% chain reaches the card. Phones keep content
   height: the sheet is only 75dvh and there is nothing to fill. */
/* .gss-fit is itself the query container, so it cannot be reached by a
   @container rule of its own name — the top of the chain is a media query.
   The drawer/sheet split is a viewport question anyway: 860px is where
   chooser.css turns the panel into a bottom sheet. */
@media (min-width: 861px){
  #gss-panel .gfc-body > .gss-fit{ min-height: 100%; display: flex; flex-direction: column; }
}
@container gssb (min-width: 620px){
  #gss-panel .gss-fit > .sx{ flex: 1; display: flex; flex-direction: column; }
  #gss-panel .sx > .sx-in{
    flex: 1; display: flex; flex-direction: column; min-height: 0;
    /* .sx-in carries the lab's `margin: 0 auto`. An auto margin on the cross
       axis stops a flex item stretching, and the item then sizes to its own
       max-content — which here is the navigator's full 1102px of tabs, so the
       card ran off the right of the panel. The centring is a no-op at these
       widths anyway: --maxw is 1220 and the panel is never past 950. */
    width: 100%; margin-inline: 0;
  }
  #gss-panel .sx-in > .v3{ flex: 1; }
  #gss-panel .v3-deck{ flex: 1; min-height: 0; }
  #gss-panel .v3-card.is-on{ min-height: 100%; }
}