/*
 * Styles the prerendered page needs that the design system does not provide:
 * the calls to action as anchors, and the pricing toggle.
 *
 * The toggle is a checkbox plus sibling selectors rather than a script,
 * because this page ships no JavaScript. Both price sets are in the HTML —
 * which also means a crawler and a link preview see both.
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── calls to action ─────────────────────────────────────────────────────── */
.dh-cta {
  display: inline-block;
  font: var(--weight-medium) var(--size-label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--edge-neon);
  clip-path: var(--chamfer-sm);
  text-decoration: none;
  transition: var(--transition-control);
}
.dh-cta-lg { padding: 13px 22px; font-size: var(--size-body-sm); }

.dh-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  box-shadow: var(--glow-magenta);
}
.dh-cta-primary:hover { background: var(--magenta-300); border-color: var(--magenta-300); }

.dh-cta-secondary {
  background: transparent;
  color: var(--text-chrome);
  box-shadow: var(--glow-cyan);
}
.dh-cta-secondary:hover { color: var(--cyan-100); border-color: var(--cyan-100); }

/* ── pricing toggle, no JavaScript ───────────────────────────────────────── */
.dh-yearly-input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dh-yearly-label {
  display: inline-flex;
  border: 1px solid var(--edge-neon);
  clip-path: var(--chamfer-sm);
  cursor: pointer;
  font: var(--weight-medium) var(--size-label)/1 var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.dh-yearly-label > span {
  padding: 8px 14px;
  color: var(--text-label);
  transition: var(--transition-control);
}

/* Keyboard focus must be visible: the input itself is off-screen. */
.dh-yearly-input:focus-visible + .dh-yearly-label {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Monthly is the default state. */
.dh-yearly-off { background: var(--cyan-500); color: var(--void-900); }
.dh-yearly-on { background: transparent; }
.dh-price-year { display: none !important; }

/* Checked: yearly. Both halves swap, and so do the figures in every card. */
.dh-yearly-input:checked + .dh-yearly-label .dh-yearly-off {
  background: transparent;
  color: var(--text-label);
}
.dh-yearly-input:checked + .dh-yearly-label .dh-yearly-on {
  background: var(--cyan-500);
  color: var(--void-900);
}
/*
 * `:has()` lets a checked input three levels up switch the cards. Guarded by
 * @supports so a browser without it keeps the monthly prices visible rather
 * than showing both sets stacked.
 */
@supports selector(:has(*)) {
  body:has(.dh-yearly-input:checked) .dh-price-month { display: none !important; }
  body:has(.dh-yearly-input:checked) .dh-price-year { display: flex !important; }
  body:has(.dh-yearly-input:checked) span.dh-price-year { display: inline !important; }
}