/* Native screenshots exported at 2× from unchanged ClipFlow SwiftUI views. */
.native-screenshot {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border-radius: 14px;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow:
    0 0 0 1px #30465e12,
    0 3px 8px #30465e10,
    0 24px 52px #30465e25;
}
.hero-stage {
  max-width: 1200px;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 860;
  margin: -32px auto 0;
  perspective: 1000px;
}
.hero-artwork {
  width: 100%;
  height: 100%;
  left: auto;
  margin-left: 0;
  transform: rotateX(20deg) scale(1.05);
  transform-origin: 50% 50%;
  position: relative;
  isolation: isolate;
}
.hero-heading {
  z-index: 3;
  pointer-events: none;
}
.hero-main {
  width: 43.33%;
  left: 28%;
  top: 0;
  transform: none;
  z-index: 2;
}
.hero-quick {
  width: 32%;
  left: 0;
  top: 27%;
  transform: none;
  z-index: 3;
}
.hero-preview {
  width: 25.5%;
  right: 0;
  top: 37%;
  transform: none;
  z-index: 4;
}
.hero-stage .native-screenshot {
  border-radius: 16px;
  box-shadow:
    0 0 0 1px #34445820,
    0 4px 12px #3444581a,
    0 30px 65px #34445835;
}
.hero-preview .native-screenshot {
  border-radius: 18px;
}
.capture-caption {
  margin: 8px 0 26px;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #98a4b2;
  position: relative;
  z-index: 5;
}
.hero-after {
  margin-top: 0;
}
.story-step {
  min-height: 74vh;
}
.story-sticky {
  height: 660px;
  top: calc(50vh - 290px);
}
.story-demo {
  width: 360px;
  max-width: 100%;
  max-height: 570px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.story-demo .native-screenshot {
  width: auto;
  max-width: 100%;
  max-height: 570px;
  object-fit: contain;
  border-radius: 12px;
}
.story-demo:has(img[src*="/quick.png"]) .native-screenshot {
  border-radius: 24px;
}
.story-demo .native-screenshot {
  box-shadow:
    0 0 0 1px #53687914,
    0 4px 12px #35465d08,
    0 24px 50px #35465d20;
}
.story-backdrop {
  inset: 35px -30px 40px;
}
.mobile-feature {
  max-width: 330px;
}
.mobile-feature .native-screenshot {
  border-radius: 12px;
  box-shadow:
    0 0 0 1px #5368790e,
    0 15px 35px #35465d17;
}
.appearance-window {
  transform: none;
  max-width: 366px;
  margin: 0 auto;
}
.appearance-window:hover {
  transform: none;
}
.appearance-window .native-screenshot {
  border-radius: 12px;
}
.appearance-scene {
  height: 500px;
  padding: 30px 45px 0 20px;
}
.detail-wide {
  min-height: 500px;
}
.shortcut-popup {
  width: 222px;
  top: 0;
}
.shortcut-art.is-open .shortcut-popup {
  transform: translateY(0) scale(0.76);
}
.shortcut-popup .native-screenshot {
  border-radius: 18px;
}
.content-art.native-content-art {
  width: 250px;
  height: 270px;
  margin: 26px auto 0;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  padding: 0 7px;
  background: transparent;
}
.content-art.native-content-art .native-screenshot {
  width: 100%;
  max-width: 100%;
  border-radius: 16px;
}
.menu-art {
  height: 270px;
  background:
    radial-gradient(ellipse at 30% 0, #f7eee0, transparent 80%), #f0f5fa;
  margin-top: 26px;
  overflow: hidden;
}
.menu-art > [data-demo] {
  width: 245px;
  margin: 15px auto 0;
}
.menu-art .native-screenshot {
  border-radius: 12px;
}
@media (max-width: 1100px) {
  .hero-stage {
    height: auto;
    aspect-ratio: 1200/880;
  }
  .story-sticky {
    height: 600px;
    top: calc(50vh - 260px);
  }
  .story-demo {
    width: 310px;
    max-height: 510px;
  }
  .story-demo .native-screenshot {
    max-height: 510px;
  }
}
@media (max-width: 900px) {
  .hero-stage {
    height: auto;
    aspect-ratio: 1200/900;
  }
  .story-step {
    min-height: 0;
  }
  .mobile-feature {
    width: 100%;
    max-width: 330px;
  }
  .appearance-scene {
    padding: 30px 25px 0 10px;
    height: 450px;
  }
  .detail-wide {
    min-height: 450px;
  }
}
@media (max-width: 768px) {
  .hero-stage {
    height: auto;
    aspect-ratio: 1200/830;
    margin-top: -12px;
  }
  .hero-artwork {
    width: 100%;
    left: 0;
    margin-left: 0;
    transform-origin: 50% 30%;
  }
  .hero-main {
    width: 43.33%;
    left: 28%;
    top: 0;
  }
  .hero-quick {
    width: 32%;
    left: 0;
    top: 27%;
  }
  .hero-preview {
    width: 25.5%;
    right: 0;
    top: 37%;
  }
  .hero-stage .native-screenshot {
    border-radius: 8px;
  }
  .capture-caption {
    margin: 0 0 22px;
    font-size: 8px;
  }
}
@media (max-width: 600px) {
  .hero-stage {
    height: auto;
    width: calc(100% + 26px);
    max-width: none;
    margin-left: -13px;
    aspect-ratio: 1200/780;
    margin-top: 12px;
  }
  .hero-artwork {
    width: 100%;
    height: 100%;
    margin-left: 0;
    left: 0;
  }
  .hero-main {
    width: 43.33%;
    left: 28%;
    top: 0;
  }
  .hero-quick {
    width: 32%;
    left: 0;
    top: 27%;
  }
  .hero-preview {
    width: 25.5%;
    right: 0;
    top: 37%;
  }
  .hero-stage .native-screenshot {
    border-radius: 5px;
    box-shadow:
      0 0 0 1px #34445814,
      0 3px 7px #34445810,
      0 10px 23px #34445824;
  }
  .capture-caption {
    margin: 3px 0 25px;
    font-size: 7px;
  }
  .mobile-feature {
    max-width: 310px;
  }
  .appearance-scene {
    height: 365px;
    padding: 26px 36px 0;
  }
  .appearance-window {
    transform: none;
    width: 100%;
  }
  .detail-wide {
    min-height: 0;
  }
  .content-art.native-content-art {
    width: 235px;
    height: 250px;
    margin-top: 24px;
  }
  .menu-art {
    height: 250px;
  }
  .menu-art > [data-demo] {
    width: 225px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-artwork {
    transform: rotateX(0deg) scale(1);
  }
  .hero-heading {
    transform: none !important;
  }
  @media (max-width: 768px) {
    .hero-artwork {
      transform: rotateX(0deg) scale(0.9);
    }
  }
}
/* Reserve the perspective projection even before the user begins to scroll. */
@media (min-width: 769px) {
  .hero-stage {
    aspect-ratio: 1200 / 920;
  }
}
/* The visitor can browse every preset; text and code are never line-clamped. */
#demo-results {
  height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 7px;
}
.result-row {
  align-items: flex-start;
  padding: 16px 3px;
  gap: 10px;
}
.result-copy strong {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 12px;
  line-height: 1.65;
}
.result-copy p {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.85;
  font-size: 11px;
  margin-top: 9px;
  color: #6d7b88;
}
.sample-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  font:
    11px/1.8 ui-monospace,
    SFMono-Regular,
    monospace;
  color: #536e88;
  background: #edf3f8;
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0 8px;
}
.sample-image {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
  margin-top: 11px;
  background: #edf2f5;
}
.sample-source {
  display: block;
  margin-top: 12px;
  font-size: 9px;
  color: #96a1ac;
}
.browse-all {
  background: transparent;
  color: #6085a9;
  font-size: 10px;
  padding: 0;
}
.demo-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -10px auto 24px;
  background: transparent;
  color: #6889aa;
  font-size: 11px;
  border: 1px solid #7099c12b;
  padding: 7px 16px;
  border-radius: 99px;
  position: relative;
  z-index: 4;
}
.demo-entry:hover,
.browse-all:hover {
  color: #2864ab;
}
.demo-entry .icon {
  width: 13px;
  height: 13px;
}
.demo-browser {
  width: min(740px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  padding: 0;
  border: 1px solid #fff;
  border-radius: 26px;
  box-shadow: 0 30px 100px #1b355b30;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 0 0, #faf0dfaa, transparent 65%),
    radial-gradient(ellipse at 100% 100%, #e1edfcaa, transparent 65%), #f3f6f9;
  overflow: hidden;
}
.demo-browser::backdrop {
  background: #24354b50;
  backdrop-filter: blur(12px);
}
.demo-browser > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 25px 28px 20px;
  border-bottom: 1px solid #dbe3eb;
}
.demo-browser > header span {
  font-size: 9px;
  letter-spacing: 1.4px;
  color: #7f97b0;
}
.demo-browser h2 {
  font-size: 23px;
  letter-spacing: -0.5px;
  margin-top: 5px;
}
.demo-browser header p {
  font-size: 11px;
  color: #8a98a7;
  margin: 7px 0 0;
}
.demo-browser-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffffa8;
  display: grid;
  place-items: center;
}
.demo-browser-close .icon {
  width: 16px;
  height: 16px;
}
.presentation-results {
  list-style: none;
  padding: 14px 26px;
  margin: 0;
  height: min(65dvh, 650px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #b4c6d8 transparent;
}
.presentation-results .result-row {
  padding: 19px 18px;
  background: #ffffffa8;
  border: 1px solid #fff9;
  border-radius: 16px;
  margin: 12px 0;
  gap: 14px;
}
.presentation-results .result-copy strong {
  font-size: 14px;
}
.presentation-results .result-copy p {
  font-size: 13px;
  line-height: 1.85;
}
.presentation-results .sample-code {
  font-size: 12px;
  line-height: 1.85;
}
.presentation-results .sample-image {
  max-height: none;
}
.demo-browser > footer {
  padding: 13px 26px;
  font-size: 10px;
  color: #8b9baa;
  border-top: 1px solid #dbe3eb;
}
/* Keep complete native windows available; no crop box on appearance or feature cards. */
.appearance-scene {
  height: auto;
  overflow: visible;
  padding: 28px 38px 28px 12px;
}
.content-art.native-content-art {
  height: auto;
  overflow: visible;
  padding-bottom: 22px;
}
.menu-art {
  height: auto;
  overflow: visible;
  padding-bottom: 18px;
}
@media (max-width: 600px) {
  .demo-browser {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 30px);
    border-radius: 22px;
  }
  .demo-browser > header {
    padding: 20px 19px 16px;
  }
  .presentation-results {
    padding: 8px 12px;
    height: 64dvh;
  }
  .presentation-results .result-row {
    padding: 16px 12px;
    gap: 9px;
  }
  .presentation-results .type-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    padding: 6px;
  }
  .presentation-results .result-copy p {
    font-size: 12px;
  }
  .presentation-results .sample-code {
    font-size: 10px;
    padding: 10px;
  }
  .demo-entry {
    font-size: 10px;
    margin-top: -10px;
    margin-bottom: 20px;
  }
  .appearance-scene {
    height: auto;
    padding: 25px 36px;
  }
  .content-art.native-content-art,
  .menu-art {
    height: auto;
  }
}

.shortcut-art { min-height: 280px; }
@media (min-width:769px) {
  .hero-quick {left:5%}
  .hero-preview {right:5%}
}