/* Roles match the shop; the landing page retains its black editorial canvas. */
:root {
  --shop-accent: var(--dibzz-action);
  --shop-hover: var(--dibzz-action-hover);
  --shop-stage: var(--dibzz-stage-accent);
  --disabled-fill: var(--dibzz-disabled-light);
  --disabled-text: var(--dibzz-disabled-text-light);
}
:is(.site-header, .hero, .journey, .pillars, .why, .sell, .seller-impact, .waitlist-section, .footer) {
  --disabled-fill: var(--dibzz-disabled-dark);
  --disabled-text: var(--dibzz-disabled-text-dark);
}
:is(.phone-screen, .phone-flow-screen) {
  --disabled-fill: var(--dibzz-disabled-light);
  --disabled-text: var(--dibzz-disabled-text-light);
}
.header-action:not(.shop-cta), .phone-product button, .flow-primary,
.checkout-content button, .demo-next, .demo-screen-next {
  background: var(--dibzz-action);
  color: var(--dibzz-on-action);
  border-color: transparent;
  box-shadow: none;
}
.header-action:not(.shop-cta):hover, .phone-product button:hover:not(:disabled),
.flow-primary:hover:not(:disabled), .checkout-content button:hover:not(:disabled),
.demo-next:hover:not(:disabled), .demo-screen-next:hover:not(:disabled) {
  background: var(--dibzz-action-hover);
  color: var(--dibzz-on-action);
  border-color: transparent;
}
.shop-cta { background: var(--dibzz-secondary-dark); color: #fff; border-color: transparent; }
.shop-cta:hover { background: color-mix(in srgb, var(--dibzz-secondary-dark) 94%, white); }
.flow-secondary { background: var(--dibzz-secondary-light); border-color: transparent; color: #251F23; }
.phone-nav .active, .phone-nav .active b { color: var(--dibzz-text-accent); }
.phone-product button i, .payment-button i { border-color: currentColor; }
.payment-button i { border-right-color: transparent; }
.footer-top img { filter: none; }
button:disabled, button:disabled:hover, button:disabled:active,
button[aria-disabled="true"], a[aria-disabled="true"] {
  background: var(--disabled-fill);
  color: var(--disabled-text);
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}
.journey {
  --dibzz-wave-horizon: #000000;
}
.journey-backdrop { display: block; background: linear-gradient(165deg, #000 12%, var(--dibzz-accent-soft-dark) 65%, var(--dibzz-action)); }
.journey-waves-shade { background: linear-gradient(180deg, #0005, #0002 45%, #0006); }
/* Cards remain opaque; heading and gaps show the waves without competing with copy. */

/* Anchor the journey heading, rather than the padded section behind it.
   Its reveal fades only so a transform cannot shift the anchor after arrival. */
.has-motion .journey-heading[data-reveal] { transform: none; }
.journey-heading[id] {
  scroll-margin-top: calc(var(--site-header-height, 79px) + 24px);
}
@media (max-width: 600px) {
  .journey-heading[id] { scroll-margin-top: calc(var(--site-header-height, 114px) + 24px); }
}