/* TypeMotion's Bloom Field and purchase controls, themed per product. */
html[data-cs-product="quickfx"]{
  --bloom-a:255,124,20;--bloom-b:244,72,112;--bloom-c:255,121,94;
  --product-rgb:255,136,38;--product-light:#FFBA7A;
  --buy-start:#E8720F;--buy-end:#B84208;--buy-edge:#8A3403;
  --buy-badge:#A84816;--buy-text:#FFF6EE;
  --ink-start:#FFB253;--ink-mid:#F5811C;--ink-end:#DC6206;
}
html[data-cs-product="motionease"]{
  --bloom-a:69,117,239;--bloom-b:42,84,255;--bloom-c:63,139,255;
  --product-rgb:69,117,239;--product-light:#9BBEFF;
  --buy-start:#467BED;--buy-end:#2854BB;--buy-edge:#18377E;
  --buy-badge:#254AA3;--buy-text:#F0F6FF;
  --ink-start:#9BC3FF;--ink-mid:#568BFF;--ink-end:#3A67D8;
}
html[data-cs-product]{background:#08090C}
html[data-cs-product] body{position:relative;background:transparent!important;isolation:isolate}
html[data-cs-product] .cs-product-page{background:transparent!important}
/* Pseudo-elements survive the template runtime replacing its content; no observer
   or animated background repaint is needed. They paint below all page content. */
html[data-cs-product] .cs-product-ambient{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background-color:#08090C;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.34) 0, rgba(0,0,0,.16) 65svh, transparent 140svh),
    radial-gradient(120% 60% at 50% 0%, transparent 40%, rgba(0,0,0,.42) 100%),
    linear-gradient(90deg, rgba(0,0,0,.34), transparent 22%, transparent 78%, rgba(0,0,0,.34)),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.500'/></svg>"),
    radial-gradient(1150px 1150px at 24% 2.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 76% 9.5%, rgba(var(--bloom-b), 0.1037) 0%, rgba(var(--bloom-b), 0.0828) 19.02%, rgba(var(--bloom-b), 0.0511) 38.05%, rgba(var(--bloom-b), 0.0158) 57.07%, rgba(var(--bloom-b), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 46% 16.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 68% 23.5%, rgba(var(--bloom-b), 0.1037) 0%, rgba(var(--bloom-b), 0.0828) 19.02%, rgba(var(--bloom-b), 0.0511) 38.05%, rgba(var(--bloom-b), 0.0158) 57.07%, rgba(var(--bloom-b), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 30% 30.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 24% 37.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 76% 44.5%, rgba(var(--bloom-c), 0.1037) 0%, rgba(var(--bloom-c), 0.0828) 19.02%, rgba(var(--bloom-c), 0.0511) 38.05%, rgba(var(--bloom-c), 0.0158) 57.07%, rgba(var(--bloom-c), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 46% 51.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 68% 58.5%, rgba(var(--bloom-b), 0.1037) 0%, rgba(var(--bloom-b), 0.0828) 19.02%, rgba(var(--bloom-b), 0.0511) 38.05%, rgba(var(--bloom-b), 0.0158) 57.07%, rgba(var(--bloom-b), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 30% 65.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 24% 72.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 76% 79.5%, rgba(var(--bloom-b), 0.1037) 0%, rgba(var(--bloom-b), 0.0828) 19.02%, rgba(var(--bloom-b), 0.0511) 38.05%, rgba(var(--bloom-b), 0.0158) 57.07%, rgba(var(--bloom-b), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 46% 86.5%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 68% 93.5%, rgba(var(--bloom-b), 0.1037) 0%, rgba(var(--bloom-b), 0.0828) 19.02%, rgba(var(--bloom-b), 0.0511) 38.05%, rgba(var(--bloom-b), 0.0158) 57.07%, rgba(var(--bloom-b), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 30% 99%, rgba(var(--bloom-a), 0.0828) 0%, rgba(var(--bloom-a), 0.0662) 19.02%, rgba(var(--bloom-a), 0.0410) 38.05%, rgba(var(--bloom-a), 0.0130) 57.07%, rgba(var(--bloom-a), 0.0000) 76.1%),
    radial-gradient(1150px 1150px at 88% 3%, rgba(var(--bloom-c), 0.0936) 0%, rgba(var(--bloom-c), 0.0756) 19.02%, rgba(var(--bloom-c), 0.0468) 38.05%, rgba(var(--bloom-c), 0.0144) 57.07%, rgba(var(--bloom-c), 0.0000) 76.1%);
  background-size:auto, auto, auto, 120px 120px, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
  background-blend-mode:normal, normal, normal, overlay, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat}
html[data-cs-product] body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.055;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-cs-product] .cs-old-grain,
html[data-cs-product] #main-content .hero-bg{display:none!important}

/* The same title/media/offer rhythm as TypeMotion, keeping each demo's own source. */
html[data-cs-product] body #main-content#main-content>header.hero{
  padding:74px 32px 24px!important;max-width:1240px!important;
  min-height:calc(100svh - var(--announce-h,0px))!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}
html[data-cs-product] body #main-content#main-content .hero-grid{top:0!important;gap:0!important}
html[data-cs-product] body #main-content#main-content .hero h1{
  margin:0 0 16px!important;line-height:1.02!important;font-size:clamp(54px,5vw,72px)!important;
}
html[data-cs-product] body #main-content#main-content .hero :is(.qfx-panel,.me-panel){
  position:relative;width:100%!important;max-width:min(900px,calc((100svh - 440px) * 1.778))!important;
  margin:0 auto!important;overflow:visible!important;transform:none!important;
}
html[data-cs-product="motionease"] .hero .me-panel::before{
  content:"";position:absolute;left:50%;top:-20%;transform:translateX(-50%);
  width:94%;height:66%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(62% 60% at 50% 50%,rgba(var(--product-rgb),.18),rgba(var(--product-rgb),.06) 46%,rgba(var(--product-rgb),0) 72%);
  filter:blur(48px);
}
html[data-cs-product] body #main-content#main-content .hero :is(.qfx-shot,.me-panel-vid){
  position:relative;z-index:1;

}
html[data-cs-product] body #main-content#main-content :is(.hero-fineprint,.me-hero-enter--spec){margin:12px auto 0!important}
html[data-cs-product] body #main-content#main-content :is(.hero-purchase,.me-hero-enter--purchase){
  margin:12px 0 0!important;gap:7px!important;position:relative;z-index:6;
}
html[data-cs-product] body #main-content#main-content .cs-legacy-price,
html[data-cs-product] body #main-content#main-content .cta-purchase{display:none!important}
html[data-cs-product] body #main-content#main-content .buy-pair{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  width:auto!important;max-width:100%!important;gap:8px!important;
}
html[data-cs-product] body #main-content#main-content .hero .buy-pair{margin:34px auto 0!important}
html[data-cs-product] body #main-content#main-content>section{
  padding-top:120px!important;padding-bottom:120px!important;
}
html[data-cs-product] body #main-content#main-content #final-cta{margin-top:0!important}
html[data-cs-product] body #main-content#main-content .final-cta-card{
  padding:38px 34px 30px!important;border-radius:24px!important;
}
html[data-cs-product] body #main-content#main-content .final-cta-card h2{
  font-size:clamp(40px,5.2vw,60px)!important;line-height:1.04!important;
  max-width:560px!important;margin:0 auto 26px!important;text-wrap:balance;
}
html[data-cs-product] body #main-content#main-content #final-cta .buy-pair{margin-top:0!important}

