/* ==========================================================================
   MUUR — Advanced Impact & Character Processor
   Dedicated skin over the shared Another Machines design system. The site's
   red accent is a house color, not MUUR's — this plug-in's own interface is
   gunmetal and amber, so the product page borrows that palette instead of
   forcing MUUR into the site's default red. Structure, motion and most
   components (am-section, am-feature-primary/details, am-world-facts,
   am-stat-grid, am-platforms, am-quick-nav, am-catalog-entry) are reused
   as-is from am-world-2026.css / am-home-2026.css — this file only carries
   what's actually different: color, the hero, and a few MUUR-only parts.
   ========================================================================= */

.muur-page {
  --muur-amber: #e0983f;
  --muur-amber-bright: #f4b25c;
  --muur-amber-deep: #a8681f;
  --muur-amber-line: rgba(224, 152, 63, 0.28);
  --muur-charcoal: #0b0a08;
  --muur-charcoal-panel: #15120e;
  background: var(--muur-charcoal);
}

.muur-page .am-section {
  background: var(--muur-charcoal);
}

.muur-page .am-quick-nav {
  background: rgba(11, 10, 8, 0.92);
  border-bottom-color: var(--muur-amber-line);
}

.muur-page .am-quick-nav a:hover,
.muur-page .am-quick-nav a.is-active {
  color: var(--muur-amber-bright);
}

.muur-page .am-text-link {
  color: var(--am-paper);
}

.muur-page .am-text-link:hover {
  color: var(--muur-amber-bright);
}

.muur-page .am-section-heading .am-kicker {
  color: var(--muur-amber);
  letter-spacing: 0.16em;
}

.muur-page .am-world-facts span {
  border-color: var(--muur-amber-line);
}

.muur-page .am-stat-grid {
  background: var(--muur-amber-line);
  border-color: var(--muur-amber-line);
}

.muur-page .am-stat-grid > div {
  background: var(--muur-charcoal);
}

.muur-page .am-stat-grid dd {
  color: var(--muur-amber-bright);
}

.muur-page .am-platforms {
  background: var(--muur-amber-line);
  border-color: var(--muur-amber-line);
}

.muur-page .am-platforms > div {
  background: var(--muur-charcoal);
}

.muur-page .am-platforms li::before {
  background: var(--muur-amber);
}

.muur-page .am-notice {
  border-color: var(--muur-amber-line);
}

.muur-page .am-feature-primary,
.muur-page .am-feature-details figure {
  background: var(--muur-charcoal-panel);
  border-color: var(--muur-amber-line);
}

.muur-page .am-feature-primary figcaption,
.muur-page .am-feature-details figcaption {
  border-top-color: var(--muur-amber-line);
}

.muur-page .am-notice strong {
  color: var(--muur-amber);
}

/* ---------- Primary amber action (same shape/layout as .am-action) ---------- */

.muur-action.am-action,
.muur-action {
  border-color: var(--muur-amber);
  background: var(--muur-amber);
  color: #1a1206;
}

.muur-action.am-action:hover,
.muur-action:hover {
  color: var(--muur-amber);
  background: transparent;
}

/* ---------- Hero ---------- */

.muur-hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.muur-hero-media {
  position: absolute;
  inset: -6%;
  z-index: -2;
}

.muur-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(0.86) brightness(0.6) contrast(1.05);
}

.muur-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(11, 10, 8, 0.35), rgba(11, 10, 8, 0.92) 65%),
    linear-gradient(180deg, rgba(11, 10, 8, 0.5) 0%, rgba(11, 10, 8, 0.4) 40%, rgba(11, 10, 8, 0.97) 100%);
}

.muur-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  max-width: 780px;
  padding: 160px 0 88px;
}

