/* Things to play with: the build-your-own sample, How it works scenes, flip-over cards and the plan finder.
   Hidden "before" states sit under .mo, so with reduced motion everything simply shows its finished state. */

/* ---------- try it: your name, three audiences ---------- */
.try{padding-block:96px 104px}
.try-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.try-name{display:grid;margin-top:30px;max-width:380px}
.try-name .note{font-size:22px;color:var(--tangerine);transform:rotate(-2deg);transform-origin:left}
.try-name input{font:700 40px/1.2 var(--hand);color:var(--ink);background:transparent;border:0;border-bottom:2px dashed var(--ink);padding:2px 4px;outline:none;width:100%;border-radius:0}
.try-name input:focus{border-bottom-color:var(--blue);border-bottom-style:solid}
.aud{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.aud button{font:700 15px/1 var(--sans);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:6px;padding:12px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s}
.aud button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.aud button[aria-selected=true]{background:var(--lime);transform:rotate(-2deg) translateY(-2px);box-shadow:4px 5px 0 var(--ink)}
.try-note{margin-top:22px;font-size:21px;color:var(--ink-2);transform:rotate(-1deg)}
.try-frame{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:10px;box-shadow:9px 10px 0 var(--ink);transform:rotate(.8deg)}

.ts{margin-top:8px;border-radius:6px;padding:22px 24px 24px;min-height:350px;display:grid;gap:18px;align-content:start;transition:background .35s}
.ts-work{background:#fff;--acc:var(--blue)}
.ts-family{background:#FFF4E8;--acc:var(--tangerine)}
.ts-clients{background:#F3EEFF;--acc:var(--ink)}
.ts-nav{display:flex;align-items:baseline;gap:16px;font-size:13px;font-weight:700;color:var(--ink-2)}
.ts-nav b{font:400 20px var(--serif);color:var(--ink);margin-right:auto}
.ts-hero{display:flex;gap:18px;align-items:center}
.ts-av{flex:none;width:68px;height:68px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:400 32px var(--serif);background:var(--lilac)}
.ts-family .ts-av{background:var(--pink)}.ts-clients .ts-av{background:var(--lime)}
.ts-k{font:700 20px/1 var(--hand);color:var(--acc)}
.ts-hero h3{font-size:clamp(22px,2.4vw,30px);line-height:1.1;margin-top:6px}
.ts-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ts-cards p{border:1.5px solid var(--ink);border-radius:6px;padding:12px;font-size:13px;line-height:1.35;color:var(--ink-2);background:#fff;display:grid;gap:4px}
.ts-cards p b{font:400 26px/1 var(--serif);color:var(--acc)}
.ts-pol p{border-radius:2px;padding:8px 8px 10px;box-shadow:2px 3px 0 rgba(22,22,22,.85);font:700 17px/1.1 var(--hand);color:var(--ink)}
.ts-pol p:nth-child(1){rotate:-2deg}.ts-pol p:nth-child(2){rotate:1.5deg}.ts-pol p:nth-child(3){rotate:-1deg}
.ts-pol i{display:block;aspect-ratio:4/3;border-radius:2px;margin-bottom:4px;background:radial-gradient(circle at 30% 35%,var(--tangerine) 0 18%,transparent 19%),linear-gradient(160deg,var(--pink),var(--lilac))}
.ts-pol p:nth-child(2) i{background:radial-gradient(circle at 60% 45%,#fff 0 16%,transparent 17%),linear-gradient(200deg,var(--lime),var(--blue))}
.ts-pol p:nth-child(3) i{background:repeating-linear-gradient(45deg,var(--tangerine) 0 7px,#FFD9B8 7px 14px)}
.ts-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--ink-2)}
.ts-btn{font:700 14px/1 var(--sans);background:var(--ink);color:#fff;border-radius:5px;padding:10px 14px;box-shadow:3px 3px 0 var(--tangerine)}
.ts.build .b{animation:ink .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .08s) backwards}
@keyframes ink{0%{opacity:0;translate:0 14px;rotate:-1.5deg;filter:grayscale(1)}40%{opacity:1;filter:grayscale(.8)}100%{filter:none}}
@media (max-width:900px){.try-in{grid-template-columns:1fr;gap:36px}.try-frame{transform:none}}
@media (max-width:560px){.ts{padding:16px;min-height:0}.ts-cards{gap:6px}.ts-cards p{padding:8px;font-size:11.5px}.ts-cards p b{font-size:19px}.ts-nav span:nth-of-type(3){display:none}.ts-av{width:52px;height:52px;font-size:24px}}

/* ---------- How it works: a small scene under each step ---------- */
.scene{position:relative;margin-top:8px;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:14px;box-shadow:4px 4px 0 var(--ink);min-height:70px;display:flex;align-items:center;gap:12px;max-width:320px}
.steps li:nth-child(1) .scene{rotate:-1.2deg}.steps li:nth-child(2) .scene{rotate:1deg}.steps li:nth-child(3) .scene{rotate:-.6deg}
.sc-search{flex:1;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:6px;padding:9px 10px;font-weight:700;font-size:15px;min-width:0;overflow:hidden;white-space:nowrap}
.sc-caret{width:2px;height:18px;background:var(--blue);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sc-stamp,.sc-live{position:absolute;top:-14px;right:-10px;font:900 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:5px;rotate:8deg}
.sc-stamp{color:var(--tangerine);border:2.5px solid var(--tangerine);background:#fff}
.sc-live{background:var(--lime);border:2px solid var(--ink);color:var(--ink);font:400 22px/1 var(--serif);letter-spacing:0;text-transform:none;padding:5px 10px}
.sc-call{flex:1;display:flex;align-items:center;gap:8px}
.sc-av{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--lilac);display:grid;place-items:center;font:700 10px var(--sans)}
.sc-agent{background:var(--lime)}
.sc-wave{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:34px}
.sc-wave b{width:4px;height:40%;border-radius:2px;background:var(--ink)}
.sc-wave b:nth-child(3n){height:75%}.sc-wave b:nth-child(4n+1){height:55%}
.sc-time{font:400 22px var(--serif);font-variant-numeric:tabular-nums}
.sc-site{flex:1;display:grid;gap:6px}
.sc-bar{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--paper-2);border-radius:4px;padding:4px 8px}
.sc-site>b{height:9px;border-radius:3px;background:var(--ink)}
.sc-b1{width:70%}.sc-b2{width:45%;opacity:.35}
.sc-row{display:flex;gap:6px}
.sc-row b{flex:1;height:22px;border-radius:3px;border:1.5px solid var(--ink);background:var(--lime)}
.sc-row b:nth-child(2){background:var(--pink)}.sc-row b:nth-child(3){background:var(--lilac)}

.mo .steps li:not(.done) :is(.sc-stamp,.sc-live){opacity:0;scale:2}
.mo .steps li.done :is(.sc-stamp,.sc-live){animation:slam .4s cubic-bezier(.5,0,.6,1.4)}
@keyframes slam{from{opacity:0;scale:2.2}}
.mo .steps li.play:not(.done) .sc-wave b{animation:talk .5s ease-in-out infinite alternate}
.sc-wave b:nth-child(2n){animation-delay:-.25s}.sc-wave b:nth-child(3n){animation-delay:-.4s}
@keyframes talk{to{height:90%}}
.mo .steps li:not(.play) :is(.sc-site>b,.sc-row b){opacity:0;translate:0 -10px}
.mo .steps li.play :is(.sc-site>b,.sc-row b){transition:opacity .4s,translate .5s cubic-bezier(.3,1.5,.5,1)}
.mo .steps li.play .sc-b1{transition-delay:.2s}.mo .steps li.play .sc-b2{transition-delay:.4s}
.mo .steps li.play .sc-row b:nth-child(1){transition-delay:.6s}.mo .steps li.play .sc-row b:nth-child(2){transition-delay:.75s}.mo .steps li.play .sc-row b:nth-child(3){transition-delay:.9s}

/* ---------- sample cards: tilt and turn over ---------- */
.collage .card{outline-offset:6px}
.card .mini,.card-back{transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out}
.card-back{display:none;position:absolute;inset:12px;align-content:start;gap:10px;padding:14px;border-radius:6px;background:repeating-linear-gradient(transparent 0 26px,#E8ECFF 26px 27px) #FFFDF4}
.card-back .note{font-size:24px;color:var(--tangerine)}
.card-back ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;font-weight:500}
.card-back li{padding-left:18px;position:relative}
.card-back li::before{content:"→";position:absolute;left:0;color:var(--tangerine);font-weight:700}
.cb-hint{font:700 16px var(--hand);color:var(--ink-2)}
.card.flipped .card-back{display:grid}
.card.flipped .mini{visibility:hidden}
.ear{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:0 0 8px 0;background:linear-gradient(135deg,transparent 0 48%,var(--ink) 48% 54%,var(--paper-2) 54%);transition:width .2s,height .2s;pointer-events:none}
.card:hover .ear,.card:focus-visible .ear{width:34px;height:34px}
.frame{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease-out}

/* ---------- three questions, one plan ---------- */
.quiz{background:var(--pink);border-block:2px solid var(--ink)}
.quiz-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.qz{position:relative;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:30px clamp(22px,4vw,40px) 22px;box-shadow:9px 9px 0 var(--ink);transform:rotate(-.6deg);min-height:430px;display:grid;align-content:start}
.qz-count{font:700 13px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.qz-step{border:0;margin:0;padding:0;display:grid;gap:10px}
.qz-step legend{font:400 clamp(30px,3.4vw,40px)/1.1 var(--serif);margin:8px 0 14px;padding:0}
.qz label{position:relative;display:block;cursor:pointer}
.qz label input{position:absolute;opacity:0;pointer-events:none}
.qz label span{display:block;border:2px solid var(--ink);border-radius:6px;padding:13px 16px;font-weight:700;background:#fff;transition:transform .15s,background .15s,box-shadow .15s}
.qz label:hover span{background:#FFFDE8;transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.qz label input:checked+span{background:var(--lime);box-shadow:3px 3px 0 var(--ink)}
.qz label input:focus-visible+span{outline:3px solid var(--blue);outline-offset:3px}
.qz-result{display:grid;gap:10px;justify-items:start}
.qz-result .note{font-size:28px;color:var(--tangerine);transform:rotate(-2deg)}
.qz-result h3{font-size:clamp(36px,4vw,48px);outline:none}
.qz-price{font:400 54px/1 var(--serif)}
.qz-price small{font:500 15px var(--sans);color:var(--ink-2);margin-left:8px}
.qz-result>p:not(.note){color:var(--ink-2);max-width:32em}
.qz-go{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.qz-alt{font-size:15px;font-weight:500;color:var(--ink-2)}
.qz-foot{display:flex;gap:16px;margin-top:18px}
.qz-back{font:700 20px var(--hand);color:var(--blue);background:none;border:0;padding:4px 0;cursor:pointer}
.mo .qz.swap :is(.qz-step:not([hidden]),.qz-result:not([hidden])){animation:deal .45s cubic-bezier(.2,.8,.2,1)}
@keyframes deal{from{opacity:0;translate:24px 0;rotate:1.5deg}}
@media (max-width:900px){.quiz-in{grid-template-columns:1fr;gap:32px}.qz{transform:none;min-height:0}}