/* Brand colour roles, rather than one multicolour background per section.
   White/paper = reading; navy/blue = structure; cyan = illustration support;
   pink = the closing invitation; yellow = actionable controls. */
[data-theme=C] .balanced-preview .cross-ribbon {
  background:#fff;
  border-block:1px solid #dfe6f1;
}
.balanced-preview .marquee {color:var(--navy)}

[data-theme=C] .balanced-preview .about {background:#fff}
[data-theme=C] .balanced-preview[data-about-surface=cyan] .about {background:#eaf9fd}
[data-theme=C] .balanced-preview .about-orbit {
  background:linear-gradient(140deg,#b5edf7 0%,var(--cyan) 100%);
}

/* Keep the entire text-bearing field dark, with only a cool light at the edge. */
[data-theme=C] .balanced-preview .services:after {
  background:
    radial-gradient(ellipse at 110% 12%,#00c8ff2e 0%,#00c8ff00 42%),
    linear-gradient(116deg,var(--navy) 0%,var(--navy) 44%,#264cb2 78%,#3261c6 100%);
}
.balanced-preview .case-shortcuts a,
.balanced-preview .case-shortcuts a:hover,
[data-theme=C] .balanced-preview .service-bottom .service-scope-note {color:#fff}
.balanced-preview .case-shortcuts a:hover {border-bottom-color:var(--yellow)}

[data-theme=C] .balanced-preview .flow {background:var(--paper)}
[data-theme=C] .balanced-preview .faq,
[data-theme=C] .balanced-preview .faq:before {background:#fff}
[data-theme=C] .balanced-preview .questions {
  border-block:1px solid #d5dce8;
  border-radius:0;
}

/* One pink family in the invitation. No yellow-to-pink peach intermediary. */
[data-theme=C] .balanced-preview .contact {
  background:linear-gradient(125deg,#fff1f7 0%,#fce0ec 100%);
}
.balanced-preview .contact h2 em {background:none}
[data-theme=C] .balanced-preview .contact-button {
  background:var(--yellow);
  color:var(--navy);
}
[data-theme=C] .balanced-preview .contact-button i {
  background:var(--navy);
  color:#fff;
}
[data-theme=C] .balanced-preview .contact-button:hover {
  background:var(--navy);
  color:#fff;
}
[data-theme=C] .balanced-preview .contact-button:hover i {
  background:var(--yellow);
  color:var(--navy);
}

/* Review-only controls. The A/B comparison changes only the About background. */
.balance-dock {gap:0;padding:6px 9px;max-width:calc(100% - 40px)}
.balance-dock .surface-choice {display:flex;gap:2px;margin:0 5px}
.balance-dock .surface-choice button {
  color:#334269;background:transparent;border:0;border-radius:2px;
  font:inherit;font-weight:700;padding:9px 10px;cursor:pointer;
}
.balance-dock .surface-choice button[aria-pressed=true] {background:var(--navy);color:white}
.balance-dock a {padding-inline:8px}
.balance-dock button:focus-visible {outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:700px) {
  .balance-dock {justify-content:center;row-gap:6px}
  .balance-dock .surface-choice {flex-basis:100%;justify-content:center;order:2;margin:0}
  .balance-dock .surface-choice button {min-height:44px;font-size:11px;padding:8px 10px}
  .balanced-preview.reading-intro .balance-dock {position:fixed;inset:auto 10px 10px;width:calc(100% - 20px);max-width:none;margin:0;z-index:70;padding:5px 7px}
  .balanced-preview.reading-intro .balance-dock>*:not(.surface-choice) {display:none}
  .balanced-preview.reading-intro .balance-dock .surface-choice {flex-basis:auto;gap:5px}
  .balanced-preview.reading-intro .floating-contact {opacity:0;pointer-events:none}
  [data-theme=C] .balanced-preview .services:after {
    background:
      radial-gradient(ellipse at 120% 16%,#00c8ff3d 0%,#00c8ff00 45%),
      linear-gradient(135deg,var(--navy) 0%,var(--navy) 50%,#264cb2 100%);
  }
}