/*
V7-HEADER
Title:     Viridians Commitment Centre — Page Styles
Filename:  viridians-commitment-center.css
Path:      /assets/css/viridians/viridians-commitment-center.css
Version:   v1.7.0
Issued:    2026-04-07
Updated:   2026-05-21
Author:    Buktika Webdesk (Binka)
Purpose:   Boardroom Clean styles for Viridians Page Four. No hero, no
           atmospheric image. Clean card surfaces, clinical decision layout.
           Identity bridge, trigger context strip, page header, social proof
           strip, single commitment gate, recommended badge, feature list,
           back navigation.
           Tone shift: CosmoGoth to Boardroom Clean per BKT 56080:2026 §6.2.
Changelog:
  v1.7.0  2026-05-22  Recasts Page Four as image-first solution chamber:
                      removes visible heading-first landing, adds bottom
                      inscription and logical trigger docket placement.
  v1.6.4  2026-05-22  Lowers the trigger docket with logical LTR/RTL edge
                      positioning and restores readable support-line scale.
  v1.6.3  2026-05-22  Moves the trigger context into a quiet post-gallery
                      docket and reduces the Page Four heading block.
  v1.6.2  2026-05-22  Reduces lightbox plate title scale so it reads as a
                      controlled inspection label rather than a headline.
  v1.6.1  2026-05-22  Gives Frame 1 equal first-station dignity, balances
                      Frame 5 as the destination threshold, and slows the
                      lightbox image/caption transition.
  v1.6.0  2026-05-22  Rebuilt Page Four shell as an underwater threshold
                      environment with staggered mounted plates and delayed
                      lightbox text reveal.
  v1.5.0  2026-05-22  Expanded frame surface toward viewport width, reduced
                      plate titles to quiet labels, and moved Page Five CTA
                      styling into the Route lightbox overlay.
  v1.4.0  2026-05-22  Plate overlays reduced to short titles only. Lightbox
                      caption now overlays the inspected image with governed
                      explanatory text.
  v1.3.0  2026-05-22  Added five-frame Trigger Solution Brief layout, restrained
                      inspection hover, Page Four lightbox caption treatment,
                      and evidence activation handoff.
  v1.2.0  2026-05-21  Rebuilt Page Four layout as a single commitment gate
                      with one primary Page Five exit. Added compact header
                      typography to prevent hero-scale collision.
  v1.1.0  2026-05-21  Added .vcc-identity-bridge, .vcc-proof-strip /
                      .vcc-proof-stats / .vcc-proof-stat styles. Added
                      .vcc-path-board and .vcc-badge-board. Path grid updated
                      from 2-column to 3-column.
Body class: page-viridians-commitment-center
License:   © Buktika, 2026. All rights reserved.
*/

/* 0) Header and dependency notes */

/*
  Depends on: /assets/css/global.css, /assets/css/themes.css.
  This file owns all base surface rules for .page-viridians-commitment-center.
*/

/* 1) Page variable binding */

.page-viridians-commitment-center {
  --page-bg:            var(--sdx-color-viridians-bg);
  --page-primary:       var(--sdx-color-purple-deep);
  --page-secondary:     var(--sdx-color-teal-deep);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-viridians-dark-base);
  --page-dark-surface:  var(--sdx-color-viridians-dark-surface);
  --vcc-pack-accent:    color-mix(in srgb, var(--page-accent) 18%, transparent);
  --vcc-pack-border:    color-mix(in srgb, var(--page-accent) 55%, var(--border) 45%);
}

/* 2) Base page surfaces */

.page-viridians-commitment-center {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(3,9,13,0.22), rgba(3,9,13,0.88)),
    url("/assets/images/viridians/viridians-underwater.webp") center top / cover fixed no-repeat,
    #071418;
  color: rgba(255,248,232,0.92);
}

.page-viridians-commitment-center main {
  min-height: calc(100vh - 4rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 14%, rgba(218,194,130,0.16), transparent 24rem),
    linear-gradient(180deg, rgba(2,7,10,0.2), rgba(2,7,10,0.58) 42%, rgba(2,7,10,0.78));
}

.page-viridians-commitment-center .container {
  width: min(100%, 100vw);
  max-width: none;
  padding: clamp(1rem, 2.2vw, 1.8rem) clamp(1rem, 2.2vw, 2rem) 5rem;
}

/* 3) Hero */

/* none — Boardroom Clean: no hero on Page 4 */

