/*
 * ═══════════════════════════════════════════════════════
 *   MYSHON · SIRE GROUP — Design System Tokens
 *   colors_and_type.css
 * ═══════════════════════════════════════════════════════
 *
 * Fonts: Load via Google Fonts
 * @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600&family=DM+Mono:wght@300;400&display=swap');
 */

/* ───────────────────────────────────────────────────────
   BASE COLOR TOKENS — Sire Group Brand Palette
─────────────────────────────────────────────────────── */
:root {

  /* Navy Scale */
  --sire-navy-dd:   #101E30;   /* Darkest: cover backgrounds, deep sections */
  --sire-navy-d:    #1C2B42;   /* Dark navy: alternate dark sections */
  --sire-navy:      #2B3D5C;   /* Core navy: headers, table heads, badges */
  --sire-navy-l:    #3A5070;   /* Light navy: secondary elements on dark */

  /* Pink / Rose Scale */
  --sire-pink-d:    #C94060;   /* Dark pink: summary rows, emphasis */
  --sire-pink:      #E8607A;   /* Core pink: primary accent, CTA, badges */
  --sire-pink-l:    #F08096;   /* Light pink: secondary accent, italic text on dark */
  --sire-pink-pale: rgba(232, 96, 122, 0.08);  /* Subtle pink fill */

  /* Neutral / Warm Scale */
  --white:          #FAFAF9;   /* Slightly warm white — main light surface */
  --off-white:      #F3F1EC;   /* Cream — secondary light surface */
  --warm-light:     #EDE9E1;   /* Warm beige — tertiary, exit cards */
  --grey-warm:      #C4BEB4;   /* Warm grey — disabled, secondary borders */
  --grey-mid:       #8E8880;   /* Mid grey — secondary text, labels */
  --charcoal:       #343028;   /* Warm dark — body text on light surfaces */
  --ink:            #181410;   /* Near-black — deepest text, disclaimer bg */

  /* Functional / Semantic */
  --positive:       #2E7A50;   /* Green — yield, positive data */
  --positive-pale:  #EAF3EE;   /* Green tint — positive callout backgrounds */
  --gold:           #B08840;   /* Gold — premium / alternative accent */
  --gold-light:     #CEAB68;   /* Light gold */
  --gold-pale:      #F4EDDC;   /* Gold tint — soft premium backgrounds */

  /* ─────────────────────────────────────────────────────
     SEMANTIC / ROLE TOKENS
  ───────────────────────────────────────────────────── */

  /* Foregrounds */
  --fg-primary:     var(--ink);
  --fg-secondary:   var(--charcoal);
  --fg-tertiary:    var(--grey-mid);
  --fg-disabled:    var(--grey-warm);
  --fg-inverse:     var(--white);
  --fg-accent:      var(--sire-pink);
  --fg-accent-muted:var(--sire-pink-l);

  /* Backgrounds */
  --bg-page:        var(--white);
  --bg-subtle:      var(--off-white);
  --bg-warm:        var(--warm-light);
  --bg-dark:        var(--sire-navy-dd);
  --bg-navy:        var(--sire-navy);
  --bg-accent:      var(--sire-pink);
  --bg-accent-pale: var(--sire-pink-pale);

  /* Borders */
  --border-light:   rgba(0, 0, 0, 0.06);
  --border-mid:     rgba(0, 0, 0, 0.10);
  --border-dark:    rgba(255, 255, 255, 0.05);
  --border-dark-mid:rgba(255, 255, 255, 0.10);
  --border-accent:  rgba(232, 96, 122, 0.25);
  --border-accent-strong: var(--sire-pink);

  /* States */
  --state-positive: var(--positive);
  --state-positive-bg: var(--positive-pale);

  /* ─────────────────────────────────────────────────────
     SPACING SCALE
  ───────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;

  /* Section padding (horizontal + vertical) */
  --section-pad-v: 64px;
  --section-pad-h: 60px;

  /* Grid gap (the "grout" between cells) */
  --grid-gap:  2px;

  /* Max content width */
  --content-max: 940px;

  /* ─────────────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────────────── */
  /* None — all elements are sharp-cornered */
  --radius:    0px;

  /* ─────────────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────────────── */

  /* Font Families */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Outfit', system-ui, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  /* Font Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;

  /* Base */
  --text-base-size: 13px;
  --text-line-height: 1.6;

  /* Display Scale (Cormorant Garamond) */
  --text-d1: 68px;    /* Cover h1 */
  --text-d2: 52px;    /* CTA headline */
  --text-d3: 40px;    /* Section title */
  --text-d4: 38px;    /* Sub-section title */
  --text-d5: 34px;    /* Large stat value */
  --text-d6: 22px;    /* Cover subtitle / lead display */
  --text-d7: 18px;    /* Section lead italic */

  /* Stat Display (Cormorant Garamond, numerals) */
  --stat-xl:  42px;   /* Cover stats */
  --stat-lg:  34px;   /* USP hero stats */
  --stat-md:  24px;   /* Mini card yield */
  --stat-sm:  14px;   /* Spec value */

  /* Body / UI Scale (Outfit) */
  --text-body:   13px;
  --text-body-sm:12px;
  --text-body-xs:11.5px;
  --text-label:  9px;
  --text-label-sm:8px;
  --text-label-xs:7.5px;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-label:   0.18em;
  --tracking-eyebrow: 0.22em;
  --tracking-wide:    0.30em;
  --tracking-widest:  0.32em;
}

