.hero {
  padding: 2.5rem 0 4rem;
  text-align: center;
}

.hero__inner {
  display: grid;
  gap: 2.75rem;
}

.hero__intro {
  max-width: 66rem;
  margin: 0 auto;
}

.hero__intro h1{max-width:27ch;margin:0 auto;font-size:clamp(2.05rem,4.1vw,3.3rem);line-height:0.96}.hero__title-line{display:block}.hero__title-mark{color:var(--text);white-space:nowrap}.hero__title-rest{color:#434a59}

.hero__summary {
  max-width: 32rem;
  margin: 1rem auto 0;
  color: var(--text);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}

.hero__authors {
  max-width: 56rem;
  margin: 1.5rem auto 0;
  color: var(--accent);
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  font-weight: 600;
}

.hero__authors sup,.hero__affiliations sup{font-size:0.62em;vertical-align:super}.hero__affiliations{display:flex;flex-wrap:wrap;justify-content:center;gap:0.35rem 1rem;max-width:62rem;margin:0.8rem auto 0;color:var(--text);font-size:clamp(0.96rem,1.35vw,1.08rem)}.hero__meta{margin-top:1rem;font-size:1rem;font-weight:600}

.hero__intro .link-row {
  margin-top: 1.45rem;
}

.hero__figure {
  max-width: 64rem;
  margin: 0 auto;
}

.hero__figure img,
.feature-figure img,
.case img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.hero__figure img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hero__figure figcaption,
.feature-figure figcaption {
  max-width: 52rem;
  margin: 0.9rem auto 0;
  font-size: 0.95rem;
  text-align: center;
}

.section {
  padding: 4.75rem 0;
  border-top: 1px solid var(--line);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: start;
}

.section__center {
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.section__center p:last-child {
  max-width: 38rem;
  margin: 1rem auto 0;
}

.takeaway-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
}

.takeaway-list li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
}

.takeaway-list__index {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.takeaway-list strong {
  display: block;
  margin-top: 0.7rem;
  color: var(--text);
  font-size: 1rem;
}

.takeaway-list span {
  display: block;
  margin-top: 0.6rem;
  color: var(--muted);
}

.feature-figure {
  margin: 0;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.stage-panel {
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-strong);
}

.stage-panel__index {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.stage-panel h3 {
  margin-top: 0.7rem;
}

.stage-panel p:last-child {
  margin-top: 0.7rem;
}

.interface-panel{margin-top:3rem}.interface-figure{position:relative;cursor:crosshair}.interface-lens{position:absolute;top:0;left:0;width:13.5rem;height:13.5rem;border:1px solid rgba(15,23,42,0.14);border-radius:50%;background-color:#fff;background-repeat:no-repeat;box-shadow:0 18px 40px rgba(15,23,42,0.18);opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity var(--ease)}.interface-figure.is-active .interface-lens{opacity:1}.interface-copy{max-width:58rem;margin-top:1.5rem}.interface-copy h3{margin-top:0.1rem;max-width:44rem}.interface-copy p:last-child{max-width:56rem;margin-top:1rem}

@media (max-width: 980px) {
  .section__grid,
  .stage-grid,
  .interface-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .takeaway-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .hero {
    padding: 2rem 0 3.75rem;
    text-align: left;
  }

  .hero__intro,
  .section__center {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .hero__summary,
  .hero__figure figcaption,
  .feature-figure figcaption,
  .section__center p:last-child {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    text-align: left;
  }

  .section {
    padding: 4rem 0;
  }
}

@media (hover: none) {
  .interface-figure {
    cursor: default;
  }

  .interface-lens {
    display: none;
  }
}