/* story-v1.css — amiaos.com, the story in five screens (CLIENT-AMIAOS-020). Rides on site-v32.css (tokens, nav,
   buttons, footer). Big type for reading glasses: nothing under 17px. Every rule is .as-* or a .st-* screen. */
:root{--as-ease:cubic-bezier(.2,.8,.2,1);--as-spring:cubic-bezier(.34,1.56,.64,1)}

/* ── S1: the hero — the promise, the survey card, and the screen acting out their wish ── */
.st-hero{position:relative;overflow:hidden;padding:26px 0 70px;background:radial-gradient(90% 70% at 85% 0%,rgba(61,74,170,.16),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(215,55,43,.10),transparent 60%),var(--cream)}
.st-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.st-hero h1{margin:0 0 14px;font-family:var(--din);text-transform:uppercase;font-weight:400;font-size:clamp(44px,6.4vw,88px);line-height:.92;letter-spacing:.005em;color:var(--navy)}
.st-hero h1 .l{display:block;overflow:hidden}
.st-hero h1 .l>span{display:inline-block;transform:translateY(105%);animation:as-rise .9s var(--as-ease) forwards}
.st-hero h1 .l:nth-child(2)>span{animation-delay:.1s;color:var(--red)}
.st-hero h1 .l:nth-child(3)>span{animation-delay:.2s;color:var(--blue)}
@keyframes as-rise{to{transform:none}}

.as-card{position:relative;background:#fff;border-radius:26px;padding:20px 22px 18px;box-shadow:0 30px 70px -26px rgba(29,37,102,.5),0 0 0 1px var(--line);
  opacity:0;animation:as-in .8s .3s var(--as-spring) forwards}
