/* ============================================================
   onboarding.css · Halcyon candidate-branch demo · onboarding +
   training layer styling.

   Two scopes, one file:
     (A) get-started page layout — the learning home (.gs-* classes used
         by get-started.html): hero, three-column learning deck
         (checklist / lessons / replay), try-it, teach-back, footer.
     (B) cross-page onboarding affordances (.onb-* classes injected by
         onboarding.js on any page): the "How this works" topbar entry,
         the first-run cross-page start card, empty-state coaching, the
         lessons "Show all" toggle.

   Everything is token-driven (halcyon.css owns :root), so light + dark
   themes and the cyan/gold contract come for free. The spotlight tour
   (.ti-dlt-*) and tooltip (.ti-tip) styling live in halcyon.css /
   tooltips.css and are NEVER redefined here.

   Legibility contract: cyan (--accent) for links + active + navigation;
   gold (--gold) ONLY for the deliverable. Text always sits in its own
   panel, never over a busy image. No horizontal overflow at 1280px or
   375px (minmax(0,1fr) tracks, min-width:0 content cols, wrapped chip
   rows). All motion gated behind prefers-reduced-motion.
   ============================================================ */

/* ---- shared rhythm for the get-started sections ---- */
.gs-stage > section,
.gs-stage > .gs-hero,
.gs-stage > .gs-columns { margin-bottom: 22px; }
.gs-stage > section:last-of-type { margin-bottom: 0; }

.gs-col-head { margin-bottom: 8px; }
.gs-col-head h3 { margin: 4px 0 0; }
.gs-section-sub,
.gs-stage .small { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* ====================================================================
   (A) HERO — boundary stage + ask + packet, three legible columns
   ==================================================================== */
.gs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.gs-hero > * { min-width: 0; }
.gs-hero-side { display: grid; gap: 16px; min-width: 0; }

/* the boundary stage reuses .analysis-stage from halcyon.css; just give it
   a guaranteed min height so the proof map has room on the home */
.gs-boundary-stage { min-height: 320px; }

/* ====================================================================
   (A) WELCOME band (alt layout some builds use) — copy + 3 fact cards
   ==================================================================== */
.gs-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.gs-welcome > * { min-width: 0; }
.gs-eyebrow,
.gs-welcome-copy .gs-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
.gs-welcome-copy h2 { font-size: 26px; line-height: 1.18; margin: 0 0 10px; letter-spacing: -0.01em; }
.gs-lede { color: var(--text-dim); line-height: 1.6; margin: 0 0 16px; }
.gs-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.gs-facts { display: grid; gap: 12px; }
.gs-fact {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px;
  align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
}
.gs-fact-ico {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-pale); color: var(--accent-deep);
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-accent);
}
/* the text block is the SECOND (and last) grid child, so the card has exactly
   two columns: icon + text. The heading + body stack inside it, so body copy
   wraps normally instead of one word per line. */
.gs-fact-text { min-width: 0; display: grid; gap: 2px; }
.gs-fact strong,
.gs-fact-text strong { display: block; font-size: 14px; }
.gs-fact-text > span { color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }

/* ====================================================================
   (A) ACTIVATION — guided checklist + progress bar
   ==================================================================== */
.gs-checklist-head,
.gs-activate .gs-checklist-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.gs-checklist-head h3 { margin: 0 0 2px; }

.gs-progress {
  display: grid; gap: 6px; min-width: 180px;
}
.gs-progress-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--text-dim); text-align: right;
}
.gs-progress-track {
  display: block; height: 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  overflow: hidden; min-width: 160px;
}
.gs-progress-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-bright), var(--accent));
  border-radius: 999px;
  transition: width 320ms ease;
}

.gs-checklist {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  counter-reset: gscheck;
}
.gs-check-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color 160ms ease, background 160ms ease;
}
.gs-check-item:hover { border-color: var(--border-accent); }
.gs-check-item.is-done { background: var(--ok-wash); border-color: rgba(75, 191, 134, 0.4); }

.gs-check-box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 1.5px solid var(--subtle); background: transparent;
  color: var(--ok); font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: border-color 140ms ease, background 140ms ease;
}
.gs-check-box:hover { border-color: var(--accent); }
.gs-check-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-check-item.is-done .gs-check-box { border-color: var(--ok); background: var(--ok-wash); }

