/* The new feature section advances as a pinned deck on natural page scroll. */
.uk-feature-section {
  height: 800svh;
  padding-top: 48px;
  padding-bottom: 96px;
}
.case-page .uk-feature-section > .uk-feature-copy {
  position: sticky;
  top: 48px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.uk-feature-copy > .feature-carousel-track {
  position: relative;
  height: min(720px, calc(100svh - 112px));
  overflow: visible;
  display: block;
  scroll-snap-type: none;
  cursor: auto;
  perspective: 1600px;
}
.case-page .uk-feature-copy .feature-carousel-track > .prototype-feature {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  border: 1px solid var(--case-border);
  border-radius: 28px;
  background: #faf9fc;
  box-shadow: 0 8px 24px #30243e0a;
  transform-origin: center top;
  will-change: transform;
}
[data-theme="dark"] .uk-feature-copy .feature-carousel-track > .prototype-feature { background: var(--design-surface); }
.uk-feature-copy > .feature-carousel-nav { display: none; }
@media(max-width:800px) {
  .uk-feature-section { padding-top: 32px; padding-bottom: 64px; }
  .case-page .uk-feature-section > .uk-feature-copy { top: 32px; }
  .uk-feature-copy > .feature-carousel-track { height: calc(100svh - 88px); }
}
@media(prefers-reduced-motion:reduce) {
  .case-page .uk-feature-copy .feature-carousel-track > .prototype-feature { will-change: auto; }
}
@media print {
  .uk-feature-section { height:auto; }
  .case-page .uk-feature-section > .uk-feature-copy { position:static; }
  .uk-feature-copy > .feature-carousel-track { height:auto; }
  .case-page .uk-feature-copy .feature-carousel-track > .prototype-feature { position:relative; transform:none!important; visibility:visible!important; height:auto; margin-bottom:24px; }
}

/* Keep the entire active card within the viewport and readable at rest. */
.uk-feature-copy > .feature-carousel-track {
  height: min(640px, calc(100svh - 128px));
}
.uk-feature-copy .prototype-feature-visual,
.uk-feature-copy .prototype-feature-copy {
  min-height: 0;
}
.uk-feature-copy .prototype-feature-copy { padding: 32px; }
.uk-feature-copy .prototype-feature-visual { padding: 24px; }
.uk-feature-copy .prototype-feature-letter > img { max-height: min(420px, calc(100svh - 224px)); }
@media(max-width:700px) {
  .uk-feature-copy > .feature-carousel-track { height: calc(100svh - 96px); }
  .case-page .uk-feature-copy .feature-carousel-track > .prototype-feature { grid-template-columns: 1fr; overflow-y: auto; }
  .uk-feature-copy .prototype-feature-visual { min-height: 200px; }
  .uk-feature-copy .prototype-feature-copy { padding: 24px; }
}

/* Stable background and lightweight card layers during scrolling. */
.uk-feature-section,
[data-theme="dark"] .uk-feature-section { background-image: none; }
.case-page .uk-feature-section > .uk-feature-copy { isolation: isolate; }
.uk-feature-copy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100svh;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background-color: #f4f0f8;
  background-image: linear-gradient(#bdb5cd24 1px,transparent 1px),linear-gradient(90deg,#bdb5cd24 1px,transparent 1px),linear-gradient(#f0eaf6,#f5f2f8);
  background-size:80px 80px,80px 80px,100% 100%;
}
[data-theme="dark"] .uk-feature-copy::before { background-color: var(--design-bg); background-image:linear-gradient(#b2a6cb12 1px,transparent 1px),linear-gradient(90deg,#b2a6cb12 1px,transparent 1px); }
.uk-feature-copy > .feature-carousel-track { perspective: none; }
.case-page .uk-feature-copy .feature-carousel-track > .prototype-feature {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 16px #30243e08;
  transition: none;
}
.uk-feature-copy .prototype-feature-visual { backdrop-filter: none; -webkit-backdrop-filter: none; }

.case-page .uk-feature-copy > .uk-feature-section-title {
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -.04em;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}
.uk-feature-copy > .feature-carousel-track { height: min(640px, calc(100svh - 208px)); }
@media(max-width:700px) {
  .case-page .uk-feature-copy > .uk-feature-section-title { font-size:24px; margin-bottom:16px; }
  .uk-feature-copy > .feature-carousel-track { height:calc(100svh - 152px); }
}

/* Keep outgoing cards below the dedicated heading area. */
.case-page .uk-feature-copy > .uk-feature-section-title {
  position: relative;
  z-index: 10;
  display: block;
  visibility: visible;
}
.uk-feature-copy > .feature-carousel-track {
  overflow: hidden;
  border-radius: 28px;
}

/* Breathing room below the dark section and around the section heading. */
.uk-feature-section { padding-top: 144px; }
.case-page .uk-feature-copy > .uk-feature-section-title { margin-bottom: 48px; }
@media(max-width:800px) {
  .uk-feature-section { padding-top: 96px; }
  .case-page .uk-feature-copy > .uk-feature-section-title { margin-bottom: 32px; }
}

/* Tab-controlled horizontal carousel replaces the scroll deck. */
.uk-feature-section { height:auto; }
.case-page .uk-feature-section > .uk-feature-copy { position:relative; top:auto; }
.uk-feature-copy::before { height:100%; }
.uk-feature-copy > .feature-carousel-track {
  display:flex; height:auto; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  align-items:stretch; gap:0;
}
.uk-feature-copy > .feature-carousel-track::-webkit-scrollbar { display:none; }
.case-page .uk-feature-copy .feature-carousel-track > .prototype-feature {
  position:relative; inset:auto; flex:0 0 100%; min-width:0;
  width:100%; height:auto; box-sizing:border-box; margin:0;
  scroll-snap-align:start; transform:none; visibility:visible;
  overflow:hidden; will-change:auto;
}
.uk-feature-copy > .uk-feature-tabs { margin:0 auto 32px; }
.case-page .uk-feature-copy > .uk-feature-section-title { margin-bottom:24px; }
@media(max-width:700px) {
  .uk-feature-copy > .uk-feature-tabs { margin-bottom:24px; justify-content:center; }
  .uk-feature-copy > .feature-carousel-track { height:auto; }
}

/* The grid covers the full section, including its top breathing room. */
.uk-feature-section {
  background-color:#f4f0f8;
  background-image:linear-gradient(#bdb5cd24 1px,transparent 1px),linear-gradient(90deg,#bdb5cd24 1px,transparent 1px),linear-gradient(#f0eaf6,#f5f2f8);
  background-size:80px 80px,80px 80px,100% 100%;
}
[data-theme="dark"] .uk-feature-section { background-color:var(--design-bg); background-image:linear-gradient(#b2a6cb12 1px,transparent 1px),linear-gradient(90deg,#b2a6cb12 1px,transparent 1px); background-size:80px 80px; }
.uk-feature-copy::before { content:none; }

/* Keep the feature copy inside a comfortable inset reading area. */
.case-page .uk-feature-copy .prototype-feature-copy {
  box-sizing: border-box;
  padding: 40px 72px 40px 40px;
}
.case-page .uk-feature-copy .prototype-feature-copy > h2,
.case-page .uk-feature-copy .prototype-feature-copy > p,
.case-page .uk-feature-copy .prototype-feature-copy > blockquote,
.case-page .uk-feature-copy .prototype-feature-copy > .care-letter-tags {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
}
@media(max-width:700px) {
  .case-page .uk-feature-copy .prototype-feature-copy {
    padding: 24px 32px 64px;
  }
}

/* A single real reading container keeps all copy within the same edges. */
.case-page .uk-feature-copy .prototype-feature-copy {
  padding: 40px 0;
}
.case-page .uk-feature-copy .uk-feature-reading {
  box-sizing: border-box;
  width: 84%;
  margin: auto;
  min-width: 0;
}
.case-page .uk-feature-copy .uk-feature-reading > h2 { margin: 0 0 24px; }
.case-page .uk-feature-copy .uk-feature-reading > p { margin: 0 0 32px; }
.case-page .uk-feature-copy .uk-feature-reading > blockquote { margin: 0 0 40px; }
.case-page .uk-feature-copy .uk-feature-reading > .care-letter-tags {
  width: 100%;
}
@media(max-width:700px) {
  .case-page .uk-feature-copy .prototype-feature-copy { padding:32px 0 64px; }
  .case-page .uk-feature-copy .uk-feature-reading { width:calc(100% - 48px); }
}

/* Compact section entry after removing the standalone heading. */
.case-page .uk-feature-section { padding-top:64px; }
@media(max-width:800px) {
  .case-page .uk-feature-section { padding-top:40px; }
}
