/* =========================================================
   DISPLAY & LAYOUT
   ========================================================= */
.d-grid {
   display: grid;
}

.d-flex {
   display: flex;
}

.d-inline-flex {
   display: inline-flex;
}

.flex-wrap {
   flex-wrap: wrap;
}

.items-center {
   align-items: center;
}

.justify-center {
   justify-content: center;
}

.place-center {
   place-items: center;
}

.gap-8 {
   gap: 8px;
}

.gap-10 {
   gap: 10px;
}

.gap-12 {
   gap: 12px;
}

.gap-16 {
   gap: 16px;
}

/* =========================================================
   GRID TEMPLATES
   ========================================================= */
.grid-auto-160 {
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* =========================================================
   SPACING
   ========================================================= */
.pad-10-12 {
   padding: 10px 12px;
}

.pad-6-10 {
   padding: 6px 10px;
}

.m-0 {
   margin: 0;
}

.maxw {
   max-width: 1600px;
}

.maxw-900 {
   max-width: 900px;
}

.m-30 {
   margin: 30px;
}

.mt-50 {
   margin-top: 50px;
}

.mb-30 {
   margin-bottom: 30px;
}

.mx-30 {
   margin-left: 30px;
   margin-right: 30px;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.font-800 {
   font-weight: 800;
}

.font-700 {
   font-weight: 700;
}

.text-center {
   text-align: center;
}

.text-xs {
   font-size: var(--text-xs, 11px);
}

.text-muted {
   color: var(--color-text-muted, var(--color-text-secondary));
}

.text-xl {
   font-size: var(--text-xl, 18px);
}

.no-underline {
   text-decoration: none;
}

.ul-disc {
   list-style: disc;
}

/* =========================================================
   COLORS & BACKGROUND
   ========================================================= */
.bg-gold {
   background: var(--color-gold, var(--color-gold));
}

.bg-card {
   background: var(--card-bg, var(--color-surface));
}

.text-gold-ink {
   color: var(--color-gold-ink, var(--color-gold-ink));
}

/* =========================================================
   BORDERS & RADIUS
   ========================================================= */
.bd-1-gold {
   border: 1px solid var(--color-gold, var(--color-gold));
}

.bd-1-gray {
   border: 1px solid var(--color-border, var(--color-border));
}

.bd-1-light {
   border: 1px solid var(--color-border, var(--color-border));
}

.radius-pill {
   border-radius: 999px;
}

/* =========================================================
   META / TAGS
   ========================================================= */
.meta-tag {
   padding: 6px 10px;
   border: 1px solid var(--color-border, var(--color-border));
   border-radius: var(--radius-full, 999px);
   font-size: var(--text-xs, 13px);
}

.hero-logo {
   width: min(1040px, 80vw);
   margin: min(200px, 60vw) auto;
}

.sr {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   width: 1px;
   overflow: hidden;
   white-space: nowrap;
}

.pad {
   padding: clamp(12px, 4vw, 24px)
}

/* =========================================================
   DEFINITION LIST
   ========================================================= */
.dt-strong dt {
   font-weight: 800;
}

.dd-muted dd {
   margin: 0;
   color: var(--color-text-muted);
}

/* =========================================================
   CARD
   ========================================================= */
.card {
   background: var(--card-bg, var(--color-surface));
   border: 1px solid var(--card-border, var(--color-border));
}

/* =========================================================
   SECTION TITLES
   ========================================================= */
.section-my-50 {
   margin-top: 50px;
   margin-bottom: 50px;
}

/* =========================================================
   ACCESSIBILITY / SENTINEL
   ========================================================= */
.sentinel {
   width: 1px;
   height: 1px;
   overflow: hidden;
   position: absolute;
   left: -9999px;
   top: auto;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
   .motion-none {
      transition: none !important;
   }
}