/* 4) Typography overrides */

/* none */

/* 5) Sections and alternation */

/* Identity bridge — emotional thread from Page 3 ceremony */

.page-viridians-commitment-center .vcc-identity-bridge {
  padding: 0.15rem 0 0.42rem;
  text-align: center;
}

.page-viridians-commitment-center .vcc-identity-bridge p {
  margin: 0;
  font-size: clamp(0.58rem, 0.68vw, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 198, 112, 0.84);
  opacity: 0.95;
}

/* Social proof strip — scale anchoring above the path grid */

.page-viridians-commitment-center .vcc-proof-strip {
  margin: 1rem auto 1.5rem;
  padding: 1rem 1.5rem;
  max-width: 58rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--page-depth) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--page-depth) 16%, var(--border) 84%);
}

.page-viridians-commitment-center .vcc-proof-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}

.page-viridians-commitment-center .vcc-proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0 2rem;
  text-align: center;
}

.page-viridians-commitment-center .vcc-proof-stat-number {
  font-family: var(--headline-font);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--page-depth);
  float: none;
}

.page-viridians-commitment-center .vcc-proof-stat-label {
  font-size: var(--small);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  float: none;
}

.page-viridians-commitment-center .vcc-proof-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--border);
  flex-shrink: 0;
  align-self: center;
}

/* Page header — clean, centred, declarative */

.page-viridians-commitment-center .vcc-header {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0.1rem 0 1.45rem;
  text-align: center;
  max-width: 46rem;
  margin: 0 auto;
  background: transparent !important;
  border-bottom: 0 !important;
  color: rgba(255,248,232,0.94) !important;
}

.page-viridians-commitment-center .vcc-header h1 {
  margin: 0 0 0.72rem;
  font-size: clamp(1.35rem, 2.45vw, 2.05rem);
  line-height: 1.06;
  text-align: center;
  overflow-wrap: anywhere;
  color: rgba(255,248,232,0.96);
  text-shadow: 0 8px 34px rgba(0,0,0,0.42);
}

.page-viridians-commitment-center .vcc-lead {
  font-size: clamp(0.86rem, 1.04vw, 0.98rem);
  color: rgba(229,238,232,0.76);
  line-height: 1.65;
  margin: 0 auto;
  max-width: 42rem;
  text-align: center;
}

/* Trigger context strip */

.page-viridians-commitment-center .vcc-trigger-context {
  grid-column: 2;
  align-self: end;
  justify-self: end;
  width: fit-content;
  max-width: min(52rem, calc(100vw - 4rem));
  padding: 0.48rem 0.78rem;
  border-radius: 999rem;
  background: rgba(4, 15, 18, 0.28);
  border: 1px solid rgba(232, 198, 112, 0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-block: 6rem 0;
  margin-inline: 0 clamp(1rem, 2vw, 2rem);
  text-align: start;
}

.page-viridians-commitment-center .vcc-trigger-context-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.52rem;
  font-size: 0.66rem;
}

.page-viridians-commitment-center .vcc-context-label {
  color: rgba(232, 198, 112, 0.66);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.page-viridians-commitment-center .vcc-context-title {
  font-weight: 700;
  color: rgba(255,248,232,0.82);
}

.page-viridians-commitment-center .vcc-context-divider {
  color: rgba(232, 198, 112, 0.26);
  user-select: none;
}

.page-viridians-commitment-center .vcc-context-corridor {
  color: rgba(229,238,232,0.62);
}

/* Five-frame Trigger Solution Brief */

.page-viridians-commitment-center .vcc-frame-brief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(1rem, 2vw, 2rem);
  width: min(calc(100vw - 2rem), 108rem);
  max-width: none;
  margin: 0 auto 2.4rem;
  padding: clamp(0.7rem, 1.4vw, 1.2rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

.page-viridians-commitment-center .vcc-frame-brief::before {
  content: none;
}

.page-viridians-commitment-center .vcc-frame-brief-header,
.page-viridians-commitment-center .vcc-frame-grid {
  position: relative;
  z-index: 1;
}

.page-viridians-commitment-center .vcc-frame-grid {
  grid-column: 1 / -1;
}

.page-viridians-commitment-center .vcc-chamber-title {
  grid-column: 1;
  align-self: end;
  justify-self: start;
  margin-block: 6rem 0;
  margin-inline: clamp(1rem, 2vw, 2rem) 0;
  font-family: var(--headline-font);
  font-size: clamp(0.88rem, 1.05vw, 1.08rem);
  font-weight: 740;
  line-height: 1.15;
  color: rgba(255,248,232,0.82);
  text-shadow: 0 8px 28px rgba(0,0,0,0.46);
}

.page-viridians-commitment-center .vcc-frame-brief-header {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
  gap: 1rem;
  align-items: end;
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.92);
}

.page-viridians-commitment-center .vcc-frame-brief-header h2 {
  margin: 0;
  color: #f7f0df;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.05;
}

.page-viridians-commitment-center .vcc-frame-brief-header p {
  margin: 0;
  color: rgba(247,240,223,0.78);
  font-size: 0.98rem;
  line-height: 1.55;
}

.page-viridians-commitment-center .vcc-frame-grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: center;
  min-height: clamp(19rem, 31vw, 30rem);
  gap: 0;
}

