/* Framework and arrangement product pages: shared light product narrative. */
@font-face{
  font-family:"AICAD Product Sans";
  src:url("../../assets/fonts/about/noto-sans-sc-500.woff2") format("woff2");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}

.pp-hero{
  --pp-hero-position:69% center;
  position:relative;
  min-height:clamp(44rem,90svh,50rem);
  min-height:clamp(44rem,90dvh,50rem);
  overflow:hidden;
  isolation:isolate;
  background:#eef8ff;
  color:#101820;
}

body[data-page="product-framework"] .pp-hero{
  --pp-hero-position:72% center;
}

body[data-page="product-arrangement"] .pp-hero{
  --pp-hero-position:70% center;
}

.pp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,#f8fcff 0%,rgba(248,252,255,0.99) 31%,rgba(248,252,255,0.9) 42%,rgba(248,252,255,0.38) 57%,rgba(248,252,255,0) 73%);
}

.pp-breadcrumb{
  position:absolute;
  top:5.4rem;
  left:50%;
  z-index:4;
  width:min(var(--ll-max),100%);
  padding:0 var(--ll-gutter);
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.45rem;
  margin:0;
  font-size:0.82rem;
  line-height:1.4;
  color:rgba(16,24,32,0.45);
}

.pp-breadcrumb a{
  color:rgba(16,24,32,0.55);
  transition:color 180ms var(--ll-ease);
}

.pp-breadcrumb a:hover{
  color:#0067c8;
}

.pp-breadcrumb [aria-current="page"]{
  color:rgba(16,24,32,0.82);
  font-weight:520;
}

.pp-hero__inner{
  position:relative;
  z-index:auto;
  width:min(var(--ll-max),100%);
  min-height:clamp(44rem,90svh,50rem);
  min-height:clamp(44rem,90dvh,50rem);
  margin:0 auto;
  padding:8.6rem var(--ll-gutter) 3.6rem;
  display:flex;
  align-items:center;
}

.pp-hero__copy{
  position:relative;
  z-index:3;
  width:min(35rem,44%);
  padding:1.4rem 0 0;
}

.pp-hero h1{
  margin:0;
  max-width:7.5em;
  font-family:"AICAD Product Sans","Noto Sans SC","Microsoft YaHei UI",sans-serif;
  font-size:4.75rem;
  font-weight:500;
  line-height:0.98;
  letter-spacing:0;
  color:#101820;
}

.pp-hero__brand,
.pp-hero__name{
  display:block;
  white-space:nowrap;
}

.pp-hero__name{
  margin-top:0.11em;
}

.pp-hero__tagline{
  max-width:25em;
  margin:1.55rem 0 0;
  font-size:1.28rem;
  font-weight:500;
  line-height:1.55;
  letter-spacing:0;
  color:#20364a;
  text-wrap:pretty;
}

.pp-hero__lead{
  max-width:31em;
  margin:0.9rem 0 0;
  font-size:0.95rem;
  line-height:1.75;
  color:#5b6d7d;
  text-wrap:pretty;
}

.pp-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.35rem;
  margin-top:1.8rem;
}

.pp-hero .pd-btn--primary{
  min-height:3rem;
  padding:0 1.45rem;
  box-shadow:0 10px 28px rgba(0,113,227,0.16);
}

.pp-text-link{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  min-height:2.75rem;
  padding:0.2rem 0;
  font-size:0.94rem;
  font-weight:520;
  color:#176cae;
  border-bottom:1px solid rgba(23,108,174,0.28);
  transition:color 180ms var(--ll-ease),border-color 180ms var(--ll-ease);
}

.pp-text-link:hover{
  color:#005fb8;
  border-color:#005fb8;
}

.pp-hero__visual{
  position:absolute;
  top:0;
  bottom:0;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
  z-index:0;
  width:auto;
  margin:0;
  overflow:hidden;
}

.pp-hero__screen{
  position:absolute;
  inset:0;
}

.pp-hero__screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pp-hero-position);
  filter:saturate(0.94) brightness(1.02);
}

.pp-feature-reel{
  position:relative;
  background:#fff;
  color:#101820;
  border-top:1px solid rgba(40,112,164,0.1);
}

