/*
  UNBOND · Prompt refinement layer · 05.10.2026
  Scope: reference-led headline typography, checkout-CTA consistency,
  measured spacing changes and the teal accent remap.
  Protected: copy, assets, URLs, tracking, consent and interaction logic.
*/

:root {
  --unbond-teal: #159A82;
  --unbond-teal-line: rgba(21, 154, 130, .55);
  --unbond-teal-subtle: rgba(21, 154, 130, .13);
  --unbond-night: #0D111A;
  --unbond-number-gold: #D2A63B;

  /* Existing accent aliases now resolve to UNBOND turquoise. */
  --gold: var(--unbond-teal);
  --g-gold: var(--unbond-teal);
  --g-yellow: var(--unbond-teal);
  --g-gold-line: var(--unbond-teal-line);
  --ux-focus: var(--unbond-teal);
  --ux-line-active: var(--unbond-teal-line);
  --focus: var(--unbond-teal);
}

/* Screenshot A: the display pairing is exclusive to the Hero-H1. */
html body[data-page] main#main-content .hero h1,
html body[data-page] main#main-content .hero h1 * {
  font-family: "Instrument Sans", Arial, sans-serif !important;
  font-size: clamp(2.68rem, 4.78vw, 3.82rem) !important;
  font-weight: 560 !important;
  letter-spacing: -.045em !important;
  line-height: 1.01 !important;
}

html body[data-page] main#main-content .hero h1 .sage-phrase {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.032em !important;
}

/* Screenshot C: move the existing recognition heading upward, without moving content. */
html body .hybrid-recognition {
  padding-top: clamp(40px, 3vw, 48px) !important;
}

html body .hybrid-recognition .hybrid-heading {
  margin-bottom: 24px !important;
}

/* Screenshot B: compact the phase controls in two deliberate 8px rhythm steps. */
html body .program-section .steps-title {
  margin-top: 16px !important;
}

html body .program-section .steps-hint {
  margin-bottom: 0 !important;
}

html body .phase-list {
  gap: 8px !important;
}

html body .phase-toggle {
  min-height: 68px !important;
  padding-block: 12px !important;
}

html body .module-steps li {
  padding-block: 12px !important;
}

/* Header purchase action is the visual source for every existing checkout CTA. */
html body a[href*="checkout-ds24.com"] {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: 11px 18px;
  border: 1px solid var(--nothing-bordeaux) !important;
  border-radius: 4px !important;
  background: rgba(125, 38, 63, .13) !important;
  box-shadow: none !important;
  color: var(--nothing-text) !important;
  font-family: "Space Mono", monospace !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .065em !important;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.25, .1, .25, 1), border-color .18s cubic-bezier(.25, .1, .25, 1), color .18s cubic-bezier(.25, .1, .25, 1) !important;
}

html body a[href*="checkout-ds24.com"]::after {
  content: "↗";
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  margin-left: .2em;
  color: #d9879d;
  font-size: 1.15em;
  line-height: 1;
  transition: transform .18s cubic-bezier(.25, .1, .25, 1), color .18s cubic-bezier(.25, .1, .25, 1);
}

html body a[href*="checkout-ds24.com"]:hover {
  border-color: var(--nothing-bordeaux-hover) !important;
  background: var(--nothing-bordeaux) !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
}

html body a[href*="checkout-ds24.com"]:hover::after {
  color: #fff;
  transform: translate(2px, -2px);
}

html body a[href*="checkout-ds24.com"]:focus-visible {
  outline: 3px solid var(--unbond-teal) !important;
  outline-offset: 4px !important;
}

html body a[href*="checkout-ds24.com"] [data-price] {
  display: inline-block;
  margin-inline: .25em;
  padding-inline: .5em;
  border-inline: 1px solid rgba(232, 232, 232, .30) !important;
  color: var(--unbond-number-gold) !important;
  font-size: inherit !important;
  white-space: nowrap;
}

html body .comparison-action .core-cta {
  width: min(100%, 300px);
  min-height: 52px !important;
  padding: 11px 18px !important;
  border: 1px solid var(--nothing-bordeaux) !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .8rem !important;
}