/* ───────────────────────────────────────────────────────
   BASE RESET
─────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base-size);
  font-weight: var(--weight-light);
  line-height: var(--text-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ───────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES
─────────────────────────────────────────────────────── */

/* Display headings — Cormorant Garamond */
.d1, h1.display {
  font-family: var(--font-display);
  font-size: var(--text-d1);
  font-weight: var(--weight-light);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.d2, h2.display {
  font-family: var(--font-display);
  font-size: var(--text-d2);
  font-weight: var(--weight-light);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}

.d3, h3.display {
  font-family: var(--font-display);
  font-size: var(--text-d3);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
}

.d4 {
  font-family: var(--font-display);
  font-size: var(--text-d4);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Section title (used with .sec-title class) */
.sec-title {
  font-family: var(--font-display);
  font-size: var(--text-d3);
  font-weight: var(--weight-regular);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

/* Section lead — italic serif */
.sec-lead {
  font-family: var(--font-display);
  font-size: var(--text-d7);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--fg-tertiary);
  margin-bottom: 36px;
  max-width: 600px;
  line-height: 1.6;
}

/* Eyebrow / section tag */
.eyebrow, .sec-tag {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.eyebrow::before, .sec-tag::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--sire-pink);
  flex-shrink: 0;
}

/* Body text */
.body-text, p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  line-height: 1.85;
  color: var(--fg-secondary);
  margin-bottom: 18px;
}

/* Small body */
.body-sm {
  font-size: var(--text-body-sm);
  line-height: 1.75;
  font-weight: var(--weight-light);
}

/* Label — uppercase tracking */
.label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.label-sm {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

/* Stat value — Cormorant display */
.stat-xl {
  font-family: var(--font-display);
  font-size: var(--stat-xl);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--sire-pink-l);
}

.stat-lg {
  font-family: var(--font-display);
  font-size: var(--stat-lg);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
}

/* Mono / data */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
}

/* Footnote */
.footnote {
  font-family: var(--font-body);
  font-size: 9.5px;
  line-height: 1.75;
  color: var(--fg-tertiary);
  font-style: italic;
  font-weight: var(--weight-light);
}

/* ───────────────────────────────────────────────────────
   SECTION SCAFFOLDING
─────────────────────────────────────────────────────── */
.page {
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--bg-page);
}

.sec {
  padding: var(--section-pad-v) var(--section-pad-h);
  border-bottom: 1px solid var(--border-light);
}

.sec-dark {
  background: var(--sire-navy-dd);
  color: var(--white);
  border-bottom-color: var(--border-dark);
}

.sec-dark .sec-title,
.sec-dark .sec-lead { color: var(--white); }
.sec-dark .sec-lead { color: rgba(250, 250, 249, 0.45); }
.sec-dark .body-text { color: rgba(250, 250, 249, 0.6); }

.sec-navy {
  background: var(--sire-navy);
  color: var(--white);
  border-bottom-color: var(--border-dark);
}

.sec-cream { background: var(--off-white); }
.sec-warm  { background: var(--warm-light); }

/* ───────────────────────────────────────────────────────
   BUTTONS
─────────────────────────────────────────────────────── */
.btn-pink {
  display: inline-block;
  background: var(--sire-pink);
  color: var(--white);
  padding: 15px 38px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  border-radius: var(--radius);
}

.btn-pink:hover { background: var(--sire-pink-l); }

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--sire-pink-l);
  padding: 15px 38px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid rgba(232, 96, 122, 0.35);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s;
  border-radius: var(--radius);
}

.btn-outline:hover { border-color: var(--sire-pink); }