.pp-feature-reel__sticky{
  width:100%;
  min-height:100svh;
  min-height:100dvh;
  padding:5.65rem 0 1.25rem;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:1rem;
  overflow:hidden;
}

.pp-feature-reel[data-enhanced="true"]{
  height:390svh;
  height:390dvh;
}

.pp-feature-reel[data-enhanced="true"] .pp-feature-reel__sticky{
  position:sticky;
  top:0;
}

.pp-feature-reel__head{
  width:min(var(--ll-max),100%);
  margin:0 auto;
  padding:0 var(--ll-gutter);
  display:flex;
  justify-content:center;
  text-align:center;
}

.pp-feature-reel__head h2{
  margin:0 auto;
  max-width:16em;
  font-family:"Segoe UI Variable Display","Microsoft YaHei UI","PingFang SC","Noto Sans SC",sans-serif;
  font-size:3.65rem;
  font-weight:520;
  line-height:1.14;
  letter-spacing:0;
  text-wrap:balance;
}

.pp-feature-reel__viewport{
  min-width:0;
  overflow:hidden;
  outline:none;
}

.pp-feature-reel__viewport:focus-visible{
  outline:2px solid #0875d1;
  outline-offset:-4px;
}

.pp-feature-reel__track{
  height:100%;
  padding:0 var(--ll-gutter);
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.25vw,2rem);
  will-change:transform;
  transform:translate3d(0,0,0);
}

.pp-feature-card{
  flex:0 0 min(72vw,64rem);
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(40,112,164,0.14);
  border-radius:5px;
  background:#fff;
  box-shadow:0 20px 54px rgba(40,112,164,0.1);
}

.pp-feature-card figure{
  position:relative;
  aspect-ratio:16 / 9;
  margin:0;
  overflow:hidden;
  background:#d9edf9;
}

.pp-feature-card figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(16,24,32,0.05);
}

.pp-feature-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}

body.ll-shell .pp-feature-card figure.pp-feature-card__media--contain,
body.ll-shell .pp-feature-card__media--contain img{
  background:#4eb45a;
}

body.ll-shell .pp-feature-card__media--contain img{
  display:block;
  height:100%;
  object-fit:contain;
}

.pp-feature-card__copy{
  min-height:5rem;
  padding:0.95rem 1.2rem;
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  gap:0.85rem;
  align-items:center;
}

.pp-feature-card__index{
  font-size:0.74rem;
  font-weight:600;
  line-height:1.4;
  color:#0875d1;
  font-variant-numeric:tabular-nums;
}

.pp-feature-card h3{
  margin:0;
  font-size:1.38rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:0;
  color:#182937;
}

.pp-text-link:focus-visible,
.pp-breadcrumb a:focus-visible{
  outline:2px solid #0875d1;
  outline-offset:3px;
}

body[data-page="product-framework"] .pd-coverflow-section,
body[data-page="product-arrangement"] .pd-coverflow-section,
body[data-page="product-framework"] .pd-related,
body[data-page="product-arrangement"] .pd-related{
  background:#eef8ff;
}

body[data-page="product-framework"] .pd-evidence,
body[data-page="product-arrangement"] .pd-evidence{
  background:#fff;
}

body[data-page="product-framework"] .pd-related,
body[data-page="product-arrangement"] .pd-related{
  border-top-color:rgba(40,112,164,0.1);
}

body[data-page="product-framework"] .pd-coverflow-section__head,
body[data-page="product-arrangement"] .pd-coverflow-section__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  text-align:center;
}

body[data-page="product-framework"] .pd-coverflow-section__title,
body[data-page="product-arrangement"] .pd-coverflow-section__title{
  max-width:16em;
}

body[data-page="product-framework"] .pd-coverflow-section__lead,
body[data-page="product-arrangement"] .pd-coverflow-section__lead{
  margin-top:1.15rem;
  max-width:42ch;
}