/* Raised capsule, with an opaque price badge above the hover fill. */
html[data-cs-product] body #main-content#main-content .cs-buy,
html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy{
  position:relative!important;overflow:hidden!important;isolation:isolate;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;max-width:100%!important;height:auto!important;min-height:56px!important;
  gap:12px!important;margin:0!important;padding:12px 14px 12px 30px!important;border-radius:30px!important;
  background:linear-gradient(135deg,var(--buy-start),var(--buy-end))!important;border:0!important;
  color:var(--buy-text)!important;font:700 19px/1.2 Inter,sans-serif!important;text-decoration:none!important;
  white-space:nowrap;cursor:pointer;filter:none!important;
  box-shadow:0 3px 0 var(--buy-edge),0 12px 26px rgba(0,0,0,.5)!important;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.15),box-shadow .24s ease!important;
}
html[data-cs-product] .cs-buy-label,
html[data-cs-product] .cs-buy-price b{font-size:19px!important;line-height:1.2!important;font-weight:700!important;letter-spacing:-.012em!important;color:var(--buy-text)!important}
html[data-cs-product] .cs-buy-label{position:relative;z-index:1}
html[data-cs-product] .cs-buy-price{
  position:relative;z-index:2;display:inline-flex;align-items:baseline;
  padding:8px 18px;border-radius:999px;background:var(--buy-badge)!important;white-space:nowrap;
}
html[data-cs-product] body #main-content#main-content .cs-buy:hover,
html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy:hover{
  transform:translateY(-3px) scale(1.03)!important;filter:none!important;
  box-shadow:0 6px 0 var(--buy-edge),0 24px 48px rgba(0,0,0,.66)!important;
}
html[data-cs-product] body #main-content#main-content .cs-buy:active,
html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy:active{
  transform:translateY(1px) scale(.995)!important;
  box-shadow:0 2px 0 var(--buy-edge),0 8px 16px rgba(0,0,0,.5)!important;
}
html[data-cs-product] .cs-buy:focus-visible{outline:3px solid var(--product-light);outline-offset:5px}
.cs-buy-ink{
  position:absolute;left:var(--ox,50%);top:var(--oy,50%);width:var(--d,0px);height:var(--d,0px);
  margin-left:calc(var(--d,0px) / -2);margin-top:calc(var(--d,0px) / -2);
  border-radius:50%;background:radial-gradient(circle,var(--ink-start),var(--ink-mid) 52%,var(--ink-end));
  pointer-events:none;z-index:0;opacity:.3;transform:scale(0);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.cs-buy:hover .cs-buy-ink,.cs-buy:focus-visible .cs-buy-ink{transform:scale(1)}
/* Keep the existing cart action as the quieter second choice below the pill. */
html[data-cs-product] body #main-content#main-content .buy-pair>.add-cart-btn{
  width:auto!important;height:auto!important;min-height:44px!important;margin:0!important;padding:8px 14px!important;
  border:0!important;border-radius:14px!important;background:transparent!important;
  color:rgba(255,255,255,.5)!important;font-size:12.5px!important;font-weight:500!important;
  box-shadow:none!important;gap:6px!important;transition:color .3s ease!important;
}
html[data-cs-product] body #main-content#main-content .buy-pair>.add-cart-btn:hover{color:var(--product-light)!important;transform:none!important}
html[data-cs-product] .buy-pair>.add-cart-btn svg{width:14px;height:14px}
html[data-cs-product] :is(.buybar,.sticky-buy-shell) .sticky-add{display:none!important}
html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy{
  min-height:50px!important;padding:9px 12px 9px 24px!important;border-radius:26px!important;gap:10px!important;
}
html[data-cs-product] :is(.buybar,.sticky-buy-shell) :is(.cs-buy-label,.cs-buy-price b){font-size:16px!important}
html[data-cs-product] :is(.buybar,.sticky-buy-shell) .cs-buy-price{padding:6px 13px}

