/* Shared public-site controls, drawn from the GTS RS Coach Console.
   Keep controls square and static: contrast and state communicate the action. */
.soul-refined {
  --control-red: #d6232a;
  --control-red-hover: #b91b22;
  --control-panel: #181b20;
  --control-border: #555d68;
  --control-type: 'Barlow', system-ui, sans-serif;
}

.soul-refined .button,
.soul-refined .header :is(.nav-plan, .nav-login),
.soul-refined .menu-toggle {
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  max-width: 100%;
  padding: 13px 20px;
  gap: 22px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--control-panel);
  color: #f3f3ef;
  font: 700 .875rem/1.35 var(--control-type);
  letter-spacing: .075em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.soul-refined .button { display: inline-flex; }
.soul-refined .button.button-red,
.soul-refined .header .nav-plan {
  background: var(--control-red);
  border-color: var(--control-red);
  color: #fff;
}
.soul-refined .button > span[aria-hidden=true],
.soul-refined .button:not(:has(> span[aria-hidden=true]))::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 0 0 30px;
  padding-left: 17px;
  border-left: 1px solid #ffffff50;
  color: inherit;
  font: 400 1.25rem/1 var(--control-type);
  letter-spacing: 0;
}
.soul-refined .button:not(:has(> span[aria-hidden=true]))::after { content: '\2192'; }

/* Secondary actions stay quieter than the red enquiry controls. */
.soul-refined .text-link {
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 10px;
  border-bottom-width: 1px;
  border-radius: 0;
  font-family: var(--control-type);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 150ms ease;
}
.soul-refined .text-link > span[aria-hidden=true],
.soul-refined .text-link:not(:has(> span[aria-hidden=true]))::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  color: inherit;
  font: 400 1rem/1 var(--control-type);
}
.soul-refined .text-link:not(:has(> span[aria-hidden=true]))::after { content: '\2192'; }

.soul-refined .header :is(.nav-plan, .nav-login) {
  display: inline-flex;
  justify-content: center;
  padding: 11px 15px;
  min-height: 44px;
  font-size: .75rem;
  letter-spacing: .06em;
}
.soul-refined .header .nav-login { background: transparent; }
.soul-refined .header .nav-plan[aria-current=page] {
  box-shadow: inset 0 -3px #fff;
  color: #fff;
}
.soul-refined .menu-toggle { min-height: 44px; padding: 10px 13px; }
.soul-refined .menu-toggle[aria-expanded=true] { border-color: var(--control-red); background: #262027; }
.soul-refined .menu-icon { color: #ff777d; }

/* The interactive examples use the Console's segmented control language. */
.soul-refined .coaching-chapters,
.soul-refined .product-hub-demo .hub-tabs {
  padding: 5px;
  gap: 4px;
  background: #0b0d10;
  border-bottom: 1px solid #3d424c;
}
.soul-refined .coaching-chapters button,
.soul-refined .product-hub-demo .hub-tabs button,
.soul-refined .trace-controls button {
  min-height: 48px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #b6bac3;
  padding: 12px;
  font: 600 .8125rem/1.4 var(--control-type);
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: normal;
  cursor: pointer;
}
.soul-refined .coaching-chapters button[aria-pressed=true],
.soul-refined .product-hub-demo .hub-tabs button[aria-selected=true],
.soul-refined .trace-controls button[aria-pressed=true] {
  background: #272d36;
  border-color: #67717f;
  box-shadow: inset 0 -2px var(--control-red);
  color: #fff;
}
.soul-refined .coaching-chapters button > span { color: #a5adb8; }
.soul-refined .coaching-chapters button[aria-pressed=true] > span { color: #ff777d; }
.soul-refined :is(.replay-corner, .gallery-navigation button, .lightbox button) {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--control-border);
  border-radius: 0;
  background: var(--control-panel);
  color: #f3f3ef;
  font: 600 .8125rem/1.4 var(--control-type);
  letter-spacing: .055em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (hover: hover) {
  .soul-refined .button:hover,
  .soul-refined .header .nav-login:hover,
  .soul-refined .menu-toggle:hover,
  .soul-refined :is(.replay-corner, .gallery-navigation button, .lightbox button):hover:not(:disabled):not([aria-disabled=true]) {
    background: #272c34;
    border-color: #8b95a3;
    color: #fff;
    transform: none;
  }
  .soul-refined .button.button-red:hover,
  .soul-refined .header .nav-plan:hover { background: var(--control-red-hover); border-color: var(--control-red-hover); color: #fff; }
  .soul-refined .text-link:hover { color: inherit; border-bottom-color: currentColor; }
  .soul-refined :is(.coaching-chapters, .hub-tabs, .trace-controls) button:hover { background: #272d36; color: #fff; }
}
.soul-refined .button:active,
.soul-refined .header :is(.nav-plan, .nav-login):active { background: #101216; border-color: #8b95a3; transform: none; }
.soul-refined .button.button-red:active,
.soul-refined .header .nav-plan:active { background: #97171d; border-color: #97171d; }
.soul-refined :is(.button, button, .text-link, .nav-plan, .nav-login):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #171b20;
}
.soul-refined :is(button, .button)[disabled],
.soul-refined :is(button, .button)[aria-disabled=true] { opacity: .45; cursor: default; }

@media (max-width: 960px) {
  .soul-refined .header :is(.nav-plan, .nav-login) { width: 100%; margin-top: 8px; min-height: 48px; }
}
@media (max-width: 480px) {
  .soul-refined .button { padding: 13px 16px; gap: 16px; font-size: .8125rem; min-height: 50px; }
  .soul-refined .button > span[aria-hidden=true],
  .soul-refined .button:not(:has(> span[aria-hidden=true]))::after { padding-left: 12px; flex-basis: 26px; }
  .soul-refined .text-link { gap: 12px; }
  .soul-refined .coaching-chapters button { flex: 1 1 7rem; padding: 11px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .soul-refined :is(.button, .text-link, .menu-toggle, .nav-plan, .nav-login) { transition: none; }
}