/* VCamory conversion + motion layer (2026-10-09). Loads after refinement-20261007.css. */
:root{--t-fast:180ms;--t-base:300ms;--t-slow:600ms;--ease-out:cubic-bezier(.2,.7,.2,1);--sticky-h:0px}
/* perf: opaque header/cookie, no backdrop blur */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fafaf8}
.cookie-banner{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
.page-intro::before{animation:none}
.button:active{scale:.98;transition:scale 80ms linear}
/* cross-page crossfade */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out 180ms var(--ease-out) both}
::view-transition-new(root){animation:vt-in 180ms var(--ease-out) both}
@keyframes vt-out{to{opacity:0;translate:0 -10px}}
@keyframes vt-in{from{opacity:0;translate:0 10px}}
/* hero entrance stagger */
.hm-hero .hm-kicker,.hm-hero h1,.hm-hero .hm-intro,.hm-hero .hm-demo,.hm-hero .hm-platforms{animation:fade-up 700ms var(--ease-out) both}
.hm-hero h1{animation-delay:80ms}.hm-hero .hm-intro{animation-delay:200ms}.hm-hero .hm-demo{animation-delay:320ms;animation-name:demo-in}.hm-hero .hm-platforms{animation-delay:480ms}
@keyframes demo-in{from{opacity:0;scale:.98;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
.hm-status{animation:status-pulse 2.2s ease-in-out 900ms infinite}
@keyframes status-pulse{0%,100%{box-shadow:0 0 0 0 rgba(165,200,179,.6)}50%{box-shadow:0 0 0 5px rgba(165,200,179,0)}}
.hm-hero .hm-actions .button.secondary{background:transparent;border-color:var(--line-2);color:var(--ink)}
.hm-hero .hm-actions .button.secondary:hover{background:#f0eefb;border-color:#c9c4e6}
/* studio → iPhone stream motif */
.stream{display:inline-flex;align-items:center;gap:0;vertical-align:middle;color:#c9c5e6}
.stream svg{display:block;overflow:visible}
.stream .path{stroke:#8f88c4;stroke-width:1.4;stroke-dasharray:3 5;animation:stream-flow 1.6s linear infinite}
.stream .dot{fill:#c8c2ff}
.is-offscreen .stream .path,.stream.is-offscreen .path,.hm-status.is-offscreen{animation-play-state:paused}
@keyframes stream-flow{to{stroke-dashoffset:-16}}
.hm-demo-bar .stream{margin-left:14px}
/* feature cards: scroll-driven reveal + icon draw */
.hm-feature-grid article{position:relative;border-top-color:transparent}
.hm-feature-grid article::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#ccccca;transform-origin:left}
.hm-feature-top svg path,.hm-feature-top svg rect,.hm-feature-top svg circle{stroke-dasharray:140;stroke-dashoffset:0;transition:stroke-dashoffset var(--t-base) var(--ease-out)}
.hm-feature-grid article:hover .hm-feature-top svg path,.hm-feature-grid article:hover .hm-feature-top svg rect,.hm-feature-grid article:hover .hm-feature-top svg circle{animation:icon-draw 700ms var(--ease-out) both}
@keyframes icon-draw{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
@supports (animation-timeline: view()){
  .hm-feature-grid article::before{scale:0 1}
  .hm-feature-grid article{animation:card-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .hm-feature-grid article::before{animation:line-in linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
}
@supports not (animation-timeline: view()){
  .js .hm-feature-grid article{opacity:0;translate:0 12px;transition:opacity var(--t-slow) var(--ease-out),translate var(--t-slow) var(--ease-out)}
  .js .hm-feature-grid article.is-visible{opacity:1;translate:0 0}
  .js .hm-feature-grid article::before{scale:0 1;transition:scale var(--t-slow) var(--ease-out) 120ms}
  .js .hm-feature-grid article.is-visible::before{scale:1 1}
}
@keyframes card-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes line-in{from{scale:0 1}to{scale:1 1}}
/* reveal refinement: leaf elements only, opacity+translate, hover transitions survive */
.js [data-reveal]{transition:opacity var(--t-slow) var(--ease-out) var(--d,0ms),translate var(--t-slow) var(--ease-out) var(--d,0ms),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),border-color var(--t-fast),background var(--t-fast),color var(--t-fast)}
.js [data-reveal]:not(.is-visible){opacity:0;translate:0 14px;filter:none}
/* plan cards */
.hm-plans .price-card,.plans-page .price-card{transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out),border-color var(--t-fast)}
.hm-plans .price-card:hover,.plans-page .price-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #20212514;border-color:#b8b4ce}
.hm-plans .price-card.recommended,.plans-page .price-card.recommended{border-color:#5743dc}
.price-save{position:relative}
.price-save::after{content:"";position:absolute;inset:-2px;border-radius:999px;border:1px solid #6654aa;opacity:0;animation:save-ring 1.4s var(--ease-out) 3}
@keyframes save-ring{0%{opacity:.7;scale:.9}70%{opacity:0;scale:1.25}100%{opacity:0;scale:1.25}}
.price-card .plan-secondary{display:block;text-align:center;margin-top:10px;font-size:11px;color:#686970}
.price-card .plan-secondary a{color:inherit}
.hm-offer{display:none}
.disclosure{font-size:12px;line-height:1.7;color:#686970;margin:14px 0 0}
.disclosure a{color:inherit}
.disclosure.center{text-align:center}
/* plans page parity */
.plans-page{margin:0 0 40px}
.plans-page .pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.plans-page .price-card{background:#fff;border:1px solid #dddddc;border-radius:10px;padding:28px;box-shadow:none;transform:none;min-height:300px;display:flex;flex-direction:column}
.plans-page .price-card::before,.plans-page .price-card::after{display:none}
.plans-page .price-kicker{font-size:9px;letter-spacing:.12em;color:#686970;margin:0 0 11px;padding:0;background:none;border-radius:0;display:block}
.plans-page .price-card h2,.plans-page .price-card h3{font-size:18px;font-weight:570;line-height:1.3;color:#292a30;letter-spacing:-.01em}
.plans-page .price-value{font-size:39px;line-height:1.1;letter-spacing:-.04em;color:#25262c;font-weight:580;background:none;-webkit-text-fill-color:#25262c;margin:14px 0 9px}
.plans-page .price-value .small{font-size:10px;letter-spacing:0;color:#686970;font-weight:450;-webkit-text-fill-color:#686970}
.plans-page .price-was{font-size:11px;display:flex;gap:9px;margin:24px 0 0;color:#686970;align-items:center}
.plans-page .price-card:not(.deal) .price-value{margin-top:54px}
.plans-page .price-save{background:transparent;color:#6654aa;border:0;padding:0;font-size:10px;animation:none;letter-spacing:0;font-weight:550}
.plans-page .price-dash{display:none}
.plans-page .price-duration{font-size:11px;color:#686970;line-height:1.5;margin:0 0 24px}
.plans-page .price-note{font-size:10px}
.plans-page .price-card>.button{margin-top:auto;width:100%;font-size:12px;min-height:43px;padding:11px}
.plans-page .deal-ribbon{position:static;order:-1;width:max-content;background:transparent;border:none;padding:0;margin:0 0 19px;box-shadow:none;font-size:8px;color:#6b5aaa;letter-spacing:.08em;text-transform:uppercase}
.plans-page .deal-ribbon .dot{display:none}
.plans-page .price-card:not(.deal){padding-top:59px}
.plans-page .price-was s{text-decoration-color:currentColor;font-weight:450;text-decoration-thickness:1px}
.plans-page .price-card.deal .price-value{background:none;-webkit-text-fill-color:#25262c;color:#25262c}
/* payment faq (shared) */
.pay-faq{max-width:760px;margin:48px auto 0}
.pay-faq .hm-kicker{margin-bottom:14px}
.pay-faq h2{font-size:clamp(26px,3vw,34px);font-weight:590;letter-spacing:-.04em;line-height:1.1;margin:0 0 18px}
.pay-faq details{border-bottom:1px solid var(--line);padding:0;margin:0;border-radius:0;background:transparent}
.pay-faq details:first-of-type{border-top:1px solid var(--line)}
.pay-faq details:hover,.pay-faq details[open]{background:transparent}
.pay-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;padding:19px 0;font-size:14px;line-height:1.5;font-weight:560;color:#35363d;cursor:pointer}
.pay-faq summary::-webkit-details-marker{display:none}
.pay-faq details p{font-size:13px;line-height:1.8;margin:0 0 20px;color:#686970}
/* accordion plus → x rotate + height ease */
.hm-questions summary::after,.pay-faq summary::after{content:"";position:relative;width:14px;height:14px;flex-shrink:0;margin:0;border:0;background:linear-gradient(#8b8992,#8b8992) center/14px 1.5px no-repeat,linear-gradient(#8b8992,#8b8992) center/1.5px 14px no-repeat;transition:rotate var(--t-base) var(--ease-out)}
.hm-questions details[open] summary::after,.pay-faq details[open] summary::after{content:"";rotate:45deg}
@supports (interpolate-size: allow-keywords){
  .hm-questions details,.pay-faq details{interpolate-size:allow-keywords}
  .hm-questions details::details-content,.pay-faq details::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-base) var(--ease-out),content-visibility var(--t-base) allow-discrete}
  .hm-questions details[open]::details-content,.pay-faq details[open]::details-content{block-size:auto}
}
/* sticky mobile CTA */
.sticky-cta{visibility:hidden;transition:translate var(--t-base) var(--ease-out),visibility 0s var(--t-base);position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 30px #20212514;translate:0 100%;transition:translate var(--t-base) var(--ease-out)}
.sticky-cta.is-on{translate:0 0;visibility:visible;transition:translate var(--t-base) var(--ease-out),visibility 0s}
.sticky-cta>span{font-size:12px;line-height:1.4;color:#45414e}.sticky-cta>span b{display:block;color:var(--ink);font-size:13px}
.sticky-cta .button{min-height:42px;padding:10px 16px;font-size:12px;white-space:nowrap}
@media(max-width:800px){
  .sticky-cta{display:flex}
  html.has-sticky .cookie-banner{bottom:calc(var(--sticky-h) + 8px)}
  .cookie-banner{padding:12px 14px;gap:8px;flex-direction:row;align-items:center;flex-wrap:wrap}
  .cookie-banner h2{font-size:13px}.cookie-banner p{font-size:11px;margin:2px 0 0;line-height:1.5}
  .cookie-banner>div:first-child{flex:1 1 100%}
  .cookie-actions{width:100%;gap:8px}.cookie-actions .button{flex:1;min-height:40px;padding:8px 10px;font-size:11px}
}
/* footer contact buttons visible again */
.site-footer .contact-actions{display:flex}
/* trust strip under pricing */
.trust-strip{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin:20px 0 0;padding:0;list-style:none;font-size:11px;color:#686970}
.trust-strip li{display:inline-flex;align-items:center;gap:6px}
.trust-strip li::before{content:"";width:5px;height:5px;border-radius:50%;background:#5743dc}
@media(prefers-reduced-motion:reduce){
  .hm-hero .hm-kicker,.hm-hero h1,.hm-hero .hm-intro,.hm-hero .hm-demo,.hm-hero .hm-platforms,.hm-status,.stream .path,.price-save::after,.hm-feature-grid article,.hm-feature-grid article::before{animation:none!important}
  .hm-feature-grid article::before{scale:1 1}
  .js [data-reveal]:not(.is-visible){opacity:1;translate:none}
  .sticky-cta{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media(max-width:1000px){.plans-page .price-card{padding:22px}.plans-page .price-card:not(.deal){padding-top:53px}.plans-page .price-value{font-size:32px}}
@media(max-width:800px){.plans-page .pricing-grid{grid-template-columns:1fr}.plans-page .pricing-3>.price-card:nth-child(3):last-child{grid-column:auto}.plans-page .price-card{min-height:0}.plans-page .price-card:not(.deal){padding-top:22px}.plans-page .price-card:not(.deal) .price-value{margin-top:14px}}