/* Evenstead motion layer. Everything rests in its final, visible state; animation is additive. */

/* Cross-page fade + sticky header */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease-out}
.site-header{position:sticky;top:0;z-index:6;view-transition-name:site-header;transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 1px 0 var(--stone),0 8px 18px -12px rgba(28,38,41,.4)}
html{scroll-padding-top:84px}

/* Button + focus feel */
.btn{transition:background-color .15s,border-color .15s,color .15s,transform .08s,box-shadow .15s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:focus-visible{box-shadow:0 0 0 4px rgba(31,85,71,.22)}
:focus-visible{transition:outline-offset .12s}
summary{transition:background-color .15s;border-radius:10px}
summary:hover{background:rgba(31,85,71,.05)}
summary:focus-visible{outline-offset:-3px}
.pick label{transition:background-color .15s,border-color .15s,color .15s}

/* Hero figure */
.hero-copy{min-width:0}
.hero-fig{margin:32px 0 0;max-width:340px}
.tilt{perspective:900px}
.mock{border-radius:30px;box-shadow:0 22px 44px -22px rgba(22,63,53,.45),0 2px 0 rgba(28,38,41,.04);transition:transform .14s ease-out;transform-style:preserve-3d;background:#fff}
.mock svg{display:block;width:100%;height:auto;aspect-ratio:320/370;font-family:var(--sans)}
.hero-fig figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;color:var(--muted);line-height:1.4}
.replay{flex:none;min-height:44px;padding:0 14px;border:2px solid #b9b3a5;border-radius:10px;background:#fff;color:var(--spruce);font:600 14px/1 var(--sans);cursor:pointer;transition:background-color .15s,transform .08s}
.replay:hover{background:var(--stone)}
.replay:active{transform:translateY(1px)}
.replay[hidden]{display:none}
@media (min-width:900px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
  .hero-fig{margin:0 0 0 auto}
}
.f-bg{fill:#fff;stroke:#E7E2D8;stroke-width:2}
.f-mut{fill:#55606A;font-size:12px}
.f-tx{fill:#1C2629;font-size:13.5px}
.f-wh{fill:#fff;font-size:13.5px}
.f-b{font-weight:600}
.f-in{fill:#E7E2D8}
.f-out{fill:#1F5547}
.f-pill{fill:#E0B04A}
.f-card{fill:#fff;stroke:#1F5547;stroke-width:2}
.f-ok{fill:#1F5547}
.f-tick{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0}
.f-dots circle{fill:#55606A}
.f-dots{opacity:0}

@media (prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  .a{animation:pop .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
  .f-dots{animation:dots 1.5s linear both;animation-delay:.9s}
  .f-tick{animation:draw .45s ease-out both;animation-delay:var(--d,0s)}
  .b .a{animation-name:pop2}
  .b .f-dots{animation-name:dots2}
  .b .f-tick{animation-name:draw2}
  @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes pop2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes dots{0%,12%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
  @keyframes dots2{0%,12%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
  @keyframes draw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
  @keyframes draw2{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
  .f-dots circle{animation:blink .6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.15s)}
  @keyframes blink{from{opacity:.25}to{opacity:1}}

  /* FAQ open/close */
  details:not(.menu)::details-content{block-size:0;overflow:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}
  details:not(.menu)[open]::details-content{block-size:auto}

  /* Scroll reveal: only steps + price numbers, only when JS is present */
  .js .rv{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .replay{display:none}
  .f-dots{display:none}
  .mock{transform:none!important}
}