.muur-wordmark {
  margin: 0;
  color: var(--am-paper);
  font-family: "AM Display", "AM Grotesk", sans-serif;
  font-size: clamp(4.6rem, 11vw, 9.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-shadow: 0 0 60px rgba(224, 152, 63, 0.35), 0 20px 50px rgba(0, 0, 0, 0.6);
}

.muur-hero-subtitle {
  margin: 0;
  color: var(--muur-amber-bright);
  font-family: "AM Mono", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.muur-hero-copy > p:not(.am-kicker):not(.muur-hero-subtitle) {
  max-width: 56ch;
  color: rgba(239, 237, 231, 0.78);
  font-size: 1.08rem;
  line-height: 1.62;
}

.muur-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 6px;
}

.muur-hero-facts span {
  padding: 9px 14px;
  border: 1px solid var(--muur-amber-line);
  color: rgba(239, 237, 231, 0.85);
  font-family: "AM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

.muur-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 4px;
}

/* ---------- Full-panel showcase (complete interface, natural ratio) ---------- */

.muur-showcase {
  position: relative;
}

.muur-showcase-frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--muur-amber-line);
  box-shadow: 0 60px 140px rgba(0, 0, 0, 0.6), 0 0 90px rgba(224, 152, 63, 0.12);
}

.muur-showcase-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Ideal-material chip row ---------- */

.muur-material-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.muur-material-grid span {
  padding: 10px 16px;
  border: 1px solid var(--muur-amber-line);
  background: var(--muur-charcoal-panel);
  color: rgba(239, 237, 231, 0.82);
  font-family: "AM Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

/* ---------- Control spec list (Main Engine / FIELD / RUMBLE / MOD / SPACE) ---------- */

.muur-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  margin-top: 30px;
  background: var(--muur-amber-line);
  border: 1px solid var(--muur-amber-line);
}

.muur-control-grid > div {
  padding: 20px 22px;
  background: var(--muur-charcoal);
}

.muur-control-grid dt {
  margin: 0 0 8px;
  color: var(--muur-amber);
  font-family: "AM Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.muur-control-grid dd {
  margin: 0;
  color: rgba(239, 237, 231, 0.78);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* ---------- Mode / engine chip lists (RUMBLE modes, MOD algorithms, SPACE engines) ---------- */

.muur-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 0;
}

.muur-mode-list span {
  padding: 10px 16px;
  border: 1px solid var(--muur-amber-line);
  color: var(--muur-amber-bright);
  font-family: "AM Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* ---------- FAQ — plain two-column list, no accordion ---------- */

.muur-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  margin-top: 8px;
}

.muur-faq-item h3 {
  margin: 0 0 10px;
  color: var(--am-paper);
  font-size: 1.15rem;
  font-weight: 500;
}

.muur-faq-item p {
  margin: 0;
  color: var(--am-muted);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .muur-faq-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Packaged box shot, centered, natural ratio, never cropped ---------- */

.muur-boxshot-frame {
  margin: 0 auto;
  max-width: 760px;
}

.muur-boxshot-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

/* ---------- Closing CTA amber recolor (structure = .am-catalog-entry) ---------- */

.muur-page .am-catalog-entry {
  background: var(--muur-charcoal);
}

.muur-page .am-catalog-reel img {
  filter: saturate(0.7) brightness(0.5) contrast(1.1) sepia(0.25);
}

.muur-page .am-catalog-shade {
  background:
    linear-gradient(180deg, rgba(11, 10, 8, 0.1), rgba(11, 10, 8, 0.4) 50%, rgba(11, 10, 8, 0.97)),
    linear-gradient(90deg, rgba(11, 10, 8, 0.82), transparent 70%);
}

.muur-page .am-catalog-entry-inner .am-kicker {
  color: var(--muur-amber);
}

/* ---------- Ambient amber pulse behind the hero screenshot ---------- */

.muur-hero-copy .am-kicker {
  color: rgba(239, 237, 231, 0.6);
}

@media (max-width: 900px) {
  .muur-hero-copy { padding: 128px 0 64px; }
  .muur-wordmark { font-size: clamp(3.6rem, 16vw, 6.5rem); }
}

@media (max-width: 620px) {
  .muur-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}