@media(max-width:760px){
  html[data-cs-product] .cs-product-ambient{background-color:#08080C!important}
  html[data-cs-product] body #main-content#main-content>header.hero{padding:68px 18px 24px!important}
  html[data-cs-product] body #main-content#main-content .hero h1{
    max-width:390px!important;margin:0 0 12px!important;font-size:clamp(34px,11vw,44px)!important;line-height:1.08!important;white-space:normal!important;
  }
  html[data-cs-product] body #main-content#main-content .hero :is(.qfx-panel,.me-panel){
    width:calc((100vw - 36px) * .85)!important;max-width:none!important;
  }
  html[data-cs-product] .hero :is(.qfx-panel,.me-panel)::before{display:none}
  html[data-cs-product] body #main-content#main-content :is(.hero-fineprint,.me-hero-enter--spec){margin:9px auto 0!important}
  html[data-cs-product] body #main-content#main-content :is(.hero-purchase,.me-hero-enter--purchase){margin-top:11px!important}
  html[data-cs-product] body #main-content#main-content .hero .buy-pair{margin-top:26px!important}
  html[data-cs-product] body #main-content#main-content>section{padding-top:76px!important;padding-bottom:76px!important}
  html[data-cs-product] body #main-content#main-content .cs-buy{
    max-width:calc(100vw - 48px)!important;min-height:50px!important;gap:10px!important;padding:10px 12px 10px 22px!important;
  }
  html[data-cs-product] .cs-buy-label,html[data-cs-product] .cs-buy-price b{font-size:16px!important}
  html[data-cs-product] .cs-buy-price{padding:6px 12px}
  /* Match TypeMotion's mobile hero pill, including the price capsule. */
  html[data-cs-product] body #main-content#main-content .hero .cs-buy{padding:12px 20px!important;gap:12px!important}
  html[data-cs-product] .hero .cs-buy-price{padding:7px 14px}
  html[data-cs-product] body #main-content#main-content .final-cta-card{padding:32px 18px 26px!important}
  html[data-cs-product] body #main-content#main-content .final-cta-card h2{font-size:clamp(32px,8.5vw,44px)!important}
  html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup)>div{display:none!important}
  html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup){flex:none!important;min-width:0!important}
  html[data-cs-product] :is(.buybar-card,.sticky-card){gap:12px!important}
  html[data-cs-product] :is(.buybar-card,.sticky-card)>div:last-child{flex:1 1 auto!important;min-width:0!important;justify-content:flex-end!important}
  html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy{min-width:0!important;max-width:100%!important;flex:1 1 auto!important;justify-content:space-between!important}
}
@media(max-width:380px){
  html[data-cs-product] :is(.buybar-card,.sticky-card){gap:10px!important}
  html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup) img{width:40px!important;height:40px!important;border-radius:10px!important}
  html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy{padding:9px 10px 9px 18px!important;gap:8px!important}
  html[data-cs-product] :is(.buybar,.sticky-buy-shell) :is(.cs-buy-label,.cs-buy-price b){font-size:14px!important}
  html[data-cs-product] :is(.buybar,.sticky-buy-shell) .cs-buy-price{padding:6px 10px}
}
@media(hover:none),(pointer:coarse){
  .cs-buy-ink{display:none}
  html[data-cs-product] body #main-content#main-content .cs-buy:hover,
  html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy:hover{
    transform:none!important;box-shadow:0 3px 0 var(--buy-edge),0 12px 26px rgba(0,0,0,.5)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .cs-buy-ink{transition:none}
  html[data-cs-product] body #main-content#main-content .cs-buy,
  html[data-cs-product] body :is(.buybar,.sticky-buy-shell) .cs-buy{transition:none!important}
}

/* Every capture shares a clean hairline and grounded, layered shadow. */
html[data-cs-product] body #main-content#main-content video,
html[data-cs-product] body #main-content#main-content video:hover{
  border:1px solid rgba(var(--product-rgb),.28)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.26),0 24px 54px -10px rgba(0,0,0,.64)!important;
}

