.detail-edition .inner-band {
  background:var(--paper);
  border:0;
}

.detail-edition .breadcrumbs {
  padding-top:clamp(15px,2.6vw,32px);
  color:var(--muted);
}

.detail-edition .inner-hero {
  margin-top:14px;
  padding:clamp(22px,4.5vw,64px);
  border:1px solid #314765;
  background:
    linear-gradient(#7896e215 1px,transparent 1px) 0 0/30px 30px,
    linear-gradient(90deg,#7896e215 1px,transparent 1px) 0 0/30px 30px,
    radial-gradient(ellipse at 88% 12%,#213961,transparent 61%),
    #101b31;
}

.detail-edition .inner-hero h1 {
  font-size:clamp(34px,4.8vw,70px);
  line-height:1.1;
  text-wrap:balance;
}

.detail-edition .inner-hero.with-visual h1 {
  max-width:17ch;
}

.detail-actions {
  margin-top:clamp(15px,2.8vw,27px);
}

.product-flow {
  min-width:0;
  align-self:center;
  border-color:#526e9b;
  box-shadow:0 16px 32px #060b1880;
}

.product-flow .flow-head {
  min-height:46px;
}

.product-flow img {
  aspect-ratio:520/280;
}

.product-media {
  padding-top:clamp(25px,4.3vw,55px);
  padding-bottom:clamp(27px,4vw,49px);
  border-top:0;
  border-bottom:1px solid var(--line);
}

.product-media-grid {
  display:grid;
  grid-template-columns:minmax(0,650px);
  gap:12px;
}

.product-media-grid.has-screenshot {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.product-media-grid > figure {
  align-self:start;
}

.product-media-grid .product-screen > a {
  display:grid;
  aspect-ratio:1.78;
  place-items:center;
}

.product-media-grid .product-screen > a > img {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain;
}

.guide-body {
  display:grid;
  grid-template-columns:minmax(170px,225px) minmax(0,1fr);
  gap:clamp(23px,4.8vw,75px);
}

.guide-body .detail-main {
  margin-inline:0;
}

.guide-outline {
  position:sticky;
  top:22px;
  padding:15px;
  background:#101d32;
  border:1px solid #314765;
  border-top-color:#8193ef;
}

.guide-outline .eyebrow { margin-bottom:10px; }
.guide-outline ol {
  display:grid;
  gap:2px;
  margin:11px 0 0;
  padding:0;
  list-style:none;
  counter-reset:guide-section;
}

.guide-outline li { counter-increment:guide-section; }
.guide-outline a {
  display:grid;
  grid-template-columns:2.4ch minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding:8px 4px;
  border-left:2px solid transparent;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.4;
  text-decoration:none;
}

.guide-outline a::before {
  content:"0" counter(guide-section);
  color:#9caee4;
  font:650 .7rem/1.7 ui-monospace,monospace;
}

.guide-outline a:hover,.guide-outline a[aria-current="location"] {
  border-left-color:var(--lime);
  background:#1c2b47;
  color:#f1f5ff;
}

.guide-progress {
  height:3px;
  background:#304460;
  overflow:hidden;
}

.guide-progress span {
  display:block;
  height:100%;
  background:var(--lime);
  transform:scaleX(var(--guide-progress,0));
  transform-origin:left center;
}

@media (prefers-reduced-motion:no-preference) {
  .guide-outline a { transition:background-color .2s,border-color .2s,color .2s; }
  .guide-progress span { transition:transform .15s linear; }
}

@media (max-width:800px) {
  .detail-edition .inner-hero.with-visual { gap:20px; }
  .guide-body,.product-media-grid.has-screenshot { grid-template-columns:minmax(0,1fr); }
  .guide-outline { position:static; }
  .guide-outline ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:430px) {
  .detail-edition .inner-hero { padding:16px; }
  .detail-edition .inner-hero h1 { font-size:clamp(30px,9vw,37px); }
  .detail-edition .inner-hero .lead { font-size:1rem; }
  .detail-actions { gap:6px; }
  .detail-actions .button { padding-inline:9px; font-size:.85rem; }
  .guide-outline { padding:11px; }
}