.stage {
  padding:0;
  min-height:0
}
.hero-foot {
  margin-bottom:0
}
.comparison,.printing,.model-scene {
  height:480px;
  position:relative;
  overflow:hidden
}
.comparison>img,.comparison-top,.comparison-top>img,.comparison-top>svg,.printing img,.model-scene>img {
  width:100%;
  height:100%;
  object-fit:cover
}
.comparison-top {
  position:absolute;
  inset:0;
  clip-path:inset(0 calc(100% - var(--split,0%)) 0 0)
}
.tone-comparison {
  --split:50%
}
.tone-comparison .comparison-top img {
  filter:grayscale(1)
}
.divider {
  position:absolute;
  top:0;
  bottom:0;
  left:var(--split,0%);
  width:2px;
  background:var(--accent);
  pointer-events:none
}
.tone-comparison .divider {
  left:var(--split,50%)
}
.range-label {
  display:flex;
  align-items:center;
  gap:30px;
  padding:15px 24px;
  color:var(--muted)
}
input[type=range] {
  flex:1;
  min-width:0;
  accent-color:var(--accent);
  min-height:30px
}
.result-photo {
  margin:24px 0;
  width:100%;
  max-width:760px
}
.result-photo img {
  width:100%;
  height:380px;
  object-fit:cover
}
.scope {
  margin-top:24px
}
.terms>div {
  min-width:0
}
.note {
  color:var(--muted)
}
.timeline span {
  display:inline
}
.deck {
  height:395px;
  background:var(--bg);
  overflow:hidden
}
.slide {
  height:100%;
  padding:36px 7%;
  position:relative;
  background:var(--panel);
  border:1px solid var(--line)
}
.slide[hidden] {
  display:none
}
.slide h2 {
  font-size:clamp(32px,4.2vw,62px);
  max-width:780px;
  margin:15px 0
}
.slide>p {
  font-size:22px;
  color:var(--muted)
}
.slide>span,.slide small {
  color:var(--muted)
}
.slide-bars {
  position:absolute;
  right:5%;
  bottom:38px;
  display:flex;
  align-items:end;
  height:90px;
  gap:12px
}
.slide-bars i {
  width:35px;
  height:30%;
  background:var(--accent)
}
.slide-bars i:nth-child(2) {
  height:65%
}
.slide-bars i:nth-child(3) {
  height:100%
}
.deck-controls {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  padding:16px
}
.slide.entering {
  animation:slide-in .45s ease both
}
@keyframes slide-in {
  from {
    transform:translateX(8%);
    opacity:.4
  }
  to {
    transform:none;
    opacity:1
  }
  
}
.printing>img {
  filter:grayscale(1);
  opacity:.3
}
.print-fill {
  position:absolute;
  inset:0;
  clip-path:inset(0)
}
.printing.running .print-fill {
  animation:print-build 3s ease-in-out both
}
.print-line {
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:var(--accent);
  opacity:0
}
.printing.running .print-line {
  animation:print-head 3s ease-in-out both
}
.printing+.demo-button {
  margin:16px 24px
}
@keyframes print-build {
  from {
    clip-path:inset(100% 0 0)
  }
  to {
    clip-path:inset(0)
  }
  
}
@keyframes print-head {
  0% {
    top:100%;
    opacity:1
  }
  95% {
    opacity:1
  }
  100% {
    top:0;
    opacity:0
  }
  
}
.image-label {
  position:absolute;
  left:20px;
  bottom:20px;
  padding:8px 14px;
  background:var(--bg);
  color:var(--text);
  font-size:14px
}
.model-scene>img {
  transform:scale(var(--zoom,1));
  transform-origin:50% 48%;
  transition:transform .2s ease-out
}
.documents {
  height:395px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:25px;
  isolation:isolate
}
.document {
  position:absolute;
  width:37%;
  min-height:325px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--line);
  transform:translateX(calc((var(--i) - 1.5)*49%)) rotate(calc((var(--i) - 1.5)*6deg));
  transition:transform .6s ease,background .4s;
  box-shadow:0 12px 30px #0006
}
.document h2 {
  font-size:28px;
  margin:15px 0
}
.document h3 {
  font-size:18px
}
.document p {
  font-size:13px;
  border-top:1px solid var(--line);
  padding-top:8px;
  margin-bottom:8px
}
.document>span {
  color:var(--muted);
  font-size:12px
}
.document.active {
  transform:translateX(0) rotate(0);
  z-index:5;
  background:#20272b
}
.doc-chart {
  height:42px;
  display:flex;
  gap:8px;
  align-items:end
}
.doc-chart i {
  width:18%;
  height:40%;
  background:var(--accent)
}
.doc-chart i:nth-child(2) {
  height:70%
}
.doc-chart i:nth-child(3) {
  height:55%
}
.doc-chart i:nth-child(4) {
  height:100%
}
.doc-controls {
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  padding:16px
}
.demo-button[aria-pressed=true] {
  border-color:var(--accent)
}
.tablet {
  border:12px solid #262c31;
  border-radius:24px;
  margin:24px;
  background:var(--bg)
}
.tablet-top,.tablet-bottom {
  padding:14px 20px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line);
  font-size:14px
}
.tablet-bottom {
  border-top:1px solid var(--line);
  border-bottom:0;
  color:var(--muted)
}
.catalog {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  padding:24px
}
.catalog aside {
  display:flex;
  flex-direction:column;
  gap:12px
}
.catalog aside a {
  font-size:14px;
  margin-top:12px
}
.products {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.product {
  min-width:0
}
.product[hidden] {
  display:none
}
.product h3 {
  font-size:20px;
  margin:10px 0
}
.product p {
  font-size:14px;
  color:var(--muted)
}
.product .demo-button {
  font-size:13px;
  padding:8px
}
.part-shape {
  height:100px;
  display:grid;
  place-items:center;
  background:var(--panel);
  perspective:500px
}
.part-shape i {
  display:block;
  width:64px;
  height:64px;
  border:13px solid #aeb7be;
  border-radius:50%;
  box-shadow:8px 7px 0 #53616b,inset 6px 5px 0 #53616b;
  transform:rotateY(25deg)
}
.product:nth-child(2n) .part-shape i {
  border-radius:10%;
  transform:rotate(30deg) rotateY(25deg)
}
@media(max-width:700px) {
  .comparison,.printing,.model-scene {
    height:350px
  }
  .comparison>img,.comparison-top>img {
    object-position:50%
  }
  .plan-comparison .comparison-top svg {
    object-fit:contain
  }
  .range-label {
    padding:12px;
    gap:12px;
    display:block;
    font-size:14px
  }
  .range-label input {
    width:100%;
    display:block
  }
  .result-photo img {
    height:270px
  }
  .deck {
    height:390px
  }
  .slide {
    padding:24px
  }
  .slide h2 {
    font-size:37px
  }
  .slide>p {
    font-size:18px
  }
  .slide small {
    display:block;
    max-width:190px;
    font-size:12px
  }
  .slide-bars {
    right:24px;
    bottom:24px;
    height:55px
  }
  .slide-bars i {
    width:22px
  }
  .documents {
    height:400px
  }
  .document {
    width:88%;
    min-height:340px;
    padding:20px;
    transform:translateX(calc((var(--i) - 1.5)*7%)) rotate(calc((var(--i) - 1.5)*3deg))
  }
  .document.active {
    transform:none
  }
  .doc-controls {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .doc-controls button {
    font-size:13px;
    padding:10px 6px
  }
  .tablet {
    margin:10px;
    border-width:7px;
    border-radius:15px
  }
  .tablet-top,.tablet-bottom {
    padding:12px;
    font-size:12px;
    display:block
  }
  .tablet-top span {
    display:block
  }
  .catalog {
    grid-template-columns:1fr;
    gap:16px;
    padding:12px
  }
  .catalog aside {
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    align-items:center
  }
  .catalog aside h3 {
    font-size:19px;
    margin:0
  }
  .catalog aside .demo-button {
    padding:6px 9px;
    font-size:13px
  }
  .catalog aside a {
    margin:0;
    font-size:12px
  }
  .products {
    grid-template-columns:1fr 1fr;
    gap:18px 10px
  }
  .part-shape {
    height:72px
  }
  .part-shape i {
    width:46px;
    height:46px;
    border-width:9px
  }
  .product h3 {
    font-size:18px
  }
  .product p {
    font-size:12px
  }
  .product .demo-button {
    font-size:12px;
    padding:8px 5px
  }
  .tablet-bottom span {
    display:block;
    margin-top:8px
  }
  .image-label {
    left:12px;
    bottom:12px;
    font-size:12px
  }
  .price {
    font-size:38px
  }
  table {
    table-layout:fixed
  }
  td,th {
    overflow-wrap:anywhere
  }
  
}
@media(prefers-reduced-motion:reduce) {
  .document,.model-scene>img {
    transition:none
  }
  .printing.running .print-fill {
    clip-path:inset(0)
  }
  .printing.running .print-line {
    display:none
  }
  
}
/* Review iteration 1: keep complete geometry and meaningful document content. */
.case-17 .printing {
  background:#171b1e
}
.case-17 .printing img {
  object-fit:contain
}
.slide-detail {
  max-width:790px;
  margin:22px 0 16px;
  font-size:16px
}
.slide-detail span {
  color:var(--accent);
  font-size:13px
}
.slide-detail p {
  margin:0 0 10px
}
.slide {
  padding-top:24px
}
.slide h2 {
  font-size:44px;
  margin:10px 0
}
.slide>p {
  font-size:18px;
  margin-bottom:12px
}
.slide small {
  font-size:12px
}
.document small {
  font-size:12px
}
.product-spec {
  padding:15px;
  background:var(--panel);
  border-top:1px solid var(--accent)
}
.product-spec span {
  display:block;
  color:var(--muted);
  font-size:12px
}
.product-spec strong {
  display:block;
  font:500 32px 'Roboto Condensed';
  margin:5px 0
}
@media(max-width:700px) {
  .deck {
    height:460px
  }
  .slide h2 {
    font-size:32px
  }
  .slide-detail {
    font-size:14px;
    margin-top:20px
  }
  .slide-detail td {
    font-size:13px;
    padding:7px 3px
  }
  .product-spec {
    padding:10px
  }
  .product-spec strong {
    font-size:28px
  }
  
}
/* Review iteration 2: compact mobile controls and readable slides. */
@media(max-width:700px) {
  .case-header .terms-link {
    display:none
  }
  .case-header {
    min-height:84px
  }
  .case-header nav {
    width:auto
  }
  .deck {
    height:405px
  }
  .slide-detail {
    line-height:1.45
  }
  .slide>p {
    font-size:16px
  }
  
}