/* --- sticky buy bar --------------------------------------------------------- */

/* Stand down over the footer. cs-at-footer is set in product-theme.js. */
html.cs-at-footer body :is(.buybar,.sticky-buy-shell){
  opacity:0!important;pointer-events:none!important;transform:translateY(110%)!important;
  transition:opacity .25s ease,transform .25s ease!important;
}

/* The bar printed the price twice, once under the product name and again in the
   badge on the button. The badge is the one that stays, and the lockup is down to
   the logo alone - the button already names the product. Same thing the <=760px
   block above does; it just applies at every width now. */
html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup)>div{display:none!important}
html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup){flex:none!important;min-width:0!important}

@media(min-width:761px){
  /* space-between pinned the lockup and the button to opposite edges of the 560px
     shell. Centred with a fixed gap, they read as one control. */
  html[data-cs-product] :is(.buybar-card,.sticky-card){
    justify-content:center!important;gap:28px!important;
  }
}

/* The same hairline the marks wear on the store's front page (.cs-logo-stroke),
   at 1.5px instead of 1px. outline with a negative offset rather than a border, so
   it sits inside the image's own box and follows its radius without resizing it.
   --cs-logo-light matches the front page's per-product values exactly. No glow:
   a soft halo behind a 52px mark reads as a compression artefact, not as light. */
html[data-cs-product="quickfx"]{--cs-logo-light:255 176 102}
html[data-cs-product="motionease"]{--cs-logo-light:140 190 255}
html[data-cs-product] :is(.buybar-card img,.sticky-product-logo){
  outline:1.5px solid rgb(var(--cs-logo-light) / .3)!important;outline-offset:-1.5px!important;
}
/* The mark is a second target for the same purchase as the button beside it. */
html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup){cursor:pointer}

/* The mark is a click target, so it answers the pointer. Same lift and the same
   curve as the pill beside it, scaled down - it is a 52px square, not a button -
   plus the hairline coming up from .3 to .55. No glow: see above. */
html[data-cs-product] :is(.buybar-card img,.sticky-product-logo){
  transition:transform .22s cubic-bezier(.2,.9,.3,1.15),outline-color .22s ease;
}
@media(hover:hover){
  html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup):hover
    :is(.buybar-card img,.sticky-product-logo),
  html[data-cs-product] :is(.buybar-card img,.sticky-product-logo):hover{
    transform:translateY(-2px) scale(1.05);
    outline-color:rgb(var(--cs-logo-light) / .55)!important;
  }
}
html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup):active
  :is(.buybar-card img,.sticky-product-logo){
  transform:translateY(0) scale(.98);transition-duration:.09s;
}
@media(prefers-reduced-motion:reduce){
  html[data-cs-product] :is(.buybar-card img,.sticky-product-logo){transition:none}
  html[data-cs-product] :is(.buybar-lockup,.sticky-product-lockup):hover
    :is(.buybar-card img,.sticky-product-logo){transform:none}
}