/* ============================================================
   Protein Outfitters — Shared design system
   ============================================================
   Imported by every prototype + the master website.
   Aesthetic: Apple iOS glass + Uber confident CTAs + Airbnb editorial.
   Responsive: desktop → tablet → phone. Light + dark.
   File 15.
   ============================================================ */

/* ---------- Tokens (light) ---------- */
:root {
  /* Surfaces */
  --bg: #f9f9f8;
  --surface: #ffffff;
  --surface-2: #f3f4f3;
  --surface-3: #e8eae8;
  --hairline: rgba(12,20,16,0.08);
  --hairline-2: rgba(12,20,16,0.16);
  --glass-bg: rgba(255,255,255,0.72);
  --glass-bg-strong: rgba(255,255,255,0.92);
  --glass-blur: saturate(140%) blur(18px);
  --glass-border: rgba(255,255,255,0.5);

  /* Ink */
  --ink: #0c1410;
  --ink-2: #5b6660;
  --ink-3: #8b9590;
  --ink-inverse: #ffffff;

  /* Brand */
  --brand: #061b0e;
  --brand-2: #1b3022;
  --brand-3: #2a4231;
  --brand-grad: linear-gradient(135deg, #061b0e 0%, #1b3022 100%);

  /* Accent */
  --accent: #2f7d49;
  --accent-2: #2a6a3f;
  --accent-soft: #cfe9d3;
  --accent-subtle: rgba(47,125,73,0.08);

  /* Status */
  --warn: #b1641a;
  --warn-soft: #fbe8d2;
  --over: #b03333;
  --over-soft: #fadcdc;
  --info: #2b5a85;
  --info-soft: #d6e3f0;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', monospace;

  --tracking-tight: -0.025em;
  --tracking-snug: -0.018em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-extra-wide: 0.12em;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --text-4xl: 44px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  /* Spacing scale (8pt grid with halfsteps) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Radius (organic squircle feel) */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-5: 24px;
  --r-6: 32px;
  --r-pill: 9999px;

  /* Shadows (ambient — soft glow, not dark stain) */
  --sh-0: 0 1px 0 var(--hairline);
  --sh-1: 0 4px 12px -4px rgba(12,20,16,0.06);
  --sh-2: 0 12px 28px -10px rgba(12,20,16,0.10), 0 4px 12px -4px rgba(12,20,16,0.06);
  --sh-3: 0 24px 40px -16px rgba(12,20,16,0.12), 0 4px 12px -4px rgba(12,20,16,0.06);
  --sh-4: 0 48px 80px -24px rgba(12,20,16,0.18), 0 8px 24px -8px rgba(12,20,16,0.08);
  --sh-cta: 0 12px 28px -10px rgba(6,27,14,0.45);
  --sh-inset: inset 0 0 0 1px var(--hairline);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.2s;
  --dur-slow: 0.4s;

  /* Layout */
  --max-w-content: 1280px;
  --max-w-narrow: 920px;
  --max-w-mobile: 460px;
}

/* ---------- Tokens (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"], :root[data-theme="dark"] {
    --bg: #0a0d0b;
    --surface: #131815;
    --surface-2: #1c221e;
    --surface-3: #252b27;
    --hairline: rgba(255,255,255,0.08);
    --hairline-2: rgba(255,255,255,0.16);
    --glass-bg: rgba(28,34,30,0.72);
    --glass-bg-strong: rgba(28,34,30,0.92);
    --glass-border: rgba(255,255,255,0.08);

    --ink: #f5f6f5;
    --ink-2: #b5beb8;
    --ink-3: #7a847e;
    --ink-inverse: #0c1410;

    --brand: #cfe9d3;
    --brand-2: #b8dabb;
    --brand-3: #9bc59f;
    --brand-grad: linear-gradient(135deg, #cfe9d3 0%, #9bc59f 100%);

    --accent: #5fa472;
    --accent-soft: rgba(95,164,114,0.18);
    --accent-subtle: rgba(95,164,114,0.10);

    --sh-0: 0 1px 0 rgba(0,0,0,0.4);
    --sh-1: 0 4px 12px -4px rgba(0,0,0,0.4);
    --sh-2: 0 12px 28px -10px rgba(0,0,0,0.5), 0 4px 12px -4px rgba(0,0,0,0.3);
    --sh-3: 0 24px 40px -16px rgba(0,0,0,0.6), 0 4px 12px -4px rgba(0,0,0,0.3);
    --sh-cta: 0 12px 28px -10px rgba(95,164,114,0.4);
  }
}

/* ---------- Reset basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Type ---------- */
.eyebrow { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--tracking-extra-wide); color: var(--ink-3); }
.display-md { font-size: var(--text-3xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.display-lg { font-size: var(--text-4xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.display-xl { font-size: var(--text-5xl); font-weight: 900; letter-spacing: var(--tracking-tight); line-height: 1.0; }
.display-2xl { font-size: var(--text-6xl); font-weight: 900; letter-spacing: var(--tracking-tight); line-height: 0.98; }
.h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-snug); line-height: 1.15; margin: 0 0 var(--s-2); }
.h2 { font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-snug); line-height: 1.2; margin: 0 0 var(--s-2); }
.h3 { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-normal); line-height: 1.3; margin: 0 0 var(--s-1); }
.label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.body { font-size: var(--text-base); color: var(--ink-2); line-height: 1.6; }
.body-sm { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55; }
.mono { font-family: var(--font-mono); }

