/* ============================================================================
   SIGNAL — the Head Case lime system, per the supplied brand skill
   (headcase-website-lime v1.0.0, verified live lime #BCD635).
   White is the dominant canvas; black is structure and purchase hierarchy;
   lime is the brand signature with specific jobs only: ribbon, `CASE`
   wordmark accent, selected states, compact badges, focus, one promo accent.
   Primary purchase CTAs are black. Dark text on lime, never white.
   ========================================================================== */
:root {
  --lime: #BCD635;
  --bg: #FFFFFF;
  --ink: #2E2E2D;
  --muted: #6B6B6B;
  --line: #D7D7D7;
  --soft: #F3F3F3;
  --card-bg: #FFFFFF;
  --accent: #000000;
  --accent-ink: #FFFFFF;
  --ok: #1F7A34;
  --radius: 18px;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}
:focus-visible { outline-color: var(--lime); outline-width: 3px; }

/* Announcement ribbon: lime field, dark text. */
.ribbon { background: var(--lime); color: #1A1A19; font-weight: 600; }

/* White nav, black wordmark, lime `CASE` accent as a field behind dark text. */
.site-head { background: #fff; }
.brand-word { font-weight: 800; letter-spacing: .02em; }
.brand-word b { background: var(--lime); padding: .05em .28em; margin-left: .12em;
  border-radius: 6px; }
.brand-mark { display: none; }
.head-nav a { font-weight: 600; font-size: .88rem; }
.head-nav a:hover, .head-nav a.is-active { border-bottom-color: var(--lime); }
.head-search, .device-chip, .bag-chip { border-radius: 999px; font-weight: 600; }
.device-chip.is-locked { border-color: var(--ink); }
.device-chip-dot { background: var(--lime); }
.bag-chip-count { background: var(--lime); color: #1A1A19; }

/* Buttons: pill; purchase hierarchy is black. */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary { background: #000; border-color: #000; color: #fff; }
.bag-checkout { border-radius: 999px; background: #000; color: #fff; }
.bag-suggest-add { border-radius: 999px; }

/* Hero rides the supplied campaign image; headline stays compact and bold. */
.hero-title { text-transform: uppercase; font-weight: 800;
  letter-spacing: .01em; font-size: clamp(2.6rem, 7vw, 4.8rem); }
.hero.has-bg .finder-box { border-radius: 999px; }
.callout-cta { color: var(--lime); }

.section-h { font-weight: 800; letter-spacing: -.01em; }

/* Gates: quiet white cards; artwork leads. */
.gate { border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .2s ease, transform .2s ease; }
.gate:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.gate-name { font-weight: 800; }
.gate-cta { font-weight: 700; border-bottom: 2px solid var(--ink);
  padding-bottom: .1rem; }

/* Cards stay neutral so artwork dominates; lime is the compact badge only. */
.card-badge { background: var(--lime); color: #1A1A19; border-radius: 999px;
  font-weight: 700; }
.card-badge.m-official { background: #fff; color: var(--muted);
  border: 1px solid var(--line); }
.card-name { font-weight: 700; }
.card-price { font-weight: 700; }

.brand-card { border-radius: var(--radius); }
.brand-card-name { font-weight: 800; }
.brand-card-cta { font-weight: 700; border-bottom: 2px solid var(--ink);
  align-self: flex-start; padding-bottom: .1rem; }

/* Pale-grey technology/storytelling section (skill homepage anatomy). */
.setstory { background: var(--soft); max-width: none !important;
  padding-inline: max(1.25rem, calc((100% - 1280px) / 2)) !important; }
.setstory-copy h2 { font-weight: 800; }
.setstory-media img { border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }

/* Configuration surfaces: neutral chrome, lime selected states w/ dark text. */
.hub-step-label span { background: #000; color: #fff; }
.type-tile { border-radius: var(--radius); }
.type-tile.is-current { border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--lime); }
.device-opt { border-radius: 999px; font-weight: 600; }
.device-opt.is-current { background: var(--lime); color: #1A1A19;
  border-color: #1A1A19; }
.device-opt.is-current em { color: #1A1A19; }
.confirm-card { border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .08); }
.confirm-price { font-weight: 800; font-size: 1.7rem; }
.set-card { border-radius: var(--radius); }
.set-card-reason { font-style: normal; background: var(--lime); color: #1A1A19;
  display: inline-block; padding: 0 .4rem; border-radius: 6px; font-weight: 600; }
.bag-line-tag { color: #56621B; }

.genre-hero { border-radius: var(--radius); }
.genre-hero-copy h1 { font-weight: 800; }
.brand-hero { border-radius: var(--radius); }
.brand-hero-name { font-weight: 800; }

.type-card-art { border-radius: var(--radius); }
.range-chip.is-live:hover { border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--lime); }

/* Black footer with restrained lime link accents. */
.site-foot { background: #000; color: #F4F4EF; border-top: 0; }
.site-foot .foot-legal, .site-foot .foot-variations { color: #9A9A94; }
.site-foot .foot-variations a { color: var(--lime); }

.finder-item:hover, .finder-item.is-active { background: var(--lime);
  color: #1A1A19; }
.world-chip:hover { border-color: var(--ink);
  box-shadow: inset 0 -2.4em 0 0 var(--lime); color: #1A1A19; }
.atmos img { border-radius: var(--radius); }