/* Final product story: discrete scroll changes, no scroll hijacking or large runtime. */
.hero-phone { animation: none; }
.hero-product { animation: product-arrival .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes product-arrival { from { opacity: .65; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.vision-section .vision-grid { grid-template-columns: 1.2fr .8fr; gap: 80px; }
.vision-grid h2 { max-width: 14ch; }
.reel-sequence { margin-top: 24px; letter-spacing: .045em; }
.reel-originals { margin-top: 20px; }
.reel-originals .text-link { display: flex; margin-top: 8px; }
.app-reel-panel { width: min(100%,300px); aspect-ratio: 9/16; margin-inline: auto; background: #eff4f8; }
.app-reel-panel video { object-fit: contain; }
.app-reel-panel .hero-play { background: #147dab; border: 1px solid #ffffffcc; box-shadow: 0 8px 25px #123e4920; color: #fff; }
.app-reel-panel.is-playing .hero-play { display: none; }
.reel-caption { text-align: center; margin-top: 20px; font-size: 14px!important; line-height: 1.7; color: var(--ink); }
.reel-caption span { color: var(--muted); font-size: 13px; }
.video-dialog { max-height: calc(100svh - 30px); overflow: auto; }
.video-dialog.is-portrait { max-width: 450px; }
.video-dialog.is-portrait video { width: auto; max-width: 100%; height: min(60svh,620px); margin-inline: auto; object-fit: contain; background: #f5f8fa; }
.video-queue { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.video-queue span { font-size: 13px; color: var(--muted); }
.video-queue button { min-height: 44px; color: #147dab; font-size: 14px; font-weight: 600; }
.video-queue [hidden] { display: none; }
.care-product-story { margin-top: 70px; padding-top: 60px; border-top: 1px solid #bfd4df; }
.story-intro { text-align: center; max-width: 650px; margin-inline: auto; }
.story-intro h3 { font-size: clamp(36px,3.6vw,52px); line-height: 1.1; }
.story-intro p:not(.eyebrow) { margin-top: 22px; color: var(--muted); }
.story-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 85px; align-items: start; margin-top: 45px; }
.story-chapters { min-width: 0; }
.story-chapter { display: block; text-align: left; width: 100%; min-height: 250px; padding: 35px 30px; border: 0; border-left: 2px solid #bfcfda; background: none; font-family: inherit; transition: border-color .4s,background-color .4s; }
.story-chapter.is-current { border-left-color: #147dab; background: linear-gradient(90deg,#ffffffa8,transparent); }
.story-number { display: block; color: #3d7087; font-size: 12px; font-weight: 600; letter-spacing: .09em; }
.story-title { display: block; font-size: clamp(26px,2.2vw,34px); line-height: 1.2; letter-spacing: -.04em; font-weight: 500; margin-top: 18px; color: var(--ink); }
.story-description { display: block; max-width: 40ch; margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.story-preview { position: sticky; top: 132px; display: grid; justify-items: center; padding: 28px 0 20px; isolation: isolate; }
.story-screen-halo { position: absolute; width: min(100%,440px); aspect-ratio: 1; top: 55px; border-radius: 50%; background: radial-gradient(circle,#ffffffb0,#cfe6ee60 65%,transparent 70%); z-index: -1; }
.story-preview img { width: 290px; max-width: 100%; height: auto; filter: drop-shadow(0 20px 16px #284c661a); }
.story-preview figcaption { text-align: center; max-width: 30ch; margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.story-preview figcaption strong { display: block; font-size: 16px; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
.story-preview.is-changing img { animation: screen-settle .45s cubic-bezier(.2,.7,.2,1); }
@keyframes screen-settle { from { opacity: .6; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.marketplace-flow { grid-template-columns: repeat(5,minmax(0,1fr)); }
.flow-step { min-width: 0; }
.flow-step h4 { font-size: 20px; line-height: 1.2; }
.flow-step p { font-size: 15px!important; line-height: 1.65!important; }
.verification-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.verification-groups>article { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 24px; min-width: 0; }
.verification-groups>article>h4 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 22px; }
.verification-groups .verification-flow { display: grid; grid-template-columns: 1fr; gap: 16px; }
.verification-groups .verification-flow li { padding: 0; border: 0; background: none; }
.verification-groups .verification-flow li::after { display: none; }
.verification-groups .verification-flow h4 { font-size: 16px; font-weight: 500; letter-spacing: 0; }
.verification-groups .verification-flow p { font-size: 15px!important; }
.verification-boundary { margin-top: 18px; }
.founder-film { margin: 0 0 26px; }
.section.social-section { padding-block: 76px 60px; background: linear-gradient(180deg,#fff,#f9fbfd); }
.social-heading h2 { font-size: clamp(36px,3.5vw,52px); }
.instagram-snapshots { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin-top: 36px; padding-bottom: 6px; }
.instagram-snapshot { display: block; min-width: 0; }
.snapshot-image { position: relative; overflow: hidden; aspect-ratio: 4/5; background: #ecf4f7; border: 1px solid #dce7ed; border-radius: 18px; }
.snapshot-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.instagram-snapshot:hover img { transform: scale(1.025); }
.snapshot-open { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #147dab; background: #fff; border: 1px solid #d7e4eb; font-size: 22px; transition: transform .25s; }
.instagram-snapshot:hover .snapshot-open { transform: translate(2px,-2px); }
.snapshot-caption { padding: 19px 2px 0; }
.snapshot-caption>span { display: block; font-size: 11px; color: #536b7b; letter-spacing: .06em; line-height: 1.6; }
.snapshot-caption h3 { margin-top: 8px; font-size: 24px; line-height: 1.25; letter-spacing: -.035em; font-weight: 500; }
.snapshot-footnote { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.snapshot-footnote p { font-size: 14px!important; color: var(--muted); }
.social-carousel-controls { display: none; }
.social-archive { margin-top: 20px; }
.social-card .social-row { padding-block: 5px; }
.move-pillars { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; }
.move-pillars span { font-size: 11px; font-weight: 600; color: #2f7d46; letter-spacing: .055em; }
.move-concept-note { margin-top: 15px; }
@media(max-width:1100px) {
  .story-layout { gap: 40px; }
  .story-chapter { padding-inline: 22px; }
}
@media(max-width:900px) {
  .vision-section .vision-grid { grid-template-columns: 1fr; gap: 38px; }
  .app-reel-panel { width: 260px; }
  .care-product-story { margin-top: 46px; padding-top: 42px; }
  .story-layout { grid-template-columns: 1fr; gap: 20px; }
  .story-preview { position: relative; top: auto; grid-row: 1; padding-top: 0; }
  .story-preview img { width: 190px; }
  .story-screen-halo { width: 290px; top: 10px; }
  .story-chapter { min-height: 0; padding: 22px; }
  .story-title { font-size: 27px; margin-top: 12px; }
  .story-description { font-size: 17px; margin-top: 12px; }
  .marketplace-flow { grid-template-columns: 1fr; }
  .verification-groups { grid-template-columns: 1fr; }
  .section.social-section { padding-block: 50px; }
  .instagram-snapshots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1px; overscroll-behavior-inline: contain; gap: 20px; padding: 3px 1px 14px; margin-top: 16px; }
  .instagram-snapshot { flex: 0 0 42vw; scroll-snap-align: start; }
  .social-carousel-controls { display: flex; flex-shrink: 0; }
  .snapshot-caption h3 { font-size: 22px; }
  .snapshot-footnote { margin-top: 14px; }
}
@media(max-width:620px) {
  .instagram-snapshot { flex-basis: 80vw; }
  .snapshot-footnote { align-items: start; flex-wrap: wrap; }
  .story-intro h3 { font-size: 36px; }
  .story-chapter { padding-inline: 18px; }
  .app-reel-panel { width: 240px; }
  .video-queue { flex-wrap: wrap; gap: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-product,.story-preview.is-changing img { animation: none; }
  .story-chapter,.snapshot-image img,.snapshot-open { transition: none; }
  .instagram-snapshot:hover img,.instagram-snapshot:hover .snapshot-open { transform: none; }
  .story-preview { position: relative; top: auto; }
}