.page-viridians-commitment-center .vcc-frame-plate {
  min-width: 0;
}

.page-viridians-commitment-center .vcc-frame-plate:nth-child(1) {
  grid-column: 1 / span 5;
  transform: translate(0.3rem, 0.95rem) scale(0.96);
  z-index: 5;
}

.page-viridians-commitment-center .vcc-frame-plate:nth-child(2) {
  grid-column: 6 / span 4;
  transform: translate(0.15rem, -1.55rem) scale(0.86);
  z-index: 3;
}

.page-viridians-commitment-center .vcc-frame-plate:nth-child(3) {
  grid-column: 10 / span 5;
  transform: translate(0.1rem, 0.05rem) scale(0.9);
  z-index: 4;
}

.page-viridians-commitment-center .vcc-frame-plate:nth-child(4) {
  grid-column: 15 / span 4;
  transform: translate(-0.2rem, -1.7rem) scale(0.88);
  z-index: 3;
}

.page-viridians-commitment-center .vcc-frame-plate:nth-child(5) {
  grid-column: 19 / span 5;
  transform: translate(-0.1rem, 0.9rem) scale(0.94);
  z-index: 5;
}

.page-viridians-commitment-center .vcc-frame-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(224, 188, 105, 0.32);
  border-radius: 0.45rem;
  background: rgba(255,255,255,0.035);
  box-shadow:
    0 16px 32px rgba(0,0,0,0.32),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.page-viridians-commitment-center .vcc-frame-button:hover,
.page-viridians-commitment-center .vcc-frame-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(232, 198, 112, 0.56);
  filter: brightness(1.035);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.3),
    0 0 0 2px rgba(232, 198, 112, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

.page-viridians-commitment-center .vcc-frame-button:focus-visible {
  outline: 2px solid rgba(232, 198, 112, 0.7);
  outline-offset: 3px;
}

.page-viridians-commitment-center .vcc-frame-image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.page-viridians-commitment-center .vcc-frame-copy {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  display: block;
  padding: 0.23rem 0.44rem;
  color: #fff8e8;
  text-align: left;
  background: rgba(12, 9, 7, 0.48);
  border: 1px solid rgba(232, 198, 112, 0.13);
  border-radius: 0.35rem;
  opacity: 0.62;
  transition:
    opacity 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.page-viridians-commitment-center .vcc-frame-button:hover .vcc-frame-copy,
.page-viridians-commitment-center .vcc-frame-button:focus-visible .vcc-frame-copy {
  opacity: 0.95;
  background: rgba(12, 9, 7, 0.72);
  border-color: rgba(232, 198, 112, 0.32);
}

.page-viridians-commitment-center .vcc-frame-title {
  font-family: var(--text-font);
  font-size: clamp(0.54rem, 0.62vw, 0.68rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,248,232,0.76);
  text-shadow: 0 2px 10px rgba(0,0,0,0.62);
}

.page-viridians-commitment-center #media-lightbox.is-image .lightbox-media {
  position: relative;
}

.page-viridians-commitment-center #media-lightbox {
  background:
    linear-gradient(180deg, rgba(3,9,13,0.18), rgba(3,9,13,0.46)),
    url("/assets/images/viridians/viridians-underwater.webp") center top / cover fixed no-repeat;
}

.page-viridians-commitment-center #media-lightbox .lightbox-inner {
  margin: 0 6vw;
}

