/* Rivvet Commerce stage styles (commerce.html).
   One cascade layer: every declaration below is the one that wins today.
   Chapter order follows the page: theme -> hero -> retail theater ->
   work / playbook / Growth Desk chapters -> value, pricing, brand, preview
   -> site chrome, then the responsive and motion-preference blocks,
   then the motion keyframes. */

/* Page theme and shared chapter type */
.theme-commerce {
  background:var(--iron);
}
.theme-commerce .commerce-kicker {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.4;
  margin:0 0 1.3rem;
  text-transform:uppercase;
}
.theme-commerce .commerce-value-message .commerce-kicker {
  color:var(--commerce-dark);
}
.theme-commerce .commerce-value-message > p:not(.commerce-kicker) {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  font-size:1.05rem;
  line-height:1.7;
  margin:1.5rem 0 0;
  max-width:31rem;
}
.theme-commerce .commerce-pricing-cinematic .commerce-kicker {
  color:var(--commerce-dark);
}
.theme-commerce .commerce-pricing-cinematic p:not(.commerce-kicker) {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  line-height:1.7;
  margin:1.35rem 0 0;
  max-width:46rem;
}
.theme-commerce .commerce-work-intro .commerce-kicker {
  align-self:start;
  color:var(--commerce-dark);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1.4;
  margin:.45rem 0 0;
  text-transform:none;
}
.theme-commerce .commerce-work-intro > p:not(.commerce-kicker) {
  color:color-mix(in srgb,var(--paper) 76%,transparent);
  font-size:clamp(1rem,1.15vw,1.125rem);
  grid-column:2;
  line-height:1.65;
  margin:.35rem 0 0;
  max-width:42rem;
  text-wrap:pretty;
}
.theme-commerce .commerce-playbook-stage .commerce-kicker {
  color:var(--commerce-light-ink);
}

/* Cinematic hero */
.theme-commerce .commerce-cinematic-hero {
  align-items:center;
  background:var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--commerce-dark) 16%,var(--edge));
  color:var(--paper);
  display:flex;
  isolation:isolate;
  min-height:100svh;
  overflow-x:clip;
  position:relative;
}
.theme-commerce .commerce-cinematic-hero::before {
  background:radial-gradient(circle at 82% 40%,color-mix(in srgb,var(--commerce-dark) 9%,transparent),transparent 31%),
    linear-gradient(118deg,transparent 0 54%,color-mix(in srgb,var(--mint-dark) 3%,transparent) 54% 54.15%,transparent 54.15% 100%);
  content:"";
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:-1;
}
.theme-commerce .commerce-hero-shell {
  align-items:center;
  display:grid;
  gap:clamp(1.5rem,3vw,3.5rem);
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  min-width:0;
  padding-block:clamp(6.5rem,10vh,8rem) clamp(2.5rem,6vh,4.5rem);
  width:100%;
}
.theme-commerce .commerce-hero-copy {
  min-width:0;
  position:relative;
  z-index:2;
}
.theme-commerce .commerce-hero-copy .eyebrow {
  color:var(--commerce-dark);
  margin-bottom:1.15rem;
}
.theme-commerce .commerce-hero-copy .eyebrow::before {
  animation:none;
  background:var(--commerce-dark);
  border-radius:1px;
  box-shadow:none;
  height:2px;
  width:1.4rem;
}
.theme-commerce .commerce-hero-copy h1 {
  color:var(--paper);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(2.75rem,3.45vw,3.85rem);
  line-height:1.06 !important;
  margin:0;
  max-width:none;
  text-wrap:balance;
}
.theme-commerce .commerce-hero-support {
  color:color-mix(in srgb,var(--paper) 78%,transparent);
  font-size:clamp(1rem,1.16vw,1.12rem);
  line-height:1.62;
  margin:1.35rem 0 0;
  max-width:34rem;
}
.theme-commerce .commerce-hero-trust {
  color:color-mix(in srgb,var(--paper) 57%,transparent);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:0;
  line-height:1.45;
  margin:.7rem 0 0;
}
.theme-commerce .commerce-hero-actions {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.9rem;
}
.theme-commerce .commerce-hero-actions a {
  white-space:nowrap;
}
.theme-commerce .commerce-hero-actions .btn-primary {
  box-shadow:0 18px 48px color-mix(in srgb,var(--mint-dark) 24%,transparent);
  min-height:56px;
  padding-inline:1.75rem;
  transition:opacity 240ms cubic-bezier(.16,1,.3,1),transform 420ms cubic-bezier(.16,1,.3,1);
}
.theme-commerce .commerce-hero-actions .btn-ghost {
  background:transparent;
  border:0;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--paper) 31%,transparent);
  color:color-mix(in srgb,var(--paper) 69%,transparent);
  min-height:44px;
  padding:.75rem .1rem;
  transition:opacity 240ms cubic-bezier(.16,1,.3,1),transform 420ms cubic-bezier(.16,1,.3,1);
}
.theme-commerce .commerce-hero-actions .btn-primary:hover,
.theme-commerce .commerce-hero-actions .btn-ghost:hover {
  opacity:.88;
  transform:translate3d(0,-3px,0);
}
.theme-commerce .commerce-hero-actions .btn-primary:active,
.theme-commerce .commerce-hero-actions .btn-ghost:active {
  transform:translate3d(0,0,0) scale(.98);
}

/* Retail theater: stage, scenes, rule beam, outcome */
.theme-commerce .commerce-retail-theater {
  --commerce-track-width:20%;
  --commerce-track-x:0px;
  --commerce-workspace-ink:#07101c;
  --commerce-workspace-muted:#9ba9ba;
  --commerce-workspace-warm:#f7f2e9;
  background:transparent;
  border:0;
  box-shadow:none;
  color:var(--paper);
  font-family:'IBM Plex Sans',sans-serif;
  min-width:0;
  position:relative;
}
.theme-commerce .commerce-theater-scenes {
  min-height:535px;
  perspective:1200px;
  position:relative;
}
.theme-commerce .commerce-theater-scenes::before {
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--commerce-dark) 8%,transparent),transparent 67%);
  content:"";
  inset:11% 2% 9%;
  pointer-events:none;
  position:absolute;
}
.theme-commerce .commerce-theater-scenes::after {
  background:color-mix(in srgb,var(--paper) 8%,transparent);
  bottom:3.4rem;
  box-shadow:0 18px 55px color-mix(in srgb,var(--commerce-dark) 10%,transparent);
  content:"";
  height:1px;
  left:5%;
  pointer-events:none;
  position:absolute;
  right:2%;
}
.theme-commerce .commerce-workspace-scene,
.theme-commerce .commerce-theater-scene {
  display:none;
  font-family:'IBM Plex Sans',sans-serif;
  min-height:535px;
  position:relative;
}
.theme-commerce .commerce-workspace-scene[hidden] {
  display:none;
}
.theme-commerce .commerce-workspace-scene.is-active,
.theme-commerce .commerce-theater-scene.is-active {
  display:block;
}
.theme-commerce .commerce-theater-scene--cart,
.theme-commerce .commerce-theater-scene--follow-up {
  --commerce-rule-top:62%;
}
.theme-commerce .commerce-theater-scene--social {
  --commerce-rule-top:67%;
}
.theme-commerce .commerce-theater-scene--campaign {
  --commerce-rule-top:58%;
}
.theme-commerce .commerce-theater-artifact {
  inset:0;
  min-width:0;
  overflow:hidden;
  position:absolute;
  transform-style:preserve-3d;
}
.theme-commerce .commerce-theater-scene h3 {
  color:var(--paper);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:clamp(1.05rem,1.4vw,1.28rem);
  line-height:1.28;
  margin:0;
}
.theme-commerce .commerce-theater-scene p {
  color:color-mix(in srgb,var(--paper) 78%,transparent);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.92rem;
  line-height:1.52;
  margin:0;
}
.theme-commerce .commerce-theater-scene .commerce-scene-signal {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:block;
  flex-direction:row;
  gap:0;
  min-height:0;
  padding:0;
  width:auto;
}
.theme-commerce .commerce-theater-scene [data-commerce-motion] {
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
}
/* Reserved rule lane: every theater scene keeps a clear horizontal band for the
   approved-rule beam (--commerce-rule-top per scene, per breakpoint) so the
   beam can never cross the scene artwork in any playback phase. */
