/* Basic's visual update is independent of the shared navigation/cart theme. */
html{background:#08090c}
body{position:relative;isolation:isolate;background:#08090c}
body::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.25),transparent 100svh),
    radial-gradient(1150px 1150px at 24% 0%,rgba(255,255,255,.09),rgba(255,255,255,.04) 38%,transparent 76%),
    radial-gradient(1150px 1150px at 76% 24%,rgba(230,234,240,.114),rgba(230,234,240,.056) 38%,transparent 76%),
    radial-gradient(1150px 1150px at 30% 55%,rgba(255,255,255,.09),rgba(255,255,255,.04) 38%,transparent 76%),
    radial-gradient(1150px 1150px at 76% 84%,rgba(230,234,240,.114),rgba(230,234,240,.056) 38%,transparent 76%);
}
.hero::before{display:none}
body .basic-cta{
  position:relative!important;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:62px;padding:15px 28px!important;max-width:100%;border:0!important;border-radius:32px!important;
  background:linear-gradient(135deg,#E8720F,#B84208)!important;color:#FFF6EE!important;
  font:700 19px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.012em;text-decoration:none;
  box-shadow:0 3px 0 #8A3403,0 12px 26px rgba(0,0,0,.5)!important;
  transform-origin:center;cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.15),box-shadow .24s ease!important;
}
.basic-cta-label{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.basic-cta::before{
  content:"";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%;pointer-events:none;opacity:.3;
  background:radial-gradient(circle,#FFB253,#F5811C 52%,#DC6206);
  transform:scale(0);transition:transform .5s cubic-bezier(.16,1,.3,1);
}
body .basic-cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 6px 0 #8A3403,0 24px 48px rgba(0,0,0,.66)!important}
.basic-cta:hover::before,.basic-cta:focus-visible::before{transform:scale(1)}
body .basic-cta:active{transform:translateY(1px) scale(.995);box-shadow:0 2px 0 #8A3403,0 8px 16px rgba(0,0,0,.5)!important}
.basic-cta:focus-visible{outline:3px solid #FFBA7A;outline-offset:5px}
body .basic-upgrade-button.basic-cta{min-height:54px;font-size:16px}
body .basic-sticky-download .sticky-buy.basic-cta{
  min-height:0;padding:9px 12px 9px 24px!important;font-size:16px!important;
  gap:10px;border-radius:26px!important;white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)!important;
}
.basic-sticky-price{position:relative;z-index:2;padding:6px 13px;border-radius:999px;background:#A84816;font-weight:700;letter-spacing:-.012em}
body .basic-sticky-download .sticky-product-lockup>div{display:none}
body .basic-sticky-download .sticky-card{flex-direction:row;justify-content:center!important;gap:28px!important}
@media(max-width:760px){
  body .basic-sticky-download .sticky-card{gap:16px!important}
  body .basic-sticky-download .sticky-buy.basic-cta{padding:12px 16px 12px 22px!important;border-radius:32px!important}
  .basic-sticky-price{padding:7px 14px}
}
/* Fixed-size SVG controls keep the pause bars centered at every zoom level. */
body .basic-media-toggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;right:12px;bottom:12px;border-radius:50%;font-size:0;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.basic-media-toggle::after{content:none}
.basic-media-toggle svg{display:block;width:24px;height:24px;flex:none;pointer-events:none}
.basic-media-toggle .basic-play-icon{display:none}
.basic-media-toggle[aria-pressed="true"] .basic-play-icon{display:block}
.basic-media-toggle[aria-pressed="true"] .basic-pause-icon{display:none}
.basic-media-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Free downloads use Basic's white palette; the paid upgrade retains its own color. */
body .button-primary.basic-cta{background:linear-gradient(135deg,#fff,#d9dce1)!important;color:#111318!important;box-shadow:0 3px 0 #9a9ea5,0 12px 26px rgba(0,0,0,.5)!important}
.button-primary.basic-cta::before{background:radial-gradient(circle,#fff,#f3f4f6 52%,#c8cdd4);opacity:.6}
body .button-primary.basic-cta:hover{box-shadow:0 6px 0 #9a9ea5,0 24px 48px rgba(0,0,0,.66)!important}
body .button-primary.basic-cta:active{box-shadow:0 2px 0 #9a9ea5,0 8px 16px rgba(0,0,0,.5)!important}
.button-primary.basic-cta:focus-visible{outline-color:#fff}
.basic-demo-vid{box-shadow:0 18px 52px -12px rgba(0,0,0,.55),0 -6px 60px -18px rgba(255,255,255,.12)}
/* Match the full TypeMotion hero's padding and headline/media/action rhythm. */
body #main{padding-top:0}
body #main>.hero{width:100%;max-width:1240px;min-height:calc(100svh - var(--announce-h,0px))!important;padding:74px 32px 24px;justify-content:center;gap:0}
.hero-copy{width:100%;max-width:1120px;margin-bottom:16px}
body .hero-h1{font-size:clamp(54px,5vw,72px);line-height:1.02}
body .basic-demo-plain{width:100%;max-width:min(900px,calc((100svh - 440px) * 1.778))}
body .hero-actions{margin-top:12px}
body .feature-demo{height:180px}
@media(max-width:760px){
  body #main>.hero{padding:68px 18px 24px}
  .hero-copy{max-width:390px;margin-bottom:12px}
  body .hero-h1{font-size:clamp(34px,11vw,44px);line-height:1.08;white-space:normal}
  body .basic-demo-plain{width:calc((100vw - 32px) * .85);max-width:100%}
  body .hero-actions{margin-top:11px;max-width:100%}
  body .feature-demo{height:150px}
}
@media(max-width:760px){
  body .basic-cta{min-height:56px;padding:14px 20px!important;font-size:16px}
}
@media(max-width:460px){
  body .basic-cta{font-size:14px;padding:14px 16px!important}
}
@media(hover:none),(pointer:coarse){
  body .basic-cta:hover{transform:none;box-shadow:0 3px 0 #8A3403,0 12px 26px rgba(0,0,0,.5)!important}
}
@media(prefers-reduced-motion:reduce){
  body .basic-cta,body .basic-cta::before{transition:none!important}
  body .basic-cta:hover,body .basic-cta:active{transform:none}
}