/* BranchOut only. Shares the grey stage, pause button and captions with apex-presentation.css; this adds the phone frame. */
.phone { position: relative; width: clamp(220px, 30vw, 340px); margin: 0 auto; padding: 9px; border-radius: 52px; background: #15161a; box-shadow: 0 0 0 1px rgb(0 0 0 / 8%), 0 34px 60px -28px rgb(20 22 40 / 45%); }
.ph-view { position: relative; aspect-ratio: 430 / 932; overflow: hidden; border-radius: 43px; background: #fff; }
.ph-camera { position: absolute; inset: 0 0 auto 0; transform-origin: 0 0; transition: transform 1100ms cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.ph-shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity 380ms ease; user-select: none; }
.ph-shot.is-on { opacity: 1; }
.ph-touch { position: absolute; left: 76%; top: 600px; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -5.5%; border-radius: 50%; background: rgb(20 22 30 / 26%); box-shadow: 0 0 0 2px rgb(255 255 255 / 85%); opacity: 0; pointer-events: none; z-index: 2;
  transition-property: left, top, opacity, transform; transition-timing-function: cubic-bezier(.45, 0, .2, 1); }
.ph-touch.is-on { opacity: 1; }
.ph-touch.is-pressed { transform: scale(.78); background: rgb(20 22 30 / 40%); transition-duration: 150ms; }
.ph-touch::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; border: 2px solid rgb(255 255 255 / 90%); opacity: 0; }
.ph-touch.is-pressed::after { animation: ph-ripple 600ms ease-out; }
@keyframes ph-ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.3); } }


.store-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 11px 18px 11px 14px; border-radius: 999px; background: #121316; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.store-link:hover { background: #2a2b31; transform: translateY(-1px); }
.store-link:focus-visible { outline: 2px solid #1a66ff; outline-offset: 3px; }
.store-link svg { width: 18px; height: 18px; }
[data-theme="dark"] .store-link { background: #f2f2f4; color: #121316; }
[data-theme="dark"] .store-link:hover { background: #fff; }
.closing-context .store-link { margin-top: 24px; }

/* Opening: two moving phones side by side, like Sprout's opening pair. */
.bo-opening-duo { gap: 20px; }
.bo-opening-duo .wt-stage { padding: 48px 24px; }
.bo-opening-duo .phone { width: min(100%, 290px); }
.bo-opening-duo figcaption { margin-top: 22px; font-size: 14px; line-height: 1.6; color: #626262; text-align: center; }
[data-theme="dark"] .bo-opening-duo figcaption, [data-theme="dark"] .bo-page .story-section figcaption { color: #bcbcc4; }

/* Static rows: two or three phones on one grey panel. */
.bo-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; padding: 44px 36px 28px; border-radius: 16px; background: var(--apex-stage); }
.bo-row figure, .bo-split figure { margin: 0; min-width: 0; }
.bo-row .phone { width: min(100%, 250px); padding: 6px; border-radius: 38px; }
.bo-row .ph-view { border-radius: 32px; }
.ph-view > img { display: block; width: 100%; height: auto; }
.bo-comps { align-items: start; }
.bo-comp img { display: block; width: 100%; height: auto; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 16px 32px -20px rgb(20 22 40 / 30%); }

/* Split: a long screen on the left, copy and components on the right. */
.bo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.bo-split-visual { padding: 44px 0; border-radius: 16px; background: var(--apex-stage); }
.bo-long { width: min(78%, 300px); margin: 0 auto; overflow: hidden; border-radius: 30px; box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 28px 50px -26px rgb(20 22 40 / 40%); }
.bo-long img { display: block; width: 100%; height: auto; }
.bo-split-copy { position: sticky; top: 120px; }
.bo-split-copy p { margin: 22px 0 32px; }
.bo-split-copy .bo-comp { max-width: 360px; margin-bottom: 26px; }
.bo-split-copy .bo-comp figcaption { text-align: left; }

@media (max-width: 760px) {
  .phone { width: min(72vw, 300px); padding: 7px; border-radius: 40px; }
  .ph-view { border-radius: 33px; }
  .bo-opening-duo .wt-stage { padding: 28px 14px; }
  .bo-row { grid-template-columns: 1fr; gap: 36px; padding: 28px 20px; }
  .bo-row .phone { width: min(70vw, 250px); }
  .bo-split { grid-template-columns: 1fr; gap: 28px; }
  .bo-split-copy { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-camera, .ph-shot, .ph-touch { transition: none; }
  .ph-touch { display: none; }
}