.gs-check-text { min-width: 0; }
.gs-check-text strong,
.gs-check-link strong { display: block; font-size: 14px; }
.gs-check-text span,
.gs-check-link span { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.gs-check-item.is-done .gs-check-text strong { text-decoration: line-through; text-decoration-color: var(--text-dimmer); }

/* checklist row may use an <a> wrapper (.gs-check-link) instead of split text */
.gs-check-link { min-width: 0; text-decoration: none; color: inherit; }
.gs-check-link:hover strong { color: var(--accent); }

.gs-check-item > a.gs-check-link:not(:has(strong)),
.gs-check-item > .gs-check-link.is-open {
  /* short "Open" jump link variant */
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--accent); white-space: nowrap;
}

/* ====================================================================
   (A) TEACHING ROW — share-wall explainer + ask + packet (welcome merge)
   ==================================================================== */
.gs-teach {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}
.gs-teach > * { min-width: 0; }
.gs-teach-side { display: grid; gap: 16px; min-width: 0; }

/* ---- the share-wall explainer (replaces the old node-graph hero that put
   the headline on top of the SVG and collided with its node labels). The
   headline sits in its OWN opaque .km-watermark-safe plane: the faint
   backdrop word renders behind it on a separate layer, so the text is always
   fully legible. Two plain columns name what can be shared vs what stays
   protected, then a single line names who decides. ---- */
.gs-sharewall {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-pale), transparent 58%),
    var(--surface);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.gs-sharewall-copy { max-width: 640px; min-width: 0; }
