/* Coaching Toolkit product reel - the walkthrough from the coaching-toolkit.com homepage, shown in its card.
   Markup, rules and timing are copied from that site (its Tailwind utilities included); everything is scoped
   under .ctk-reel so its tokens and utilities stay inside the reel. Driven by /js/ctk-reel.js. */
.ctk-reel{--color-white:#fff;--spacing:.25rem;--font-weight-semibold:600;--radius-md:16px;--radius-xl:28px;--color-surface-page:#f7f9fd;--color-surface-card:#fff;--color-ink:#1e2a4a;--color-ink-soft:#3b4866;--color-ink-muted:#5a6785;--color-line:#edf0f6;--color-line-strong:#e3e8f2;--color-line-dashed:#c9d2e6;--color-primary:#3568d4;--color-facet-mint:#d4f4ea;--color-facet-sky:#dcebff;--color-facet-periwinkle:#e7e9ff;--color-facet-blush:#fbe4ec;--color-facet-peach:#fff1e4;--color-facet-lime:#eef8d8;--color-facet-aqua:#d8f1f7;--color-accent-mint:#a9e5c9;--color-accent-sky:#9cc8ff;--color-accent-lilac:#c9b8f5;--color-positive-ink:#1f6b52;--color-blush-ink:#8a2a4c;--font-display:"Outfit", "Avenir Next", system-ui, sans-serif;--shadow-card:0 6px 20px #1e2a4a12;--text-title-s:20px;--text-title-s--line-height:1.25;--text-body-s:15px;--text-body-s--line-height:1.5;width:100%;max-width:460px}
.ctk-reel .absolute{position:absolute}
.ctk-reel .bg-ink\/15{background-color:#1e2a4a26}
.ctk-reel .bg-ink\/15{background-color:color-mix(in oklab, var(--color-ink) 15%, transparent)}
.ctk-reel .bg-linear-135{--tw-gradient-position:135deg}
.ctk-reel .bg-linear-135{--tw-gradient-position:135deg in oklab}
.ctk-reel .bg-linear-135{background-image:linear-gradient(var(--tw-gradient-stops))}
.ctk-reel .bg-primary{background-color:var(--color-primary)}
.ctk-reel .bg-white\/70{background-color:#ffffffb3}
.ctk-reel .bg-white\/70{background-color:color-mix(in oklab, var(--color-white) 70%, transparent)}
.ctk-reel .block{display:block}
.ctk-reel .col-start-1{grid-column-start:1}
.ctk-reel .cursor-pointer{cursor:pointer}
.ctk-reel .fill-accent-lilac{fill:var(--color-accent-lilac)}
.ctk-reel .fill-accent-mint{fill:var(--color-accent-mint)}
.ctk-reel .fill-accent-sky{fill:var(--color-accent-sky)}
.ctk-reel .fill-current{fill:currentColor}
.ctk-reel .fill-facet-blush{fill:var(--color-facet-blush)}
.ctk-reel .fill-facet-lime{fill:var(--color-facet-lime)}
.ctk-reel .fill-facet-mint{fill:var(--color-facet-mint)}
.ctk-reel .fill-facet-peach{fill:var(--color-facet-peach)}
.ctk-reel .fill-facet-periwinkle{fill:var(--color-facet-periwinkle)}
.ctk-reel .fill-facet-sky{fill:var(--color-facet-sky)}
.ctk-reel .fill-ink-muted{fill:var(--color-ink-muted)}
.ctk-reel .fill-ink-soft{fill:var(--color-ink-soft)}
.ctk-reel .fill-line{fill:var(--color-line)}
.ctk-reel .fill-line-dashed{fill:var(--color-line-dashed)}
.ctk-reel .fill-line-strong{fill:var(--color-line-strong)}
.ctk-reel .fill-primary{fill:var(--color-primary)}
.ctk-reel .fill-surface-card{fill:var(--color-surface-card)}
.ctk-reel .fill-surface-page{fill:var(--color-surface-page)}
.ctk-reel .flex{display:flex}
.ctk-reel .flex-1{flex:1}
.ctk-reel .flex-none{flex:none}
.ctk-reel .font-display{font-family:var(--font-display)}
.ctk-reel .font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.ctk-reel .from-facet-mint{--tw-gradient-from:var(--color-facet-mint);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.ctk-reel .gap-2{gap:calc(var(--spacing) * 2)}
.ctk-reel .grid{display:grid}
.ctk-reel .h-1{height:var(--spacing)}
.ctk-reel .h-11{height:calc(var(--spacing) * 11)}
.ctk-reel .h-auto{height:auto}
.ctk-reel .hover\:bg-white:hover{background-color:var(--color-white)}
.ctk-reel .inset-0{inset:0}
.ctk-reel .items-center{align-items:center}
.ctk-reel .justify-center{justify-content:center}
.ctk-reel .max-w-\[440px\]{max-width:440px}
.ctk-reel .max-w-\[520px\]{max-width:520px}
.ctk-reel .md\:p-10{padding:calc(var(--spacing) * 10)}
.ctk-reel .mt-2{margin-top:calc(var(--spacing) * 2)}
.ctk-reel .mt-5{margin-top:calc(var(--spacing) * 5)}
.ctk-reel .mx-auto{margin-inline:auto}
.ctk-reel .overflow-hidden{overflow:hidden}
.ctk-reel .p-6{padding:calc(var(--spacing) * 6)}
.ctk-reel .relative{position:relative}
.ctk-reel .rounded-full{border-radius:2147483647px}
.ctk-reel .rounded-xl{border-radius:var(--radius-xl)}
.ctk-reel .row-start-1{grid-row-start:1}
.ctk-reel .shadow-raised{--tw-shadow:0 10px 28px var(--tw-shadow-color,#1e2a4a14);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
.ctk-reel .size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}
.ctk-reel .size-\[18px\]{width:18px;height:18px}
.ctk-reel .stroke-blush-ink{stroke:var(--color-blush-ink)}
.ctk-reel .stroke-ink{stroke:var(--color-ink)}
.ctk-reel .stroke-line-dashed{stroke:var(--color-line-dashed)}
.ctk-reel .stroke-line-strong{stroke:var(--color-line-strong)}
.ctk-reel .stroke-positive-ink{stroke:var(--color-positive-ink)}
.ctk-reel .stroke-white{stroke:var(--color-white)}
.ctk-reel .text-center{text-align:center}
.ctk-reel .text-ink{color:var(--color-ink)}
.ctk-reel .text-title-s{font-size:var(--text-title-s);line-height:var(--tw-leading,var(--text-title-s--line-height))}
.ctk-reel .to-facet-sky{--tw-gradient-to:var(--color-facet-sky);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}
.ctk-reel .via-facet-aqua{--tw-gradient-via:var(--color-facet-aqua);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.ctk-reel .w-full{width:100%}
.ctk-reel{--reel-scene-ms:3.5s}
.reel-window{border-radius:var(--radius-md);background:var(--color-surface-card);box-shadow:var(--shadow-card);padding-top:22px;position:relative;overflow:hidden}
.reel-window:before{content:"";background:var(--color-line-dashed);width:7px;height:7px;box-shadow:12px 0 var(--color-line-dashed), 24px 0 var(--color-line-dashed);border-radius:50%;position:absolute;top:8px;left:12px}
.reel-scene,.reel-caption{opacity:0;visibility:hidden;transition:opacity .45s,transform .45s,visibility 0s linear .45s}
.reel-caption{transform:translateY(6px)}
.ctk-reel[data-scene="1"] [data-scene="1"],.ctk-reel[data-scene="2"] [data-scene="2"],.ctk-reel[data-scene="3"] [data-scene="3"],.ctk-reel[data-scene="4"] [data-scene="4"],.ctk-reel[data-scene="5"] [data-scene="5"],.ctk-reel[data-scene="6"] [data-scene="6"]{opacity:1;visibility:visible;transition-delay:.1s,.1s,0s;transform:none}
.reel-draw-line{fill:none;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.reel-slot-fill,.reel-seal,.reel-amount,.reel-wave rect,.reel-row,.reel-tile{transform-box:fill-box;transform-origin:50%}
.reel-wheel path{transform-box:view-box;transform-origin:110px 74px}
.ctk-reel[data-scene="1"] .reel-slot-fill{animation:.5s ease-out .7s both reel-pop}
.ctk-reel[data-scene="1"] .reel-slot-tick{animation:.4s ease-out 1.2s both reel-draw}
.ctk-reel[data-scene="1"] .reel-slot-note{animation:.45s ease-out 1.7s both reel-rise}
.ctk-reel[data-scene="2"] .reel-sign{animation:1.3s ease-in-out .4s both reel-draw}
.ctk-reel[data-scene="2"] .reel-seal{animation:.5s cubic-bezier(.3,1.4,.6,1) 1.9s both reel-stamp}
.ctk-reel[data-scene="3"] .reel-tile{animation:.45s ease-out .2s both reel-rise}
.ctk-reel[data-scene="3"] .reel-tile+.reel-tile{animation-delay:.45s}
.ctk-reel[data-scene="3"] .reel-wave rect{animation:.6s ease-in-out .9s infinite alternate both reel-wave}
.ctk-reel[data-scene="3"] .reel-wave rect:nth-child(2n){animation-delay:1.1s}
.ctk-reel[data-scene="3"] .reel-wave rect:nth-child(3n){animation-delay:1.25s}
.ctk-reel[data-scene="4"] .reel-wheel path{animation:.5s cubic-bezier(.3,1.3,.6,1) both reel-grow}
.ctk-reel[data-scene="4"] .reel-wheel path:first-child{animation-delay:.3s}
.ctk-reel[data-scene="4"] .reel-wheel path:nth-child(2){animation-delay:.6s}
.ctk-reel[data-scene="4"] .reel-wheel path:nth-child(3){animation-delay:.9s}
.ctk-reel[data-scene="4"] .reel-wheel path:nth-child(4){animation-delay:1.2s}
.ctk-reel[data-scene="4"] .reel-wheel path:nth-child(5){animation-delay:1.5s}
.ctk-reel[data-scene="5"] .reel-row{animation:.45s ease-out both reel-slide}
.ctk-reel[data-scene="5"] .reel-row:first-of-type{animation-delay:.5s}
.ctk-reel[data-scene="5"] .reel-row:nth-of-type(2){animation-delay:.85s}
.ctk-reel[data-scene="5"] .reel-row:nth-of-type(3){animation-delay:1.2s}
.ctk-reel[data-scene="6"] .reel-amount{animation:.55s ease-out .4s both reel-pop}
.ctk-reel[data-scene="6"] .reel-paid-tick{animation:.5s ease-out 1.2s both reel-draw}
.reel-controls{display:none}
.ctk-reel[data-reel-ready] .reel-controls{display:flex}
.reel-fill{transform-origin:0;transform:scaleX(0)}
.reel-step:has(~[aria-current=step]) .reel-fill{transform:scaleX(1)}
.reel-step[aria-current=step] .reel-fill{animation:reel-fill var(--reel-scene-ms) linear both}
.reel-icon-play,.reel-pause[aria-pressed=true] .reel-icon-pause{display:none}
.reel-pause[aria-pressed=true] .reel-icon-play{display:block}
.ctk-reel[data-paused] *,.ctk-reel[data-paused] :before,.ctk-reel[data-paused] :after{animation-play-state:paused}
.ctk-reel[data-settled] .reel-scene *{animation:none}
.ctk-reel[data-settled] .reel-step[aria-current=step] .reel-fill{animation:none;transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.ctk-reel *,.ctk-reel :before,.ctk-reel :after{transition:none!important;animation:none!important}.reel-body{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"f1 f2""c1 c2""f3 f4""c3 c4""f5 f6""c5 c6";gap:6px 16px;display:grid}.reel-frame,.reel-captions{display:contents}.ctk-reel .reel-scene,.ctk-reel .reel-caption{opacity:1;visibility:visible;transform:none}.ctk-reel .reel-caption{font-size:var(--text-body-s);line-height:var(--text-body-s--line-height);margin-bottom:10px}.reel-scene[data-scene="1"]{grid-area:f1}.reel-scene[data-scene="2"]{grid-area:f2}.reel-scene[data-scene="3"]{grid-area:f3}.reel-scene[data-scene="4"]{grid-area:f4}.reel-scene[data-scene="5"]{grid-area:f5}.reel-scene[data-scene="6"]{grid-area:f6}.reel-caption[data-scene="1"]{grid-area:c1}.reel-caption[data-scene="2"]{grid-area:c2}.reel-caption[data-scene="3"]{grid-area:c3}.reel-caption[data-scene="4"]{grid-area:c4}.reel-caption[data-scene="5"]{grid-area:c5}.reel-caption[data-scene="6"]{grid-area:c6}.ctk-reel .reel-controls{display:none}}
@keyframes reel-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes reel-draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}
@keyframes reel-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes reel-stamp{0%{opacity:0;transform:scale(1.8)rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes reel-wave{0%{transform:scaleY(.35)}to{transform:none}}
@keyframes reel-grow{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes reel-slide{0%{opacity:0;transform:translate(-28px)}to{opacity:1;transform:none}}
@keyframes reel-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Coaching Toolkit resets buttons site-wide (Tailwind preflight); appspire.tech does not, so the controls reset here. */
.ctk-reel .reel-step,.ctk-reel .reel-pause{margin:0;padding:0;border:0;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.ctk-reel .reel-step{background:transparent}
.ctk-reel .reel-pause{color:var(--color-ink)}
.ctk-reel .reel-step:focus-visible,.ctk-reel .reel-pause:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:8px}
.ctk-reel figure,.ctk-reel p{margin:0}