/* ---------- Glass nav (top bar) ---------- */
.glass-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- Glass card ---------- */
.glass {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-4);
  box-shadow: var(--sh-2);
  border: 1px solid var(--hairline);
}

/* ---------- Surface card (no glass; for content blocks on bg) ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-4);
  box-shadow: var(--sh-0);
  overflow: hidden;
}
.card--lifted { box-shadow: var(--sh-2); }
.card--floating { box-shadow: var(--sh-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 12px 22px; border-radius: var(--r-3);
  font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking-normal);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--brand-grad); color: var(--ink-inverse); box-shadow: var(--sh-cta); }
.btn--primary:hover { box-shadow: var(--sh-cta), 0 0 0 4px rgba(6,27,14,0.06); }

.btn--secondary { background: var(--surface); color: var(--ink); box-shadow: var(--sh-inset); }
.btn--secondary:hover { background: var(--surface-2); }

.btn--ghost { background: transparent; color: var(--ink); padding: 10px 16px; }
.btn--ghost:hover { background: var(--surface-2); }

.btn--danger { background: var(--over-soft); color: var(--over); }
.btn--danger:hover { background: var(--over); color: white; }

.btn--lg { padding: 16px 28px; font-size: var(--text-md); border-radius: var(--r-4); }
.btn--xl { padding: 20px 32px; font-size: var(--text-lg); border-radius: var(--r-4); }
.btn--sm { padding: 8px 14px; font-size: var(--text-xs); border-radius: var(--r-2); }

.btn--block { width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
/* Run 40: full-width buttons must allow wrapping so long labels (e.g.
   "Confirm with Apple Pay → $100", "Submit & schedule a call") don't
   overflow on narrow viewports. Base .btn is white-space: nowrap. */
.btn--apple-pay {
  background: black; color: white;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
}
.btn--apple-pay::before { content: ''; width: 16px; height: 18px;
  background: white; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z' fill='white'/></svg>") center/contain no-repeat; }

/* ---------- Input ---------- */
.input, .select, .textarea {
  width: 100%; padding: 12px 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  font-size: var(--text-base);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--accent-subtle);
}
.textarea { min-height: 80px; resize: vertical; }
.select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230c1410' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }

/* ---------- Pills / Chips / Badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: var(--text-xs); font-weight: 700;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--hairline);
}
.pill--active { background: var(--brand); color: var(--ink-inverse); border-color: transparent; }
.pill--accent { background: var(--accent-soft); color: var(--brand); border-color: transparent; }
.pill--warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill--over { background: var(--over-soft); color: var(--over); border-color: transparent; }

/* ---------- Toggle ---------- */
.toggle {
  width: 44px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); position: relative; cursor: pointer; flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out);
  border: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--dur-base) var(--ease-out);
}
.toggle[aria-checked="true"] { background: var(--brand); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); }

/* ---------- Live ticker (Bloomberg-style horizontal scroll) ---------- */
.ticker {
  background: var(--brand);
  color: var(--ink-inverse);
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  font-size: var(--text-sm);
  font-weight: 600;
}
.ticker-row { display: inline-flex; gap: var(--s-6); animation: ticker 60s linear infinite; padding-left: 100%; }
.ticker-item { display: inline-flex; align-items: center; gap: var(--s-2); }
.ticker-item .arrow { font-size: 10px; }
.ticker-item .up { color: #cfe9d3; }
.ticker-item .down { color: #ffb3b3; }
@keyframes ticker { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-100%,0,0); } }

/* ---------- Layout primitives ---------- */
.container { max-width: var(--max-w-content); margin-inline: auto; padding-inline: var(--s-6); }
.container--narrow { max-width: var(--max-w-narrow); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grid { display: grid; gap: var(--s-5); }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fitting product grid */
.grid-auto { display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ---------- Spacing utilities ---------- */
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); } .mt-16 { margin-top: var(--s-16); }
.mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); }
.py-12 { padding-block: var(--s-12); } .py-16 { padding-block: var(--s-16); } .py-20 { padding-block: var(--s-20); } .py-24 { padding-block: var(--s-24); }

/* ---------- Hover lift utility ---------- */
.lift { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }

/* ---------- Animal product tile ---------- */
.tile {
  position: relative;
  border-radius: var(--r-5);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tile-photo {
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  position: relative;
}
.tile-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
}
.tile-badge {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 1;
}
.tile-heart {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  cursor: pointer;
  border: 0;
}
.tile-info {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-1);
}
.tile-info .breed { font-size: var(--text-xs); font-weight: 800; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.tile-info .title { font-size: var(--text-md); font-weight: 700; letter-spacing: var(--tracking-snug); }
.tile-info .meta { font-size: var(--text-sm); color: var(--ink-2); }
.tile-info .price { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-2); }
.tile-info .price-amount { font-size: var(--text-xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
.tile-info .price-unit { font-size: var(--text-xs); color: var(--ink-3); margin-left: 2px; }
.tile-info .price-status { font-size: var(--text-xs); font-weight: 700; color: var(--accent-2); }

/* ---------- Step indicator ---------- */
.steps { display: flex; gap: var(--s-2); align-items: center; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-2); }
.step-dot.is-active { background: var(--brand); width: 28px; border-radius: 4px; }
.step-dot.is-done { background: var(--accent); }

/* ---------- Section spacing ---------- */
.section { padding-block: var(--s-16); }
@media (min-width: 768px) { .section { padding-block: var(--s-20); } }
@media (min-width: 1100px) { .section { padding-block: var(--s-24); } }

.section-head { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-8); }
.section-head h2 { margin: 0; }

/* ---------- Photo placeholders (gradients standing in for real photography) ---------- */
/* Real photography from Adobe Stock — licensed for commercial use */
.photo-bg-beef { background: #1a0d08 url('/ribeye.jpg') center/cover; }
.photo-bg-angus { background: #1a0d08 url('/angus.jpg') center/cover; }
.photo-bg-wagyu { background: #160805 url('/wagyu.jpg') center/cover; }
.photo-bg-hereford { background: #200806 url('/hereford.jpg') center/cover; }
.photo-bg-hog { background: #2c1612 url('/hog.jpg') center/cover; }
.photo-bg-lamb { background: #2c1414 url('/lamb.jpg') center/cover; }
.photo-bg-poultry { background: #2c1f0c url('/poultry.jpg') center/cover; }
.photo-bg-grass { background: #0e1206 url('/ranch.jpg') center/cover; }
.photo-bg-sunset { background: #0a0608 url('/ranch.jpg') center/cover; }
.photo-bg-venison { background: #1a1208 url('/venison.jpg') center/cover; }
.photo-bg-processor { background: #1a1a1a url('/processor.jpg') center/cover; }
.photo-bg-farmer { background: #2a1a14 url('/farmer.jpg') center/cover; }

/* ---------- Phone-frame container (mobile-app prototypes look good on desktop) ---------- */
.phone-frame {
  width: 100%; max-width: 460px; margin-inline: auto;
  background: var(--surface);
  border-radius: var(--r-6);
  overflow: hidden;
  box-shadow: var(--sh-3);
  position: relative;
  min-height: 100vh;
}
@media (min-width: 768px) {
  .phone-frame {
    margin-block: var(--s-12);
    border-radius: var(--r-6);
    border: 1px solid var(--hairline);
    min-height: auto;
  }
  body.has-phone-frame { background: linear-gradient(180deg, #e8eae8 0%, #d4d8d4 100%); }
}

/* ---------- Sticky bottom bar (mobile checkout / dock) ---------- */
.sticky-bar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--hairline);
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(12,20,16,0.05);
}

/* ---------- Modal / sheet ---------- */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12,20,16,0.55);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-end; justify-content: center;
}
.sheet-overlay.is-open { display: flex; animation: fadeIn var(--dur-base) var(--ease-out); }
.sheet {
  width: 100%; max-width: 720px;
  background: var(--surface);
  border-radius: var(--r-6) var(--r-6) 0 0;
  max-height: 92vh;
  overflow: auto;
  animation: slideUp var(--dur-base) var(--ease-out);
}
@media (min-width: 768px) {
  .sheet-overlay { align-items: center; }
  .sheet { border-radius: var(--r-6); max-height: 88vh; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--ink-inverse);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--sh-3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), bottom var(--dur-base) var(--ease-out);
  z-index: 200;
}
.toast.is-visible { opacity: 1; bottom: 44px; }

/* ---------- Helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--ink-2); }
.text-faint { color: var(--ink-3); }
.text-accent { color: var(--accent-2); }
.text-warn { color: var(--warn); }
.text-over { color: var(--over); }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* ---------- Responsive grid breakpoints ---------- */
@media (max-width: 1100px) {
  .grid-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid-cols-4, .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .display-2xl { font-size: var(--text-5xl); }
  .display-xl { font-size: var(--text-4xl); }
}
@media (max-width: 600px) {
  .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
  .container { padding-inline: var(--s-4); }
  .display-2xl { font-size: var(--text-4xl); }
  .display-xl { font-size: var(--text-3xl); }
  .section { padding-block: var(--s-12); }
}

/* ---------- Print + reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}