/* Bible Loom base is retained; Resonance's compact product story lives here. */
.language-nav a { display:inline-flex; align-items:center; padding:0 8px; min-height:44px; }
.language-nav a[aria-current] { color:var(--ink); font-weight:600; }
.app-screen { display:block; width:100%; height:auto; }
.screen-frame { margin-inline:auto; overflow:hidden; border-radius:20px; }
.matching-screen { max-width:440px; }
.capture-window .app-screen { border-radius:12px; }
.hero { padding-top:32px; padding-bottom:64px; }
.hero-motion { max-width:480px; margin-inline:auto; }
.motion-stage { position:relative; aspect-ratio:24 / 19; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:white; box-shadow:0 16px 48px #11111408; }
.motion-stage img, .motion-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.motion-stage video { position:absolute; inset:0; }
.motion-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; padding:0; list-style:none; }
.motion-steps li { border-top:2px solid var(--line); padding-top:10px; font-size:14px; line-height:1.4; font-weight:600; color:var(--gray); word-break:keep-all; }
.motion-steps li > span { display:block; }
.motion-steps li > span:first-child { margin-bottom:4px; font-size:11px; }
.motion-steps li.is-active { border-color:var(--blue); color:var(--blue); }
.motion-toggle { position:absolute; right:12px; bottom:12px; display:grid; place-items:center; width:44px; height:44px; padding:0; background:#f4f4f6ed; border:1px solid var(--line); border-radius:50%; font-size:16px; }
.motion-toggle::before { content:'Ⅱ'; font-weight:700; }
.motion-toggle[data-paused='true']::before { content:'▶'; font-size:13px; }
.experience-layout { max-width:1000px; display:grid; grid-template-columns:1fr 1fr; gap:32px 56px; align-items:center; }
.experience-heading { text-align:left; }
.section-description { margin-left:0; }
.connection-path { list-style:none; margin:0; padding:0; grid-column:1; }
.connection-path li { display:flex; align-items:center; gap:16px; padding:16px 0; border-top:1px solid #dedee5; font-size:17px; line-height:1.5; }
.connection-path span { color:var(--blue); font-size:13px; font-weight:600; }
.experience-content { grid-column:2; grid-row:1 / 3; margin:0; width:100%; }
.demo-note { margin-top:16px; text-align:left; }
.scripture-section { padding-top:72px; padding-bottom:64px; }
.capture-window { padding:24px; min-height:230px; display:flex; align-items:center; }
.feature-pair { gap:40px; }
.sticky-download { padding:4px 16px calc(4px + env(safe-area-inset-bottom)); --badge-height:40px; }
body.has-sticky-download { padding-bottom:calc(53px + env(safe-area-inset-bottom)); }
@media(max-width:959px) {
  .hero { gap:24px; padding-top:16px; padding-bottom:40px; }
  .hero .description { margin-top:12px; }
  .hero .store-links { margin-top:16px; }
  .hero .availability { margin-top:6px; }
  .hero .demo-entry { margin-top:4px; }
  .experience-layout { grid-template-columns:1fr; gap:24px; }
  .experience-content { grid-column:auto; grid-row:auto; max-width:440px; margin-inline:auto; }
  .connection-path { grid-column:auto; }
  .capture-window { min-height:0; }
}
@media(max-width:600px) {
  .site-header { height:60px; }
  .hero { gap:16px; padding-top:12px; }
  :root,html[lang='en'] { --type-display:32px; --badge-height:40px; }
  .hero h1 { font-size:var(--type-display); line-height:1.15; letter-spacing:-.035em; }
  .hero .description { font-size:15px; line-height:1.5; max-width:38ch; }
  .hero .store-links { margin-top:12px; }
  .hero .availability { font-size:12px; }
  .hero .demo-entry { font-size:14px; }
  .motion-steps { gap:8px; margin-bottom:12px; }
  .motion-steps li { padding-top:7px; font-size:14px; }
  .motion-steps li > span:first-child { display:none; }
  .motion-stage { border-radius:20px; }
  .motion-toggle { right:8px; bottom:8px; }
  .experience-section { padding:40px 0; }
  .connection-path li { font-size:16px; padding:12px 0; }
  .scripture-section { padding-top:48px; padding-bottom:40px; }
  .feature h3 { font-size:22px; }
  .capture-window { padding:12px; margin-top:16px; }
}
@media(max-width:340px) {
  :root,html[lang='en'] { --type-display:28px; }
  .motion-steps li { font-size:13px; }
}
@media(min-width:601px) and (max-width:959px) {
  .hero-product { max-width:400px; }
  .hero h1 { font-size:40px; }
  .hero .description { font-size:16px; }
}
/* Capture frames share a canvas and a single border; source pictures own padding. */
.feature-pair { align-items:stretch; }
.feature { display:flex; flex-direction:column; }
.feature > figcaption { flex:1; }
.capture-window { display:block; min-height:0; padding:0; background:#fff; border-radius:20px; overflow:hidden; }
.capture-window .app-screen { border-radius:0; }
.capture-window picture, .matching-screen picture { display:block; width:100%; }
.matching-screen { background:#fff; border:1px solid var(--line); border-radius:20px; max-width:440px; }
@media(max-width:959px) { .feature > figcaption { flex:none; } }