/* Supplemental utilities not present in the original site's compiled Tailwind bundle */

/* Accessibility: the site's own --muted-foreground (42% lightness) scored 4.37:1
   against its light backgrounds — just under WCAG AA's 4.5:1 minimum. Darkened
   slightly; visually near-identical, passes contrast everywhere it's used. */
:root { --muted-foreground: 120 10% 36%; }

/* scroll-reveal (replaces the site's original React-driven fade/rise-in animation).
   Content is visible by default — main.js only "arms" (hides) an element right
   before animating it in, so a JS failure never leaves content permanently hidden. */
.-bottom-5 { bottom: -1.25rem; }
.-right-5 { right: -1.25rem; }
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }
.bg-slate-800 { background-color: rgb(30 41 59); }
.bg-\[hsl\(220_35\%_6\%\)\] { background-color: hsl(220 35% 6%); }
.border-white\/30 { border-color: rgb(255 255 255 / 0.3); }
.border-white\/40 { border-color: rgb(255 255 255 / 0.4); }
.hover\:bg-primary\/10:hover { background-color: hsl(var(--primary) / 0.1); }
.hover\:scale-105:hover { transform: scale(1.05); }
.left-3 { left: 0.75rem; }
.max-w-\[340px\] { max-width: 340px; }
.mb-14 { margin-bottom: 3.5rem; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.p-5 { padding: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-\[hsl\(var\(--gold-dark\)\)\] { color: hsl(var(--gold-dark)); }
.text-primary-foreground\/90 { color: hsl(var(--primary-foreground) / 0.9); }
.text-red-400 { color: rgb(248 113 113); }
.text-red-600 { color: rgb(220 38 38); }
.w-\[calc\(100vw-3rem\)\] { width: calc(100vw - 3rem); }

@media (min-width: 640px) {
  .sm\:ml-auto { margin-left: auto; }
  .sm\:w-auto { width: auto; }
}
@media (min-width: 768px) {
  .md\:p-10 { padding: 2.5rem; }
  .md\:p-8 { padding: 2rem; }
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}