/* ============================================================================
   NISE supplementary site — GCVSS interactive 3D block (custom layer).
   Loaded LAST, AFTER nise.css, so it inherits the design tokens defined there
   (--ink, --rule, --rule-2, --surface, --radius-pill, --font-body, --shadow-*,
   --ease, --link …). No external assets, no network, no dependencies.
   Offline-safe; degrades gracefully when WebGL is unavailable or the user
   prefers reduced motion (a static best-view poster is shown instead).

   ONE coherent block ("Seeing the supervision signal") with TWO coordinated
   panels under one shared caption:
     A) CLOUD ORBIT — a three.js viewer of the co-registered primary + Kinect
        clouds, driven by a 3-STAGE stepper: (1) the primary cloud in its real
        per-point sensor RGB, (2) the same cloud recoloured to camera-of-origin
        tint (one weak view), (3) the Kinect cloud + frustum fused in (two views
        lock the geometry). Orbit / zoom; clickable stage stepper + play/replay.
     B) WARP REVEAL — a drag-divider comparing "Kinect warped into D455" against
        "D455 actual", with an agreement-highlight overlay toggle.

   The block sits inside §Method directly below the two contribution cards, as
   the visual evidence for the GCVSS card. It reuses the page's card chrome
   (white surface, ink hairlines, rounded 12-14px corners, soft shadow) and the
   same camera-id colours the live viewer uses:
     D455 (side) = rgb(77, 217, 102)    Kinect (side-top) = rgb(242, 77, 77)
   ========================================================================= */

/* ---------------------------------------------------------- block tokens */
.gcvss-block {
  /* camera-of-origin swatches (mirror the ID_COLOR values in static/js/gcvss3d.js) */
  --gc-d455: rgb(77, 217, 102);
  --gc-kinect: rgb(242, 77, 77);
  --gc-d405: var(--gc-d455);  /* D405 wrist = primary view (green), matches the cloud's d405 points */
  /* agreement overlay swatch (mirrors warp_agreement.png green=agree) */
  --gc-agree: rgb(58, 200, 122);

  --gc-ink:    var(--ink, #0a0a0a);
  --gc-soft:   var(--ink-soft, #4a4a4a);
  --gc-muted:  var(--muted, #767676);
  --gc-rule:   var(--rule, #ededed);
  --gc-rule-2: var(--rule-2, #e3e3e3);
  --gc-surface:var(--surface, #fafafa);
  --gc-font:   var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  --gc-ease:   var(--ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  --gc-radius: var(--radius-pill, 290486px);

  margin: 2rem auto 0;
  max-width: var(--maxw, 1000px);
}

/* small centered header that keeps the §Method section rhythm without adding a
   competing <h2> (the section already owns one). Reads as a labelled sub-block. */
.gcvss-block__head {
  text-align: center;
  margin: 0 auto 1.2rem;
  max-width: var(--maxw-narrow, 820px);
}
.gcvss-block__eyebrow {
  font-family: var(--gc-font);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gc-muted);
  display: block;
  margin-bottom: 0.5rem;
}
.gcvss-block__title {
  font-family: var(--gc-font);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.006em;
  color: var(--gc-ink);
  margin: 0 0 0.5rem 0;
}
.gcvss-block__intro {
  font-family: var(--gc-font);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--gc-soft);
  margin: 0 auto;
  max-width: var(--maxw-narrow, 820px);
}

/* two coordinated panels side by side; stack on narrow viewports */
.gcvss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: start;
}
.gcvss-panel { margin: 0; min-width: 0; }   /* min-width:0 lets the canvas shrink */

/* a small label above each panel media (panel A / panel B intent) */
.gcvss-panel__label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.55rem 0;
  font-family: var(--gc-font);
}
.gcvss-panel__kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pill, #363636);
  border-radius: var(--gc-radius);
  padding: 0.16rem 0.55rem;
  line-height: 1.3;
  white-space: nowrap;
}
.gcvss-panel__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gc-ink);
  letter-spacing: -0.003em;
}

/* shared media frame (matches .nise-figure__frame chrome) */
.gcvss-stage {
  position: relative;
  background: #fff;
  border: 1px solid var(--gc-rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(10,10,10,0.04), 0 10px 30px -22px rgba(10,10,10,0.35));
}

