/* CertRanger — site-level overrides.
 *
 * This file is OURS, not generated. Page HTML is baked from the Claude Design
 * exports and is overwritten on every re-bake, so any tweak that must survive
 * a design update belongs here. Loaded after the design system CSS.
 *
 * If a tweak here is later made in the design source too, remove it here so
 * the two don't compound (e.g. a rotation applied twice).
 */

/* About page — the "note from the team" letter sits on the desk at a slight
 * angle, like it was set down rather than placed square.
 *
 * The tilt is safe at every width: the parent .cr-desk is overflow:hidden, so
 * the rotated corners are clipped and can never cause horizontal page scroll.
 *
 * --reveal-base-transform is read by js/site.js so the scroll-reveal animation
 * composes with this rotation instead of overwriting it.
 */
.cr-letter {
  --reveal-base-transform: rotate(-1.15deg);
  transform: rotate(-1.15deg);
  transform-origin: center center;
}

/* Header hover states.
 *
 * The design source declares these as `style-hover` attributes. The bake emits
 * the class hooks (.scp0/.scp1/.scp2) onto the elements but drops the rules
 * themselves, so without this block the header has no hover feedback at all.
 * The class names come from the bake and are stable across re-exports.
 *
 *   .scp0 — nav links (How it works / Pricing / About)
 *   .scp1 — outline pills ("Need to provide a COI?", the overlap chips on /)
 *   .scp2 — the burger button
 *
 * !important is required, not sloppiness: the bake writes each element's resting
 * colors into its inline style attribute, which outranks any stylesheet rule.
 * The pages' own media queries override the same markup the same way.
 */
.scp0:hover {
  color: var(--text-brand) !important;
  border-bottom-color: var(--accent) !important;
}

.scp1:hover {
  background: var(--surface-inset) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.scp2:hover {
  background: var(--surface-inset) !important;
  border-color: var(--border-strong) !important;
}