.btn-navy {
  display: inline-block;
  background: var(--sire-navy);
  color: var(--white);
  padding: 15px 38px;
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  border-radius: var(--radius);
}

.btn-navy:hover { background: var(--sire-navy-l); }

/* ───────────────────────────────────────────────────────
   SIRE CHEVRON SHAPE (CSS only)
   clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%, 30% 50%)
─────────────────────────────────────────────────────── */
.sire-chevron-shape {
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%, 30% 50%);
}

/* ───────────────────────────────────────────────────────
   PULSE ANIMATION
─────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.8); }
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sire-pink);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────
   CALLOUT BOX
─────────────────────────────────────────────────────── */
.callout {
  padding: 24px 28px;
  border: 1px solid var(--border-accent);
  background: var(--bg-accent-pale);
  margin: 24px 0;
}

.callout-tag {
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sire-pink);
  margin-bottom: 8px;
  font-weight: var(--weight-medium);
}

/* ───────────────────────────────────────────────────────
   FEATURE CHIPS
─────────────────────────────────────────────────────── */
.feat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid rgba(43, 61, 92, 0.15);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sire-navy);
  font-weight: var(--weight-regular);
}

.feat::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sire-pink);
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────
   YIELD BAR
─────────────────────────────────────────────────────── */
.yb-track {
  height: 3px;
  background: rgba(0, 0, 0, 0.07);
  position: relative;
}

.yb-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, var(--sire-pink), var(--sire-pink-l));
}

/* ───────────────────────────────────────────────────────
   COVER PILL
─────────────────────────────────────────────────────── */
.cover-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(232, 96, 122, 0.35);
  background: rgba(232, 96, 122, 0.06);
  width: fit-content;
}

.cover-pill-text {
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sire-pink-l);
  font-weight: var(--weight-medium);
}

/* ═══════════════════════════════════════════════════════
   ELITE TOKENS — Easing · Shadows · Durations · Gradients
═══════════════════════════════════════════════════════ */

:root {

  /* ─── EASING FUNCTIONS ───────────────────────────── */
  --ease-smooth:   cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --ease-out:      cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-in-out:   cubic-bezier(0.42, 0.00, 0.58, 1.00);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --ease-expo:     cubic-bezier(0.19, 1.00, 0.22, 1.00);
  --ease-back:     cubic-bezier(0.34, 1.26, 0.64, 1.00);

  /* ─── TRANSITION DURATIONS ───────────────────────── */
  --dur-instant:  80ms;
  --dur-fast:     160ms;
  --dur-mid:      280ms;
  --dur-slow:     450ms;
  --dur-xslow:    750ms;

  /* ─── SHADOW SCALE ────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(24,20,16,0.04);
  --shadow-sm:   0 2px 8px rgba(24,20,16,0.05), 0 1px 3px rgba(24,20,16,0.04);
  --shadow-md:   0 4px 20px rgba(24,20,16,0.07), 0 2px 6px rgba(24,20,16,0.04);
  --shadow-lg:   0 10px 40px rgba(24,20,16,0.09), 0 4px 14px rgba(24,20,16,0.05);
  --shadow-xl:   0 20px 60px rgba(24,20,16,0.12), 0 8px 24px rgba(24,20,16,0.07);
  --shadow-pink: 0 8px 32px rgba(232,96,122,0.22);
  --shadow-dark: 0 8px 40px rgba(0,0,0,0.35);

  /* ─── GRADIENT TOKENS ────────────────────────────── */
  --grad-pink-h:    linear-gradient(90deg, var(--sire-pink), var(--sire-pink-l));
  --grad-pink-v:    linear-gradient(180deg, var(--sire-pink), var(--sire-pink-l));
  --grad-rule:      linear-gradient(90deg, var(--sire-pink) 0%, transparent 100%);
  --grad-glow:      radial-gradient(circle, rgba(232,96,122,0.12) 0%, transparent 60%);
  --grad-dark:      linear-gradient(180deg, var(--sire-navy-dd) 0%, var(--sire-navy-d) 100%);
  --grad-fade-down: linear-gradient(180deg, transparent 0%, rgba(16,30,48,0.88) 100%);

}

/* ─── GLOBAL TEXT RENDERING ───────────────────────────── */
html {
  text-rendering: optimizeLegibility;
}

/* ─── DISPLAY HEADINGS: OpenType features ──────────────── */
.h-display, .hero-h1, .edit-h1, .split-h1, .sec-title,
.d1, .d2, .d3, .d4, h1.display, h2.display, h3.display,
.faq-text, .org-name, .cross-title, .pillar-title {
  font-feature-settings: 'liga' 1, 'kern' 1, 'calt' 1;
}

