/* Product Truth layer for Preview v3 Final.
   Loaded after product-v3.css so product-specific truth styles can safely extend it. */
.concept-notice {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 16px;
  margin:28px 0 0;
  padding:18px 22px;
  border:1px solid rgba(18,26,46,.12);
  border-left:3px solid var(--world-accent,#CD7D5E);
  border-radius:16px;
  background:color-mix(in srgb,var(--world-bg,#F7ECE4) 46%,white);
}
.concept-notice__label {
  flex:none;
  padding:5px 12px;
  border-radius:999px;
  background:var(--world-accent,#CD7D5E);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.concept-notice__body { margin:0; color:#4c5261; font-size:15px; line-height:1.6; }

.trust-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:0; padding:0; list-style:none; }
.trust-list li {
  padding:24px;
  border:1px solid rgba(18,26,46,.1);
  border-radius:20px;
  background:color-mix(in srgb,var(--world-bg,#F1EFFA) 40%,white);
}
.trust-list h3 { margin:0 0 10px; font-size:17px; letter-spacing:-.01em; }
.trust-list p { margin:0; color:#5b6170; font-size:14px; line-height:1.65; }

.theme-exploration { margin-top:clamp(48px,6vw,74px); padding-top:clamp(32px,4vw,48px); border-top:1px solid rgba(18,26,46,.12); }
.theme-exploration__heading { margin-bottom:26px; }
.theme-exploration__body { max-width:640px; margin:14px 0 0; color:#5b6170; font-size:15px; line-height:1.65; }

/* Only caption-bearing frames open outside the image crop. The picture remains the clipping surface. */
.section-visual__frame.section-visual__frame--captioned {
  aspect-ratio:auto;
  overflow:visible;
  border:0;
  background:none;
  box-shadow:none;
}
.section-visual__frame.section-visual__frame--captioned > picture {
  display:block;
  width:100%;
  height:auto;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid rgba(18,26,46,.08);
  border-radius:20px;
  box-shadow:0 20px 58px rgba(55,62,88,.08);
}
.section-visual__frame.section-visual__frame--captioned > picture img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.section-visual__caption {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-top:12px;
  color:#5b6170;
  font-size:13px;
}
.section-visual__caption strong { color:#1b2133; font-size:14px; font-weight:600; }
.section-visual__badge {
  padding:3px 10px;
  border:1px solid rgba(18,26,46,.16);
  border-radius:999px;
  color:#4c5261;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.section-visual__caption em { flex-basis:100%; color:#767c8b; font-size:12.5px; font-style:italic; }

/* SkinVisor (visible Trust) and EchoQuest (visible Theme Exploration) only.
   Make mobile hero rows explicit so copy and imagery cannot share a grid cell. */
@media (max-width:900px) {
  .world:has([data-trust-section]:not([hidden])) .world__copy,
  .world:has([data-theme-exploration]:not([hidden])) .world__copy {
    grid-row:1;
  }

  .world:has([data-trust-section]:not([hidden])) .world__visual,
  .world:has([data-theme-exploration]:not([hidden])) .world__visual {
    grid-row:2;
  }
}