/* Scroll supplies poses; heading scribbles and the portrait also support triggered playback. */
html.scroll-effects { scroll-behavior: auto; }
/* These controls previously had instant state changes. Keep that behavior scoped. */
.scroll-effects .rc-track,
.scroll-effects .rc-btn,
.scroll-effects .rc-btn svg,
.scroll-effects body > .txt-section .buy,
.scroll-effects body > .txt-section .quantity-selector button,
.scroll-effects .app-theme-toggle,
.scroll-effects .app-theme-toggle::before,
.scroll-effects .app-theme-toggle .toggle-button,
.scroll-effects .app-theme-toggle svg,
.scroll-effects .reason-toggle { transition: none; }

/* The original text and its line wrapping stay in place above the marker ink. */
.scroll-effects .scroll-marker-heading { position: relative; isolation: isolate; }
.scroll-effects .scroll-marker-heading .title-highlight { background: none; }
.scroll-marker-ink {
    position: absolute;
    z-index: -1;
    display: block;
    max-width: none;
    overflow: visible;
    pointer-events: none;
}
.scroll-marker-ink path { fill: none; stroke-linecap: butt; }
.scroll-emphasis { font-weight: 650; }
.scroll-effects .scroll-emphasis {
    background: linear-gradient(#fff0 66%, #ffe39480 66%, #ffe39480 92%, #fff0 92%) left / var(--emphasis-width, 0%) 100% no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
[data-site-variant] .scroll-emphasis { --emphasis-width: 100%; }

/* This outer anchor never transforms, keeping the scroll geometry stable. */
.scroll-phone-anchor {
    position: relative;
    width: var(--app-phone-width);
    margin: 18px auto 0;
}
.reference-demo:has(.scroll-phone-anchor) > p { margin-bottom: 12px; }
.scroll-phone-anchor > .app-screenshot-container {
    margin: 0;
}
.scroll-phone-canvas {
    position: absolute;
    inset: -70px -100px;
    width: calc(100% + 200px);
    height: calc(100% + 140px);
    max-width: none;
    pointer-events: none;
}
.scroll-phone-anchor.has-phone-model > .app-screenshot-container { opacity: 0; }

.why-record-list .reason-number {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 54px;
    font-size: 34px;
}
/* Each icon spins around its own center after the shared feature trigger. */
.scroll-feature {
    perspective: 800px;
    perspective-origin: calc(var(--feature-tile-size) / 2) calc(var(--feature-tile-size) / 2);
}
.scroll-feature > .reference-feature-icon {
    transform-origin: center center;
    transform: rotateY(calc(var(--row-rest, 0) * -802deg));
}
.scroll-feature > div + div {
    transform: translateY(calc(var(--row-rest, 0) * 25px));
}
/* Keep summary geometry fixed while its question and arrow breathe down and back. */
.scroll-faq-question > h3 { position: relative; top: 0; }
.reason-title-line {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    max-width: 100%;
    vertical-align: middle;
}
.reason-title-copy { min-width: 0; }
.reason-check {
    display: block;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    pointer-events: none;
}
.reason-check-ink { fill: #239e56; }
.reason-check-draw {
    fill: none;
    stroke: white;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: var(--reason-check-offset, 1);
}
.reason-keyword {
    font-weight: 700;
    background: linear-gradient(#fff0 52%, #ffe394 52%, #ffe394 95%, #fff0 95%) left / 100% 100% no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.scroll-effects .reference-about .headshot { position: relative; }
.scroll-coin-canvas {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    max-width: none;
    pointer-events: none;
}
.headshot.has-coin-model > img { opacity: 0; }
@media (max-width: 520px) {
    .scroll-phone-anchor { margin-top: 18px; }
    .why-record-list .reason-number { width: 32px; height: 44px; font-size: 28px; }
    .reason-check { flex-basis: 40px; width: 40px; height: 40px; }

}

/* One matching silver perimeter for the hero and every original app video. */
.silver-phone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 4;
    pointer-events: none;
}

.portrait-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.portrait-heart { position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; fill: currentColor; opacity: 0; }
.scroll-coin-canvas { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .portrait-hearts { display: none; } }

/* Ratings pop in independently; review text keeps its original position. */
.rc-stars { display: flex; justify-content: center; align-items: center; gap: 2px; min-height: 22px; line-height: 1; }
.review-star { display: block; width: 18px; height: 18px; fill: #e5b343; overflow: visible; transform-origin: center; }