/* Interior public-page compositions. Only /features/ opts in during this lane. */
.features-page .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 800; }
.features-page .eyebrow, .features-page .footer-bottom { color: var(--muted); }

.features-intro { min-height: 680px; background: #fff; }
.features-intro-geometry { position: absolute; z-index: -1; inset: 0; background: linear-gradient(154deg, transparent 0 47%, rgba(255, 241, 225, 0.66) 47% 61%, transparent 61%); }
.features-intro-geometry::before { content: ""; position: absolute; top: -10%; right: -7%; width: 71%; height: 117%; clip-path: polygon(48% 0, 100% 0, 100% 82%, 6% 100%, 0 35%); background: linear-gradient(128deg, #eee9ff, #dce9ff 67%, #eaf3ff); }
.features-intro-layout { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); align-items: center; min-height: 680px; }
.features-intro-copy { position: relative; z-index: 2; padding: 40px 0 70px; }
.features-intro h1 { max-width: 690px; margin-top: 23px; }
.features-intro h1 span { color: var(--lavender); }
.features-intro .page-intro-lead { margin-top: 27px; }
.features-availability { margin-top: 13px; color: #63708a; font-size: 0.83rem; }
.features-intro-actions { margin-top: 29px; }
.features-intro-media { align-self: stretch; }
.feature-phone { position: absolute; overflow: hidden; padding: 7px; border: 2px solid #0e1219; border-radius: 35px; background: #0e1219; box-shadow: var(--shadow-media), 0 0 0 2px #565a61; transform-origin: center bottom; }
.feature-phone::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 12px; width: 37%; height: 15px; border-radius: 20px; background: #050609; transform: translateX(-50%); }
.feature-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }
.feature-phone-intro-back { z-index: 1; left: 12%; top: 130px; width: 233px; height: 490px; transform: rotate(-8deg); }
.feature-phone-intro-front { z-index: 2; left: 46%; top: 78px; width: 250px; height: 525px; transform: rotate(6deg); }
.media-note { position: absolute; z-index: 3; right: 1%; bottom: 60px; color: #32435c; font-family: "Segoe Print", "Bradley Hand", cursive; font-size: 1rem; font-style: italic; line-height: 1.15; transform: rotate(-8deg); }

.features-prologue { padding: 115px 0 105px; }
.features-prologue-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr) minmax(0, 0.76fr); gap: clamp(28px, 4vw, 68px); align-items: start; }
.features-prologue .eyebrow { padding-top: 13px; }
.features-prologue h2 { max-width: 665px; font-size: clamp(2.3rem, 3.35vw, 3.8rem); font-weight: 800; letter-spacing: -0.065em; line-height: 1.1; }
.features-prologue-inner > p:last-child { max-width: 300px; padding-top: 13px; color: var(--muted); font-size: 0.92rem; line-height: 1.65; }

.feature-chapter { overflow: hidden; padding: 112px 0; }
.chapter-processing { background: #f5f9ff; }
.chapter-review { background: #fff; }
.chapter-preview { background: #fbfaff; }
.chapter-library { padding-bottom: 120px; background: #fff; }
.chapter-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(50px, 7vw, 112px); align-items: center; }
.chapter-layout-reverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.chapter-layout-reverse .chapter-copy { grid-column: 2; grid-row: 1; }
.chapter-layout-reverse .chapter-media { grid-column: 1; grid-row: 1; }
.chapter-copy { max-width: 500px; }
.chapter-copy h2 { margin-top: 18px; font-size: clamp(2.85rem, 4.2vw, 4.65rem); font-weight: 800; letter-spacing: -0.075em; line-height: 1.05; }
.chapter-lead { max-width: 470px; margin-top: 24px; color: #4c586e; font-size: 1.06rem; line-height: 1.64; }
.chapter-details { display: grid; gap: 13px; max-width: 460px; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid #d8e0ec; list-style: none; }
.chapter-details li { display: flex; gap: 12px; color: #4f5d72; font-size: 0.87rem; line-height: 1.5; }
.chapter-details li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; color: #3979e2; background: var(--pastel-blue); font-size: 0.7rem; font-weight: 800; }
.chapter-media { min-height: 620px; margin: 0; overflow: visible; }
.chapter-media::before { content: ""; position: absolute; z-index: -1; inset: 37px -30px 70px 30px; clip-path: polygon(19% 0, 100% 0, 100% 75%, 77% 100%, 0 100%, 0 24%); background: linear-gradient(132deg, var(--pastel-blue), var(--pastel-lavender) 70%, var(--pastel-peach)); }
.chapter-media figcaption { position: absolute; z-index: 3; right: 4%; bottom: 7px; color: #68758d; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; }
.chapter-phone { width: 245px; height: 516px; }
.processing-media .chapter-phone { left: 29%; top: 48px; transform: rotate(4deg); }
.review-media::before { inset: 25px 16px 65px -25px; background: linear-gradient(137deg, var(--pastel-peach), var(--pastel-lavender) 64%, var(--pastel-blue)); }
.review-phone-back { z-index: 1; left: 14%; top: 100px; transform: rotate(-8deg); }
.review-phone-front { z-index: 2; left: 48%; top: 29px; transform: rotate(6deg); }
.preview-media::before { background: linear-gradient(125deg, var(--pastel-mint), var(--pastel-blue) 53%, var(--pastel-lavender)); }
.preview-phone-back { z-index: 1; left: 16%; top: 96px; transform: rotate(-8deg); }
.preview-phone-front { z-index: 2; left: 47%; top: 28px; transform: rotate(5deg); }
.library-media::before { inset: 30px 15px 63px -25px; background: linear-gradient(137deg, var(--pastel-blue), var(--pastel-peach) 61%, var(--pastel-lavender)); }
.library-phone-back { z-index: 1; left: 14%; top: 95px; transform: rotate(-8deg); }
.library-phone-front { z-index: 2; left: 48%; top: 29px; transform: rotate(5deg); }

.history-detail { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(35px, 5vw, 70px); align-items: center; margin-top: 73px; padding-top: 61px; border-top: 1px solid var(--line); }
.history-detail h3 { max-width: 390px; margin-top: 15px; font-size: clamp(2rem, 2.75vw, 3rem); font-weight: 800; letter-spacing: -0.065em; line-height: 1.12; }
.history-detail p:last-child { max-width: 410px; margin-top: 18px; color: var(--muted); font-size: 0.94rem; line-height: 1.62; }
.history-detail-shots { position: relative; isolation: isolate; display: flex; justify-content: flex-start; align-items: center; gap: clamp(22px, 3vw, 38px); min-width: 0; min-height: 470px; padding: 42px clamp(36px, 5vw, 76px); }
.history-detail-shots::before { content: ""; position: absolute; z-index: -1; inset: 0; clip-path: polygon(15% 0, 100% 0, 100% 80%, 81% 100%, 0 100%, 0 20%); background: linear-gradient(132deg, var(--pastel-blue), var(--pastel-lavender) 68%, var(--pastel-peach)); }
.history-detail-shots figure { flex: 0 1 180px; min-width: 0; margin: 0; }
.history-detail-shots figure:first-child { transform: translateY(-10px) rotate(-3deg); }
.history-detail-shots figure:last-child { transform: translateY(15px) rotate(3deg); }
.history-detail-shots img { width: 100%; height: auto; aspect-ratio: 400 / 840; border: 5px solid #161c28; border-radius: 20px; box-shadow: 8px 16px 28px rgba(18, 28, 49, 0.14); }
.history-detail-shots figcaption { margin-top: 15px; color: #5d6880; font-size: 0.77rem; font-weight: 700; text-align: center; }

.features-closing { overflow: hidden; padding: 105px 0 113px; background: linear-gradient(142deg, #eef5ff, #f4f1ff 62%, #fff1df); }
.features-closing::before { content: ""; position: absolute; right: -8%; top: -65%; width: 40%; height: 170%; transform: rotate(26deg); background: rgba(255, 255, 255, 0.35); }
.features-closing-inner { position: relative; max-width: 940px; text-align: center; }
.features-closing h2 { margin-top: 19px; font-size: clamp(2.7rem, 4.3vw, 4.65rem); font-weight: 800; letter-spacing: -0.075em; line-height: 1.06; }
.features-closing p:not(.eyebrow) { margin-top: 20px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.features-closing-actions { justify-content: center; margin-top: 30px; }

@media (max-width: 1100px) {
  .feature-phone-intro-back { left: 5%; }
  .feature-phone-intro-front { left: 42%; }
  .chapter-layout, .chapter-layout-reverse { gap: 45px; }
  .chapter-phone { width: 210px; height: 442px; }
  .chapter-media { min-height: 540px; }
}

@media (max-width: 800px) {
  .features-intro, .features-intro-layout { min-height: 0; }
  .features-intro-layout { grid-template-columns: 1fr; }
  .features-intro-copy { padding: 68px 0 0; }
  .features-intro h1 { max-width: 700px; }
  .features-intro-media { height: 550px; }
  .feature-phone-intro-back { left: 23%; top: 79px; width: 213px; height: 448px; }
  .feature-phone-intro-front { left: 50%; top: 25px; width: 229px; height: 482px; }
  .media-note { right: 1%; bottom: 9px; }
  .features-intro-geometry::before { top: 31%; right: -22%; width: 119%; height: 73%; }
  .features-prologue { padding: 95px 0; }
  .features-prologue-inner { grid-template-columns: 1fr 1fr; }
  .features-prologue .eyebrow { grid-column: 1 / -1; padding: 0; }
  .features-prologue-inner > p:last-child { padding-top: 4px; }
  .feature-chapter { padding: 90px 0; }
  .chapter-layout, .chapter-layout-reverse { grid-template-columns: 1fr; gap: 28px; }
  .chapter-layout-reverse .chapter-copy, .chapter-layout-reverse .chapter-media { grid-column: 1; }
  .chapter-layout-reverse .chapter-copy { grid-row: 1; }
  .chapter-layout-reverse .chapter-media { grid-row: 2; }
  .chapter-copy { max-width: 650px; }
  .chapter-copy h2 { max-width: 650px; }
  .chapter-media { min-height: 570px; max-width: 660px; width: 100%; margin-inline: auto; }
  .chapter-phone { width: 235px; height: 495px; }
  .history-detail { grid-template-columns: 1fr; gap: 28px; }
  .history-detail-shots { justify-content: center; min-height: 465px; padding-inline: 40px; }
}

@media (max-width: 600px) {
  .features-intro-copy { padding-top: 49px; }
  .features-intro h1 { font-size: clamp(2.7rem, 11vw, 3.8rem); }
  .features-intro .page-intro-lead { margin-top: 22px; font-size: 0.98rem; }
  .features-intro-actions { margin-top: 23px; }
  .features-intro-media { height: 435px; margin-inline: -18px; }
  .feature-phone { padding: 5px; border-radius: 28px; }
  .feature-phone::before { top: 9px; height: 11px; }
  .feature-phone img { border-radius: 22px; }
  .feature-phone-intro-back { left: 9%; top: 83px; width: 160px; height: 337px; }
  .feature-phone-intro-front { left: 46%; top: 35px; width: 173px; height: 364px; }
  .media-note { right: 1%; bottom: 0; font-size: 0.78rem; }
  .features-intro-geometry::before { top: 39%; right: -44%; width: 151%; height: 68%; }
  .features-prologue { padding: 76px 0; }
  .features-prologue-inner { display: block; }
  .features-prologue h2 { margin-top: 16px; font-size: clamp(2.25rem, 9vw, 3rem); }
  .features-prologue-inner > p:last-child { max-width: 440px; margin-top: 18px; padding: 0; }
  .feature-chapter { padding: 76px 0 64px; }
  .chapter-copy h2 { font-size: clamp(2.45rem, 9.3vw, 3.25rem); }
  .chapter-lead { margin-top: 19px; font-size: 0.98rem; }
  .chapter-details { gap: 12px; margin-top: 23px; padding-top: 20px; }
  .chapter-media { min-height: 430px; margin-inline: -18px; width: calc(100% + 36px); overflow: hidden; }
  .chapter-media::before { inset: 31px 0 51px; }
  .chapter-phone { width: 163px; height: 344px; }
  .processing-media .chapter-phone { left: 29%; top: 42px; }
  .review-phone-back, .preview-phone-back, .library-phone-back { left: 9%; top: 69px; }
  .review-phone-front, .preview-phone-front, .library-phone-front { left: 47%; top: 24px; }
  .chapter-media figcaption { left: 20px; right: 20px; bottom: 8px; padding: 5px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.92); text-align: center; font-size: 0.63rem; }
  .history-detail { display: block; margin-top: 46px; padding-top: 45px; }
  .history-detail-shots { min-height: 375px; margin-top: 30px; gap: 18px; padding: 24px 22px 32px; }
  .history-detail-shots figure { flex-basis: 140px; }
  .history-detail-shots figure:first-child { transform: translateY(-6px); }
  .history-detail-shots figure:last-child { transform: translateY(6px); }
  .history-detail-shots figcaption { margin-top: 10px; font-size: 0.7rem; }
  .features-closing { padding: 80px 0 89px; }
  .features-closing h2 { font-size: clamp(2.45rem, 9.5vw, 3.3rem); }
  .features-closing-actions { gap: 10px 18px; }
}

@media (max-width: 370px) {
  .features-intro-actions { align-items: flex-start; flex-direction: column; }
  .feature-phone-intro-back { left: 4%; }
  .feature-phone-intro-front { left: 43%; }
  .review-phone-front, .preview-phone-front, .library-phone-front { left: 43%; }
}