/* ─── TABULAR NUMERALS for stat values ─────────────────── */
.hero-stat-val, .big-stat-num, .prop-yield-val, .sr-val,
.edit-stat-val, .coverage-num, .income-row .v, .ledger-val {
  font-feature-settings: 'tnum' 1;
}

/* ─── CUSTOM TEXT SELECTION ────────────────────────────── */
::selection       { background: rgba(232, 96, 122, 0.16); color: var(--ink); }
::-moz-selection  { background: rgba(232, 96, 122, 0.16); color: var(--ink); }

/* ═══════════════════════════════════════════════════════
   HOMEPAGE UPGRADES · 2026-07-18
   Utility strip · Credential marquee · People band · Pack preview
═══════════════════════════════════════════════════════ */

/* ─── Utility strip (renders above header on all pages) ── */
.util-strip { background: var(--ink); }
.util-inner {
  max-width: 1160px; margin: 0 auto; padding: 7px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.util-aud { display: flex; gap: 20px; align-items: center; }
.util-aud a {
  color: rgba(250,250,249,0.6); text-decoration: none; text-transform: uppercase;
  font-family: var(--font-body); font-size: 9px; letter-spacing: 0.16em;
  font-weight: var(--weight-medium); transition: color var(--dur-fast);
}
.util-aud a.on, .util-aud a:hover { color: var(--sire-pink-l); }
.util-right { display: flex; gap: 18px; align-items: center; }
.util-note {
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.06em;
  color: rgba(250,250,249,0.5);
}
.util-note em { color: var(--sire-pink-l); font-style: normal; }
a.util-login {
  color: var(--white); border: 1px solid rgba(232,96,122,0.45); padding: 3px 12px;
  text-transform: uppercase; font-family: var(--font-body); font-size: 9px;
  letter-spacing: 0.16em; text-decoration: none; font-weight: var(--weight-medium);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
a.util-login:hover { background: var(--sire-pink); border-color: var(--sire-pink); }
@media (max-width: 760px) {
  .util-note { display: none; }
  .util-inner { padding: 7px 18px; }
}

/* ─── Credential marquee (below hero) ───────────────────── */
.cred-marquee {
  background: var(--sire-navy-dd);
  border-top: 1px solid var(--border-dark-mid);
  border-bottom: 1px solid var(--border-dark-mid);
  overflow: hidden; padding: 15px 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cred-track {
  display: flex; width: max-content;
  animation: cred-scroll 46s linear infinite;
}
.cred-marquee:hover .cred-track { animation-play-state: paused; }
.cred-item {
  display: flex; align-items: center; gap: 11px; padding: 0 36px; white-space: nowrap;
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(250,250,249,0.55);
}
.cred-item strong {
  font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-regular);
  letter-spacing: 0; text-transform: none; color: var(--white);
}
.cred-item::before {
  content: ''; width: 5px; height: 5px; background: var(--sire-pink);
  transform: rotate(45deg); flex-shrink: 0;
}
@keyframes cred-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cred-track { animation: none; } }

/* ─── People band (navy section) ────────────────────────── */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 40px; }
.person {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-dark-mid);
  padding: 30px 28px;
}
.person-ava {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(232,96,122,0.10); border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 19px; color: var(--sire-pink-l);
  margin-bottom: 18px;
}
.person-name { font-family: var(--font-display); font-size: 21px; color: var(--white); margin-bottom: 4px; }
.person-role {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sire-pink-l); margin-bottom: 12px; font-weight: var(--weight-medium);
}
.person-bio { font-size: 12px; line-height: 1.8; color: rgba(250,250,249,0.6); font-weight: var(--weight-light); margin-bottom: 0; }
@media (max-width: 860px) { .people-grid { grid-template-columns: 1fr; } }

/* ─── Pack preview tiles (cream section) ────────────────── */
.pack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 40px; }
.pack-tile {
  background: var(--white); border: 1px solid var(--border-light);
  padding: 26px 20px 22px; cursor: pointer; text-align: left;
  font-family: inherit; display: block; width: 100%;
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.pack-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pack-lock {
  width: 30px; height: 30px; border: 1px solid var(--border-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.pack-lock svg { width: 13px; height: 13px; stroke: var(--sire-pink); fill: none; stroke-width: 1.6; }
.pack-name { font-family: var(--font-display); font-size: 17px; color: var(--fg-primary); line-height: 1.25; margin-bottom: 8px; }
.pack-note { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-tertiary); }
@media (max-width: 960px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pack-grid { grid-template-columns: 1fr; } }