html body .comparison-action .core-cta:hover {
  border-color: var(--nothing-bordeaux-hover) !important;
  background: var(--nothing-bordeaux) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .comparison-action .core-cta:focus-visible {
  outline: 3px solid var(--unbond-teal) !important;
  outline-offset: 4px !important;
}

html body .final-inner .core-cta [data-price] {
  font-size: 1.38em !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Screenshot 2: close the pain-point panel and quotation without moving copy. */
html body .pain-intro {
  margin-bottom: 16px !important;
  padding-bottom: 24px !important;
}

html body .why-lead {
  margin-top: 0 !important;
}

/* Gold is reserved for the explicitly requested numeric anchors only. */
html body :is(.phase-num strong, .step-number, .method-index, [data-price]) {
  color: var(--unbond-number-gold) !important;
}

html body :is(.method-index, .step-number) {
  border-color: var(--unbond-teal-line) !important;
  background: transparent !important;
}

/* Decorative and interactive accents become teal. */
html body :is(
  .product-label,
  .hybrid-eyebrow,
  .yellow-label,
  .eyebrow,
  .hero-eyebrow,
  .faq-kicker,
  .toxicometer-kicker,
  .program-kicker,
  .akut-bruecke-eyebrow,
  .crisis-strip > span:first-child,
  .brand-dot,
  .oflip-tag,
  .stat-num,
  .recognition-icon,
  .evidence-icon,
  .mcard-open,
  .elastic-cta,
  .text-button,
  .price-secondary,
  .comparison-action-eyebrow,
  .t-topic,
  .t-mark,
  .t-avatar,
  .faq-number,
  .faq-chevron,
  .footer-grid a:not(.brand):hover,
  .footer-link:hover
) {
  color: var(--unbond-teal) !important;
}

html body :is(
  .crisis-strip,
  .elastic-item.is-active,
  .mcard:hover,
  .mcard:focus-visible,
  .price-card,
  .comparison-action-card,
  .lookinside-inner,
  .comparison-details--journey,
  .comparison-details--journey:hover,
  .comparison-details--journey:focus-within,
  .faq-list details[open],
  .comparison-details[open],
  .method-boundary[open]
) {
  border-color: var(--unbond-teal-line) !important;
}

html body :is(.comparison-instruction, .comparison-summary-action) {
  border-color: var(--unbond-teal-line) !important;
  background: var(--unbond-teal-subtle) !important;
  color: var(--unbond-teal) !important;
}

html body .comparison-details--journey:hover .comparison-summary-action {
  background: rgba(21, 154, 130, .20) !important;
}

html body :is(.comparison-details summary span, .method-boundary summary::after) {
  color: var(--unbond-teal) !important;
}

html body :is(.faq-chevron::before, .faq-chevron::after) {
  background: var(--unbond-teal) !important;
}

html body .faq-list details[open] .faq-chevron {
  border-color: var(--unbond-teal) !important;
  background: transparent !important;
}

html body :is(.phase-plus, .phase:hover .phase-plus) {
  border-color: var(--unbond-teal-line) !important;
  color: var(--unbond-teal) !important;
}

html body .phase:hover .phase-plus,
html body .phase.is-open .phase-plus {
  background: var(--unbond-teal) !important;
  color: var(--unbond-night) !important;
}

html body :is(.comparison-details summary:focus-visible, .comparison-details--journey > summary:focus-visible, .phase-toggle:focus-visible, .oflip-card:focus-visible .oflip-inner, .oflip-card:focus-visible .oflip-front, .header-beacon-brand:focus-visible, .header-beacon-cta:focus-visible) {
  outline-color: var(--unbond-teal) !important;
}

html body :is(.oflip-back .oflip-tag, .program-facts > div > span, .faq-number) {
  color: var(--unbond-teal) !important;
}

html body :is(.eb-badge, .t-avatar) {
  border-color: var(--unbond-teal-line) !important;
  background: var(--unbond-teal-subtle) !important;
  color: var(--unbond-teal) !important;
}

html body :is(.oflip-card, .oflip-front, .oflip-back, .safe-space-mini) {
  border-color: var(--unbond-teal-line) !important;
}

html body .mcard {
  border-color: var(--unbond-teal-line) !important;
}

html body .t-mark {
  color: rgba(21, 154, 130, .72) !important;
}

html body :focus-visible {
  outline-color: var(--unbond-teal) !important;
}

@media (max-width: 760px) {
  html body[data-page] main#main-content .hero h1,
  html body[data-page] main#main-content .hero h1 * {
    font-size: clamp(2.34rem, 10.15vw, 2.72rem) !important;
    line-height: 1.03 !important;
  }

  html body .hybrid-recognition {
    padding-top: 32px !important;
  }

  html body .phase-toggle {
    min-height: 76px !important;
    padding: 12px 16px 12px 18px !important;
  }

  html body a[href*="checkout-ds24.com"]:not(.header-beacon-cta) {
    min-height: 52px;
    font-size: .74rem !important;
  }

  html body .header-beacon-cta {
    min-height: 40px;
    padding: 9px 10px;
    font-size: .67rem !important;
  }
}