/* =========================================================== A. CLOUD ORBIT */
.gcvss-cloud {
  position: relative;
  width: 100%;
  /* reserve height before WebGL init -> zero layout shift (matches poster AR) */
  aspect-ratio: 1 / 1;
  background: var(--gc-surface);
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  /* let vertical page-scroll pass through; the canvas claims its own gestures */
  touch-action: pan-y;
  outline: none;
}
.gcvss-cloud.is-grabbing { cursor: grabbing; }
.gcvss-cloud:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(31, 143, 222, 0.45);
}
/* three.js writes a <canvas> here; it must fill the box and never overflow */
.gcvss-cloud > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;   /* the live canvas owns pointer gestures (orbit/zoom) */
}

/* poster image shown until WebGL inits — and permanently on fallback */
.gcvss-cloud__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  z-index: 0;
  transition: opacity 320ms var(--gc-ease);
}
/* once the live scene is ready, fade the poster out (kept for instant fallback) */
.gcvss-cloud.is-live .gcvss-cloud__poster { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .gcvss-cloud__poster { transition: none; }
}

/* legend — camera-of-origin swatches, top-left over the media. Sits a touch
   lower so it clears the verdict chip that now lives at the top. */
.gcvss-legend {
  position: absolute;
  top: 46px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gc-rule-2);
  border-radius: 8px;
  pointer-events: none;
}
.gcvss-legend__head {
  font-family: var(--gc-font);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-muted);
}
.gcvss-legend__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--gc-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gc-ink);
}
.gcvss-legend__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08);
}
.gcvss-legend__dot--d455 { background: var(--gc-d455); }
.gcvss-legend__dot--kinect { background: var(--gc-kinect); }
.gcvss-legend__dot--d405 { background: var(--gc-d405); }  /* legacy alias */
/* during STAGE 1 (real per-point sensor RGB) the camera-of-origin swatches no
   longer describe the points; dim the legend so it doesn't mislead. The cloud
   root carries .is-stage-rgb while the primary cloud shows its real RGB. */
.gcvss-cloud.is-stage-rgb .gcvss-legend { opacity: 0.5; }

.gcvss-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--gc-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gc-ink);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gc-rule-2);
  border-radius: 8px;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms var(--gc-ease), color 150ms var(--gc-ease),
              border-color 150ms var(--gc-ease), box-shadow 150ms var(--gc-ease);
}
.gcvss-btn:hover {
  background: var(--pill, #363636);
  border-color: var(--pill, #363636);
  color: #fff;
}
.gcvss-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 143, 222, 0.32);
  border-color: var(--link, #1f8fde);
}
.gcvss-btn[aria-pressed="true"] {
  background: var(--pill, #363636);
  border-color: var(--pill, #363636);
  color: #fff;
}
.gcvss-btn .gcvss-btn__ico {
  font-size: 0.92em;
  line-height: 1;
}

/* a quiet one-time hint ("drag to orbit") bottom-left over the media */
.gcvss-cloud__hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  font-family: var(--gc-font);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gc-ink);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gc-rule-2);
  border-radius: var(--gc-radius);
  padding: 0.2rem 0.55rem;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 220ms var(--gc-ease);
}
.gcvss-cloud.is-grabbing .gcvss-cloud__hint { opacity: 0; }
/* the hint only makes sense once the scene is live and interactive */
.gcvss-cloud:not(.is-live) .gcvss-cloud__hint { display: none; }

/* a tiny "drag to orbit" should sit clear of the legend if both are bottom — it
   isn't (legend is top), but keep the hint hidden on very short stages anyway */
@media (max-width: 420px) {
  .gcvss-cloud__hint { display: none; }
}

/* ----------------------------------------- verdict chip (top-center over media)
   A live status pill driven by the auto-animation: "D455 alone · weak" ->
   "Kinect locking in… · locking" -> "D455 + Kinect · geometry locked". Sits
   center-top so it never collides with the scene toggle (top-right) or legend
   (left). Hidden on the static-fallback (no animation to narrate). */