.page-viridians-commitment-center #media-lightbox.is-image .lightbox-image {
  padding: 0;
  background: transparent;
  border-radius: 0.55rem;
  border: 1px solid rgba(232, 198, 112, 0.25);
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
  max-width: min(72vw, 980px);
  max-height: calc(100vh - 6.5rem);
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 1500ms ease,
    transform 1600ms ease;
}

.page-viridians-commitment-center #media-lightbox.vcc-frame-transitioning .lightbox-image {
  opacity: 0.08;
  transform: scale(0.985);
}

.page-viridians-commitment-center #media-lightbox.is-image .lightbox-caption {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.4rem);
  right: clamp(0.75rem, 2vw, 1.4rem);
  bottom: clamp(0.75rem, 2vw, 1.4rem);
  white-space: pre-line;
  max-width: none;
  margin: 0;
  border-radius: 0.55rem;
  text-align: left;
  padding: clamp(0.8rem, 1.4vw, 1.15rem);
  color: rgba(255,248,232,0.94);
  background: rgba(12, 9, 7, 0.74);
  border-color: rgba(232, 198, 112, 0.26);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition:
    opacity 1050ms ease,
    transform 1050ms ease;
}

.page-viridians-commitment-center #media-lightbox.vcc-caption-visible .lightbox-caption {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.page-viridians-commitment-center #media-lightbox .lightbox-prev,
.page-viridians-commitment-center #media-lightbox .lightbox-next {
  width: 3rem;
  height: 3rem;
  color: rgba(255,248,232,0.92);
  background: rgba(4, 15, 18, 0.42);
  border-color: rgba(232, 198, 112, 0.28);
}

.page-viridians-commitment-center #media-lightbox .lightbox-prev svg,
.page-viridians-commitment-center #media-lightbox .lightbox-next svg {
  width: 1.55rem;
  height: 1.55rem;
  display: block;
}

.page-viridians-commitment-center .vcc-lightbox-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.8rem;
  padding: 0.72rem 1rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--page-primary) 88%, #2a1734 12%);
  color: #fff8e8;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28);
}

.page-viridians-commitment-center .vcc-lightbox-title,
.page-viridians-commitment-center .vcc-lightbox-body,
.page-viridians-commitment-center .vcc-lightbox-scope {
  display: block;
}

.page-viridians-commitment-center .vcc-lightbox-title {
  margin-bottom: 0.38rem;
  font-family: var(--headline-font);
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 760;
  line-height: 1.12;
  color: rgba(255,248,232,0.98);
}

.page-viridians-commitment-center .vcc-lightbox-body {
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,248,232,0.88);
}

.page-viridians-commitment-center .vcc-lightbox-scope {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232,198,112,0.72);
}

.page-viridians-commitment-center .vcc-lightbox-cta:hover,
.page-viridians-commitment-center .vcc-lightbox-cta:focus-visible {
  background: color-mix(in srgb, var(--page-primary) 78%, #4b285f 22%);
}

/* Compliance notice */

.page-viridians-commitment-center .vcc-compliance-notice {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--page-bg) 65%, var(--card));
}

.page-viridians-commitment-center .vcc-compliance-notice h3 {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-viridians-commitment-center .vcc-compliance-notice p {
  margin: 0;
  font-size: var(--small);
  color: var(--muted);
  line-height: 1.6;
}

/* Path selection section */

.page-viridians-commitment-center .vcc-path-selection {
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.page-viridians-commitment-center .vcc-path-selection > h2 {
  margin: 0 0 0.75rem;
  text-align: center;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

.page-viridians-commitment-center .vcc-path-intro {
  max-width: 42rem;
  margin: 0 auto 1.25rem;
  text-align: center;
  color: var(--muted);
  line-height: 1.6;
}

/* 6) Cards and tiles */

/* Single commitment gate */

.page-viridians-commitment-center .vcc-commitment-gate {
  background: var(--card);
  border: 1.5px solid var(--vcc-pack-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  background: color-mix(in srgb, var(--page-accent) 3%, var(--card));
}

.page-viridians-commitment-center .vcc-commitment-gate--selected {
  border-color: var(--page-accent);
  box-shadow: var(--card-shadow),
    0 0 0 0.2rem color-mix(in srgb, var(--page-accent) 18%, transparent);
}

.page-viridians-commitment-center .vcc-card-inner {
  padding: 1.6rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: 1.25rem;
  align-content: start;
}

.page-viridians-commitment-center .vcc-badge-recommended {
  grid-column: 1 / -1;
}

.page-viridians-commitment-center .vcc-pack-main,
.page-viridians-commitment-center .vcc-pack-action {
  display: grid;
  gap: 1.15rem;
  align-content: start;
}

.page-viridians-commitment-center .vcc-pack-action {
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}

.page-viridians-commitment-center .vcc-commitment-gate h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-viridians-commitment-center .vcc-commitment-gate p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Recommended badge — flat tint only (www-C Rule 11: no gradient, no shadow, no pointer) */

.page-viridians-commitment-center .vcc-badge-recommended {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--page-accent) 16%, transparent);
  color: color-mix(in srgb, var(--page-accent) 90%, var(--fg));
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--page-accent) 34%, transparent);
}

