/* The site-wide animated light trail is disabled, including reduced-motion mode. */
.site-stream-canvas { display: none !important; }

/* Keep expanded FAQ answers readable over the dark background. */
#availability .faqs details {
  border-color: rgba(255, 255, 255, .24);
}
#availability .faqs summary {
  color: #fbf8f2;
}
#availability .faqs .ab {
  color: #fbf8f2;
  background: rgba(33, 31, 37, .96);
  border-left: 3px solid var(--yellow);
  padding: 16px 20px;
  line-height: 1.65;
}
#availability .faqs summary:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 5px;
}
#availability .faqs details[open] .pm {
  font-size: 0;
}
#availability .faqs details[open] .pm::before {
  content: "−";
  font-size: 1.1rem;
}

/* Shared image loading fixes; mobile and desktop use different story layouts. */
#view-home .hero .HR {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
  isolation: isolate;
}
#view-home .hero .HR.rings::after { z-index: -1; }
#view-home .hero-enhanced {
  aspect-ratio: auto;
  min-height: 0;
  width: 100%;
  overflow: visible;
}
#view-home .hero-enhanced::after { display: none; }
.hero-image-map { position: relative; width: 100%; aspect-ratio: 1672 / 941; }
#view-home .hero-image-map img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: none;
  transform: none;
  transition: none;
}
#view-home .hero-enhanced .story-label {
  position: static;
  max-width: none;
  margin: 0;
  padding: 14px 16px;
  background: var(--char);
  color: var(--cream);
  border: 0;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  transform: none;
}
#view-home .hero-enhanced .product-hotspot {
  animation: none !important;
  transform: translate(-50%, -50%) !important;
  left: clamp(23px, var(--x), calc(100% - 23px));
}
#view-home .hero-enhanced .hotspot-card { display: none !important; }
#view-home .hero-enhanced .hotspot-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(251,248,242,.85);
}
#view-home .hero-enhanced .hotspot-dot::before,
#view-home .hero-enhanced .hotspot-dot::after { display: none; }
.hotspot-number { font: 700 14px/1 var(--sans); }
.hero-story-hint { margin: 6px 0 12px; color: var(--cream); font-size: 14px; }
.hero-story-controls { display: none; }
.hero-story-choice[data-tone="blue"],.hero-story-panel[data-tone="blue"] { --spot: var(--blue); }
.hero-story-choice[data-tone="pink"],.hero-story-panel[data-tone="pink"] { --spot: var(--pink); }
.hero-story-choice[data-tone="yellow"],.hero-story-panel[data-tone="yellow"] { --spot: var(--yellow); }
.hero-story-choice[data-tone="orange"],.hero-story-panel[data-tone="orange"] { --spot: var(--orange); }
.hero-story-choice[data-tone="lav"],.hero-story-panel[data-tone="lav"] { --spot: var(--purple); }
.hero-story-panel[hidden] { display: none; }
.hero-story-panel {
  position: relative;
  margin-top: 16px;
  padding: 20px;
  color: var(--cream);
  background: var(--char);
  border: 1px solid rgba(251,248,242,.35);
  border-top: 4px solid var(--spot, var(--yellow));
  overflow: visible;
  max-height: none;
}
.hero-story-close {
  display: block;
  margin: -8px -8px 8px auto;
  min-height: 44px;
  min-width: 76px;
  padding: 10px;
  color: var(--cream);
  border: 1px solid rgba(251,248,242,.4);
  border-radius: 4px;
  background: transparent;
  font: 600 14px var(--sans);
  cursor: pointer;
}
.hero-story-content .hotspot-kicker { color: var(--spot, var(--yellow)); font: 600 12px/1.5 var(--mono); text-transform: uppercase; }
.hero-story-content h3 { margin: 8px 0 16px; color: var(--cream); font-size: 26px; }
.hero-story-content dl { margin: 0; }
.hero-story-content dl div { padding: 12px 0; border-top: 1px solid rgba(251,248,242,.2); }
.hero-story-content dt { color: var(--spot, var(--yellow)); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.hero-story-content dd { margin: 6px 0 0; color: var(--cream); font-size: 16px; line-height: 1.5; }
.hero-story-content a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--cream); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.hero-story-close:focus-visible,.hero-story-choice:focus-visible,#view-home .hotspot-dot:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
@media (min-width: 681px) {
  /* Static rings cross the photo, but remain beneath the caption and controls. */
  #view-home .hero .HR.rings::after { z-index: 1; }
  #view-home .hero-enhanced { isolation: auto; }
  .hero-story-hint,.hero-story-panel { display: none; }
  #view-home .hero-enhanced .story-label {
    position: absolute;
    left: 26px;
    bottom: 26px;
    max-width: min(390px, 72%);
    padding: 14px 17px;
    background: rgba(251,248,242,.94);
    color: var(--ink);
    border-left: 6px solid var(--yellow);
    box-shadow: 6px 6px 0 var(--ink);
    font-family: var(--mono);
    font-size: .875rem;
    font-weight: 650;
    letter-spacing: .075em;
    line-height: 1.45;
    text-transform: uppercase;
    pointer-events: none;
  }
  #view-home .hero-enhanced .hotspot-dot {
    z-index: 9;
    width: 34px;
    height: 34px;
    box-shadow: 0 0 0 5px rgba(251,248,242,.9), 0 4px 16px rgba(0,0,0,.28);
  }
  #view-home .hero-enhanced .hotspot-number { display: none; }
  #view-home .hero-enhanced .hotspot-dot::before,
  #view-home .hero-enhanced .hotspot-dot::after { display: block; }
  #view-home .hero-enhanced .hotspot-card:not([hidden]) {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}
@media (max-width: 680px) {
  #view-home .hero .HR.rings::after { z-index: 1; }
  #view-home .hero-enhanced { isolation: auto; }
  #view-home .hero .hero-story-hint,
  #view-home .hero .hero-story-controls,
  #view-home .hero .hero-story-panel { position: relative; z-index: 2; }
  #view-home .hero .HL { padding: 24px 20px; gap: 14px; }
  #view-home .hero h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); line-height: 1.03; }
  #view-home .hero .HL .lede { font-size: 17px; line-height: 1.55; }
  #view-home .hero .HR { padding: 16px 16px 24px; }
  #view-home .hero-enhanced .story-label { position: relative; inset: auto; padding: 12px 0; }
  #view-home .hero-enhanced .product-hotspot { left: clamp(12px, var(--x), calc(100% - 12px)); pointer-events: none; }
  #view-home .hero-enhanced .hotspot-dot { width: 22px; height: 22px; border-width: 1px; box-shadow: 0 0 0 1px rgba(251,248,242,.9); opacity: 1; }
  #view-home .hero-enhanced .hotspot-number { font-size: 12px; }
  #view-home .hero-enhanced .is-open .hotspot-dot { outline: 2px solid var(--cream); outline-offset: 3px; }
  .hero-story-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-story-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    min-height: 48px;
    border: 1px solid rgba(251,248,242,.5);
    border-radius: 4px;
    background: transparent;
    color: var(--cream);
    font: 600 14px/1.3 var(--sans);
    text-align: left;
    cursor: pointer;
  }
  .hero-story-choice:last-child { grid-column: 1 / -1; }
  .hero-story-choice .hotspot-number { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: var(--spot); color: var(--ink); }
  .hero-story-choice[aria-expanded="true"] { background: var(--cream); color: var(--ink); border-color: var(--spot); }
}