@font-face{font-family:Barlow Condensed;src:url(../fonts/barlow-condensed-700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Barlow Condensed;src:url(../fonts/barlow-condensed-800.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:DM Sans;src:url(../fonts/dm-sans-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:DM Sans;src:url(../fonts/dm-sans-700.ttf) format("truetype");font-weight:700;font-display:swap}
:root{
  --pink:#db2277;--violet:#bf16ff;--ink:#100c15;--soft-ink:#211828;
  --paper:#faf8f7;--muted:#655a69;--line:#e6dfe6;
  --gradient:linear-gradient(112deg,var(--pink),var(--violet));
  --action:linear-gradient(112deg,#ad195c,#8816c4);
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;width:100%}
:focus-visible{outline:3px solid #a545df;outline-offset:4px}
[hidden]{display:none}
.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}
.skip{position:fixed;z-index:10;left:16px;top:12px;padding:12px;background:#fff;transform:translateY(-150%)}
.skip:focus{transform:none}
.site-header{background:var(--ink);color:#fff;border-bottom:1px solid #ffffff16}
.header-inner,.footer-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font:800 25px/.86 var(--display);letter-spacing:.018em}
.wordmark>span>span{display:block;color:#e85ea4}
.brand-mark{width:36px;height:36px;position:relative;display:block;background:var(--gradient);clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,30% 100%,0 70%);}
.brand-mark::after{content:"";position:absolute;inset:10px 10px 10px 12px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.header-inner nav{display:flex;gap:clamp(22px,3vw,48px);font-size:14px;color:#ded7e4}
.header-inner nav a:hover,.footer-inner>a:last-child:hover{color:#f486c0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:13px;border:1px solid transparent;border-radius:7px;padding:13px 20px;font-size:14px;font-weight:700;min-height:49px;line-height:1.22;white-space:nowrap;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.13);transform:translateY(-2px)}
.btn span,.text-link span{font-size:1.2em}
.btn-small{padding:10px 14px;min-height:40px;border-color:#ffffff3a}
.btn-primary{color:white;background:var(--action);border-color:#f052ad65}
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 78% 74%,#351745 0%,#190f24 35%,var(--ink) 69%);color:#fff}
.hero-inner{min-height:640px;display:grid;grid-template-columns:1.01fr 1fr;align-items:center;gap:16px;padding-block:58px}
.hero-copy{position:relative;z-index:2}
.switch{display:inline-flex;gap:4px;border:1px solid #ffffff30;padding:4px;border-radius:7px;background:#ffffff06}
.switch button{background:transparent;border:1px solid transparent;border-radius:4px;padding:6px 13px;font-size:13px;line-height:1.35;color:#d8cddd;font-weight:700}
.switch button[aria-pressed=true]{background:#fdf9fd;color:#1b1021}
.switch button:hover:not([aria-pressed=true]){color:white;border-color:#ffffff33}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-family:var(--display);text-transform:uppercase;font-weight:800;line-height:.86;letter-spacing:-.012em}
h1{font-size:clamp(65px,8.1vw,119px);margin:24px 0 22px}
h2{font-size:clamp(60px,7vw,100px)}
em{font-style:normal;color:#98216c}
.hero em,.clipper-section em{color:#f171b5;background:linear-gradient(100deg,#f468ad,#cd71fb);background-clip:text;-webkit-text-fill-color:transparent}
.hero-copy>p{max-width:475px;color:#d8ccde;font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:21px;margin-top:29px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#f5eafa}
.text-link:hover{color:#f68ac2}
.reel-stack{height:480px;position:relative;isolation:isolate;width:100%}
.stage-grid{position:absolute;inset:3% -10% 2% -8%;z-index:-1;background:repeating-linear-gradient(90deg,#e19df325 0 1px,transparent 1px 39px),repeating-linear-gradient(0deg,#e19df325 0 1px,transparent 1px 39px);mask-image:radial-gradient(ellipse,#000 10%,transparent 72%);}
.viewfinder{position:absolute;width:22px;height:22px;border-color:#c58fd5;border-style:solid;opacity:.65}
.corner-one{top:6%;left:3%;border-width:1px 0 0 1px}
.corner-two{right:2%;bottom:8%;border-width:0 1px 1px 0}
.stage-note{position:absolute;right:2%;top:5%;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#dec5e6}
.reel{position:absolute;top:15%;width:36%;height:70%;overflow:hidden;border-radius:14px;border:1px solid #e7c5ff65;background:#352044;box-shadow:0 22px 50px #09050cb3}
.reel img{height:100%;object-fit:cover}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#130b2455,transparent 22%,transparent 35%,#0d0817e8 100%)}
.reel-left{left:9%;transform:rotate(-12deg) translateY(4%)}
.reel-right{right:8%;transform:rotate(11deg) translateY(7%)}
.reel-main{z-index:2;left:31%;width:38%;height:79%;top:8%;transform:rotate(-2deg);border-color:#f4c7f79c}
.reel-tag,.reel-label{position:absolute;z-index:1}
.reel-tag{top:12px;left:11px;background:#190f24d9;border:1px solid #ffffff45;border-radius:4px;padding:3px 7px;font-size:9px;color:#fff;text-transform:uppercase;letter-spacing:.08em}
.reel-label{bottom:12px;left:12px;right:12px;color:#fff;font:800 clamp(19px,2.6vw,41px)/.89 var(--display);text-transform:uppercase}
.reel-label strong{color:#f174c1}
.reel-label span{display:block;height:2px;background:linear-gradient(90deg,#f45ba8 40%,#ffffff5c 40%);margin-top:14px}
.platforms{background:#f3edf3;border-bottom:1px solid var(--line)}
.platform-inner{min-height:90px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.platform-inner p{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#66576c}
.platform-list{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,4vw,56px)}
.platform-list>span{display:inline-flex;align-items:center;gap:8px;color:#2c2034;font-weight:700;font-size:15px}
.platform-icon{font-style:normal;font-size:17px;line-height:1}
.instagram{width:16px;height:16px;position:relative;border:1.5px solid;border-radius:4px}
.instagram::before{content:"";position:absolute;inset:3px;border:1.5px solid;border-radius:50%}
.instagram::after{content:"";position:absolute;top:2px;right:2px;width:2px;height:2px;border-radius:50%;background:currentColor}
.youtube{display:grid;place-items:center;width:18px;height:13px;background:#2c2034;border-radius:4px}.youtube::after{content:"";width:0;height:0;border-block:3px solid transparent;border-left:5px solid white;margin-left:1px}
.section{padding-block:92px}
.kicker{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8e225d;margin-bottom:15px}
.section-top{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:30px;margin-bottom:41px}
.section-top>p,.clipper-grid>div:first-child>p:not(.kicker){color:var(--muted);max-width:395px;font-size:17px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.steps article{padding:24px 24px 28px 0}
.steps article+article{border-left:1px solid var(--line);padding-left:24px}
.step-number{color:#9a245f;font-weight:700;font-size:14px}
.steps h3{font:700 35px/1 var(--display);text-transform:uppercase;margin:17px 0 9px}
.steps p{color:var(--muted);max-width:290px}
.clipper-section{background:radial-gradient(ellipse at 95% 100%,#391b4d,#1c1126 57%,#120d17);color:#fff}
.clipper-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.clipper-section .kicker{color:#f39acc}
.clipper-grid>div:first-child>p:not(.kicker){color:#d8ccde;margin:23px 0}
.calculator{border:1px solid #b987c96c;border-radius:12px;padding:24px;background:#ffffff08}
.calc-top,.range-labels{display:flex;justify-content:space-between;gap:10px;align-items:center}
.calc-top{font-weight:700;font-size:15px}
.rate{border-radius:4px;background:#f4e0f5;color:#4a174e;font-size:12px;padding:4px 8px}
.calculator output{display:block;font:800 clamp(60px,7vw,87px)/.95 var(--display);margin:13px 0 17px;color:#f39acc}
.calculator label{display:block;font-size:13px;margin-bottom:5px}
.calculator input[type=number]{width:100%;padding:9px 10px;border:1px solid #a982b4;border-radius:5px;background:#1c1424;color:white}
.calculator input[type=range]{appearance:none;display:block;width:100%;height:6px;background:linear-gradient(90deg,#f36aa9 var(--progress,5%),#624a70 var(--progress,5%));border-radius:9px;margin:20px 0 10px;cursor:pointer}
.calculator input[type=range]::-webkit-slider-thumb{appearance:none;background:white;width:16px;height:16px;border-radius:50%}
.calculator input[type=range]::-moz-range-thumb{background:white;width:16px;height:16px;border:0;border-radius:50%}
.range-labels,.calculator>p{font-size:12px;color:#e1d2e6}
.calculator>p{margin-top:16px}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:40px}
.questions{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer;padding:17px 0;font-weight:700}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:#9a245f;font-size:20px;line-height:1}
details[open] summary::after{content:"−"}
details>p{color:var(--muted);padding-bottom:17px;max-width:625px}
.contact{background:var(--action);color:#fff;padding:56px 0}
.contact-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact h2{font-size:clamp(45px,5.7vw,76px);margin-bottom:12px}
.contact-actions,.dialog-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-white{background:#fff;color:#301139}
.btn-outline{border-color:#fff;color:#fff}
.site-footer{background:var(--ink);color:#fff}
.site-footer p,.site-footer a:last-child{color:#d6cbdc;font-size:13px}
dialog{border:0;border-radius:12px;padding:0;width:min(540px,calc(100% - 28px));color:var(--ink);background:var(--paper)}
dialog::backdrop{background:#100c15ba}
.dialog-content{padding:25px;position:relative}
.dialog-content h2{font-size:clamp(39px,8vw,57px);margin-bottom:10px}
.dialog-content label{display:block;font-size:13px;font-weight:700;margin:15px 0 5px}
.dialog-content textarea{resize:vertical;width:100%;padding:10px;border:1px solid #a594a9;border-radius:5px;background:white}
.dialog-actions{margin-top:9px}
.btn-copy{background:white;border-color:#9987a0;color:var(--ink)}
.dialog-status{color:var(--muted);font-size:13px;margin-top:13px}
.close{position:absolute;right:14px;top:12px;background:white;color:var(--ink);border:1px solid #bcaac0;border-radius:5px;font-size:23px;line-height:1;width:34px;height:34px}
@media(max-width:1080px){
  .wrap{width:calc(100% - 64px)}
  .hero-inner{min-height:570px}
  .reel-stack{height:420px}
  .contact-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:760px){
  .wrap{width:calc(100% - 36px)}
  .header-inner{min-height:68px;gap:12px}
  .header-inner nav{display:none}
  .hero-inner{grid-template-columns:1fr;gap:7px;padding-block:38px 14px}
  h1{font-size:clamp(48px,14vw,98px);margin:21px 0 18px}
  .hero-copy>p{font-size:16px}
  .hero-actions{margin-top:22px;gap:13px}
  .reel-stack{height:clamp(285px,82vw,445px);max-width:470px;margin-inline:auto}
  .reel-label{font-size:clamp(21px,6vw,36px)}
  .platform-inner{align-items:flex-start;justify-content:center;flex-direction:column;padding-block:16px;gap:10px}
  .platform-list{gap:12px 18px}
  .platform-list>span{font-size:12px;gap:5px}
  .section{padding-block:58px}
  .section-top,.clipper-grid,.faq-grid{grid-template-columns:1fr;gap:22px}
  .section-top{margin-bottom:26px}
  .steps{grid-template-columns:1fr}
  .steps article{padding:16px 0 21px}
  .steps article+article{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .steps h3{margin-top:7px}
  .contact{padding-block:45px}
  .footer-inner{flex-wrap:wrap;gap:15px;padding-block:16px}
}
@media(max-width:365px){.header-cta{font-size:12px;padding-inline:9px}.hero-actions{gap:12px}.hero-actions .btn{padding-inline:13px}.text-link{font-size:13px}.reel-tag{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Shared scroll behavior and navigation. */
.scroll-indicator{
  position:fixed;z-index:5;inset:0 0 auto;height:3px;
  transform:scaleX(0);transform-origin:left;background:var(--gradient);pointer-events:none
}
.header-inner nav a[aria-current=page]{color:#fff;text-decoration:underline;text-decoration-color:#f486c0;text-underline-offset:6px}
.reel-stack,.audience-art{transform:translateY(var(--scroll-drift,0px))}
.pathways{background:#f3edf3;border-block:1px solid var(--line)}
.pathway-grid{display:grid;grid-template-columns:1fr 1fr}
.pathway{padding:27px 45px 29px 0;position:relative;display:grid;gap:6px;transition:color .25s ease}
.pathway+.pathway{padding-left:29px;border-left:1px solid var(--line)}
.pathway>span:first-child{font-weight:700;color:#8e225d;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.pathway>strong{font:800 clamp(28px,4vw,48px)/1 var(--display);text-transform:uppercase}
.pathway>span:last-child{position:absolute;right:22px;top:50%;font-size:24px;translate:0 -50%;transition:transform .25s ease}
.pathway:hover{color:#98216c}
.pathway:hover>span:last-child{transform:translate(3px,-3px)}

.audience-hero .hero-inner{min-height:595px}
.audience-hero .kicker{color:#f39acc}
.audience-art{position:relative;isolation:isolate;width:100%;height:440px}
.audience-art .stage-grid{inset:0 -8%}
.source-frame,.cut-frame,.editor-shot{
  position:absolute;overflow:hidden;border:1px solid #e7c5ff65;border-radius:12px;background:#352044;
  box-shadow:0 20px 55px #09050c85
}
.source-frame{width:69%;height:58%;left:5%;top:16%;transform:rotate(-5deg)}
.cut-frame{width:39%;height:78%;right:9%;top:11%;transform:rotate(7deg);border-color:#f4c7f79c}
.source-frame img,.cut-frame img,.editor-shot img{height:100%;object-fit:cover}
.source-frame img{object-position:50% 32%}
.cut-frame img{object-position:50% 38%}
.cut-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 43%,#130b22d9)}
.source-frame span,.cut-frame span{
  position:absolute;z-index:1;top:12px;left:12px;border:1px solid #ffffff60;border-radius:4px;
  padding:4px 8px;background:#190f24e6;font-size:10px;letter-spacing:.1em;text-transform:uppercase
}
.cut-frame strong{position:absolute;z-index:1;bottom:22px;left:12px;font:800 clamp(20px,3.2vw,46px)/.88 var(--display);text-transform:uppercase}
.editor-shot{width:71%;height:76%;top:9%;left:13%;transform:rotate(-4deg)}
.editor-shot img{object-position:center 40%}
.edit-timeline{position:absolute;inset:auto 9% 11% 8%;display:flex;gap:6px;align-items:center;height:57px;padding:15px;border:1px solid #e7c5ff65;border-radius:8px;background:#1e142ae8}
.edit-timeline span{height:16px;flex:1;background:#8e4fbd;border-radius:2px}
.edit-timeline span:nth-child(2){flex:1.8;background:#db498b}
.edit-timeline span:nth-child(3){flex:.6;background:#d668ac}
.edit-timeline span:nth-child(4){flex:1.3}
.edit-timeline i{position:absolute;top:5px;bottom:5px;left:52%;width:2px;background:white;box-shadow:0 0 8px #fbc7fa}
.art-rate{
  position:absolute;display:flex;align-items:center;gap:10px;right:1%;top:13%;
  padding:9px 13px;border-radius:8px;background:#f5ddf5;color:#351841;
  box-shadow:0 14px 35px #130b22a8
}
.art-rate strong{font:800 42px/.9 var(--display)}
.art-rate span{font-size:10px;font-weight:700;line-height:1.35}

.story-grid,.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.story-heading{position:sticky;top:35px;align-self:start}
.story-heading>p:last-child{max-width:390px;margin-top:21px;color:var(--muted)}
.story-steps,.brief-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.story-steps li{display:grid;grid-template-columns:38px 1fr;gap:11px;min-height:145px;padding:24px 0;border-bottom:1px solid var(--line)}
.story-steps h3{font:700 clamp(28px,3vw,42px)/.95 var(--display);text-transform:uppercase;margin-bottom:9px}
.story-steps p,.brief-list p{color:var(--muted);max-width:470px}
.page-feature{background:#f3edf3;border-top:1px solid var(--line)}
.brief-list li{padding:16px 0;border-bottom:1px solid var(--line)}
.brief-list strong{display:block;margin-bottom:4px}
@media(max-width:1080px){.audience-hero .hero-inner{min-height:545px}.audience-art{height:390px}}
@media(max-width:760px){
  .header-inner{display:grid;grid-template-columns:1fr auto;padding-block:12px 0;row-gap:10px}
  .header-inner nav{display:flex;grid-area:2/1/3/-1;gap:22px;padding-bottom:11px;font-size:13px}
  .header-cta{grid-area:1/2}
  .audience-hero .hero-inner{min-height:auto}
  .audience-art{height:clamp(275px,80vw,400px);max-width:470px;margin-inline:auto}
  .pathway-grid,.story-grid,.feature-grid{grid-template-columns:1fr;gap:0}
  .pathway,.pathway+.pathway{padding:17px 37px 18px 0}
  .pathway+.pathway{border-left:0;border-top:1px solid var(--line)}
  .pathway>span:last-child{right:5px}
  .story-heading{position:static;margin-bottom:25px}
  .story-steps li{min-height:0;padding-block:17px}
  .feature-grid{gap:21px}
}
@media(prefers-reduced-motion:reduce){
  .reel-stack,.audience-art{transform:none}
  .story-heading{position:static}
}

/* Hero motion is independent of the scroll effects and has its own control. */
.hero-inner{position:relative}
.motion-toggle{
  display:none;position:absolute;z-index:3;right:0;bottom:13px;align-items:center;gap:8px;
  color:#ecdaee;background:#1c1424;border:1px solid #e3b5ed55;border-radius:5px;
  padding:8px 11px;min-height:36px;font-size:12px;line-height:1
}
.motion-icon{display:inline-block;width:8px;height:10px;border-inline:2px solid currentColor}
.hero[data-motion=paused] .motion-icon{border:0;border-left:8px solid currentColor;border-block:5px solid transparent}
@keyframes hero-card-drift{
  0%,100%{translate:0 0}
  50%{translate:var(--drift-x,0) var(--drift-y,-13px)}
}
@keyframes hero-light-drift{
  0%,100%{transform:translate(0,0);opacity:.44}
  50%{transform:translate(-14%,9%);opacity:.83}
}
@keyframes reel-progress{
  0%,100%{transform:scaleX(.33)}
  73%{transform:scaleX(.95)}
}
@keyframes editing-playhead{
  0%,100%{left:14%}
  82%{left:86%}
}
@media(prefers-reduced-motion:no-preference){
  .hero[data-motion] .motion-toggle{display:inline-flex}
  .hero[data-motion]::before{
    content:"";position:absolute;inset:8% -9% 4% 34%;pointer-events:none;
    background:radial-gradient(ellipse at 68% 57%,#b545ce35,transparent 57%);
    animation:hero-light-drift 10s ease-in-out infinite
  }
  .hero[data-motion] :is(.reel,.source-frame,.cut-frame,.editor-shot,.art-rate){
    animation:hero-card-drift var(--drift-speed,6s) ease-in-out var(--drift-delay,0s) infinite
  }
  .reel-left,.source-frame{--drift-x:-10px;--drift-y:9px;--drift-speed:7s;--drift-delay:-1.7s}
  .reel-right,.editor-shot{--drift-x:10px;--drift-y:-11px;--drift-speed:6.5s;--drift-delay:-3s}
  .reel-main,.cut-frame{--drift-y:-16px;--drift-delay:-.7s}
  .art-rate{--drift-x:4px;--drift-y:-10px;--drift-speed:5s;--drift-delay:-1s}
  .hero[data-motion] .reel-label span{background:#ffffff5c;position:relative}
  .hero[data-motion] .reel-label span::after{
    content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f45ba8,#c46cff);
    transform-origin:left;animation:reel-progress 6s ease-in-out infinite
  }
  .hero[data-motion] .edit-timeline i{animation:editing-playhead 6.5s ease-in-out infinite}
  .hero[data-motion=paused]::before,
  .hero[data-motion=paused] :is(.reel,.source-frame,.cut-frame,.editor-shot,.art-rate,.edit-timeline i),
  .hero[data-motion=paused] .reel-label span::after{animation-play-state:paused}
  @media(max-width:760px){
    .hero[data-motion] .hero-inner{padding-bottom:55px}
    .hero[data-motion]::before{inset:35% -18% 0 5%}
    .reel-main,.cut-frame{--drift-y:-10px}
  }
}

/* Shared feedback for pointer and keyboard navigation. */
.btn,.motion-toggle,.close,.switch button{
  transition:transform .24s ease,box-shadow .24s ease,background-color .24s ease,border-color .24s ease,color .24s ease,filter .24s ease
}
.btn>span,.text-link>span,.footer-inner>a:last-child>span{display:inline-block;transition:transform .24s ease}
.brand-mark,.header-inner nav a,.text-link,.platform-list>span,.footer-inner>a:last-child{
  transition:color .22s ease,transform .24s ease,background-color .22s ease
}
.header-inner nav a{position:relative}
.header-inner nav a::after{
  content:"";position:absolute;inset:auto 0 -5px;height:1px;background:#f486c0;
  transform:scaleX(0);transform-origin:left;transition:transform .24s ease
}
.header-inner nav a[aria-current=page]{text-decoration:none}
.header-inner nav a:is([aria-current=page],:focus-visible)::after{transform:scaleX(1)}
.reel,.source-frame,.cut-frame,.editor-shot{transition:scale .3s ease,box-shadow .3s ease,border-color .25s ease}
.reel img,.source-frame img,.cut-frame img,.editor-shot img{transition:transform .4s ease}
.steps article,.story-steps li,.brief-list li,.pathway,.questions details,.calculator{
  transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease
}
.steps h3,.story-steps h3,.brief-list strong,.questions summary,.questions summary::after{
  transition:color .22s ease,transform .24s ease
}
.calculator:focus-within{border-color:#ef99d6}
.questions summary:focus-visible{color:#98216c}

@media(hover:hover) and (pointer:fine){
  .wordmark:hover .brand-mark{transform:rotate(-9deg) scale(1.08)}
  .header-inner nav a:hover::after{transform:scaleX(1)}
  .btn:hover{box-shadow:0 7px 20px #a829a04d;border-color:#f591d6}
  .btn:hover>span,.text-link:hover>span,.footer-inner>a:last-child:hover>span{transform:translate(3px,-2px)}
  .switch button:hover,.motion-toggle:hover,.close:hover{box-shadow:0 3px 12px #e079c339}
  .motion-toggle:hover{background-color:#3a2246;border-color:#e5a6da}
  .platform-list>span:hover{transform:translateY(-3px);color:#98216c}
  .hero :is(.reel,.source-frame,.cut-frame,.editor-shot):hover{
    border-color:#f69bdb;scale:1.045;box-shadow:0 15px 42px #cc59de50
  }
  .hero :is(.reel,.source-frame,.cut-frame,.editor-shot):hover img{transform:scale(1.065)}
  .hero[data-motion] :is(.reel,.source-frame,.cut-frame,.editor-shot):hover{animation-play-state:paused}
  .steps article:hover,.story-steps li:hover,.brief-list li:hover,.pathway:hover,.questions details:hover{background-color:#a52b8c0a}
  .steps article:hover h3,.story-steps li:hover h3,.brief-list li:hover strong,.questions details:hover summary{
    color:#98216c;transform:translateX(4px)
  }
  .questions details:hover summary::after{transform:scale(1.14)}
  .calculator:hover{border-color:#ef99d6;box-shadow:0 10px 30px #a743ac38}
  .calculator input:hover{outline:1px solid #ea9bd8;outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){
  .wordmark:hover .brand-mark,.btn:hover,.btn:hover>span,.text-link:hover>span,.footer-inner>a:last-child:hover>span,
  .platform-list>span:hover,.hero :is(.reel,.source-frame,.cut-frame,.editor-shot):hover img,
  .steps article:hover h3,.story-steps li:hover h3,.brief-list li:hover strong,.questions details:hover summary,
  .questions details:hover summary::after,.pathway:hover>span:last-child{transform:none}
  .hero :is(.reel,.source-frame,.cut-frame,.editor-shot):hover{scale:1}
}