.gcvss-chip {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.26rem 0.6rem;
  font-family: var(--gc-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gc-ink);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gc-rule-2);
  border-radius: var(--gc-radius);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 20px);
}
.gcvss-cloud.is-static-fallback .gcvss-chip { display: none; }
.gcvss-chip__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08);
  background: var(--gc-d455);
}
.gcvss-chip__dot--d455 { background: var(--gc-d455); }
.gcvss-chip__dot--d405 { background: var(--gc-d405); }
.gcvss-chip__dot--kinect { background: var(--gc-kinect); }
/* "both" reads as a split green/coral dot */
.gcvss-chip__dot--both {
  background: linear-gradient(90deg, var(--gc-d455) 0 50%, var(--gc-kinect) 50% 100%);
}
.gcvss-verdict {
  font-family: var(--gc-font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: var(--gc-radius);
  white-space: nowrap;
}
.gcvss-verdict--weak {
  color: #b22; background: rgba(242, 77, 77, 0.14); border: 1px solid rgba(242, 77, 77, 0.32);
}
.gcvss-verdict--locking {
  color: #8a5a1f; background: rgba(196, 98, 45, 0.14); border: 1px solid rgba(196, 98, 45, 0.34);
}
.gcvss-verdict--locked {
  color: #1f7a52; background: rgba(58, 200, 122, 0.16); border: 1px solid rgba(58, 200, 122, 0.40);
}

/* ----------------------------------------- scene toggle (top-right over media)
   A labelled pill that swaps petri<->gear. Reuses .gcvss-btn chrome; reads as
   "switch to <other scene>". The current scene name shows in the legend head /
   aria-label. */
.gcvss-cloud__scene {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
}
.gcvss-cloud__scene .gcvss-btn__ico { font-size: 0.96em; }

/* ----------------------------------------- animation control bar (bottom-right)
   Play/Pause + Replay, mirroring the warp panel's control placement. */
.gcvss-cloud__anim {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.gcvss-btn[disabled],
.gcvss-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----------------------------------------- stage stepper (below the stage)
   THREE clickable stage pills narrating the 3-stage animation (mirrors the GM3A
   step strip): the active stage lights up, completed stages dim. Each pill is a
   role=button the user can click / Enter / Space to jump to that stage (which
   pauses auto-play). Lives OUTSIDE the media box, under the stage, so it never
   occludes the 3D. Stays visible (as a static list) on the static-fallback. */
.gcvss-tl {
  display: flex;
  align-items: stretch;
  margin-top: 0.55rem;
  border: 1px solid var(--gc-rule);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(10,10,10,0.04));
}
.gcvss-tl[hidden] { display: none; }
.gcvss-tl__step {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.55rem;
  font-family: var(--gc-font);
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--gc-muted);
  text-align: center;
  cursor: pointer;
  background: #fff;
  border-right: 1px solid var(--gc-rule);
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms var(--gc-ease), background 200ms var(--gc-ease);
}
.gcvss-tl__step:last-child { border-right: 0; }
.gcvss-tl__step:hover { background: var(--surface-2, #f5f5f5); color: var(--gc-soft); }
.gcvss-tl__step:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(196, 98, 45, 0.5);
}
.gcvss-tl__step .gcvss-tl__n {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gc-muted);
  margin-bottom: 0.2rem;
}
.gcvss-tl__step.is-active {
  color: var(--gc-ink);
  background: var(--gc-surface);
}
.gcvss-tl__step.is-active .gcvss-tl__n { color: var(--accent, #C4622D); }
.gcvss-tl__step.is-done { color: var(--gc-soft); }
/* on the static fallback the pills are inert (poster shows the fused view) */
.gcvss-cloud.is-static-fallback ~ .gcvss-tl .gcvss-tl__step,
.gcvss-panel--cloud .gcvss-cloud.is-static-fallback ~ * .gcvss-tl .gcvss-tl__step {
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .gcvss-tl__step { transition: none; }
}
@media (max-width: 520px) {
  .gcvss-tl__step { font-size: 0.6rem; padding: 0.45rem 0.35rem; }
  .gcvss-tl__step .gcvss-tl__n { font-size: 0.54rem; }
}

/* =========================================================== B. WARP REVEAL */
/* The warp panel reuses the comparison-slider mechanic but with two labelled
   stills (warped vs actual) and an agreement overlay that can be toggled on.
   The divider position is --gwrev (0..100) = percent revealed from the RIGHT;
   the OVER (warped) layer is clipped with inset(0 var(--gwrev)% 0 0). */
.gcvss-warp {
  position: relative;
  width: 100%;
  /* warp stills are 768x768 (square, the D455 target frame); reserve that box */
  aspect-ratio: 1 / 1;
  background: #0d0d0f;   /* warp panels have a dark valid-region backdrop */
  overflow: hidden;
  cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  outline: none;
}
.gcvss-warp:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(31, 143, 222, 0.45);
}
.gcvss-warp__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  pointer-events: none;   /* drags belong to the root, not the media */
  background: #0d0d0f;
}
/* UNDER = D455 actual (the target); OVER = Kinect warped (clipped by the divider) */
.gcvss-warp__media--actual { z-index: 1; }
.gcvss-warp__media--warped {
  z-index: 2;
  clip-path: inset(0 calc(var(--gwrev, 50) * 1%) 0 0);
  -webkit-clip-path: inset(0 calc(var(--gwrev, 50) * 1%) 0 0);
}
/* agreement overlay sits ABOVE both; faded in when toggled on */
.gcvss-warp__media--agree {
  z-index: 3;
  opacity: 0;
  transition: opacity 220ms var(--gc-ease);
}
.gcvss-warp.is-agree .gcvss-warp__media--agree { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gcvss-warp__media--agree { transition: none; }
}