.as-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:5px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--red),#fff 50%,var(--blue))}
@keyframes as-in{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.as-top{display:flex;align-items:center;gap:14px;margin:6px 0 12px}
.as-top .stars{font-size:17px;letter-spacing:2px;color:var(--gold-deep)}
.as-meta{flex:1}
.as-step{display:flex;justify-content:space-between;font-family:var(--din);text-transform:uppercase;letter-spacing:.06em;font-size:17px;color:var(--ink-50);margin-bottom:6px}
.as-step b{color:var(--green);font-weight:400}
.as-bar{height:8px;border-radius:99px;background:var(--cream-2);overflow:hidden}
.as-bar i{display:block;height:100%;width:16%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--gold) 50%,var(--blue));transition:width .7s var(--as-spring)}
.as-stage{position:relative;min-height:140px;transition:height .45s var(--as-ease)}
.as-q{position:absolute;inset:0 0 auto 0}
.as-q.enter{animation:as-qin .45s var(--as-ease) both}.as-q.enter.back{animation-name:as-qinb}
.as-q.leave{animation:as-qout .3s var(--as-ease) both;pointer-events:none}.as-q.leave.back{animation-name:as-qoutb}
@keyframes as-qin{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes as-qinb{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes as-qout{to{opacity:0;transform:translateX(-40px)}}
@keyframes as-qoutb{to{opacity:0;transform:translateX(40px)}}
.as-q h2{margin:0;font-family:var(--din);text-transform:uppercase;font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.05;color:var(--navy)}
.as-hint{margin:6px 0 0;font-size:19px;color:var(--ink-70)}
.as-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.as-opt{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border-radius:16px;border:2px solid var(--line);background:var(--cream);color:var(--ink);
  font:inherit;font-size:19px;font-weight:600;line-height:1.15;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(8px);animation:as-opt .4s var(--as-ease) forwards;transition:border-color .2s,background .2s,transform .15s}
.as-opt:nth-child(2){animation-delay:.05s}.as-opt:nth-child(3){animation-delay:.1s}.as-opt:nth-child(4){animation-delay:.15s}.as-opt:nth-child(5){animation-delay:.2s}.as-opt:nth-child(6){animation-delay:.25s}
@keyframes as-opt{to{opacity:1;transform:none}}
.as-opt .ic{font-size:26px;line-height:1;flex:0 0 auto}
.as-opt:active{transform:scale(.97)}
@media(hover:hover){.as-opt:hover{border-color:var(--blue)}}
.as-opt.sel{border-color:var(--green);background:rgba(0,168,90,.08);box-shadow:0 0 0 4px rgba(0,168,90,.14)}
.as-fld{position:relative;margin-top:14px}
.as-fld input{width:100%;font:inherit;font-size:22px;color:var(--ink);background:var(--cream);border:2px solid var(--line);border-radius:16px;padding:26px 16px 10px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.as-fld label{position:absolute;left:18px;top:19px;font-size:20px;color:var(--ink-50);pointer-events:none;transition:.2s var(--as-ease);transform-origin:left top}
.as-fld input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(61,74,170,.16)}
.as-fld input:focus+label,.as-fld input:not(:placeholder-shown)+label{transform:translateY(-12px) scale(.72);color:var(--blue);font-weight:700}
.as-fld.bad input{border-color:var(--red);animation:as-shake .4s}
@keyframes as-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.as-err{min-height:22px;color:var(--red-deep);font-size:17px;margin-top:6px}
.as-go{width:100%;margin-top:8px}
.btn.ghost.as-go{margin-top:12px}
.as-price{margin:10px 0 0;font-size:20px;color:var(--ink-70)}
.as-price b{font-family:var(--din);font-weight:400;font-size:44px;color:var(--red);vertical-align:-4px;margin-right:4px}
.as-price s{margin-right:6px}
.as-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:17px;color:var(--ink-50)}
.as-foot button{background:none;border:0;font:inherit;font-size:17px;color:var(--ink-70);cursor:pointer;padding:4px 0}
.as-foot button.hide{visibility:hidden}
.as-spin{display:inline-block;width:18px;height:18px;border:3px solid rgba(29,37,102,.25);border-top-color:var(--navy);border-radius:50%;animation:as-spin .8s linear infinite;vertical-align:-3px}
@keyframes as-spin{to{transform:rotate(360deg)}}
.as-or{margin:14px 0 0;font-size:19px;color:var(--ink-70)}
.as-or a{font-weight:700;color:var(--navy);text-decoration:none}

/* the screen that acts it out */
.as-screen{position:relative;border-radius:22px;background:#0f1330;padding:14px;box-shadow:0 40px 80px -30px rgba(29,37,102,.6);aspect-ratio:16/11;opacity:0;animation:as-in .9s .45s var(--as-spring) forwards}
.as-screen::after{content:"";position:absolute;left:30%;right:30%;bottom:-16px;height:16px;border-radius:0 0 12px 12px;background:#c9cbe0}
.as-win{position:relative;height:100%;border-radius:12px;background:var(--cream);overflow:hidden;display:flex;flex-direction:column}
.as-bar2{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#e9e4dc}
.as-bar2 i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.as-bar2 i:nth-child(2){background:#febc2e}.as-bar2 i:nth-child(3){background:#28c840}
.as-voice{margin:12px 12px 0;max-width:calc(100% - 24px);box-sizing:border-box;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:0 6px 18px -10px rgba(29,37,102,.4);font-size:19px;color:var(--navy);min-height:52px}
.as-voice small{display:block;font-family:var(--din);text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:var(--red)}
.as-app{flex:1;margin:10px 12px 12px;width:auto;min-width:0;align-self:stretch;box-sizing:border-box;max-width:calc(100% - 24px);padding:12px 14px;border-radius:14px;background:#fff;font-size:17px;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.as-app.in{animation:as-qin .45s var(--as-ease) both}
.ap-h{font-weight:700;color:var(--navy)}
.ap-row b{display:inline-block;min-width:96px;color:var(--ink-50);font-weight:600}
.ap-pics{display:flex;gap:6px}.ap-pics i{width:52px;height:38px;border-radius:7px;background:linear-gradient(135deg,#ffd27a,#ff8a5c)}.ap-pics i:nth-child(2){background:linear-gradient(135deg,#7ad0ff,#3d4aaa)}.ap-pics i:nth-child(3){background:linear-gradient(135deg,#9be7a8,#00a85a)}
.ap-face{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--red));display:grid;place-items:center;color:#fff;font-size:28px;font-weight:700;animation:as-ring 1.4s ease-in-out infinite}
@keyframes as-ring{50%{box-shadow:0 0 0 10px rgba(61,74,170,.15)}}
.ap-math{font-size:28px;font-family:var(--din)}
.ap-meter,.ap-slider{height:10px;border-radius:99px;background:var(--cream-2);overflow:hidden}.ap-meter i,.ap-slider i{display:block;height:100%;width:78%;background:var(--red);transition:width 1s var(--as-ease)}
.ap-big{font-size:20px;font-weight:700;transition:font-size .6s var(--as-ease)}
.ap-btn{align-self:flex-start;margin-top:auto;padding:9px 18px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;transition:transform .2s,background .3s}
.ap-btn.green{background:var(--green)}
.ap-btn.hit{transform:scale(.94);background:var(--green)}
.as-screen.did .ap-meter i{width:8%;background:var(--green)}
.as-screen.did .ap-slider i{width:100%;background:var(--green)}
.as-screen.did .ap-big{font-size:34px}
.as-cur{position:absolute;left:0;top:0;width:30px;height:30px;z-index:5;transform:translate(70%,60%);transition:transform .85s var(--as-ease);filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));pointer-events:none}
.as-done{position:absolute;right:22px;top:58px;z-index:6;padding:6px 16px;border-radius:999px;background:var(--green);color:#fff;font-family:var(--din);text-transform:uppercase;font-size:22px;
  opacity:0;transform:scale(.4) rotate(-8deg);transition:.45s var(--as-spring)}
.as-done.on{opacity:1;transform:none}
.as-tags{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:26px;font-family:var(--din);text-transform:uppercase;font-size:17px;color:var(--navy)}

/* sticky finish */
.as-stick{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));z-index:70;transform:translate(-50%,240%);transition:transform .45s var(--as-spring);
  border:0;border-radius:999px;padding:14px 24px;background:var(--red);color:#fff;font-family:var(--din);text-transform:uppercase;font-size:19px;letter-spacing:.03em;box-shadow:0 14px 30px -10px rgba(215,55,43,.8);cursor:pointer;white-space:nowrap}
.as-stick.show{transform:translate(-50%,0)}
@media(min-width:861px){.as-stick{bottom:22px}}

/* ── the story screens ── */
.st{position:relative;padding:clamp(70px,12vh,120px) 0;text-align:center;overflow:hidden}
.st h2{margin:0;font-family:var(--din);text-transform:uppercase;font-weight:400;font-size:clamp(44px,7vw,96px);line-height:.95;color:var(--navy)}
.st .lede{margin:14px auto 0;max-width:30ch;font-size:clamp(20px,2vw,24px);color:var(--ink-70)}
.st [data-anim]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--as-ease),transform .8s var(--as-ease)}
.st.play [data-anim]{opacity:1;transform:none}
.st.play [data-anim="2"]{transition-delay:.15s}.st.play [data-anim="3"]{transition-delay:.3s}.st.play [data-anim="4"]{transition-delay:.45s}

/* S2: computers got hard — the pop-up maze */
.st-hard{background:#14162b;color:#fff}
.st-hard h2{color:#fff}
.as-maze{position:relative;max-width:760px;height:340px;margin:34px auto 0;border-radius:22px;background:linear-gradient(180deg,#1f2347,#14162b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.as-pop{position:absolute;width:min(260px,62%);padding:12px 14px;border-radius:10px;background:#f4f4f6;color:#14162b;text-align:left;font-size:17px;box-shadow:0 18px 30px -12px rgba(0,0,0,.6);animation:as-popin .35s var(--as-spring)}
.as-pop b{display:block;margin-bottom:8px}
.as-pop span{display:flex;gap:6px;justify-content:flex-end}.as-pop i{font-style:normal;font-size:15px;padding:3px 10px;border-radius:6px;background:#dfe0e8}
.as-pop i:first-child{background:var(--blue);color:#fff}
@keyframes as-popin{from{opacity:0;transform:scale(.6)}}
.as-lost{position:absolute;left:50%;top:50%;width:30px;height:30px;z-index:3;animation:as-lost 7s ease-in-out infinite}
@keyframes as-lost{0%{transform:translate(-120px,-60px)}20%{transform:translate(90px,-90px) rotate(10deg)}40%{transform:translate(140px,60px)}60%{transform:translate(-60px,100px) rotate(-12deg)}80%{transform:translate(-160px,10px)}100%{transform:translate(-120px,-60px)}}
.as-q-mark{position:absolute;left:50%;top:50%;margin:-40px 0 0 30px;font-family:var(--din);font-size:44px;color:var(--gold);animation:as-blink 1.4s ease-in-out infinite}
@keyframes as-blink{50%{opacity:.2}}

/* S3: now you just tell it — the video */
.st-tell .intro{max-width:860px;margin:30px auto 0}
.st-tell .intro-links{margin-top:14px}

/* S4: we set it all up — the route */
.st-setup{background:#fff}
.as-route{position:relative;max-width:900px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:start}
.as-route svg{position:absolute;left:12%;right:12%;top:40px;width:76%;height:40px;overflow:visible}
.as-route .path{fill:none;stroke:var(--line);stroke-width:4;stroke-dasharray:10 10}
.as-route .ink{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000}
.st-setup.play .as-route .ink{animation:as-draw 2.6s .3s var(--as-ease) forwards}
@keyframes as-draw{to{stroke-dashoffset:0}}
.as-stop{position:relative;z-index:2}
.as-stop .dot{width:84px;height:84px;margin:0 auto;border-radius:50%;display:grid;place-items:center;font-size:38px;background:var(--cream);box-shadow:0 0 0 6px #fff,0 14px 30px -12px rgba(29,37,102,.5)}
.as-stop b{display:block;margin-top:12px;font-family:var(--din);text-transform:uppercase;font-weight:400;font-size:22px;color:var(--navy)}
.as-stop span{display:block;font-size:17px;color:var(--ink-70)}
.st-setup.play .as-stop:nth-child(3) .dot{animation:as-pulse .6s 1.2s var(--as-spring)}
.st-setup.play .as-stop:nth-child(4) .dot{animation:as-pulse .6s 2.5s var(--as-spring)}
@keyframes as-pulse{50%{transform:scale(1.15)}}
.as-ways{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin-top:34px}
.as-ways span{padding:10px 18px;border-radius:999px;background:var(--cream);font-size:19px;color:var(--navy);font-weight:600}

/* S5: trust + price */
.st-trust{color:#fff;background:linear-gradient(180deg,rgba(29,37,102,.86),rgba(29,37,102,.94)),url('photos/flag-farmhouse-porch-texas-v1.jpg') center/cover}
.st-trust h2{color:#fff}
.as-founder{display:flex;align-items:center;justify-content:center;gap:16px;margin:28px auto 0}
.as-founder img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff}
.as-founder p{margin:0;text-align:left;font-size:19px}
.as-founder p b{display:block;font-size:21px}
.as-phone{display:inline-block;margin-top:18px;font-family:var(--din);font-size:clamp(34px,5vw,54px);color:var(--gold);text-decoration:none}
.as-deal{margin:38px auto 0;max-width:620px;padding:26px 22px;border-radius:26px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.as-deal .big{font-family:var(--din);text-transform:uppercase;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--navy)}
.as-deal .big em{font-style:normal;color:var(--red)}
.as-deal p{margin:10px 0 0;font-size:19px;color:var(--ink-70)}
.as-deal .hx-go{margin-top:18px;justify-content:center}

.st-more{padding-top:20px}
.st-more>.wrap>h2{font-size:clamp(34px,4.6vw,56px)}

@media (max-width:860px){
  .st-hero{padding:14px 0 40px}
  .st-hero .wrap{grid-template-columns:1fr;gap:18px}
  .st-hero h1{font-size:clamp(40px,12vw,62px);margin-bottom:10px}
  .as-screen{order:3;aspect-ratio:auto;height:300px}
  .as-tags{margin-top:16px}
  .as-opt{font-size:18px;min-height:60px}
  .as-route{grid-template-columns:1fr;gap:26px}
  .as-route svg{display:none}
  .as-maze{height:300px}
}
@media (max-width:480px){
  .as-opts:not(.two){grid-template-columns:1fr;gap:8px}
  .as-opts:not(.two) .as-opt{min-height:52px;padding:8px 12px}
  .as-card{padding:18px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
  .as-card,.as-screen,.st-hero h1 .l>span,.as-opt,.st [data-anim]{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
}