@media (max-width:1023px){
  .pp-hero::after{
    background:linear-gradient(90deg,#f8fcff 0%,rgba(248,252,255,0.98) 40%,rgba(248,252,255,0.52) 64%,rgba(248,252,255,0) 88%);
  }

  .pp-hero__copy{
    width:min(33rem,56%);
  }

  .pp-hero h1{
    font-size:4.15rem;
  }

  .pp-feature-card{
    flex-basis:min(80vw,58rem);
  }
}

@media (max-width:760px){
  .pp-hero{
    min-height:auto;
    padding-bottom:1.25rem;
    background:#eef8ff;
  }

  .pp-hero::after{
    display:none;
  }

  .pp-breadcrumb{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    padding:5.35rem var(--ll-gutter) 0;
    transform:none;
    font-size:0.75rem;
  }

  .pp-hero__inner{
    min-height:0;
    padding:2.35rem var(--ll-gutter) 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }

  .pp-hero__copy{
    width:100%;
    padding:0;
  }

  .pp-hero h1{
    max-width:none;
    font-size:3rem;
    line-height:1;
  }

  .pp-hero__tagline{
    margin-top:1.1rem;
    font-size:1.08rem;
  }

  .pp-hero__lead{
    margin-top:0.8rem;
    font-size:0.92rem;
    line-height:1.68;
  }

  .pp-hero__actions{
    margin-top:1.45rem;
  }

  .pp-hero .pd-btn--primary{
    flex:1 1 auto;
  }

  .pp-text-link{
    flex:0 0 auto;
  }

  .pp-hero__visual{
    position:relative;
    inset:auto;
    width:calc(100% + (var(--ll-gutter) * 2));
    margin:2.1rem calc(var(--ll-gutter) * -1) 0;
    overflow:visible;
  }

  .pp-hero__screen{
    position:relative;
    inset:auto;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-top:1px solid rgba(40,112,164,0.12);
    border-bottom:1px solid rgba(40,112,164,0.12);
  }

  .pp-hero__screen img{
    object-position:center center;
    filter:saturate(0.96) brightness(1.02);
  }

  .pp-feature-reel,
  .pp-feature-reel[data-enhanced="true"]{
    height:auto;
  }

  .pp-feature-reel__sticky,
  .pp-feature-reel[data-enhanced="true"] .pp-feature-reel__sticky{
    position:relative;
    top:auto;
    min-height:0;
    padding:4.6rem 0 2.2rem;
    display:block;
    overflow:visible;
  }

  .pp-feature-reel__head h2{
    max-width:100%;
    font-size:2.5rem;
    line-height:1.18;
  }

  .pp-feature-reel__viewport{
    margin-top:1.7rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--ll-gutter);
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .pp-feature-reel__viewport::-webkit-scrollbar{
    display:none;
  }

  .pp-feature-reel__track{
    height:auto;
    padding-right:var(--ll-gutter);
    gap:0.85rem;
    transform:none !important;
    will-change:auto;
  }

  .pp-feature-card{
    flex-basis:calc(100vw - (var(--ll-gutter) * 1.6));
    scroll-snap-align:start;
    box-shadow:0 12px 34px rgba(40,112,164,0.09);
  }

  .pp-feature-card__copy{
    min-height:4.6rem;
    padding:0.85rem 1rem;
  }
}

@media (max-width:420px){
  .pp-hero__actions{
    align-items:stretch;
  }

  .pp-hero .pd-btn--primary{
    width:100%;
  }

  .pp-text-link{
    width:max-content;
  }

  .pp-feature-reel__head h2{
    font-size:2.25rem;
  }

  .pp-feature-card{
    flex-basis:calc(100vw - (var(--ll-gutter) * 1.35));
  }
}

@media (prefers-reduced-motion:reduce){
  .pp-feature-reel,
  .pp-feature-reel[data-enhanced="true"]{
    height:auto;
  }

  .pp-feature-reel__sticky,
  .pp-feature-reel[data-enhanced="true"] .pp-feature-reel__sticky{
    position:relative;
    top:auto;
    min-height:auto;
  }

  .pp-feature-reel__viewport{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }

  .pp-feature-reel__track{
    transform:none !important;
  }

  .pp-feature-card{
    scroll-snap-align:start;
  }

  .pp-text-link,
  .pp-breadcrumb a{
    transition:none;
  }
}