.theme-commerce .commerce-rule-beam {
  align-items:flex-start;
  color:var(--commerce-dark);
  display:flex;
  flex-direction:column;
  gap:.22rem;
  left:62%;
  opacity:0;
  padding-top:.7rem;
  position:absolute;
  right:0;
  top:var(--commerce-rule-top,48%);
  transform:translate3d(22px,0,0);
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  z-index:2;
}
.theme-commerce .commerce-scene-outcome {
  bottom:4.5rem;
  color:var(--mint-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.1em;
  opacity:0;
  position:absolute;
  right:3%;
  text-transform:uppercase;
  transform:translate3d(0,12px,0);
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  z-index:6;
}
.theme-commerce .commerce-rule-beam::before {
  background:var(--commerce-dark);
  box-shadow:0 0 30px color-mix(in srgb,var(--commerce-dark) 38%,transparent);
  content:"";
  height:2px;
  left:0;
  position:absolute;
  right:0;
  top:0;
}
.theme-commerce .commerce-rule-beam span {
  background:var(--iron);
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.12em;
  padding:.08rem .35rem .08rem 0;
  text-transform:uppercase;
}
.theme-commerce .commerce-rule-beam strong {
  background:var(--iron);
  color:var(--paper);
  font-size:.88rem;
  line-height:1.25;
  padding:.04rem .35rem .08rem 0;
}
.theme-commerce .commerce-theater-scene.is-phase-signal [data-commerce-motion="signal"],
.theme-commerce .commerce-theater-scene.is-phase-rule [data-commerce-motion="signal"],
.theme-commerce .commerce-theater-scene.is-phase-work [data-commerce-motion="signal"],
.theme-commerce .commerce-theater-scene.is-phase-outcome [data-commerce-motion="signal"],
.theme-commerce .commerce-theater-scene.is-complete [data-commerce-motion="signal"] {
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.theme-commerce .commerce-theater-scene.is-phase-rule .commerce-rule-beam,
.theme-commerce .commerce-theater-scene.is-phase-work .commerce-rule-beam,
.theme-commerce .commerce-theater-scene.is-phase-outcome .commerce-rule-beam,
.theme-commerce .commerce-theater-scene.is-complete .commerce-rule-beam {
  opacity:1;
  transform:translate3d(0,0,0);
}
.theme-commerce .commerce-theater-scene.is-phase-work [data-commerce-motion="work"],
.theme-commerce .commerce-theater-scene.is-phase-outcome [data-commerce-motion="work"],
.theme-commerce .commerce-theater-scene.is-complete [data-commerce-motion="work"] {
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.theme-commerce .commerce-theater-scene.is-phase-outcome .commerce-scene-outcome,
.theme-commerce .commerce-theater-scene.is-complete .commerce-scene-outcome {
  opacity:1;
  transform:translate3d(0,0,0);
}
.theme-commerce .commerce-theater-scene--shopper.is-phase-rule .commerce-shopper-product::after,
.theme-commerce .commerce-theater-scene--shopper.is-phase-work .commerce-shopper-product::after,
.theme-commerce .commerce-theater-scene--shopper.is-phase-outcome .commerce-shopper-product::after,
.theme-commerce .commerce-theater-scene--shopper.is-complete .commerce-shopper-product::after {
  opacity:1;
  transform:scaleX(1);
}
.theme-commerce .commerce-theater-scene--cart.is-complete .commerce-cart-object {
  transform:translate3d(0,-5px,32px);
}
.theme-commerce .commerce-cart-artifact .commerce-scene-work p {
  color:inherit;
  opacity:.66;
}
.theme-commerce .commerce-theater-scene--follow-up.is-complete .commerce-follow-up-thread {
  transform:translate3d(0,-4px,34px);
}
.theme-commerce .commerce-follow-up-artifact .commerce-scene-work p {
  color:inherit;
  opacity:.66;
}
.theme-commerce .commerce-theater-scene--social.is-phase-work .commerce-social-post::after {
  opacity:.9;
  transform:translate3d(-38%,0,0) rotate(-3deg);
}
.theme-commerce .commerce-theater-scene--social.is-phase-outcome .commerce-social-post::after {
  opacity:.8;
  transform:translate3d(115%,0,0) rotate(-3deg);
}
.theme-commerce .commerce-theater-scene--social.is-complete .commerce-social-post::after {
  opacity:0;
  transform:translate3d(115%,0,0) rotate(-3deg);
}
.theme-commerce .commerce-retail-theater .commerce-social-approval {
  align-items:center;
  display:grid;
  margin-top:.75rem;
  min-height:28px;
  position:relative;
}
.theme-commerce .commerce-theater-scene .commerce-social-approval {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:grid;
  flex-direction:row;
  gap:0;
  min-height:0;
  padding:0;
  position:relative;
  width:auto;
}
.theme-commerce .commerce-theater-scene .commerce-social-approval-state {
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  letter-spacing:.07em;
  line-height:1.3;
}
.theme-commerce .commerce-theater-scene--social.is-phase-outcome .commerce-social-approval-state.is-required,
.theme-commerce .commerce-theater-scene--social.is-complete .commerce-social-approval-state.is-required {
  opacity:0;
  transform:translate3d(0,-8px,0);
}
.theme-commerce .commerce-theater-scene--social.is-phase-outcome .commerce-social-approval-state.is-approved,
.theme-commerce .commerce-theater-scene--social.is-complete .commerce-social-approval-state.is-approved {
  opacity:1;
  transform:translate3d(0,0,0);
}
.theme-commerce .commerce-theater-scene--campaign.is-phase-work .commerce-campaign-creative span,
.theme-commerce .commerce-theater-scene--campaign.is-phase-outcome .commerce-campaign-creative span,
.theme-commerce .commerce-theater-scene--campaign.is-complete .commerce-campaign-creative span {
  opacity:1;
}
.theme-commerce .commerce-theater-scene--campaign.is-phase-work .commerce-campaign-creative span:nth-of-type(1),
.theme-commerce .commerce-theater-scene--campaign.is-phase-outcome .commerce-campaign-creative span:nth-of-type(1),
.theme-commerce .commerce-theater-scene--campaign.is-complete .commerce-campaign-creative span:nth-of-type(1) {
  transform:translate3d(0,-18px,12px);
}
.theme-commerce .commerce-channel-icon {
  color:currentColor;
  display:inline-block;
  flex:none;
  vertical-align:-2px;
}
.theme-commerce .commerce-shopper-artifact .commerce-scene-work {
  background:color-mix(in srgb,var(--carbon) 88%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:0 26px 68px color-mix(in srgb,var(--iron) 62%,transparent);
  color:var(--paper);
  display:grid;
  gap:.5rem;
  padding:1.15rem 1.2rem;
  position:absolute;
  right:0;
  top:18%;
  width:31%;
  z-index:4;
}
.theme-commerce .commerce-cart-artifact .commerce-scene-work {
  background:color-mix(in srgb,var(--carbon) 88%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:0 26px 68px color-mix(in srgb,var(--iron) 62%,transparent);
  color:var(--paper);
  display:grid;
  gap:.5rem;
  padding:1.15rem 1.2rem;
  position:absolute;
  right:0;
  top:16%;
  width:40%;
  z-index:4;
}
.theme-commerce .commerce-follow-up-artifact .commerce-scene-work {
  background:color-mix(in srgb,var(--carbon) 88%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:0 26px 68px color-mix(in srgb,var(--iron) 62%,transparent);
  color:var(--paper);
  display:grid;
  gap:.5rem;
  padding:1.15rem 1.2rem;
  position:absolute;
  right:0;
  top:16%;
  width:44%;
  z-index:4;
}
.theme-commerce .commerce-social-artifact .commerce-scene-work {
  background:color-mix(in srgb,var(--carbon) 88%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:0 26px 68px color-mix(in srgb,var(--iron) 62%,transparent);
  color:var(--paper);
  display:grid;
  gap:.5rem;
  padding:1.15rem 1.2rem;
  position:absolute;
  right:0;
  top:10%;
  width:42%;
  z-index:4;
}
.theme-commerce .commerce-campaign-artifact .commerce-scene-work {
  background:color-mix(in srgb,var(--carbon) 88%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:0 26px 68px color-mix(in srgb,var(--iron) 62%,transparent);
  color:var(--paper);
  display:grid;
  gap:.5rem;
  padding:1.15rem 1.2rem;
  position:absolute;
  right:0;
  top:12%;
  width:31%;
  z-index:4;
}
.theme-commerce .commerce-website-artifact .commerce-scene-work {
  background:color-mix(in srgb,var(--carbon) 88%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:0 26px 68px color-mix(in srgb,var(--iron) 62%,transparent);
  color:var(--paper);
  display:grid;
  gap:.5rem;
  padding:1.15rem 1.2rem;
  position:absolute;
  right:0;
  top:15%;
  width:38%;
  z-index:4;
}
.theme-commerce .commerce-shopper-artifact .commerce-scene-work::before,
.theme-commerce .commerce-shopper-artifact .commerce-scene-work::after {
  display:none;
}
.theme-commerce .commerce-shopper-artifact .commerce-scene-work h3,
.theme-commerce .commerce-shopper-artifact .commerce-scene-work p,
.theme-commerce .commerce-cart-artifact .commerce-scene-work h3,
.theme-commerce .commerce-follow-up-artifact .commerce-scene-work h3,
.theme-commerce .commerce-website-artifact .commerce-scene-work h3,
.theme-commerce .commerce-website-artifact .commerce-scene-work p {
  color:inherit;
}
.theme-commerce .commerce-theater-scene .commerce-scene-work > span {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-commerce .commerce-theater-scene .commerce-scene-work > small {
  color:color-mix(in srgb,var(--paper) 64%,transparent);
  font-size:.7rem;
  line-height:1.45;
}
.theme-commerce .commerce-theater-scene--shopper {
  --commerce-rule-top:60%;
}
.theme-commerce .commerce-theater-scene--website {
  --commerce-rule-top:64%;
}
.theme-commerce .commerce-theater-scene--shopper .commerce-rule-beam,
.theme-commerce .commerce-theater-scene--campaign .commerce-rule-beam {
  left:68%;
}
.theme-commerce .commerce-theater-scene .commerce-thread-message {
  background:color-mix(in srgb,var(--body) 9%,transparent);
  border-radius:12px 12px 12px 4px;
  color:var(--commerce-workspace-ink);
  font-size:.9rem;
  line-height:1.5;
  padding:.95rem 1rem;
}

/* Theater scene: shopper */
.theme-commerce .commerce-shopper-artifact {
  min-height:500px;
  position:relative;
}
.theme-commerce .commerce-shopper-question {
  background:color-mix(in srgb,var(--paper) 94%,var(--commerce-dark));
  border-radius:12px;
  box-shadow:0 24px 64px color-mix(in srgb,#07101c 42%,transparent);
  color:var(--commerce-workspace-ink);
  display:grid;
  font-size:.8rem;
  font-weight:700;
  gap:.45rem;
  left:0;
  padding:1rem 1.1rem;
  position:absolute;
  top:6%;
  width:30%;
  z-index:4;
}
.theme-commerce .commerce-shopper-product {
  background:color-mix(in srgb,var(--steel) 92%,var(--iron));
  border:1px solid color-mix(in srgb,var(--paper) 13%,transparent);
  border-radius:12px;
  box-shadow:0 34px 84px color-mix(in srgb,var(--iron) 74%,transparent);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  height:360px;
  left:33%;
  overflow:hidden;
  position:absolute;
  top:7%;
  transform:none;
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  width:32%;
  z-index:3;
}
.theme-commerce .commerce-shopper-question::after {
  display:none;
}
.theme-commerce .commerce-shopper-question > span:not(.sr-only) {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.theme-commerce .commerce-shopper-question > strong {
  color:var(--commerce-workspace-ink);
  font-size:.88rem;
  line-height:1.4;
}
.theme-commerce .commerce-shopper-product::before,
.theme-commerce .commerce-shopper-product::after {
  display:none;
}
.theme-commerce .commerce-product-shot {
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center 58%;
  width:100%;
}
.theme-commerce .commerce-product-facts {
  background:var(--paper);
  color:var(--commerce-workspace-ink);
  display:grid;
  gap:.2rem;
  padding:.85rem 1rem 1rem;
}
.theme-commerce .commerce-product-facts > span {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.54rem;
  font-weight:700;
  inset:auto;
  letter-spacing:.08em;
  position:static;
  text-transform:uppercase;
}
.theme-commerce .commerce-product-facts > strong {
  color:var(--commerce-workspace-ink);
  font-size:.9rem;
  inset:auto;
  position:static;
}
.theme-commerce .commerce-product-facts > small {
  color:color-mix(in srgb,var(--commerce-workspace-ink) 72%,transparent);
  font-size:.66rem;
  inset:auto;
  line-height:1.35;
  position:static;
}

/* Theater scene: cart */
.theme-commerce .commerce-cart-artifact {
  min-height:500px;
  position:relative;
}
.theme-commerce .commerce-cart-signal {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  position:absolute;
  text-transform:uppercase;
  z-index:4;
}
.theme-commerce .commerce-cart-object {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 13%,transparent);
  border-radius:12px;
  box-shadow:0 40px 94px color-mix(in srgb,#07101c 54%,transparent);
  display:grid;
  gap:0;
  grid-template-rows:auto minmax(0,1fr) auto;
  height:370px;
  left:0;
  overflow:hidden;
  padding:0;
  position:absolute;
  top:8%;
  transform:none;
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  width:54%;
  z-index:3;
}
.theme-commerce .commerce-cart-object span {
  border-bottom:1px solid color-mix(in srgb,var(--body) 15%,transparent);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-inline:.25rem;
  position:relative;
}
.theme-commerce .commerce-cart-object span strong {
  color:var(--commerce-workspace-ink);
  font-size:.72rem;
  line-height:1.3;
}
.theme-commerce .commerce-cart-object span small {
  color:var(--commerce-workspace-ink);
  font-size:.62rem;
  line-height:1.3;
  opacity:.55;
}
.theme-commerce .commerce-cart-object::before {
  display:none;
}
.theme-commerce .commerce-cart-object header {
  align-items:center;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  display:flex;
  justify-content:space-between;
  padding:.95rem 1.1rem;
}
/* rivvet.css pads every <footer> 5.5rem on mobile to clear the sticky CTA;
     card-internal footers must keep their own geometry, hence !important. */
.theme-commerce .commerce-cart-object footer {
  align-items:center;
  background:color-mix(in srgb,var(--commerce-dark) 13%,var(--iron));
  border-top:1px solid color-mix(in srgb,var(--commerce-dark) 34%,transparent);
  display:flex;
  justify-content:space-between;
  padding:.95rem 1.1rem;
}
.theme-commerce .commerce-cart-object header b,
.theme-commerce .commerce-cart-object footer b {
  color:var(--paper);
  font-size:.8rem;
}
.theme-commerce .commerce-cart-object header span,
.theme-commerce .commerce-cart-object footer span {
  border:0;
  color:color-mix(in srgb,var(--paper) 70%,transparent);
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  padding:0;
}
.theme-commerce .commerce-cart-line {
  align-items:center;
  display:grid;
  gap:1.1rem;
  grid-template-columns:42% minmax(0,1fr);
  padding:1.1rem;
}
.theme-commerce .commerce-cart-line img {
  aspect-ratio:1;
  border-radius:8px;
  height:auto;
  object-fit:cover;
  object-position:center 66%;
  width:100%;
}
.theme-commerce .commerce-cart-object .commerce-cart-line > span {
  border:0;
  display:grid;
  gap:.32rem;
  padding:0;
}
.theme-commerce .commerce-cart-object .commerce-cart-line strong {
  color:var(--paper);
  font-size:1rem;
}
.theme-commerce .commerce-cart-object .commerce-cart-line small {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  font-size:.78rem;
  line-height:1.4;
  opacity:1;
}

/* Theater scene: follow-up */
.theme-commerce .commerce-follow-up-artifact {
  min-height:500px;
  position:relative;
}
.theme-commerce .commerce-follow-up-signal {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  position:absolute;
  text-transform:uppercase;
  z-index:4;
}
.theme-commerce .commerce-follow-up-thread {
  background:color-mix(in srgb,var(--paper) 94%,var(--commerce-dark));
  border-radius:12px;
  box-shadow:0 42px 92px color-mix(in srgb,#07101c 54%,transparent);
  display:grid;
  gap:.85rem;
  height:auto;
  left:0;
  padding:1.2rem;
  position:absolute;
  top:8%;
  transform:none;
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  width:48%;
  z-index:3;
}
.theme-commerce .commerce-follow-up-thread header {
  align-items:center;
  border-bottom:1px solid color-mix(in srgb,var(--body) 14%,transparent);
  display:flex;
  justify-content:space-between;
  padding-bottom:.7rem;
}
.theme-commerce .commerce-follow-up-thread header b {
  color:var(--commerce-workspace-ink);
  font-size:.78rem;
}
.theme-commerce .commerce-follow-up-thread header span {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-commerce .commerce-thread-product {
  align-items:center;
  border:1px solid color-mix(in srgb,var(--body) 16%,transparent);
  border-radius:10px;
  display:grid;
  gap:.8rem;
  grid-template-columns:56px minmax(0,1fr);
  padding:.55rem .8rem .55rem .55rem;
}
.theme-commerce .commerce-thread-product img {
  aspect-ratio:1;
  border-radius:8px;
  height:56px;
  object-fit:cover;
  object-position:center 62%;
  width:56px;
}
.theme-commerce .commerce-thread-product span {
  display:grid;
  gap:.2rem;
}
.theme-commerce .commerce-thread-product strong {
  color:var(--commerce-workspace-ink);
  font-size:.82rem;
}
.theme-commerce .commerce-thread-product small {
  color:color-mix(in srgb,var(--commerce-workspace-ink) 70%,transparent);
  font-size:.7rem;
  line-height:1.35;
}

/* Theater scene: social */
.theme-commerce .commerce-social-artifact {
  min-height:500px;
  position:relative;
}
.theme-commerce .commerce-social-signal {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  position:absolute;
  text-transform:uppercase;
  z-index:5;
}
.theme-commerce .commerce-social-post {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 13%,transparent);
  border-radius:12px;
  box-shadow:0 42px 96px color-mix(in srgb,#07101c 56%,transparent);
  display:grid;
  gap:.75rem;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  height:390px;
  left:0;
  overflow:hidden;
  padding:0;
  position:absolute;
  top:7%;
  transform:none;
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  width:46%;
  z-index:3;
}
.theme-commerce .commerce-social-post span {
  background:transparent;
  color:var(--commerce-workspace-ink);
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.57rem;
  font-weight:700;
  height:auto;
  letter-spacing:.08em;
  position:relative;
  text-transform:uppercase;
  width:auto;
  z-index:1;
}
.theme-commerce .commerce-social-post span:nth-of-type(1) {
  margin-top:auto;
}
.theme-commerce .commerce-social-post::before,
.theme-commerce .commerce-social-post::after {
  display:none;
}
.theme-commerce .commerce-social-post header {
  align-items:center;
  display:flex;
  gap:.5rem;
  padding:.8rem .95rem;
}
.theme-commerce .commerce-social-post header svg {
  color:var(--paper);
}
.theme-commerce .commerce-social-post header b {
  color:var(--paper);
  font-size:.78rem;
  inset:auto;
  position:static;
  transform:none;
  white-space:nowrap;
}
.theme-commerce .commerce-social-post header span {
  color:color-mix(in srgb,var(--paper) 58%,transparent);
  font-family:'JetBrains Mono',monospace;
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.08em;
  margin:0;
  margin-left:auto;
  text-transform:uppercase;
}
.theme-commerce .commerce-social-post img {
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center 62%;
  width:100%;
}
.theme-commerce .commerce-social-post > p {
  color:var(--paper);
  font-size:.78rem;
  line-height:1.4;
  padding:.85rem .95rem .35rem;
}
.theme-commerce .commerce-social-post footer span {
  color:color-mix(in srgb,var(--paper) 68%,transparent);
  font-size:inherit;
  margin:0;
  opacity:1;
}
/* Same rivvet.css mobile <footer> padding override as the cart card above. */
.theme-commerce .commerce-social-post footer {
  align-items:center;
  border-top:1px solid color-mix(in srgb,var(--paper) 10%,transparent);
  color:color-mix(in srgb,var(--paper) 62%,transparent);
  display:flex;
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  font-weight:700;
  gap:.45rem;
  letter-spacing:.07em;
  margin-top:.6rem;
  padding:.7rem .95rem .8rem;
  text-transform:uppercase;
}
.theme-commerce .commerce-social-review-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.25rem;
}
.theme-commerce .commerce-social-review-actions button {
  background:transparent;
  border:1px solid color-mix(in srgb,var(--paper) 38%,transparent);
  border-radius:6px;
  color:var(--paper);
  cursor:pointer;
  font:700 .62rem 'JetBrains Mono',monospace;
  letter-spacing:.06em;
  min-height:36px;
  padding:.4rem .7rem;
  text-transform:uppercase;
  transition:background 180ms cubic-bezier(.16,1,.3,1),color 180ms cubic-bezier(.16,1,.3,1),border-color 180ms cubic-bezier(.16,1,.3,1);
}
.theme-commerce .commerce-social-review-actions button:hover {
  background:color-mix(in srgb,var(--paper) 12%,transparent);
}
.theme-commerce .commerce-social-review-actions button:first-child:hover {
  background:var(--mint-dark);
  border-color:var(--mint-dark);
  color:var(--commerce-workspace-ink);
}
.theme-commerce .commerce-social-review-actions button:focus-visible {
  outline:2px solid var(--mint-dark);
  outline-offset:2px;
}
.theme-commerce .commerce-social-review-note {
  color:color-mix(in srgb,var(--paper) 66%,transparent);
  font-size:.68rem;
  line-height:1.4;
}

/* Theater scene: campaign */
.theme-commerce .commerce-campaign-artifact {
  min-height:500px;
  position:relative;
}
.theme-commerce .commerce-campaign-signal {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.09em;
  position:absolute;
  text-transform:uppercase;
  z-index:6;
}
.theme-commerce .commerce-campaign-creative {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:grid;
  gap:.7rem;
  grid-template-columns:46% minmax(0,1fr);
  height:365px;
  left:0;
  overflow:visible;
  padding:0;
  position:absolute;
  top:7%;
  transform:none;
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  width:64%;
  z-index:4;
}
.theme-commerce .commerce-campaign-creative span {
  align-items:flex-start;
  background:var(--commerce-workspace-warm);
  border-radius:12px;
  box-shadow:0 26px 65px color-mix(in srgb,#07101c 48%,transparent);
  color:var(--commerce-workspace-ink);
  display:flex;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  font-weight:700;
  height:100px;
  letter-spacing:.08em;
  opacity:.35;
  padding:1.15rem;
  position:absolute;
  right:-115px;
  text-transform:uppercase;
  top:2.2rem;
  transform:translate3d(-55px,60px,-8px) rotate(0);
  transition:opacity 540ms cubic-bezier(.16,1,.3,1),transform 620ms cubic-bezier(.16,1,.3,1);
  width:150px;
}
.theme-commerce .commerce-campaign-creative::before,
.theme-commerce .commerce-campaign-creative::after {
  display:none;
}
.theme-commerce .commerce-campaign-master {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 13%,transparent);
  border-radius:12px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-width:0;
  overflow:hidden;
}
.theme-commerce .commerce-campaign-master img {
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center 65%;
  width:100%;
}
.theme-commerce .commerce-campaign-master b {
  color:inherit;
  font-size:.84rem;
}
.theme-commerce .commerce-campaign-master small {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-commerce .commerce-campaign-creative ul {
  display:grid;
  gap:.7rem;
  list-style:none;
  margin:0;
  min-width:0;
  padding:0;
}
.theme-commerce .commerce-campaign-creative li {
  align-items:center;
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 13%,transparent);
  border-radius:10px;
  display:grid;
  gap:.22rem .7rem;
  grid-template-columns:minmax(0,1fr) auto;
  padding:.85rem .95rem;
}
.theme-commerce .commerce-campaign-creative li b {
  color:var(--paper);
  font-size:.8rem;
}
.theme-commerce .commerce-campaign-creative li small {
  color:color-mix(in srgb,var(--paper) 64%,transparent);
  font-size:.68rem;
  grid-column:1;
  line-height:1.4;
}
.theme-commerce .commerce-campaign-creative li em {
  border:1px solid color-mix(in srgb,var(--commerce-dark) 38%,transparent);
  border-radius:999px;
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  font-style:normal;
  font-weight:700;
  grid-column:2;
  grid-row:1 / span 2;
  letter-spacing:.06em;
  padding:.32rem .6rem;
  text-transform:uppercase;
  white-space:nowrap;
}
.theme-commerce .commerce-campaign-creative li:nth-child(2) em {
  border-color:color-mix(in srgb,var(--mint-dark) 42%,transparent);
  color:var(--mint-dark);
}

/* Theater scene: website */
.theme-commerce .commerce-website-artifact {
  min-height:500px;
  position:relative;
}
.theme-commerce .commerce-website-preview {
  background:var(--commerce-workspace-warm);
  border-radius:12px;
  box-shadow:0 34px 84px color-mix(in srgb,var(--iron) 74%,transparent);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  height:365px;
  left:0;
  overflow:hidden;
  position:absolute;
  top:7%;
  width:56%;
  z-index:3;
}
.theme-commerce .commerce-website-chrome {
  align-items:center;
  background:var(--commerce-workspace-ink);
  display:flex;
  gap:.3rem;
  padding:.6rem .8rem;
}
.theme-commerce .commerce-website-chrome i {
  background:color-mix(in srgb,var(--paper) 30%,transparent);
  border-radius:50%;
  height:7px;
  width:7px;
}
.theme-commerce .commerce-website-chrome span {
  color:color-mix(in srgb,var(--paper) 55%,transparent);
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  letter-spacing:.05em;
  margin-left:.45rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.theme-commerce .commerce-website-body {
  display:grid;
  grid-template-columns:44% minmax(0,1fr);
  min-height:0;
}
.theme-commerce .commerce-website-body img {
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center 60%;
  width:100%;
}
.theme-commerce .commerce-website-body > div {
  align-content:center;
  display:grid;
  gap:.5rem;
  min-width:0;
  padding:1.1rem 1.2rem;
}
.theme-commerce .commerce-website-body > div > span {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-commerce .commerce-website-body strong {
  color:var(--commerce-workspace-ink);
  font-size:1.02rem;
}
.theme-commerce .commerce-website-body > div > small {
  color:color-mix(in srgb,var(--commerce-workspace-ink) 74%,transparent);
  font-size:.78rem;
  line-height:1.45;
}
.theme-commerce .commerce-website-updates {
  display:grid;
  gap:.35rem;
  list-style:none;
  margin:.2rem 0 0;
  padding:0;
}
.theme-commerce .commerce-website-updates li {
  align-items:center;
  color:var(--commerce-workspace-ink);
  display:flex;
  font-size:.72rem;
  gap:.45rem;
}
.theme-commerce .commerce-website-updates li::before {
  background:var(--mint-dark);
  border-radius:50%;
  content:"";
  flex:none;
  height:6px;
  width:6px;
}
.theme-commerce .commerce-website-masthead {
  align-items:center;
  background:#FFFFFF;
  border-bottom:1px solid color-mix(in srgb,var(--commerce-workspace-ink) 12%,transparent);
  display:flex;
  gap:.8rem;
  padding:.55rem .95rem;
}
.theme-commerce .commerce-website-masthead b {
  color:var(--commerce-workspace-ink);
  font-family:'Unbounded',sans-serif;
  font-size:.68rem;
  letter-spacing:-.01em;
  margin-right:.3rem;
}
.theme-commerce .commerce-website-masthead span {
  color:color-mix(in srgb,var(--commerce-workspace-ink) 64%,transparent);
  font-size:.62rem;
  font-weight:500;
}
.theme-commerce .commerce-website-masthead em {
  align-items:center;
  color:var(--commerce-workspace-ink);
  display:flex;
  font-size:.62rem;
  font-style:normal;
  font-weight:600;
  gap:.3rem;
  margin-left:auto;
}
.theme-commerce .commerce-website-cta {
  background:var(--commerce-workspace-ink);
  border-radius:7px;
  color:var(--paper);
  font-size:.66rem;
  font-weight:600;
  justify-self:start;
  margin-top:.3rem;
  padding:.5rem .8rem;
}

/* Employee dock */
.theme-commerce .commerce-workforce-dock {
  background:color-mix(in srgb,var(--carbon) 88%,var(--iron));
  border:1px solid color-mix(in srgb,var(--paper) 10%,transparent);
  border-radius:999px;
  box-shadow:0 24px 64px color-mix(in srgb,var(--iron) 68%,transparent);
  margin:-2rem auto 0;
  max-width:100%;
  padding:.35rem .55rem .45rem;
  position:relative;
  width:calc(100% - 1rem);
  z-index:8;
}
.theme-commerce .commerce-workspace-rail {
  display:flex;
  max-width:100%;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-padding-inline:.55rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.theme-commerce .commerce-workspace-rail::-webkit-scrollbar {
  display:none;
}
.theme-commerce .commerce-workspace-rail-wrap {
  min-width:0;
  position:relative;
}
.theme-commerce [data-commerce-employee] {
  appearance:none;
  background:transparent;
  border:0;
  color:color-mix(in srgb,var(--paper) 51%,transparent);
  cursor:pointer;
  display:grid;
  flex:1 0 128px;
  font-family:'IBM Plex Sans',sans-serif;
  gap:.14rem;
  justify-items:start;
  min-height:44px;
  padding:.62rem .85rem .68rem;
  scroll-snap-align:start;
  text-align:left;
  transition:opacity 240ms cubic-bezier(.16,1,.3,1),transform 320ms cubic-bezier(.16,1,.3,1);
}
.theme-commerce [data-commerce-employee]:hover {
  color:var(--paper);
  transform:translate3d(0,-2px,0);
}
.theme-commerce [data-commerce-employee]:active {
  transform:translate3d(0,0,0) scale(.985);
}
.theme-commerce [data-commerce-employee].is-active {
  color:var(--paper);
  font-weight:700;
}
.theme-commerce [data-commerce-employee]:not(.is-active) .commerce-employee-description {
  display:none;
}
.theme-commerce [data-commerce-employee]:focus-visible {
  box-shadow:inset 0 0 0 7px var(--commerce-workspace-ink);
  outline:3px solid var(--mint-dark);
  outline-offset:-4px;
}
.theme-commerce .commerce-employee-name {
  font-size:.88rem;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.theme-commerce .commerce-employee-description {
  color:color-mix(in srgb,var(--paper) 62%,transparent);
  font-size:.68rem;
  font-weight:500;
  line-height:1.25;
  white-space:nowrap;
}
.theme-commerce .commerce-workspace-track {
  background:var(--mint-dark);
  bottom:-.45rem;
  box-shadow:0 0 16px color-mix(in srgb,var(--mint-dark) 42%,transparent);
  height:3px;
  left:0;
  position:absolute;
  transform:translate3d(var(--commerce-track-x),0,0);
  transform-origin:left center;
  width:var(--commerce-track-width);
  z-index:3;
}

/* Work chapter: layout and copy */
.theme-commerce .commerce-work-section {
  --commerce-work-ink:#09111e;
  background:var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  color:var(--paper);
  overflow:clip;
  padding:clamp(5.5rem,8vw,8rem) 0 clamp(6.5rem,9vw,9rem);
  position:relative;
  scroll-margin-top:7.5rem;
}
.theme-commerce .commerce-work-layout {
  align-items:start;
  display:block;
  gap:clamp(3.5rem,7vw,7.5rem);
  grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);
  position:relative;
}
.theme-commerce .commerce-work-scenes {
  display:grid;
  gap:0;
  min-width:0;
}
.theme-commerce .commerce-scene-pair {
  align-items:start;
  border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  display:grid;
  gap:clamp(2.5rem,5vw,5.5rem);
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  min-height:0;
  min-width:0;
  padding:clamp(3.25rem,5vw,5rem) 0;
  position:relative;
}
.theme-commerce .commerce-scene-copy h3 {
  color:var(--paper);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(2rem,2.65vw,3rem);
  letter-spacing:-.035em;
  line-height:1.08;
  margin:0;
  max-width:16ch;
  text-wrap:balance;
}
.theme-commerce .commerce-scene-pair-stage::before {
  border:1px solid color-mix(in srgb,var(--paper) 7%,transparent);
  border-radius:22px;
  content:none;
  inset:.55rem;
  pointer-events:none;
  position:absolute;
}
.theme-commerce .commerce-scene-pair-stage::after {
  color:color-mix(in srgb,var(--paper) 45%,transparent);
  content:none;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:600;
  left:1.6rem;
  letter-spacing:.1em;
  position:absolute;
  text-transform:uppercase;
  top:1.45rem;
}
.theme-commerce .commerce-work-section::before {
  display:none;
}
.theme-commerce .commerce-work-intro {
  display:grid;
  gap:1.25rem clamp(3rem,7vw,8rem);
  grid-template-columns:minmax(10rem,.34fr) minmax(0,1fr);
  margin:0 0 clamp(4rem,6vw,6rem);
  max-width:none;
}
.theme-commerce .commerce-work-intro h2 {
  color:var(--paper);
  font-size:clamp(2.65rem,4.35vw,4.15rem);
  grid-column:2;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0;
  max-width:18ch;
  text-wrap:balance;
}
.theme-commerce .commerce-scene-pair:last-child {
  border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
}
.theme-commerce .commerce-scene-copy {
  border:0;
  margin:0;
  min-height:auto;
  opacity:1;
  padding:0;
  position:relative;
}
.theme-commerce .commerce-scene-copy::before {
  display:none;
}
.theme-commerce .commerce-scene-copy > span {
  align-items:center;
  color:var(--commerce-dark);
  display:flex;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.92rem;
  font-weight:600;
  gap:.55rem;
  letter-spacing:0;
  line-height:1.4;
  margin:0 0 .9rem;
  text-transform:none;
}
.theme-commerce .commerce-scene-copy p {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  font-size:1rem;
  line-height:1.65;
  margin:1.2rem 0 0;
  max-width:31rem;
  text-wrap:pretty;
}
.theme-commerce .commerce-scene-pair-stage {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  margin:0;
  min-height:330px;
  overflow:visible;
  padding:0;
  position:relative;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-signal {
  align-items:flex-start;
  background:var(--paper);
  border:0;
  border-radius:0;
  bottom:auto;
  box-shadow:none;
  color:var(--commerce-work-ink);
  display:flex;
  flex-direction:column;
  gap:.55rem;
  grid-column:1;
  grid-row:2;
  height:auto;
  justify-content:center;
  left:auto;
  margin:0;
  min-height:0;
  padding:1.5rem clamp(1.25rem,2.4vw,2rem);
  position:relative;
  right:auto;
  top:auto;
  width:auto;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-employee {
  align-items:center;
  background:var(--commerce-work-ink);
  border:0;
  border-radius:0;
  bottom:auto;
  box-shadow:none;
  display:flex;
  flex-direction:row;
  gap:.55rem;
  grid-column:1 / -1;
  grid-row:1;
  height:auto;
  justify-content:space-between;
  left:auto;
  margin:0;
  min-height:0;
  padding:.85rem clamp(1.25rem,2.4vw,2rem);
  position:relative;
  right:auto;
  top:auto;
  width:auto;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-rule {
  align-items:flex-start;
  background:color-mix(in srgb,var(--commerce-dark) 16%,var(--paper));
  border:0;
  border-radius:0;
  border-top:3px solid var(--commerce-dark);
  bottom:auto;
  box-shadow:none;
  color:var(--commerce-work-ink);
  display:flex;
  flex-direction:column;
  gap:.55rem;
  grid-column:1;
  grid-row:3;
  height:auto;
  justify-content:flex-start;
  left:auto;
  margin:0;
  min-height:0;
  padding:1.5rem clamp(1.25rem,2.4vw,2rem);
  padding-block:1.1rem 1.25rem;
  position:relative;
  right:auto;
  top:auto;
  width:auto;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-social-approval {
  align-items:flex-start;
  background:transparent;
  border:0;
  border-radius:0;
  bottom:auto;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  height:auto;
  justify-content:center;
  left:auto;
  margin:0;
  min-height:0;
  padding:1.5rem clamp(1.25rem,2.4vw,2rem);
  position:relative;
  right:auto;
  top:auto;
  width:auto;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-output {
  align-items:flex-start;
  background:var(--mint-dark);
  border:0;
  border-radius:0;
  bottom:auto;
  box-shadow:none;
  color:var(--commerce-work-ink);
  display:flex;
  flex-direction:column;
  gap:.55rem;
  grid-column:2;
  grid-row:2 / 4;
  height:auto;
  justify-content:center;
  left:auto;
  margin:0;
  min-height:0;
  padding:1.5rem clamp(1.25rem,2.4vw,2rem);
  padding-inline:clamp(1.5rem,3vw,2.5rem);
  position:relative;
  right:auto;
  top:auto;
  width:auto;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-employee::after {
  color:color-mix(in srgb,var(--paper) 58%,transparent);
  content:"Rivvet Commerce";
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual="social"] .commerce-social-approval {
  background:color-mix(in srgb,var(--warn-on-dark) 20%,var(--paper));
  color:var(--commerce-work-ink);
  grid-column:2;
  grid-row:2;
  justify-content:flex-end;
  padding-bottom:1.25rem;
}
.theme-commerce .commerce-work-section [data-commerce-scene-visual="social"] .commerce-scene-output {
  grid-column:2;
  grid-row:3;
  justify-content:flex-start;
  padding-top:1.25rem;
}
.theme-commerce .commerce-work-section .commerce-scene-signal span,
.theme-commerce .commerce-work-section .commerce-scene-rule span,
.theme-commerce .commerce-work-section .commerce-social-approval span,
.theme-commerce .commerce-work-section .commerce-scene-output span {
  color:color-mix(in srgb,currentColor 68%,transparent);
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}
.theme-commerce .commerce-work-section .commerce-scene-signal b,
.theme-commerce .commerce-work-section .commerce-scene-rule b,
.theme-commerce .commerce-work-section .commerce-social-approval b {
  color:inherit;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.22;
}
.theme-commerce .commerce-work-section .commerce-scene-output b {
  color:inherit;
  font-family:'Unbounded',sans-serif;
  font-size:clamp(1.35rem,2vw,1.9rem);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.22;
  max-width:12ch;
}
.theme-commerce .commerce-work-section .commerce-scene-employee b {
  color:var(--paper);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-proof-product {
  background:#FFFFFF;
  border:1px solid color-mix(in srgb,var(--body) 14%,transparent);
  border-radius:12px;
  display:grid;
  grid-column:2;
  grid-row:2;
  grid-template-rows:minmax(0,1fr) auto;
  margin:1.5rem .25rem 1rem;
  min-width:0;
  overflow:hidden;
  padding:0;
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-proof-product img {
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center 65%;
  width:100%;
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-proof-product span {
  color:var(--commerce-work-ink);
  font-size:.68rem;
  font-weight:600;
  padding:.6rem .65rem;
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-rule span {
  color:var(--commerce-light-ink);
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-rule b {
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.9rem;
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-signal::before,
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-rule::before {
  background:var(--iron);
  border:2px solid var(--commerce-dark);
  border-radius:50%;
  content:"";
  height:11px;
  left:clamp(1.25rem,2.4vw,2rem);
  position:absolute;
  top:calc(2.6rem - 5px);
  width:11px;
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-output::before {
  background:var(--mint-dark);
  border:2px solid var(--commerce-dark);
  border-color:var(--mint-dark);
  border-radius:50%;
  content:"";
  height:11px;
  left:clamp(1.25rem,2.4vw,2rem);
  position:absolute;
  top:calc(2.6rem - 5px);
  width:11px;
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-output span {
  color:var(--mint-dark);
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-output b {
  font-family:'Unbounded',sans-serif;
}
.theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-employee {
  border-radius:9px;
}
.theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-signal,
.theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-rule {
  background:color-mix(in srgb,var(--carbon) 92%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  border-radius:10px;
  color:var(--paper);
}
.theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-social-approval {
  background:color-mix(in srgb,var(--carbon) 92%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  border-color:color-mix(in srgb,var(--warn-on-dark) 42%,transparent);
  border-radius:10px;
  color:var(--paper);
  justify-content:center;
  padding-bottom:1.5rem;
}
.theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-output {
  background:var(--mint-dark);
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  border-color:var(--mint-dark);
  border-radius:10px;
  color:var(--commerce-work-ink);
  justify-content:center;
  padding-top:1.5rem;
}
.theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-social-approval b {
  color:var(--warn-on-dark);
}
.theme-commerce .commerce-copy-icon {
  color:var(--commerce-dark);
  flex:none;
}
.theme-commerce .commerce-value-points {
  display:grid;
  gap:.6rem;
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
}
.theme-commerce .commerce-value-points li {
  color:color-mix(in srgb,var(--paper) 80%,transparent);
  display:flex;
  font-size:.95rem;
  gap:.6rem;
  line-height:1.55;
  max-width:30rem;
}
.theme-commerce .commerce-value-points li::before {
  background:var(--mint-dark);
  border-radius:50%;
  content:"";
  flex:none;
  height:6px;
  margin-top:.5rem;
  width:6px;
}

/* Work chapter: proof surfaces */
.theme-commerce .commerce-social-approval-state {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  font-weight:700;
  grid-column:1;
  grid-row:1;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:opacity 420ms cubic-bezier(.16,1,.3,1),transform 420ms cubic-bezier(.16,1,.3,1);
}
.theme-commerce .commerce-social-approval-state.is-approved {
  color:var(--mint-dark);
  opacity:0;
  transform:translate3d(0,8px,0);
}
.theme-commerce .commerce-scene-signal {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  border-radius:16px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 9%,transparent),
    0 18px 46px color-mix(in srgb,var(--iron) 55%,transparent);
  display:flex;
  flex-direction:column;
  gap:.65rem;
  min-height:108px;
  padding:1rem 1.1rem;
  position:absolute;
  width:clamp(160px,31%,210px);
  z-index:1;
}
.theme-commerce .commerce-scene-employee {
  align-items:center;
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  border-color:color-mix(in srgb,var(--commerce-dark) 46%,var(--edge));
  border-radius:16px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 9%,transparent),
    0 18px 46px color-mix(in srgb,var(--iron) 55%,transparent);
  display:flex;
  flex-direction:row;
  gap:.65rem;
  min-height:82px;
  padding:1rem 1.1rem;
  position:absolute;
  width:clamp(150px,27%,190px);
  z-index:1;
}
.theme-commerce .commerce-scene-rule {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  border-color:color-mix(in srgb,var(--commerce-dark) 50%,var(--edge));
  border-radius:16px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 9%,transparent),
    0 18px 46px color-mix(in srgb,var(--iron) 55%,transparent);
  display:flex;
  flex-direction:column;
  gap:.65rem;
  min-height:108px;
  padding:1rem 1.1rem;
  position:absolute;
  width:clamp(160px,31%,210px);
  z-index:1;
}
.theme-commerce .commerce-social-approval {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  border-color:color-mix(in srgb,var(--warn-on-dark) 46%,var(--edge));
  border-radius:16px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 9%,transparent),
    0 18px 46px color-mix(in srgb,var(--iron) 55%,transparent);
  display:flex;
  flex-direction:column;
  gap:.65rem;
  min-height:92px;
  padding:1rem 1.1rem;
  position:absolute;
  width:clamp(160px,31%,210px);
  z-index:1;
}
.theme-commerce .commerce-scene-output {
  background:color-mix(in srgb,var(--carbon) 90%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  border-color:color-mix(in srgb,var(--mint-dark) 38%,var(--edge));
  border-radius:16px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 9%,transparent),
    0 18px 46px color-mix(in srgb,var(--iron) 55%,transparent);
  display:flex;
  flex-direction:column;
  gap:.65rem;
  min-height:108px;
  padding:1rem 1.1rem;
  position:absolute;
  width:clamp(160px,31%,210px);
  z-index:1;
}
.theme-commerce .commerce-scene-signal span {
  color:color-mix(in srgb,var(--paper) 54%,transparent);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase;
}
.theme-commerce .commerce-scene-rule span {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase;
}
.theme-commerce .commerce-social-approval span {
  color:color-mix(in srgb,var(--paper) 66%,transparent);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase;
}
.theme-commerce .commerce-scene-output span {
  color:var(--mint-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase;
}
.theme-commerce .commerce-scene-signal b,
.theme-commerce .commerce-scene-employee b,
.theme-commerce .commerce-scene-rule b {
  color:var(--paper);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(.75rem,1.1vw,.95rem);
  line-height:1.35;
}
.theme-commerce .commerce-social-approval b {
  color:var(--warn-on-dark);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(.75rem,1.1vw,.95rem);
  line-height:1.35;
}
.theme-commerce .commerce-scene-output b {
  color:var(--paper);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(.75rem,1.1vw,.95rem);
  line-height:1.35;
}
.theme-commerce [data-commerce-scene-visual="shopper"] .commerce-scene-signal {
  left:4%;
  top:7%;
}
.theme-commerce [data-commerce-scene-visual="shopper"] .commerce-scene-employee {
  left:36%;
  top:39%;
}
.theme-commerce [data-commerce-scene-visual="shopper"] .commerce-scene-rule {
  right:4%;
  top:10%;
}
.theme-commerce [data-commerce-scene-visual="shopper"] .commerce-scene-output {
  bottom:7%;
  right:9%;
}
.theme-commerce [data-commerce-scene-visual="cart"] .commerce-scene-signal {
  right:4%;
  top:7%;
}
.theme-commerce [data-commerce-scene-visual="cart"] .commerce-scene-employee {
  left:5%;
  top:34%;
}
.theme-commerce [data-commerce-scene-visual="cart"] .commerce-scene-rule {
  bottom:7%;
  left:29%;
}
.theme-commerce [data-commerce-scene-visual="cart"] .commerce-scene-output {
  bottom:20%;
  right:4%;
}
.theme-commerce [data-commerce-scene-visual="social"] .commerce-scene-signal {
  left:3%;
  top:5%;
}
.theme-commerce [data-commerce-scene-visual="social"] .commerce-scene-employee {
  right:4%;
  top:7%;
}
.theme-commerce [data-commerce-scene-visual="social"] .commerce-scene-rule {
  left:5%;
  top:40%;
}
.theme-commerce [data-commerce-scene-visual="social"] .commerce-social-approval {
  right:4%;
  top:42%;
}
.theme-commerce [data-commerce-scene-visual="social"] .commerce-scene-output {
  bottom:4%;
  right:23%;
}
.theme-commerce .commerce-scene-visual {
  background:var(--paper);
  border:0;
  border-radius:14px;
  box-shadow:none;
  color:var(--commerce-work-ink);
  display:grid;
  gap:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  grid-template-rows:52px minmax(0,1fr) auto;
  inset:auto;
  min-height:330px;
  opacity:1;
  overflow:hidden;
  pointer-events:auto;
  position:relative;
}
.theme-commerce .commerce-scene-visual::before,
.theme-commerce .commerce-scene-visual[data-commerce-scene-visual="shopper"]::before,
.theme-commerce .commerce-scene-visual[data-commerce-scene-visual="cart"]::before,
.theme-commerce .commerce-scene-visual[data-commerce-scene-visual="social"]::before {
  display:none;
}
.theme-commerce .commerce-scene-detail {
  color:color-mix(in srgb,currentColor 72%,transparent);
  display:block;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.9rem;
  font-weight:500;
  line-height:1.42;
  max-width:25ch;
}
/* Work-chapter proof 1: the shopper conversation reads as a paper chat panel. */
.theme-commerce .commerce-conversation-proof {
  background:color-mix(in srgb,var(--paper) 96%,var(--commerce-dark));
  border:1px solid color-mix(in srgb,var(--commerce-dark) 22%,var(--line));
  color:var(--commerce-work-ink);
}
.theme-commerce .commerce-cart-journey-proof::after {
  background:color-mix(in srgb,var(--paper) 14%,transparent);
  content:"";
  height:1px;
  left:2rem;
  position:absolute;
  right:2rem;
  top:calc(52px + 2.6rem);
}
/* Work-chapter proof 3: the social pass reads as a dark review queue. */
.theme-commerce .commerce-social-review-proof {
  background:var(--iron);
  border:1px solid color-mix(in srgb,var(--paper) 12%,transparent);
  gap:.6rem;
  padding:.6rem;
}

/* Playbook chapter: rule ledger */
.theme-commerce .commerce-playbook-stage {
  background:color-mix(in srgb,#FFFFFF 92%,var(--commerce-dark));
  border-bottom:1px solid var(--line);
  color:var(--paper);
  padding:clamp(7rem,10vw,10rem) 0;
}
.theme-commerce .commerce-playbook-stage-inner {
  align-items:center;
  display:grid;
  gap:clamp(3rem,8vw,8rem);
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);
}
.theme-commerce .commerce-playbook-message h2 {
  color:var(--ink);
  font-size:clamp(2.25rem,4.3vw,4.6rem);
  line-height:1.02;
  margin:0;
  max-width:12ch;
}
.theme-commerce .commerce-playbook-message > p:last-child {
  color:color-mix(in srgb,var(--ink) 74%,transparent);
  font-size:clamp(1rem,1.25vw,1.14rem);
  line-height:1.65;
  margin:1.5rem 0 0;
  max-width:38rem;
}
.theme-commerce .commerce-playbook-orbit {
  aspect-ratio:1.13;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--commerce-dark) 9%,transparent),transparent 32%),
    color-mix(in srgb,#FFFFFF 88%,var(--mist));
  border:1px solid color-mix(in srgb,var(--commerce-light) 24%,var(--line));
  border-radius:30px;
  box-shadow:inset 0 1px 0 #FFFFFF,
    0 30px 80px color-mix(in srgb,var(--steel) 10%,transparent);
  min-height:560px;
  overflow:hidden;
  position:relative;
}
.theme-commerce .commerce-playbook-orbit::before {
  border:1px solid color-mix(in srgb,var(--commerce-light) 22%,transparent);
  border-radius:50%;
  content:"";
  height:76%;
  left:50%;
  pointer-events:none;
  position:absolute;
  top:49%;
  transform:translate(-50%,-50%);
  width:84%;
}
.theme-commerce .commerce-playbook-orbit::after {
  border:1px solid color-mix(in srgb,var(--commerce-light) 22%,transparent);
  border-color:color-mix(in srgb,var(--commerce-light) 13%,transparent);
  border-radius:50%;
  content:"";
  height:54%;
  left:50%;
  pointer-events:none;
  position:absolute;
  top:49%;
  transform:translate(-50%,-50%);
  width:61%;
}
.theme-commerce .commerce-playbook-core {
  align-items:center;
  aspect-ratio:1;
  background:var(--iron);
  border:6px solid color-mix(in srgb,var(--commerce-dark) 14%,#FFFFFF);
  border-radius:50%;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 13%,transparent),
    0 0 0 1px color-mix(in srgb,var(--commerce-light) 45%,transparent),
    0 24px 64px color-mix(in srgb,var(--steel) 18%,transparent);
  display:flex;
  flex-direction:column;
  height:12.5rem;
  justify-content:center;
  left:50%;
  padding:1.5rem;
  position:absolute;
  text-align:center;
  top:49%;
  transform:translate(-50%,-50%);
  z-index:2;
}
.theme-commerce .commerce-playbook-core span {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  margin-bottom:.65rem;
  text-transform:uppercase;
}
.theme-commerce .commerce-playbook-core b {
  color:var(--paper);
  font-family:'Unbounded',sans-serif;
  font-size:1rem;
  line-height:1.35;
}
.theme-commerce .commerce-playbook-orbit ul {
  inset:0;
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  z-index:1;
}
.theme-commerce .commerce-playbook-orbit li {
  background:#FFFFFF;
  border:1px solid color-mix(in srgb,var(--commerce-light) 24%,var(--line));
  border-radius:13px;
  box-shadow:inset 0 1px 0 #FFFFFF,
    0 12px 34px color-mix(in srgb,var(--steel) 8%,transparent);
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.35;
  padding:.75rem .9rem;
  position:absolute;
  text-align:center;
  text-transform:uppercase;
  width:9.5rem;
}
.theme-commerce .commerce-playbook-orbit li:nth-child(1) {
  left:50%;
  top:8%;
  transform:translateX(-50%);
}
.theme-commerce .commerce-playbook-orbit li:nth-child(2) {
  right:4%;
  top:27%;
}
.theme-commerce .commerce-playbook-orbit li:nth-child(3) {
  bottom:17%;
  right:6%;
}
.theme-commerce .commerce-playbook-orbit li:nth-child(4) {
  bottom:17%;
  left:6%;
}
.theme-commerce .commerce-playbook-orbit li:nth-child(5) {
  left:4%;
  top:27%;
}
.theme-commerce .commerce-rule-ledger .commerce-playbook-core {
  align-items:flex-start;
  aspect-ratio:auto;
  background:var(--iron);
  border:0;
  border-radius:0;
  box-shadow:none;
  height:auto;
  justify-content:flex-end;
  left:auto;
  padding:2rem;
  position:relative;
  text-align:left;
  top:auto;
  transform:none;
}
.theme-commerce .commerce-rule-ledger .commerce-playbook-core b {
  font-size:clamp(1.25rem,2vw,1.8rem);
}
.theme-commerce .commerce-rule-ledger li::before {
  background:var(--commerce-dark);
  border-radius:50%;
  content:"";
  flex:none;
  height:8px;
  width:8px;
}
.theme-commerce .commerce-rule-ledger li::after {
  color:var(--mint-light-ink);
  content:"Inherited";
  font-size:.55rem;
  margin-left:auto;
}
.theme-commerce .commerce-playbook-inherits {
  display:grid;
  gap:.85rem;
  grid-column:1 / -1;
  margin-top:1.5rem;
}
.theme-commerce .commerce-playbook-inherits > span {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.theme-commerce .commerce-playbook-inherits li svg {
  color:var(--commerce-light-ink);
  flex:none;
}
.theme-commerce .commerce-rule-ledger .commerce-playbook-inherits li::before,
.theme-commerce .commerce-rule-ledger .commerce-playbook-inherits li::after {
  display:none;
}

/* Growth Desk chapter */
.theme-commerce .commerce-growthdesk-heading h2 {
  color:var(--paper);
  font-size:clamp(2.25rem,4.3vw,4.6rem);
  line-height:1.02;
  margin:0;
  max-width:15ch;
}
.theme-commerce .commerce-growthdesk-heading > p:last-child {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  font-size:clamp(1rem,1.25vw,1.14rem);
  line-height:1.65;
  margin:1.5rem 0 0;
  max-width:38rem;
}
.theme-commerce .commerce-growthdesk-section {
  background:var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  color:var(--paper);
  padding:clamp(7rem,10vw,10rem) 0;
}
.theme-commerce .commerce-growthdesk-heading {
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
  max-width:52rem;
}
.theme-commerce .commerce-growthdesk-stage {
  background:color-mix(in srgb,var(--steel) 92%,var(--iron));
  border:1px solid color-mix(in srgb,var(--commerce-dark) 30%,var(--edge));
  border-radius:28px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 8%,transparent),
    0 34px 86px color-mix(in srgb,var(--steel) 22%,transparent);
  color:var(--paper);
  overflow:hidden;
  padding:.55rem;
  position:relative;
}
.theme-commerce .commerce-growthdesk-stage::before {
  border:1px solid color-mix(in srgb,var(--paper) 7%,transparent);
  border-radius:22px;
  content:"";
  inset:.55rem;
  pointer-events:none;
  position:absolute;
}
.theme-commerce .commerce-growthdesk-topline {
  align-items:center;
  display:flex;
  justify-content:space-between;
  padding:1.3rem 1.4rem 1.1rem;
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-growthdesk-topline > div {
  display:grid;
  gap:.25rem;
}
.theme-commerce .commerce-growthdesk-topline > div span {
  color:color-mix(in srgb,var(--paper) 52%,transparent);
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.theme-commerce .commerce-growthdesk-topline > div b {
  color:var(--paper);
  font-family:'Unbounded',sans-serif;
  font-size:1.05rem;
}
.theme-commerce .commerce-active-work {
  align-items:center;
  background:color-mix(in srgb,var(--commerce-dark) 7%,var(--carbon));
  border:1px solid color-mix(in srgb,var(--commerce-dark) 28%,var(--edge));
  border-radius:17px;
  display:grid;
  gap:1rem;
  grid-template-columns:auto minmax(0,1fr) auto;
  margin:0 .75rem;
  padding:1.15rem 1.2rem;
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-active-work > div {
  display:grid;
  gap:.25rem;
  min-width:0;
}
.theme-commerce .commerce-active-work > div span {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-commerce .commerce-active-work > div b {
  color:var(--paper);
  font-size:clamp(.9rem,1.4vw,1.08rem);
  line-height:1.4;
}
.theme-commerce .commerce-active-work strong {
  border:1px solid color-mix(in srgb,var(--warn-on-dark) 38%,transparent);
  border-radius:999px;
  color:var(--warn-on-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.61rem;
  letter-spacing:.07em;
  padding:.58rem .75rem;
  text-transform:uppercase;
  white-space:nowrap;
}
.theme-commerce .commerce-activity-trace {
  list-style:none;
  margin:1rem .75rem 0;
  padding:0;
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-activity-trace li {
  align-items:center;
  border-top:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(110px,.55fr) minmax(0,1.5fr) minmax(90px,.4fr);
  min-height:72px;
  padding:.85rem 1.2rem;
}
.theme-commerce .commerce-activity-trace li:nth-child(4) {
  background:color-mix(in srgb,var(--warn-on-dark) 4%,transparent);
}
.theme-commerce .commerce-activity-trace span {
  align-items:center;
  color:color-mix(in srgb,var(--paper) 62%,transparent);
  display:flex;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  font-weight:700;
  gap:.5rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.theme-commerce .commerce-activity-trace b {
  color:var(--paper);
  font-size:.94rem;
  line-height:1.4;
}
.theme-commerce .commerce-activity-trace em {
  color:var(--mint-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  font-style:normal;
  font-weight:700;
  justify-self:end;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.theme-commerce .commerce-activity-trace li:nth-child(4) em {
  color:var(--warn-on-dark);
}
.theme-commerce .commerce-growthdesk-stage .commerce-example-note {
  border-top:1px solid color-mix(in srgb,var(--paper) 10%,var(--edge));
  color:color-mix(in srgb,var(--paper) 48%,transparent);
  margin:0 .75rem;
  padding:1.1rem 1.2rem 1.35rem;
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-campaign-board::before {
  display:none;
}
.theme-commerce .commerce-campaign-board .commerce-growthdesk-topline {
  padding:1.3rem 0;
}
.theme-commerce .commerce-campaign-board .commerce-active-work {
  background:color-mix(in srgb,var(--commerce-dark) 10%,var(--steel));
  border:1px solid color-mix(in srgb,var(--commerce-dark) 30%,transparent);
  border-radius:12px;
  margin:0;
}
.theme-commerce .commerce-campaign-board .commerce-activity-trace,
.theme-commerce .commerce-campaign-board .commerce-example-note {
  margin-inline:0;
}
.theme-commerce .commerce-campaign-board .commerce-active-work strong {
  grid-column:3;
  justify-self:end;
}
.theme-commerce .commerce-activity-trace span svg {
  color:var(--commerce-dark);
  flex:none;
  opacity:.9;
}

/* Value receipt, pricing, brand, preview */
.theme-commerce .commerce-value-section {
  background:radial-gradient(circle at 72% 48%,color-mix(in srgb,var(--mint-dark) 5%,transparent),transparent 28%),
    var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--mint-dark) 18%,var(--edge));
  border-top:1px solid color-mix(in srgb,var(--mint-dark) 18%,var(--edge));
  color:var(--paper);
  overflow:hidden;
  padding:clamp(7rem,10vw,10rem) 0;
}
.theme-commerce .commerce-value-layout {
  align-items:center;
  display:grid;
  gap:clamp(3rem,7vw,7rem);
  grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr);
}
.theme-commerce .commerce-value-message {
  max-width:34rem;
}
.theme-commerce .commerce-value-message h2 {
  color:var(--paper);
  font-size:clamp(2.5rem,4.8vw,4.9rem);
  line-height:1.02;
  max-width:11ch;
}
.theme-commerce .commerce-private-receipt {
  background:var(--paper);
  border:1px solid color-mix(in srgb,var(--commerce-dark) 32%,var(--line));
  border-radius:28px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--paper) 92%,transparent),
    0 34px 96px color-mix(in srgb,var(--iron) 64%,transparent);
  color:var(--body);
  padding:clamp(1.3rem,3vw,2.25rem);
  position:relative;
}
.theme-commerce .commerce-private-receipt::after {
  border:1px solid color-mix(in srgb,var(--commerce-dark) 13%,transparent);
  border-radius:22px;
  content:"";
  inset:.55rem;
  pointer-events:none;
  position:absolute;
}
.theme-commerce .commerce-private-receipt > * {
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-private-receipt-head {
  align-items:center;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:1rem;
  justify-content:space-between;
  padding:0 0 1.2rem;
}
.theme-commerce .commerce-private-receipt-head span {
  color:var(--commerce-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.theme-commerce .commerce-private-receipt-result span {
  color:var(--ink);
  font-family:'Unbounded',sans-serif;
  font-size:clamp(1.35rem,2.8vw,2.35rem);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.12;
  max-width:13ch;
  text-transform:none;
}
.theme-commerce .commerce-private-receipt-head b {
  color:var(--ink);
  font-size:.9rem;
}
.theme-commerce .commerce-private-receipt-result {
  align-items:center;
  display:flex;
  gap:1rem;
  justify-content:space-between;
  padding:clamp(1.7rem,4vw,2.8rem) 0;
}
.theme-commerce .commerce-private-receipt-result strong {
  background:color-mix(in srgb,var(--mint-light) 12%,var(--paper));
  border:1px solid color-mix(in srgb,var(--mint-light-ink) 28%,var(--line));
  border-radius:999px;
  color:var(--mint-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  letter-spacing:.08em;
  padding:.65rem .8rem;
  text-transform:uppercase;
  white-space:nowrap;
}
.theme-commerce .commerce-private-receipt ul {
  border-top:1px solid var(--line);
  list-style:none;
  margin:0;
  padding:0;
}
.theme-commerce .commerce-private-receipt li {
  align-items:center;
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1fr) auto;
  min-height:64px;
  padding:.9rem .1rem;
}
.theme-commerce .commerce-private-receipt li + li {
  border-top:1px solid var(--line);
}
.theme-commerce .commerce-private-receipt li span {
  color:var(--body);
  line-height:1.45;
}
.theme-commerce .commerce-private-receipt li b {
  color:var(--mint-light-ink);
  font-family:'JetBrains Mono',monospace;
  font-size:.67rem;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.theme-commerce .commerce-private-receipt > p {
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.86rem;
  line-height:1.55;
  margin:0;
  padding-top:1.2rem;
}
.theme-commerce .commerce-pricing-cinematic {
  background:var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  color:var(--paper);
  padding:clamp(5.5rem,8vw,8rem) 0;
}
.theme-commerce .commerce-pricing-cinematic .commerce-pricing-layout {
  align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
}
.theme-commerce .commerce-pricing-cinematic h2 {
  color:var(--paper);
  font-size:clamp(2.45rem,4.5vw,4.6rem);
  line-height:1.04;
  max-width:12ch;
}
.theme-commerce .commerce-pricing-cinematic .btn-primary {
  background:var(--mint-dark);
  color:var(--iron);
  justify-self:end;
  white-space:nowrap;
}
.theme-commerce .commerce-brand-section {
  background:var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  color:var(--paper);
  padding:clamp(3.5rem,5vw,5rem) 0;
}
.theme-commerce .commerce-brand-layout {
  gap:clamp(2rem,5vw,5rem);
  grid-template-columns:minmax(0,1fr) auto;
}
.theme-commerce .commerce-brand-layout h2 {
  color:var(--paper);
  font-size:clamp(1.55rem,2.5vw,2.4rem);
  max-width:19ch;
}
.theme-commerce .commerce-brand-layout p {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
  max-width:48rem;
}
.theme-commerce .commerce-brand-layout .brand-ticker {
  align-items:center;
  background:color-mix(in srgb,var(--paper) 96%,var(--commerce-dark));
  border:1px solid color-mix(in srgb,var(--commerce-dark) 24%,var(--line));
  border-radius:20px;
  display:flex;
  gap:clamp(.7rem,2vw,1.4rem);
  justify-content:flex-end;
  padding:1rem 1.2rem;
  width:auto;
}
.theme-commerce .commerce-brand-layout .brand-logo-card {
  background:transparent;
  border:0;
  border-radius:0;
  flex:1 1 0;
  height:auto;
  min-height:52px;
  min-width:0;
  opacity:.7;
  padding:.35rem .65rem;
}
.theme-commerce .commerce-brand-layout .brand-logo-card + .brand-logo-card {
  border-left:1px solid var(--line);
}
.theme-commerce .commerce-brand-layout .brand-logo-card img {
  max-height:34px;
  max-width:105px;
}
.theme-commerce .commerce-preview-section {
  background:var(--iron);
  border-bottom:1px solid color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  border-top:1px solid color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  color:var(--paper);
}
.theme-commerce .commerce-preview-section .eyebrow {
  color:var(--commerce-dark);
}
.theme-commerce .commerce-preview-section h2 {
  color:var(--paper);
}
.theme-commerce .commerce-preview-section > .container-r > div:first-child > .text-ghost,
.theme-commerce .commerce-preview-section .commerce-store-label {
  color:color-mix(in srgb,var(--paper) 72%,transparent);
}
.theme-commerce .commerce-preview-section #riv-demo {
  color:var(--body);
}
.theme-commerce .commerce-preview-section #riv-demo .text-ghost {
  color:var(--muted);
}
.theme-commerce .commerce-preview-section #riv-demo .text-ghost-faint {
  color:var(--faint);
}
.theme-commerce .commerce-value-receipt::after {
  display:none;
}
.theme-commerce .commerce-value-receipt .commerce-private-receipt-head,
.theme-commerce .commerce-value-receipt ul {
  border-color:color-mix(in srgb,var(--paper) 12%,transparent);
}
.theme-commerce .commerce-value-receipt > p {
  border-color:color-mix(in srgb,var(--paper) 12%,transparent);
  color:color-mix(in srgb,var(--paper) 58%,transparent);
}
.theme-commerce .commerce-value-receipt .commerce-private-receipt-head span,
.theme-commerce .commerce-value-receipt .commerce-private-receipt-head b,
.theme-commerce .commerce-value-receipt .commerce-private-receipt-result span,
.theme-commerce .commerce-value-receipt li span {
  color:var(--paper);
}
.theme-commerce .commerce-value-receipt .commerce-private-receipt-result strong,
.theme-commerce .commerce-value-receipt li b {
  color:var(--mint-dark);
}

/* Site chrome inside the Commerce theme */
.theme-commerce footer {
  background:var(--iron);
  border-color:color-mix(in srgb,var(--commerce-dark) 18%,var(--edge));
  color:var(--paper);
}
.theme-commerce footer .text-ghost-mute {
  color:color-mix(in srgb,var(--paper) 58%,transparent);
}
.theme-commerce footer a:hover {
  color:var(--paper);
}
.theme-commerce .sticky-cta {
  max-width:calc(100vw - 2rem);
  right:max(1rem,env(safe-area-inset-right));
  white-space:nowrap;
}

@media (prefers-reduced-motion:no-preference) {

  /* Cinematic hero */
  .theme-commerce .commerce-hero-copy {
    animation:commerce-stage-arrive 460ms cubic-bezier(.16,1,.3,1) both;
  }

  /* Retail theater: stage, scenes, rule beam, outcome */
  .theme-commerce .commerce-retail-theater {
    animation:commerce-stage-arrive 520ms 70ms cubic-bezier(.16,1,.3,1) both;
  }
  .theme-commerce .commerce-workspace-scene.is-active {
    animation:commerce-workspace-scene-in 520ms cubic-bezier(.16,1,.3,1) both;
  }

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-scene-pair.is-active .commerce-scene-copy {
    animation:none;
  }
  .theme-commerce .commerce-scene-pair.is-active .commerce-scene-pair-stage {
    animation:commerce-work-surface-enter 560ms cubic-bezier(.16,1,.3,1) both;
  }
}

@media (min-width:681px) {

  /* Employee dock */
  .theme-commerce [data-commerce-employee] {
    flex:1 1 auto;
    min-width:0;
    padding-inline:.75rem;
  }
}

@media (min-width:981px) {

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-work-section.is-cinematic .commerce-scene-pair-stage {
    display:none;
  }
  .theme-commerce .commerce-scene-pair:nth-child(even) {
    grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  }
  .theme-commerce .commerce-scene-pair:nth-child(even) .commerce-scene-copy {
    grid-column:2;
    grid-row:1;
  }
  .theme-commerce .commerce-scene-pair:nth-child(even) .commerce-scene-pair-stage {
    grid-column:1;
    grid-row:1;
  }
}

@media (max-width:1180px) {

  /* Cinematic hero */
  .theme-commerce .commerce-hero-shell {
    gap:2rem;
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
  .theme-commerce .commerce-hero-copy h1 {
    font-size:clamp(2.55rem,3.7vw,3.3rem);
  }

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-work-layout {
    gap:3rem;
    grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr);
    padding-left:2.5rem;
    padding-right:2.5rem;
  }

  /* Playbook chapter: rule ledger */
  .theme-commerce .commerce-playbook-stage-inner {
    gap:3.5rem;
    grid-template-columns:minmax(0,.8fr) minmax(500px,1.2fr);
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
}

@media (max-width:1024px) {

  /* Cinematic hero */
  .theme-commerce .commerce-hero-shell {
    grid-template-columns:1fr;
    min-height:auto;
  }

  /* Playbook chapter: rule ledger */
  .theme-commerce .commerce-playbook-stage-inner,
  .theme-commerce .commerce-value-layout {
    grid-template-columns:1fr;
  }

  /* Value receipt, pricing, brand, preview */
  .theme-commerce .commerce-value-message {
    max-width:46rem;
  }
  .theme-commerce .commerce-value-message h2 {
    max-width:13ch;
  }
  .theme-commerce .commerce-pricing-cinematic .commerce-pricing-layout,
  .theme-commerce .commerce-brand-layout {
    grid-template-columns:1fr;
  }
  .theme-commerce .commerce-pricing-cinematic .btn-primary {
    justify-self:start;
  }
  .theme-commerce .commerce-brand-layout .brand-ticker {
    justify-content:flex-start;
  }
}

@media (max-width:980px) {

  /* Page theme and shared chapter type */
  .theme-commerce .commerce-work-intro .commerce-kicker,
  .theme-commerce .commerce-work-intro > p:not(.commerce-kicker) {
    grid-column:1;
  }

  /* Cinematic hero */
  .theme-commerce .commerce-cinematic-hero {
    min-height:auto;
  }
  .theme-commerce .commerce-hero-shell {
    gap:3.5rem;
    padding-bottom:4rem;
    padding-top:7.5rem;
  }
  .theme-commerce .commerce-hero-copy {
    max-width:46rem;
  }
  .theme-commerce .commerce-hero-copy h1 {
    max-width:15ch;
  }

  /* Retail theater: stage, scenes, rule beam, outcome */
  .theme-commerce .commerce-retail-theater {
    margin-inline:auto;
    max-width:780px;
    width:100%;
  }
  .theme-commerce .commerce-theater-scenes {
    perspective:900px;
  }

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-work-layout {
    display:block;
    grid-template-columns:1fr;
    padding-left:2.5rem;
    padding-right:2.5rem;
    row-gap:0;
  }
  .theme-commerce .commerce-scene-copy {
    animation:none !important;
    min-height:auto;
    opacity:1;
    padding:0;
    transition:none;
  }
  .theme-commerce .commerce-work-intro {
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
  }
  .theme-commerce .commerce-work-intro h2 {
    grid-column:1;
    max-width:18ch;
  }
  .theme-commerce .commerce-scene-pair,
  .theme-commerce .commerce-scene-pair:nth-child(even) {
    display:grid;
    gap:2.5rem;
    grid-template-columns:1fr;
    padding:4rem 0;
  }
  .theme-commerce .commerce-scene-pair:nth-child(even) .commerce-scene-copy,
  .theme-commerce .commerce-scene-pair:nth-child(even) .commerce-scene-pair-stage {
    grid-column:1;
    grid-row:auto;
  }
  .theme-commerce .commerce-scene-pair-stage {
    min-height:330px;
  }

  /* Work chapter: proof surfaces */
  .theme-commerce .commerce-scene-visual {
    animation:none !important;
    min-height:330px;
    opacity:1;
    position:relative;
    transition:none;
  }

  /* Playbook chapter: rule ledger */
  .theme-commerce .commerce-playbook-stage-inner {
    grid-template-columns:1fr;
  }
  .theme-commerce .commerce-playbook-message h2 {
    max-width:14ch;
  }
  .theme-commerce .commerce-playbook-orbit {
    justify-self:center;
    max-width:700px;
    width:100%;
  }
}

@media (max-width:680px) {

  /* Page theme and shared chapter type */
  .theme-commerce .commerce-work-intro > p:not(.commerce-kicker) {
    font-size:1rem;
    line-height:1.6;
  }

  /* Cinematic hero */
  .theme-commerce .commerce-cinematic-hero {
    overflow-x:clip;
  }
  .theme-commerce .commerce-hero-shell {
    gap:2.25rem;
    padding-bottom:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
    padding-top:6.5rem;
  }
  .theme-commerce .commerce-hero-copy h1 {
    max-width:12ch;
  }
  .theme-commerce .commerce-hero-support,
  .theme-commerce .commerce-hero-trust {
    font-size:16px;
  }
  .theme-commerce .commerce-hero-actions {
    align-items:stretch;
    flex-direction:column;
    margin-top:1.5rem;
  }
  .theme-commerce .commerce-hero-actions .btn-primary {
    width:100%;
  }
  .theme-commerce .commerce-hero-actions .btn-ghost {
    align-self:flex-start;
  }

  /* Retail theater: stage, scenes, rule beam, outcome */
  .theme-commerce .commerce-retail-theater {
    max-width:100%;
    width:100%;
  }
  .theme-commerce .commerce-theater-scenes {
    min-height:500px;
    perspective:none;
  }
  .theme-commerce .commerce-theater-artifact {
    min-height:475px;
    transform-style:flat;
  }
  /* Mobile drops the beam's desktop inset so the lane spans the stacked pair. */
  .theme-commerce .commerce-rule-beam {
    left:0;
    right:0;
    top:var(--commerce-rule-top,49%);
  }
  .theme-commerce .commerce-scene-outcome {
    bottom:2.5rem;
    font-size:.61rem;
    right:1%;
  }
  .theme-commerce .commerce-workspace-scene,
  .theme-commerce .commerce-theater-scene {
    min-height:500px;
  }
  .theme-commerce .commerce-theater-scene--shopper {
    --commerce-rule-top:76%;
  }
  .theme-commerce .commerce-theater-scene--cart,
  .theme-commerce .commerce-theater-scene--campaign {
    --commerce-rule-top:72%;
  }
  .theme-commerce .commerce-theater-scene--follow-up {
    --commerce-rule-top:77%;
  }
  .theme-commerce .commerce-theater-scene--social {
    --commerce-rule-top:81%;
  }
  .theme-commerce .commerce-theater-scene--shopper .commerce-rule-beam,
  .theme-commerce .commerce-theater-scene--campaign .commerce-rule-beam {
    left:0;
    right:0;
  }
  .theme-commerce .commerce-shopper-artifact .commerce-scene-work {
    right:0;
    top:26%;
    width:48%;
  }
  .theme-commerce .commerce-cart-artifact .commerce-scene-work {
    right:0;
    top:10%;
    width:44%;
  }
  .theme-commerce .commerce-theater-scene .commerce-thread-message {
    font-size:.8rem;
    padding:.75rem .8rem;
  }
  .theme-commerce .commerce-follow-up-artifact .commerce-scene-work {
    right:0;
    top:10%;
    width:45%;
  }
  .theme-commerce .commerce-social-artifact .commerce-scene-work {
    gap:.4rem;
    padding:.8rem .85rem;
    right:0;
    top:4%;
    width:46%;
  }
  .theme-commerce .commerce-theater-scene .commerce-scene-work h3 {
    font-size:.95rem;
  }
  .theme-commerce .commerce-theater-scene .commerce-scene-work p {
    font-size:.8rem;
    line-height:1.45;
  }
  .theme-commerce .commerce-theater-scene .commerce-scene-work > small {
    font-size:.64rem;
  }
  .theme-commerce .commerce-campaign-artifact .commerce-scene-work,
  .theme-commerce .commerce-website-artifact .commerce-scene-work {
    right:0;
    top:10%;
    width:44%;
  }
  .theme-commerce .commerce-theater-scene--website {
    --commerce-rule-top:76%;
  }

  /* Theater scene: shopper */
  .theme-commerce .commerce-shopper-question {
    left:0;
    top:0;
    width:100%;
  }
  .theme-commerce .commerce-shopper-product {
    height:230px;
    left:0;
    top:26%;
    width:47%;
  }

  /* Theater scene: cart */
  .theme-commerce .commerce-cart-object {
    grid-template-rows:auto auto auto;
    height:auto;
    left:0;
    padding:0;
    top:7%;
    width:53%;
  }
  .theme-commerce .commerce-cart-line img {
    aspect-ratio:auto;
    height:96px;
  }
  .theme-commerce .commerce-cart-object header b,
  .theme-commerce .commerce-cart-object footer b {
    font-size:.7rem;
  }
  .theme-commerce .commerce-cart-object header span,
  .theme-commerce .commerce-cart-object footer span {
    font-size:.56rem;
  }
  .theme-commerce .commerce-cart-object .commerce-cart-line strong {
    font-size:.9rem;
  }
  .theme-commerce .commerce-cart-object .commerce-cart-line small {
    font-size:.7rem;
  }
  .theme-commerce .commerce-cart-object header {
    padding:.6rem .7rem;
  }
  .theme-commerce .commerce-cart-line {
    gap:.5rem;
    grid-template-columns:1fr;
    padding:.7rem;
  }
  /* rivvet.css pads every <footer> 5.5rem on mobile to clear the sticky CTA;
     card-internal footers must keep their own geometry, hence !important. */
  .theme-commerce .commerce-cart-object footer {
    padding:.6rem .7rem !important;
  }

  /* Theater scene: follow-up */
  .theme-commerce .commerce-follow-up-thread {
    gap:.7rem;
    height:auto;
    left:0;
    padding:.9rem;
    top:7%;
    width:52%;
  }

  /* Theater scene: social */
  .theme-commerce .commerce-social-post {
    grid-template-rows:auto auto auto auto;
    height:auto;
    left:0;
    padding:0;
    top:4%;
    width:52%;
  }
  .theme-commerce .commerce-social-post img {
    height:112px;
  }
  .theme-commerce .commerce-social-post > p {
    font-size:.7rem;
    padding:.6rem .7rem .25rem;
  }
  /* Same rivvet.css mobile <footer> padding override as the cart card above. */
  .theme-commerce .commerce-social-post footer {
    font-size:.5rem;
    padding:.5rem .7rem .6rem !important;
  }
  .theme-commerce .commerce-social-review-note {
    font-size:.6rem;
  }
  .theme-commerce .commerce-social-review-actions button {
    font-size:.56rem;
    min-height:32px;
    padding:.3rem .5rem;
  }

  /* Theater scene: campaign */
  .theme-commerce .commerce-campaign-creative span,
  .theme-commerce .commerce-campaign-creative span:nth-child(2) {
    height:38px;
    opacity:1;
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    width:100%;
  }
  .theme-commerce .commerce-campaign-creative span::after {
    top:1rem;
  }
  .theme-commerce .commerce-campaign-creative {
    gap:.5rem;
    grid-template-columns:1fr;
    height:auto;
    left:0;
    top:7%;
    width:53%;
  }
  .theme-commerce .commerce-campaign-master {
    display:none;
  }
  .theme-commerce .commerce-campaign-creative li {
    padding:.7rem .75rem;
  }

  /* Theater scene: website */
  .theme-commerce .commerce-website-preview {
    left:0;
    top:7%;
    width:53%;
  }
  .theme-commerce .commerce-website-body {
    grid-template-columns:1fr;
  }
  .theme-commerce .commerce-website-body > div {
    gap:.4rem;
    padding:.85rem .9rem;
  }
  .theme-commerce .commerce-website-masthead {
    gap:.55rem;
    padding:.45rem .7rem;
  }
  .theme-commerce .commerce-website-masthead span {
    display:none;
  }
  .theme-commerce .commerce-website-cta {
    display:none;
    font-size:.6rem;
    padding:.4rem .65rem;
  }
  .theme-commerce .commerce-website-body img {
    height:90px;
  }

  /* Employee dock */
  .theme-commerce .commerce-workforce-dock {
    margin:.25rem auto 0;
    width:100%;
  }
  .theme-commerce .commerce-workspace-rail {
    max-width:100%;
  }
  .theme-commerce [data-commerce-employee] {
    flex-basis:118px;
    min-height:64px;
    min-width:44px;
  }

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-work-layout {
    gap:0;
    padding-left:1rem;
    padding-right:1rem;
  }
  .theme-commerce .commerce-scene-pair-stage::before {
    border-radius:17px;
  }
  .theme-commerce .commerce-scene-pair-stage::after {
    left:1.25rem;
    letter-spacing:.06em;
  }
  .theme-commerce .commerce-work-section {
    padding:4.5rem 0 6rem;
  }
  .theme-commerce .commerce-work-intro {
    margin-bottom:2.75rem;
  }
  .theme-commerce .commerce-work-intro h2 {
    font-size:clamp(1.85rem,8vw,2.35rem);
    letter-spacing:-.035em;
    max-width:none;
  }
  .theme-commerce .commerce-scene-pair,
  .theme-commerce .commerce-scene-pair:nth-child(even) {
    gap:1.75rem;
    padding:3rem 0;
  }
  .theme-commerce .commerce-scene-copy h3 {
    font-size:clamp(1.85rem,8.4vw,2.35rem);
    max-width:15ch;
  }
  .theme-commerce .commerce-scene-copy p {
    font-size:1rem;
  }
  .theme-commerce .commerce-scene-pair-stage {
    min-height:0;
  }
  .theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-employee {
    grid-column:1;
    grid-row:1;
    min-height:52px;
  }
  .theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-signal {
    grid-column:1;
    grid-row:2;
    min-height:132px;
  }
  .theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-rule {
    grid-column:1;
    grid-row:3;
    min-height:116px;
  }
  .theme-commerce .commerce-work-section [data-commerce-scene-visual] .commerce-scene-output {
    grid-column:1;
    grid-row:4;
    min-height:160px;
  }
  .theme-commerce .commerce-work-section [data-commerce-scene-visual="social"] .commerce-social-approval {
    grid-column:1;
    grid-row:4;
    min-height:132px;
  }
  .theme-commerce .commerce-work-section [data-commerce-scene-visual="social"] .commerce-scene-output {
    grid-column:1;
    grid-row:5;
    min-height:148px;
  }
  .theme-commerce .commerce-work-section .commerce-scene-output b {
    max-width:14ch;
  }
  .theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-proof-product {
    grid-column:1;
    grid-row:3;
    margin:.5rem 1.25rem;
    min-height:200px;
  }
  .theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-signal::before,
  .theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-rule::before,
  .theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-output::before {
    left:1.1rem;
    top:1.35rem;
  }
  .theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-employee {
    grid-column:1;
    grid-row:1;
  }
  .theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-signal {
    grid-column:1;
    grid-row:2;
  }
  .theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-rule {
    grid-column:1;
    grid-row:3;
  }
  .theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-social-approval {
    grid-column:1;
    grid-row:4;
    padding-bottom:1rem;
  }
  .theme-commerce .commerce-work-section .commerce-social-review-proof .commerce-scene-output {
    grid-column:1;
    grid-row:5;
    padding-top:1rem;
  }
  .theme-commerce .commerce-value-points li {
    font-size:.92rem;
  }

  /* Work chapter: proof surfaces */
  .theme-commerce .commerce-scene-visual {
    grid-auto-rows:minmax(0,1fr);
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:0;
  }
  .theme-commerce .commerce-scene-signal,
  .theme-commerce .commerce-scene-employee,
  .theme-commerce .commerce-scene-rule,
  .theme-commerce .commerce-social-approval,
  .theme-commerce .commerce-scene-output {
    bottom:auto;
    gap:.35rem;
    left:auto;
    margin-left:0;
    min-height:0;
    padding:.65rem .7rem;
    position:relative;
    right:auto;
    top:auto;
    width:auto;
  }
  .theme-commerce [data-commerce-scene-visual] .commerce-scene-signal,
  .theme-commerce [data-commerce-scene-visual] .commerce-scene-employee,
  .theme-commerce [data-commerce-scene-visual] .commerce-scene-rule,
  .theme-commerce [data-commerce-scene-visual] .commerce-social-approval,
  .theme-commerce [data-commerce-scene-visual] .commerce-scene-output {
    bottom:auto;
    gap:.35rem;
    left:auto;
    min-height:0;
    padding:.65rem .7rem;
    position:relative;
    right:auto;
    top:auto;
    width:auto;
  }
  .theme-commerce [data-commerce-scene-visual="social"] .commerce-scene-output {
    grid-column:1 / -1;
  }
  /* Work-chapter proof 1: the shopper conversation reads as a paper chat panel. */
  .theme-commerce .commerce-conversation-proof,
  .theme-commerce .commerce-social-review-proof {
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .theme-commerce .commerce-cart-journey-proof::after {
    display:none;
  }

  /* Playbook chapter: rule ledger */
  .theme-commerce .commerce-playbook-stage {
    padding:5rem 0;
  }
  .theme-commerce .commerce-playbook-stage-inner {
    gap:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  .theme-commerce .commerce-playbook-message h2 {
    font-size:clamp(2.1rem,10vw,3.1rem);
    max-width:none;
  }
  .theme-commerce .commerce-playbook-orbit {
    aspect-ratio:auto;
    min-height:0;
    padding:1rem;
  }
  .theme-commerce .commerce-playbook-orbit::before,
  .theme-commerce .commerce-playbook-orbit::after {
    display:none;
  }
  .theme-commerce .commerce-playbook-core {
    aspect-ratio:auto;
    border-radius:18px;
    height:auto;
    left:auto;
    margin:0;
    min-height:130px;
    position:relative;
    top:auto;
    transform:none;
  }
  .theme-commerce .commerce-playbook-orbit ul {
    display:grid;
    gap:.65rem;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:.75rem;
    position:relative;
  }
  .theme-commerce .commerce-playbook-orbit li,
  .theme-commerce .commerce-playbook-orbit li:nth-child(n) {
    bottom:auto;
    left:auto;
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    width:auto;
  }
  .theme-commerce .commerce-playbook-orbit li:nth-child(5) {
    grid-column:1 / -1;
  }
  .theme-commerce .commerce-rule-ledger .commerce-playbook-core {
    min-height:150px;
  }

  /* Growth Desk chapter */
  .theme-commerce .commerce-growthdesk-section {
    padding:5rem 0;
  }
  .theme-commerce .commerce-growthdesk-heading h2 {
    font-size:clamp(2.1rem,10vw,3.1rem);
    max-width:none;
  }
  .theme-commerce .commerce-growthdesk-heading {
    margin-bottom:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  .theme-commerce .commerce-growthdesk-stage {
    border-radius:22px;
    margin-left:1rem;
    margin-right:1rem;
  }
  .theme-commerce .commerce-growthdesk-stage::before {
    border-radius:17px;
  }
  .theme-commerce .commerce-growthdesk-topline {
    align-items:flex-start;
    flex-direction:column;
    gap:.85rem;
  }
  .theme-commerce .commerce-active-work {
    align-items:start;
    grid-template-columns:auto minmax(0,1fr);
  }
  .theme-commerce .commerce-active-work strong {
    grid-column:2;
    justify-self:start;
  }
  .theme-commerce .commerce-activity-trace li {
    align-items:start;
    gap:.4rem .75rem;
    grid-template-columns:minmax(90px,.55fr) minmax(0,1.45fr);
  }
  .theme-commerce .commerce-activity-trace em {
    grid-column:2;
    justify-self:start;
  }
  .theme-commerce .commerce-growthdesk-stage.commerce-campaign-board {
    border-radius:0;
    margin-inline:1rem;
  }
}

@media (max-width:640px) {

  /* Page theme and shared chapter type */
  .theme-commerce {
    max-width:100%;
    overflow-x:clip;
  }

  /* Cinematic hero */
  .theme-commerce .commerce-cinematic-hero {
    min-height:auto;
  }
  .theme-commerce .commerce-hero-shell {
    padding-bottom:3rem;
    padding-top:7.5rem;
  }

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-scene-pair-stage {
    max-width:100%;
  }

  /* Growth Desk chapter */
  .theme-commerce .commerce-growthdesk-stage {
    max-width:100%;
    overflow:hidden;
  }
  .theme-commerce .commerce-activity-trace li {
    grid-template-columns:1fr auto;
  }
  .theme-commerce .commerce-activity-trace li span,
  .theme-commerce .commerce-activity-trace li b {
    grid-column:1;
  }
  .theme-commerce .commerce-activity-trace li em {
    align-self:center;
    grid-column:2;
    grid-row:1 / span 2;
    justify-self:end;
  }

  /* Value receipt, pricing, brand, preview */
  .theme-commerce .commerce-private-receipt {
    border-radius:22px;
    max-width:100%;
    padding:1.2rem;
  }
  .theme-commerce .commerce-value-section {
    padding:5rem 0;
  }
  .theme-commerce .commerce-value-layout {
    gap:2.5rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  .theme-commerce .commerce-value-message h2,
  .theme-commerce .commerce-pricing-cinematic h2 {
    font-size:clamp(2.1rem,10vw,3.15rem);
    max-width:none;
  }
  .theme-commerce .commerce-private-receipt::after {
    border-radius:17px;
  }
  .theme-commerce .commerce-private-receipt-head {
    align-items:flex-start;
    flex-direction:column;
  }
  .theme-commerce .commerce-private-receipt-result {
    align-items:flex-start;
    flex-direction:column;
    padding:1.7rem 0;
  }
  .theme-commerce .commerce-private-receipt-result span {
    max-width:none;
  }
  .theme-commerce .commerce-private-receipt li {
    gap:.75rem;
  }
  .theme-commerce .commerce-pricing-cinematic .commerce-pricing-layout,
  .theme-commerce .commerce-brand-layout {
    gap:2rem;
  }
  .theme-commerce .commerce-pricing-cinematic .btn-primary {
    justify-self:stretch;
    width:100%;
  }
  .theme-commerce .commerce-brand-layout .brand-ticker {
    flex-wrap:wrap;
    gap:.4rem;
  }
  .theme-commerce .commerce-brand-layout .brand-logo-card {
    flex:1 1 88px;
    padding:.3rem .45rem;
  }
  .theme-commerce .commerce-brand-layout .brand-logo-card + .brand-logo-card {
    border-left:0;
  }
  .theme-commerce #commerce-preview {
    padding-bottom:max(6rem,calc(4rem + env(safe-area-inset-bottom)));
  }

  /* Site chrome inside the Commerce theme */
  .theme-commerce .sticky-cta.visible {
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {

  /* Cinematic hero */
  .theme-commerce .commerce-hero-actions .btn-primary,
  .theme-commerce .commerce-hero-actions .btn-ghost {
    transition:none;
  }

  /* Retail theater: stage, scenes, rule beam, outcome */
  .theme-commerce .commerce-workspace-scene.is-active {
    animation:none;
  }
  .theme-commerce .commerce-theater-scene [data-commerce-motion],
  .theme-commerce .commerce-rule-beam,
  .theme-commerce .commerce-scene-outcome {
    animation:none;
    opacity:1;
    transform:none;
    transition:none;
  }

  /* Theater scene: shopper */
  .theme-commerce .commerce-shopper-product,
  .theme-commerce .commerce-cart-object,
  .theme-commerce .commerce-follow-up-thread,
  .theme-commerce .commerce-social-post,
  .theme-commerce .commerce-campaign-creative {
    animation:none;
    opacity:1;
    transition:none;
  }

  /* Theater scene: campaign */
  .theme-commerce .commerce-campaign-creative span {
    animation:none;
    opacity:1;
    transform:none;
    transition:none;
  }

  /* Employee dock */
  .theme-commerce .commerce-workspace-track {
    transition:none;
  }
  .theme-commerce .commerce-workspace-rail {
    scroll-behavior:auto;
  }
  .theme-commerce [data-commerce-employee]:hover {
    transform:none;
  }
  .theme-commerce [data-commerce-employee] {
    transition:none;
  }

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-work-layout {
    gap:0;
    grid-template-columns:1fr;
  }
  .theme-commerce .commerce-scene-pair,
  .theme-commerce .commerce-scene-copy,
  .theme-commerce .commerce-scene-pair-stage {
    animation:none !important;
    clip-path:none !important;
    opacity:1;
    transform:none !important;
    transition:none !important;
  }

  /* Work chapter: proof surfaces */
  .theme-commerce .commerce-social-approval-state {
    animation:none;
    opacity:1;
    transform:none;
    transition:none;
  }
  .theme-commerce .commerce-social-approval-state.is-required {
    opacity:0;
  }
  .theme-commerce .commerce-social-approval-state.is-approved {
    opacity:1;
  }
  .theme-commerce [data-commerce-scene-visual] {
    animation:none !important;
    transform:none !important;
    transition:none !important;
  }
  .theme-commerce .commerce-scene-visual,
  .theme-commerce .commerce-scene-visual > div {
    animation:none !important;
    clip-path:none !important;
    opacity:1;
    transform:none !important;
    transition:none !important;
  }
}

/* ------------------------------------------------------------------
   Order-sensitive tail.
   Each rule below shares a property with an equally specific rule in
   one of the responsive blocks above and wins by document order, so it
   has to stay after them. Do not move these up into their chapters.
   ------------------------------------------------------------------ */

/* Theater scene: cart */
.theme-commerce .commerce-cart-signal,
.theme-commerce .commerce-follow-up-signal,
.theme-commerce .commerce-social-signal,
.theme-commerce .commerce-campaign-signal {
  left:0;
  top:0;
}

/* Theater scene: campaign */
.theme-commerce .commerce-campaign-master > span {
  background:var(--paper);
  color:var(--commerce-workspace-ink);
  display:grid;
  gap:.2rem;
  height:auto;
  inset:auto;
  opacity:1;
  padding:.75rem .85rem;
  position:static;
  transform:none;
  width:auto;
}

/* Theater scene: website */
.theme-commerce .commerce-website-signal {
  color:var(--commerce-dark);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  left:0;
  letter-spacing:.09em;
  position:absolute;
  text-transform:uppercase;
  top:0;
  z-index:5;
}

/* Work chapter: layout and copy */
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-signal {
  align-self:start;
  background:#FFFFFF;
  border:1px solid color-mix(in srgb,var(--body) 14%,transparent);
  border-radius:14px 14px 14px 4px;
  box-shadow:0 10px 30px color-mix(in srgb,var(--steel) 10%,transparent);
  color:var(--commerce-work-ink);
  grid-column:1;
  margin:1.5rem .5rem 1rem 1.5rem;
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-output {
  align-self:end;
  background:var(--mint-dark);
  border-radius:14px 14px 4px 14px;
  grid-column:3;
  margin:2.75rem 1.5rem 1rem .5rem;
}
.theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-rule {
  align-items:center;
  background:transparent;
  border-top:1px solid color-mix(in srgb,var(--body) 14%,transparent);
  flex-direction:row;
  gap:1rem;
  grid-column:1 / -1;
  justify-content:flex-start;
  padding:1.1rem 1.5rem 1.35rem;
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-signal {
  background:transparent;
  border-top:0;
  color:var(--paper);
  grid-column:1;
  grid-row:2;
  justify-content:flex-start;
  padding-top:4.2rem;
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-rule {
  background:transparent;
  border-top:0;
  color:var(--paper);
  grid-column:2;
  grid-row:2;
  justify-content:flex-start;
  padding-top:4.2rem;
  position:relative;
  z-index:1;
}
.theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-output {
  background:transparent;
  border-top:0;
  color:var(--paper);
  grid-column:3;
  grid-row:2;
  justify-content:flex-start;
  padding-top:4.2rem;
  position:relative;
  z-index:1;
}

/* Work chapter: proof surfaces */
/* Work-chapter proof 2: the cart journey reads as a three-step timeline. */
.theme-commerce .commerce-cart-journey-proof {
  background:color-mix(in srgb,var(--carbon) 92%,var(--steel));
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:52px minmax(0,1fr);
  position:relative;
}

/* Playbook chapter: rule ledger */
/* How chapter: the rule ledger keeps full-row rules with a leading gold marker. */
.theme-commerce .commerce-rule-ledger {
  aspect-ratio:auto;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:grid;
  gap:1px;
  grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr);
  min-height:430px;
  overflow:visible;
}
.theme-commerce .commerce-rule-ledger::before,
.theme-commerce .commerce-rule-ledger::after {
  display:none;
}
.theme-commerce .commerce-rule-ledger ul {
  display:grid;
  gap:1px;
  grid-template-columns:1fr;
  inset:auto;
  position:relative;
}
.theme-commerce .commerce-rule-ledger li,
.theme-commerce .commerce-rule-ledger li:nth-child(n) {
  align-items:center;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:0;
  border-top:0;
  box-shadow:none;
  color:var(--ink);
  display:flex;
  gap:.85rem;
  inset:auto;
  justify-content:flex-start;
  padding:1rem 1.25rem;
  position:relative;
  text-align:left;
  transform:none;
  width:auto;
}
.theme-commerce .commerce-rule-ledger li:first-child {
  border-top:1px solid var(--line);
}
.theme-commerce .commerce-playbook-inherits ul {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  list-style:none;
  margin:0;
  padding:0;
}
.theme-commerce .commerce-playbook-inherits li {
  align-items:center;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  display:flex;
  font-size:.76rem;
  font-weight:600;
  gap:.45rem;
  padding:.48rem .85rem;
}
.theme-commerce .commerce-rule-ledger .commerce-playbook-inherits li {
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  display:flex;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.76rem;
  font-weight:600;
  gap:.45rem;
  justify-content:flex-start;
  letter-spacing:0;
  padding:.48rem .85rem;
  text-transform:none;
  width:auto;
}

/* Growth Desk chapter */
/* What chapter: the Growth Desk board. */
.theme-commerce .commerce-campaign-board {
  background:transparent;
  border:0;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:0;
  border-top:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  box-shadow:none;
  padding:0;
}

/* Value receipt, pricing, brand, preview */
.theme-commerce .commerce-value-receipt {
  background:color-mix(in srgb,var(--carbon) 91%,var(--steel));
  border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);
  border-radius:12px;
  box-shadow:none;
  color:var(--paper);
}

@media (max-width:680px) {

  /* Work chapter: layout and copy */
  .theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-signal {
    grid-column:1;
    grid-row:2;
    margin:1.25rem 1.25rem .5rem;
  }
  .theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-output {
    align-self:stretch;
    grid-column:1;
    grid-row:4;
    margin:.5rem 1.25rem 1rem;
  }
  .theme-commerce .commerce-work-section .commerce-conversation-proof .commerce-scene-rule {
    flex-wrap:wrap;
    gap:.35rem .8rem;
    grid-column:1;
    grid-row:5;
    padding:1rem 1.25rem 1.2rem;
  }
  .theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-signal {
    grid-column:1;
    grid-row:2;
    padding:1rem 1.25rem 1rem 2.5rem;
  }
  .theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-rule {
    grid-column:1;
    grid-row:3;
    padding:1rem 1.25rem 1rem 2.5rem;
  }
  .theme-commerce .commerce-work-section .commerce-cart-journey-proof .commerce-scene-output {
    grid-column:1;
    grid-row:4;
    padding:1rem 1.25rem 1rem 2.5rem;
  }

  /* Work chapter: proof surfaces */
  /* Work-chapter proof 2: the cart journey reads as a three-step timeline. */
  .theme-commerce .commerce-cart-journey-proof {
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  /* Playbook chapter: rule ledger */
  /* How chapter: the rule ledger keeps full-row rules with a leading gold marker. */
  .theme-commerce .commerce-rule-ledger {
    grid-template-columns:1fr;
    min-height:0;
  }
  .theme-commerce .commerce-playbook-inherits li {
    font-size:.7rem;
    padding:.4rem .68rem;
  }
}

/* Motion keyframes */
@keyframes commerce-workspace-scene-in {
  from { opacity:0; transform:translate3d(0,18px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes commerce-stage-arrive {
  from { opacity:0; transform:translate3d(0,24px,0) scale(.985); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes commerce-work-surface-enter {
  from {
    clip-path:inset(0 0 10% 0);
    opacity:.72;
    transform:translate3d(0,16px,0);
  }
  to {
    clip-path:inset(0);
    opacity:1;
    transform:translate3d(0,0,0);
  }
}