.gs-sharewall-copy h2 {
  margin: 6px 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.gs-sharewall-copy p {
  margin: 0;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 60ch;
}
.gs-sharewall-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.gs-sharewall-cols > * { min-width: 0; }
.gs-sharewall-col {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.gs-sharewall-col.is-share { border-top: 3px solid var(--accent); }
.gs-sharewall-col.is-protect { border-top: 3px solid var(--gold); }
.gs-sharewall-tag {
  display: inline-block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gs-sharewall-col.is-share .gs-sharewall-tag { color: var(--accent); }
.gs-sharewall-col.is-protect .gs-sharewall-tag { color: var(--gold); }
.gs-sharewall-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.gs-sharewall-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.gs-sharewall-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.gs-sharewall-col.is-share .gs-sharewall-list li::before { background: var(--accent); }
.gs-sharewall-col.is-protect .gs-sharewall-list li::before { background: var(--gold); }
.gs-sharewall-decide {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.gs-sharewall-decide strong { color: var(--text); }
@media (max-width: 560px) {
  .gs-sharewall-cols { grid-template-columns: 1fr; }
}
/* Light theme: the Lane-0 .km-on-watermark token is a fixed near-white that is
   built for the dark surface. On the light surface it would be illegible, so
   re-ground the sharewall headline + eyebrow to the theme's own text colors.
   The faint backdrop word also needs a darker ink so it stays a whisper, not a
   light-on-light ghost that fights the copy. */
:root[data-theme="light"] .gs-sharewall-copy.km-on-watermark,
:root[data-theme="light"] .gs-sharewall-copy h2.km-on-watermark,
:root[data-theme="light"] .gs-sharewall-copy .km-on-watermark {
  color: var(--text);
}
:root[data-theme="light"] .gs-sharewall-copy .gs-eyebrow.km-on-watermark {
  color: var(--accent);
}
:root[data-theme="light"] .gs-sharewall-copy.km-watermark-safe::before {
  color: rgba(21, 23, 28, 0.045);
}

/* ====================================================================
   (A) LEARNING COLUMNS — checklist / lessons / replay
   ==================================================================== */
.gs-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.gs-columns.gs-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gs-columns > * { min-width: 0; }

/* ---- lessons: native <details> cards ---- */
.gs-lessons { display: grid; gap: 10px; }
.gs-lesson {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
}
.gs-lesson > summary {
  list-style: none; cursor: pointer; padding: 12px 14px;
  font-weight: 600; font-size: 14px; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gs-lesson > summary::-webkit-details-marker { display: none; }
.gs-lesson > summary::after {
  content: "+"; font-family: var(--mono); color: var(--accent);
  font-size: 16px; line-height: 1; flex: none;
}
.gs-lesson[open] > summary::after { content: "–"; } /* en-dash glyph for minus */
.gs-lesson > summary:hover { color: var(--accent); }
.gs-lesson > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gs-lesson-body { padding: 0 14px 14px; }
.gs-lesson-body p { margin: 0 0 8px; color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.gs-lesson-body p strong { color: var(--text); }
.gs-lesson-link,
.gs-inline-link {
  display: inline-block; font-size: 12.5px; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.gs-lesson-link:hover,
.gs-inline-link:hover { border-bottom-color: var(--accent); }

/* generic collapse used by role/glossary/faq blocks (.gs-collapse) */
.gs-collapse-stack { display: grid; gap: 8px; }
.gs-collapse {
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); overflow: hidden;
}
.gs-collapse > summary {
  list-style: none; cursor: pointer; padding: 11px 14px;
  font-weight: 600; font-size: 13.5px; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.gs-collapse > summary::-webkit-details-marker { display: none; }
.gs-collapse > summary::after { content: "+"; font-family: var(--mono); color: var(--accent); }
.gs-collapse[open] > summary::after { content: "–"; }
.gs-collapse > summary:hover { color: var(--accent); }
.gs-collapse > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gs-collapse-body { padding: 0 14px 13px; }
.gs-collapse-body p { margin: 0 0 6px; color: var(--text-dim); font-size: 13px; line-height: 1.55; }

/* ---- replay center ---- */
.gs-replay-list,
.gs-replay-grid { display: grid; gap: 10px; }
.gs-replay-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

.gs-replay-card {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px;
  align-items: center; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  color: var(--text);
  transition: border-color 160ms ease, transform 160ms ease;
}
.gs-replay-grid .gs-replay-card { grid-template-columns: 1fr; gap: 4px; }
.gs-replay-card:hover { border-color: var(--border-accent); }
.gs-replay-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-replay-card strong { font-size: 14px; }
.gs-replay-card span:not(.gs-replay-ico):not(.gs-replay-text) { color: var(--text-dim); font-size: 12.5px; line-height: 1.45; }
.gs-replay-text { min-width: 0; display: grid; gap: 2px; }
.gs-replay-text span { color: var(--text-dim); font-size: 12.5px; }
.gs-replay-ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-sm); background: var(--accent-pale);
  color: var(--accent-deep); border: 1px solid var(--border-accent);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.gs-replay-ico.gold,
.gs-replay-ico.is-result {
  background: var(--gold-pale); color: var(--gold-deep);
  border-color: var(--gold-soft);
}

/* ====================================================================
   (A) TRY-IT + TEACH-BACK + roles/reference rows
   ==================================================================== */
.gs-try-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-items: start;
}
.gs-try-row > * { min-width: 0; }
.gs-try-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.gs-reference {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; align-items: start;
}
.gs-reference > * { min-width: 0; }

.gs-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  border-top: 1px solid var(--border-soft); padding-top: 16px; margin-top: 6px;
}
.gs-foot-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px;
  color: var(--text-dimmer);
}

/* ====================================================================
   (B) CROSS-PAGE onboarding affordances (.onb-*)
   ==================================================================== */

/* "How this works" topbar entry */
.onb-how {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-pale); border: 1px solid var(--border-accent);
  color: var(--accent-deep); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease;
}
.onb-how:hover { background: var(--accent-soft); }
.onb-how:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.onb-how-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}

/* first-run cross-page start card. Bottom-LEFT, stacked ABOVE the "Show me
   how" tour launcher so the three bottom-corner affordances never overlap:
   the assistant dock sits bottom-right, the tour launcher bottom-left at the
   base, and this start card bottom-left above it. */
.onb-startcard {
  position: fixed; left: 18px; right: auto; bottom: 70px; z-index: 60;
  max-width: min(340px, calc(100vw - 36px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border-accent);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.onb-startcard.is-in { opacity: 1; transform: translateY(0); }
.onb-startcard-body { min-width: 0; }
.onb-startcard-body strong { display: block; font-size: 14px; }
.onb-startcard-line { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.onb-startcard-go {
  background: var(--accent); color: #0E1014; border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.onb-startcard-go:hover { filter: brightness(1.06); }
.onb-startcard-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.onb-startcard-close {
  background: transparent; border: none; color: var(--text-dimmer);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.onb-startcard-close:hover { color: var(--text); }
.onb-startcard-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* empty-state coaching */
.onb-empty {
  background: var(--surface-2); border: 1px dashed var(--border-accent);
  border-radius: var(--radius); padding: 18px 18px;
  display: grid; gap: 12px; text-align: center;
}
.onb-empty-title { margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; }
.onb-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }

/* lessons "Show all" toggle */
.onb-lessons-toggle {
  align-self: flex-start; margin-bottom: 8px;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--accent-deep); border-radius: 999px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.onb-lessons-toggle:hover { border-color: var(--border-accent); }
.onb-lessons-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ====================================================================
   RESPONSIVE — collapse to a single safe column well before 375px
   ==================================================================== */
@media (max-width: 1024px) {
  .gs-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-hero,
  .gs-teach,
  .gs-welcome { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .gs-columns,
  .gs-columns.gs-columns-2,
  .gs-try-row,
  .gs-reference { grid-template-columns: minmax(0, 1fr); }
  .gs-checklist-head { flex-direction: column; }
  .gs-progress { width: 100%; min-width: 0; }
  .gs-progress-label { text-align: left; }
  .onb-startcard {
    /* keep it raised above the bottom-left tour launcher at narrow widths so
       the two left-corner affordances never overlap; full width otherwise */
    left: 12px; right: 12px; bottom: 64px;
    max-width: none; grid-template-columns: minmax(0, 1fr) auto;
  }
  .onb-startcard-go { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 420px) {
  .gs-check-item { grid-template-columns: 24px minmax(0, 1fr); }
  .gs-check-item > .gs-check-link[href]:last-child { grid-column: 2; justify-self: start; }
  .gs-fact { grid-template-columns: 38px minmax(0, 1fr); }
}

/* ====================================================================
   REDUCED MOTION — everything instant
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gs-progress-fill,
  .gs-check-item,
  .gs-replay-card,
  .onb-how,
  .onb-startcard { transition: none; }
  .onb-startcard { opacity: 1; transform: none; }
}

/* ====================================================================
   START-HERE ON-RAMP + FIRST SMALL WINS (added 2026-06-15)
   Education-first layer for an AI-naive audience. Plain-language media
   brief, the three reasons a computer should do this work, the
   knowledge-transfer point, and three single-result small wins.
   Theme variables only, so light and dark both hold. Additive.
   ==================================================================== */

.gs-onramp {
  border: 1px solid var(--border-accent, var(--line));
  background: var(--paper);
  border-radius: var(--radius-lg, var(--radius));
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
  box-shadow: var(--shadow-sm, none);
}
.gs-onramp-head { max-width: 64ch; margin: 0 0 var(--space-5); }
.gs-onramp-head h2 { margin: 0 0 8px; font-family: var(--serif, var(--sans)); font-size: clamp(20px, 2.4vw, 28px); color: var(--text); font-weight: 600; }

.gs-onramp-media {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin: 0 0 var(--space-5);
}
.gs-onramp-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: var(--space-5);
  display: flex; flex-direction: column; gap: 10px;
}
.gs-onramp-card h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; }
.gs-onramp-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.gs-onramp-ico { color: var(--gold); font-size: 12px; }
.gs-onramp-player { width: 100%; border-radius: var(--radius-sm, 6px); background: var(--bg-warm); }
video.gs-onramp-player { aspect-ratio: 16 / 9; object-fit: cover; }
.gs-onramp-note { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin: 0; }
.gs-onramp-read summary {
  cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600;
  list-style: none; padding: 4px 0;
}
.gs-onramp-read summary::-webkit-details-marker { display: none; }
.gs-onramp-read summary::before { content: "+ "; color: var(--gold); }
.gs-onramp-read[open] summary::before { content: "− "; }
.gs-onramp-readbody p { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 8px 0 0; }

.gs-onramp-why {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin: 0 0 var(--space-4);
}
.gs-why-point {
  display: grid; gap: 4px; padding: var(--space-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gold-pale);
}
.gs-why-num {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--gold); line-height: 1;
}
.gs-why-point strong { color: var(--text); font-size: 14px; }
.gs-why-point span:last-child { color: var(--text-dim); font-size: 13px; line-height: 1.55; }

.gs-onramp-agnostic {
  margin: 0; padding: var(--space-4);
  border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: var(--radius-sm, 6px);
  color: var(--text-dim); font-size: 13px; line-height: 1.6;
}
.gs-onramp-agnostic strong { color: var(--text); }

.gs-smallwins {
  margin: 0 0 var(--space-6); padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg, var(--radius));
  background: var(--paper);
}
.gs-smallwins-head { margin: 0 0 var(--space-4); }
.gs-smallwins-head h3 { margin: 0 0 6px; color: var(--text); font-size: clamp(17px, 2vw, 22px); font-weight: 600; }
.gs-smallwins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.gs-win {
  display: grid; gap: 6px; padding: var(--space-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gs-win:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-gold, var(--shadow-sm, none)); }
.gs-win-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
}
.gs-win strong { color: var(--text); font-size: 16px; }
.gs-win-result { color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.gs-win-go { color: var(--gold-deep, var(--gold)); font-size: 13px; font-weight: 600; margin-top: 2px; }
.gs-win-go::after { content: " →"; }

@media (max-width: 760px) {
  .gs-onramp-media,
  .gs-onramp-why,
  .gs-smallwins-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-win { transition: none; }
}