/* corner labels (mirror the §3 slider tags) */
.gcvss-warp__tag {
  position: absolute;
  top: 10px;
  z-index: 5;
  font-family: var(--gc-font);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gc-ink);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gc-rule-2);
  border-radius: 6px;
  padding: 0.22rem 0.5rem;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(50% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcvss-warp__tag--warped { left: 10px; }
.gcvss-warp__tag--actual { right: 10px; }
/* when the agreement layer is on, the seam labels make less sense -> dim them */
.gcvss-warp.is-agree .gcvss-warp__tag--warped,
.gcvss-warp.is-agree .gcvss-warp__tag--actual { opacity: 0.35; }

/* divider + handle (mirror slider.css; ink-on-white hairline knob) */
.gcvss-warp__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  left: calc((100 - var(--gwrev, 50)) * 1%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.28);
  pointer-events: none;
}
/* the divider is irrelevant in agreement mode (single composited overlay) */
.gcvss-warp.is-agree .gcvss-warp__divider { opacity: 0; }
.gcvss-warp__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: var(--gc-radius);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--gc-rule-2);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.14), 0 8px 22px -10px rgba(10, 10, 10, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--gc-ink);
  transition: transform 150ms var(--gc-ease), box-shadow 150ms var(--gc-ease);
}
.gcvss-warp:hover .gcvss-warp__handle,
.gcvss-warp:focus-visible .gcvss-warp__handle,
.gcvss-warp.is-dragging .gcvss-warp__handle {
  transform: translate(-50%, -50%) scale(1.06);
}
.gcvss-warp__chev {
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.gcvss-warp__chev--l { border-right: 6px solid currentColor; }
.gcvss-warp__chev--r { border-left: 6px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
  .gcvss-warp__handle { transition: none; }
  .gcvss-warp:hover .gcvss-warp__handle,
  .gcvss-warp:focus-visible .gcvss-warp__handle,
  .gcvss-warp.is-dragging .gcvss-warp__handle { transform: translate(-50%, -50%); }
}

/* agreement toggle — bottom-right over the warp media */
.gcvss-warp__controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 7;
  display: flex;
  gap: 0.4rem;
}

/* quiet drag hint, bottom-left */
.gcvss-warp__hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  font-family: var(--gc-font);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gc-ink);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--gc-rule-2);
  border-radius: var(--gc-radius);
  padding: 0.2rem 0.55rem;
  pointer-events: none;
  opacity: 0.92;
  transition: opacity 220ms var(--gc-ease);
}
.gcvss-warp.is-dragging .gcvss-warp__hint,
.gcvss-warp.is-agree .gcvss-warp__hint { opacity: 0; }
@media (max-width: 420px) { .gcvss-warp__hint { display: none; } }

/* visually-hidden live region (shared a11y helper for both panels) */
.gcvss-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================== shared caption */
.gcvss-cap {
  margin: 1.1rem auto 0;
  font-family: var(--gc-font);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gc-soft);
  max-width: var(--maxw-narrow, 820px);
  text-align: center;
}
.gcvss-cap b { color: var(--gc-ink); font-weight: 700; font-style: italic; }
.gcvss-cap i { font-style: italic; }

/* =========================================================== responsive */
@media (max-width: 900px) {
  .gcvss-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  /* on a single column, cap the warp panel so the tall 9/10 still doesn't
     dominate the fold; the cloud keeps its 16/10 */
  .gcvss-panel--warp { max-width: 460px; margin-inline: auto; width: 100%; }
}
@media (max-width: 680px) {
  .gcvss-block__intro { text-align: left; }
  .gcvss-cap { text-align: center; }
}