/* Feature list */

.page-viridians-commitment-center .vcc-feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.page-viridians-commitment-center .vcc-feature-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--fg);
  line-height: 1.5;
}

.page-viridians-commitment-center .vcc-feature-list li::before {
  content: "\2713";
  flex-shrink: 0;
  color: var(--page-depth);
  font-weight: 700;
  font-size: 0.8125rem;
}

.page-viridians-commitment-center .vcc-commitment-gate .vcc-feature-list li::before {
  color: var(--page-accent);
}

/* 7) Buttons and CTAs */

/* Commit buttons fill their card column width */

.page-viridians-commitment-center .vcc-commit-btn {
  width: 100%;
  justify-content: center;
}

/* 8) Page modules */

/* none */

/* 9) Media queries */

/* Mobile */

@media (max-width: 48rem) {
  .page-viridians-commitment-center .vcc-header {
    padding: 1rem 0 1.25rem;
  }

  .page-viridians-commitment-center .vcc-header h1 {
    font-size: clamp(1.85rem, 10vw, 2.7rem);
  }

  .page-viridians-commitment-center .vcc-trigger-context {
    grid-column: 1;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-block-start: 2rem;
    margin-inline: 0;
  }

  .page-viridians-commitment-center .vcc-trigger-context-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .page-viridians-commitment-center .vcc-proof-stats {
    gap: 1rem;
    flex-direction: column;
  }

  .page-viridians-commitment-center .vcc-proof-stat {
    padding: 0;
    align-items: flex-start;
  }

  .page-viridians-commitment-center .vcc-proof-divider {
    display: none;
  }

  .page-viridians-commitment-center .vcc-card-inner {
    padding: 1.5rem;
    grid-template-columns: 1fr;
  }

  .page-viridians-commitment-center .vcc-pack-action {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
  }

  .page-viridians-commitment-center .vcc-frame-brief {
    grid-template-columns: 1fr;
    margin-top: 0.75rem;
    padding: 0.85rem;
  }

  .page-viridians-commitment-center .vcc-frame-brief-header {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .page-viridians-commitment-center .vcc-frame-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    gap: 0.85rem;
  }

  .page-viridians-commitment-center .vcc-frame-plate:nth-child(n) {
    grid-column: auto;
    transform: none;
  }

  .page-viridians-commitment-center .vcc-frame-plate:last-child {
    grid-column: 1 / -1;
    max-width: min(16rem, 70vw);
    justify-self: center;
  }

  .page-viridians-commitment-center .vcc-chamber-title {
    grid-column: 1;
    margin-block-start: 2rem;
    margin-inline: 0;
  }

  .page-viridians-commitment-center .vcc-frame-copy {
    padding: 2.4rem 0.7rem 0.7rem;
  }

  .page-viridians-commitment-center .vcc-frame-title {
    font-size: 0.68rem;
  }
}

/* 10) Dark mode */

[data-theme="dark"] .page-viridians-commitment-center .vcc-commitment-gate {
  background: color-mix(in srgb, var(--page-accent) 0.05%, var(--card));
  border-color: color-mix(in srgb, var(--page-accent) 28%, var(--border) 72%);
}

[data-theme="dark"] .page-viridians-commitment-center .vcc-trigger-context {
  background: color-mix(in srgb, var(--page-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--page-primary) 28%, transparent);
}

[data-theme="dark"] .page-viridians-commitment-center .vcc-proof-strip {
  background: color-mix(in srgb, var(--page-depth) 6%, transparent);
  border-color: color-mix(in srgb, var(--page-depth) 20%, transparent);
}

[data-theme="dark"] .page-viridians-commitment-center .vcc-frame-brief {
  border-color: rgba(232, 198, 112, 0.24);
}