.rm-photo { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r-sm); margin-top: var(--s-3); }


@media (min-width: 901px) {
  .rm-photo { max-height: max(250px, calc(100vh - 535px)); }}

 
.utp-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  padding-block: clamp(40px, 6vw, 72px);
}
.utp-strip article { border-top: var(--border); padding-top: var(--s-2); }
.utp-strip .utp-num { display: block; margin-bottom: 6px; }
.utp-strip h3 { font-family: var(--f-disp); font-weight: 800; font-size: 1.1875rem; }
.utp-strip p { margin: 8px 0 0; font-size: var(--fs-small); color: var(--ink-55); }
@media (max-width: 860px) { .utp-strip { grid-template-columns: minmax(0,1fr); gap: var(--s-3); }}
.about-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: clamp(28px, 5vh, 56px);
}
.stat {
  border-top: var(--hairline);
  padding: var(--s-3) 0 0;
  position: relative;
}
.stat::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acid);
}
.stat:nth-child(2)::before { background: var(--c-prot); }
.stat:nth-child(3)::before { background: var(--c-wash); }
.stat:nth-child(4)::before { background: var(--c-eco); }
.stat b {
  display: block;
  font-family: var(--f-disp); font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: -.02em;
}
.stat span { font-family: var(--f-mono); font-size: var(--fs-mono); }

@media (max-width: 900px) {
  .about-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }}

 
.roadmap { overflow: hidden; }
.roadmap-track {
  display: flex; gap: clamp(20px, 3.5vw, 56px);
  

  align-items: flex-start;
  padding-block: clamp(20px, 2.2vw, 30px);
  will-change: transform;
}
.rm-item {
  

  flex: 0 0 min(360px, 76vw);
  border-top: var(--hairline);
  padding-top: var(--s-3);
  position: relative;
}
.rm-item::before {
  content: "";
  position: absolute; top: -5px; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rm, var(--acid));
}
.rm-year {
  font-family: var(--f-disp); font-weight: 800;
  

  font-size: var(--fs-page-title);
  line-height: 1; letter-spacing: -.04em;
  color: var(--ink);
}
.rm-title { font-family: var(--f-disp); font-weight: 800; font-size: 1.25rem; margin-top: var(--s-2); }
.rm-text { color: var(--ink-55); margin-top: 8px; font-size: var(--fs-small); max-width: 34ch; }
.roadmap-fallback-scroll {
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.roadmap-fallback-scroll .rm-item { scroll-snap-align: start; }

 
.rm-item {
  background: var(--white);
  border: var(--hairline);
  border-top: none;
  border-radius:var(--r-lg);
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow: 0 18px 40px -30px rgba(12,12,12,.25);
}
.rm-item::before { top: 0; left: clamp(20px, 2.2vw, 30px); width: 34px; height: 5px; border-radius:var(--r-chip); }


.rm-year { margin-top: 4px; }

@media (max-width: 900px) {
  .roadmap-fallback-scroll { overflow-x: visible; scroll-snap-type: none; }
  .roadmap-track { flex-direction: column; gap: 14px; padding-block: var(--s-4); position: relative; }
  .roadmap-track::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ink-16); }
  .rm-item { flex: none; width: auto; margin-left: 34px; padding: 14px 16px 16px; }
  .rm-item::before { left: -29px; top: 20px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--paper); }
  .rm-year { font-size: 1.5rem; margin-top: 0; letter-spacing: -.02em; }
  .rm-title { font-size: 1.05rem; line-height: 1.2; margin-top: 4px; }
  .rm-text { margin-top: 6px; font-size: .85rem; line-height: 1.4; max-width: none; }}

 
.prod-price, .pp-price, .rm-year, .stat b { font-variant-numeric: tabular-nums; }






.exp-scene .container { position: relative; }


.exp-scene h2 { font-size: min(clamp(2rem, 5.4vw, 4.6rem), var(--h2cap, 999px)); max-width: 21ch; }
.rm-title { line-height: var(--lh-title); }

@media (max-width: 620px) {
  .rm-text{ font-size: 14px; line-height: 1.4; }}