/* ============================================================
   LazyTradie website v2. Soft, light, premium.
   Motion: springs via CSS linear() so transitions stay interruptible;
   transforms and opacity only unless a comment says otherwise.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"Inter Tight"; src:url("../fonts/inter-tight-var.woff2") format("woff2"); font-weight:100 900; font-display:swap}
@font-face{font-family:"Inter"; src:url("../fonts/inter-var.woff2") format("woff2"); font-weight:100 900; font-display:swap}
@font-face{font-family:"Instrument Serif"; src:url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-style:italic; font-weight:400; font-display:swap}
/* metric-matched fallbacks, so the swap doesn't shift the hero */
@font-face{font-family:"Inter Tight Fallback"; src:local("Arial"); size-adjust:96%; ascent-override:100%; descent-override:25%; line-gap-override:0%}
@font-face{font-family:"Inter Fallback"; src:local("Arial"); size-adjust:107%; ascent-override:90%; descent-override:22.4%; line-gap-override:0%}
@font-face{font-family:"Instrument Serif Fallback"; src:local("Times New Roman"); size-adjust:92%; ascent-override:98%; descent-override:30%; line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --bg:#FBFAF7; --surface:#FFFFFF;
  --sky:#EAF3FB; --sky-2:#DCEBFA;
  --ink:#0D1B2A; --ink-2:#3E4C5B; --line:#E4E0D8;
  --amber:#F5A623; --amber-deep:#8A5A00; --green:#1E7A46; --red:#B3321F;

  --display:"Inter Tight","Inter Tight Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bodyf:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --accent:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;

  /* the orb's UI kit reads these */
  --panel:#FFFFFF; --raised:#F6F4EF; --text:var(--ink); --muted:var(--ink-2);

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --spring:var(--ease-out); --spring-bounce:cubic-bezier(.34,1.3,.64,1); --spring-slow:var(--ease-out);
  --t-spring:560ms; --t-bounce:530ms; --t-slow:940ms;

  --wrap:1200px; --gutter:clamp(16px,4vw,40px);
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  --shadow-sm:0 1px 2px rgba(13,27,42,.05), 0 6px 18px -8px rgba(13,27,42,.12);
  --shadow-md:0 1px 2px rgba(13,27,42,.05), 0 22px 48px -22px rgba(13,27,42,.24);
  --shadow-lg:0 2px 4px rgba(13,27,42,.04), 0 44px 90px -40px rgba(13,27,42,.34);
  --blur:12px;

  /* the ring art: a call going out, in still, crisp-edged discs for clear glass to bend */
  --rings-amber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 2000'%3E%3Cg fill='%23F5A623' fill-opacity='.2'%3E%3Ccircle cx='1000' cy='1000' r='990'/%3E%3Ccircle cx='1000' cy='1000' r='770'/%3E%3Ccircle cx='1000' cy='1000' r='580'/%3E%3Ccircle cx='1000' cy='1000' r='410'/%3E%3Ccircle cx='1000' cy='1000' r='260'/%3E%3Ccircle cx='1000' cy='1000' r='130'/%3E%3C/g%3E%3C/svg%3E");
  --rings-sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 2000'%3E%3Cg fill='%233F8FE0' fill-opacity='.17'%3E%3Ccircle cx='1000' cy='1000' r='990'/%3E%3Ccircle cx='1000' cy='1000' r='770'/%3E%3Ccircle cx='1000' cy='1000' r='580'/%3E%3Ccircle cx='1000' cy='1000' r='410'/%3E%3Ccircle cx='1000' cy='1000' r='260'/%3E%3Ccircle cx='1000' cy='1000' r='130'/%3E%3C/g%3E%3C/svg%3E");
  --rings-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 2000'%3E%3Cg fill='%23fff' fill-opacity='.24'%3E%3Ccircle cx='1000' cy='1000' r='990'/%3E%3Ccircle cx='1000' cy='1000' r='770'/%3E%3Ccircle cx='1000' cy='1000' r='580'/%3E%3Ccircle cx='1000' cy='1000' r='410'/%3E%3Ccircle cx='1000' cy='1000' r='260'/%3E%3Ccircle cx='1000' cy='1000' r='130'/%3E%3C/g%3E%3C/svg%3E");
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    /* sampled from springs: damping 1 / response .42, damping .78 / response .42, damping 1 / response .7 */
    --spring:linear(0, .043, .138, .255, .372, .482, .579, .663, .732, .789, .835, .871, .9, .923, .941, .955, .966, .974, .98, .985, .989, .991, .994, .995, .996, .997, 1);
    --spring-bounce:linear(0, .039, .134, .256, .386, .512, .626, .724, .806, .87, .92, .957, .983, 1, 1.011, 1.017, 1.02, 1.02, 1.018, 1.016, 1.014, 1.011, 1.009, 1.006, 1.005, 1.003, 1);
    --spring-slow:var(--spring);
  }
}
@media (max-width:767px){ :root{--blur:8px} }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
/* in-page links land just under the nav */
section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--bg); color:var(--ink); font:400 1.0625rem/1.55 var(--bodyf); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; font-optical-sizing:auto}
img,svg,picture,video,canvas{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:6px}
[hidden]{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:fixed; left:16px; top:-64px; z-index:200; padding:12px 18px; border-radius:12px; background:var(--ink); color:#fff; font-weight:600; text-decoration:none; transition:transform .2s var(--ease-out)}
.skip:focus{transform:translateY(80px)}
.wrap{width:100%; max-width:calc(var(--wrap) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter)}
.serif{font-family:var(--accent); font-style:italic; font-weight:400; font-size:1.09em; letter-spacing:-.015em; line-height:.9} /* tight: the bigger italic must not stretch the line when the font swaps */

h1,h2,h3{font-family:var(--display); color:var(--ink); text-wrap:balance}
h2{font-size:clamp(2rem,1.25rem + 2.7vw,3.25rem); line-height:1.08; font-weight:650; letter-spacing:-.026em}
h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem); line-height:1.18; font-weight:650; letter-spacing:-.018em}
.lede{font-size:clamp(1.0625rem,1rem + .3vw,1.2rem); line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.section{position:relative; padding-block:clamp(72px,9vw,128px)}
.sec-head{max-width:760px; margin-inline:auto; text-align:center; display:grid; gap:14px; margin-bottom:clamp(36px,5vw,56px)}

/* reveal on scroll: transform + opacity, only armed once JS is running */
.js [data-reveal]{opacity:0; transform:translate3d(0,18px,0); transition:opacity .7s var(--ease-out), transform var(--t-slow) var(--spring-slow); transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1; transform:none}

/* ---------- glass ----------
   Panels get their glass look from translucency and highlights alone: the shapes behind them are
   soft and still, so a blur would cost a lot and show nothing. Real backdrop blur is kept for
   surfaces over a still photo (the Talk to Lana chips, feature cards), and nothing moves beneath it. */
.glass{position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(13,27,42,.03), var(--shadow-md)}
/* the light sweep on hover */
.glass::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.62) 50%,transparent 66%);
  transform:translate3d(-70%,0,0); transition:transform .9s var(--ease-out), opacity .3s ease}
@media (hover:hover) and (pointer:fine){ .glass:hover::after{opacity:1; transform:translate3d(70%,0,0)} }
/* no backdrop-filter: solid white at 92% */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-bar{background:rgba(255,255,255,.92) !important} }
@media (prefers-reduced-transparency:reduce){ .glass,.nav-bar,.badge{background:#fff !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important} }
@media (prefers-contrast:more){ .glass,.nav-bar,.badge{background:#fff !important; border-color:var(--ink) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important} }

/* ---------- buttons ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 22px; border-radius:999px; border:0; overflow:hidden;
  font:600 1rem/1 var(--bodyf); letter-spacing:-.006em; text-decoration:none; white-space:nowrap; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
  transition:transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease, box-shadow .25s ease}
.btn:active{transform:scale(.97)}
.btn-lg{min-height:56px; padding:0 28px; font-size:1.0625rem}
.btn-sm{min-height:44px; padding:0 18px; font-size:.9375rem}
.btn-primary{background:var(--ink); color:#fff; padding-right:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(13,27,42,.28), 0 12px 26px -12px rgba(13,27,42,.6)}
.btn-primary.btn-lg{padding-right:10px}
.btn-primary::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%); transform:translate3d(-80%,0,0); transition:transform .75s var(--ease-out)}
.btn-chip{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--amber); color:var(--ink); flex:none; transition:transform var(--t-bounce) var(--spring-bounce)}
.btn-sm .btn-chip{width:28px; height:28px}
.btn-lg .btn-chip{width:38px; height:38px}
.btn-secondary{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line), var(--shadow-sm)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover::before{transform:translate3d(80%,0,0)}
  .btn-primary:hover .btn-chip{transform:translate3d(2px,0,0)}
  .btn-secondary:hover{box-shadow:inset 0 0 0 1px #CFC9BD, var(--shadow-sm)}
}

/* ---------- nav ---------- */
.nav-sentinel{position:absolute; top:0; left:0; width:1px; height:40px; pointer-events:none}
.nav{position:fixed; top:0; left:0; right:0; z-index:100; padding:12px var(--gutter) 0; pointer-events:none}
.nav-bar{position:relative; pointer-events:auto; display:flex; align-items:center; gap:20px; max-width:1040px; height:64px; margin-inline:auto; padding:0 10px 0 20px; border-radius:22px;
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(165%); backdrop-filter:blur(var(--blur)) saturate(165%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(13,27,42,.04), 0 14px 34px -18px rgba(13,27,42,.2)}
/* once content scrolls under it, the bar goes nearly opaque so headings can't read through it */
.nav-bar{transition:background-color .25s ease, border-color .25s ease}
.nav.is-scrolled .nav-bar{background:rgba(255,255,255,.86); border-color:rgba(255,255,255,.9) rgba(255,255,255,.9) rgba(13,27,42,.12)}
.nav-logo{display:block; flex:none; border-radius:8px}
.nav-logo img{width:auto; height:32px}
.nav-links{display:flex; gap:2px; margin-inline:auto}
.nav-links a{position:relative; display:flex; align-items:center; height:44px; padding:0 13px; border-radius:12px; font-size:.9375rem; font-weight:500; color:var(--ink-2); text-decoration:none; transition:color .2s ease, background-color .2s ease}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:var(--ink); background:rgba(13,27,42,.05)} }
.nav-cta{display:flex; align-items:center; gap:8px; flex:none}
.nav-burger{display:none; position:relative; width:44px; height:44px; margin-left:auto; border-radius:14px; flex:none; transition:transform .16s var(--ease-out)}
.nav-burger:active{transform:scale(.94)}
.nav-burger span{position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:var(--ink); transition:transform var(--t-spring) var(--spring)}
.nav-burger span:nth-child(1){top:18px}
.nav-burger span:nth-child(2){top:25px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translate3d(0,3.5px,0) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translate3d(0,-3.5px,0) rotate(-45deg)}
.nav-scrim{position:fixed; inset:0; z-index:-1; pointer-events:auto; background:rgba(13,27,42,.22); opacity:0; transition:opacity .28s ease}
.nav-scrim.show{opacity:1}
.nav-sheet{pointer-events:auto; position:relative; margin:8px auto 0; max-width:1040px; padding:10px; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:var(--shadow-lg); border:1px solid #fff;
  transform-origin:100% 0; opacity:0; transform:translate3d(0,-8px,0) scale(.97); transition:opacity .2s ease, transform var(--t-spring) var(--spring)}
.nav-sheet.show{opacity:1; transform:none}
.nav-sheet nav a{display:flex; align-items:center; min-height:52px; padding:0 14px; border-radius:14px; font:600 1.125rem/1 var(--display); letter-spacing:-.01em; text-decoration:none}
.nav-sheet nav a:active{background:rgba(13,27,42,.05)}
.nav-sheet-cta{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line)}
.nav-sheet-cta .btn{width:100%}
@media (max-width:919px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block}
  .nav-bar{height:60px; padding:0 8px 0 16px}
  .nav-logo img{height:28px}
}

/* ---------- hero ---------- */
.hero{position:relative; padding:clamp(112px,14vw,148px) 0 clamp(64px,8vw,104px); overflow:clip; text-align:center}
/* soft sky and amber shapes behind the glass (gradients, no filter: cheap to paint) */
.hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52% 44% at 18% 12%, #DCEBFA 0%, rgba(220,235,250,0) 70%),
    radial-gradient(44% 38% at 84% 22%, #EAF3FB 0%, rgba(234,243,251,0) 72%),
    radial-gradient(30% 22% at 66% 8%, rgba(245,166,35,.13) 0%, rgba(245,166,35,0) 72%),
    radial-gradient(60% 40% at 50% 84%, #E5F0FB 0%, rgba(229,240,251,0) 72%)}
.hero-copy{display:grid; justify-items:center}
.badge{position:relative; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 15px; border-radius:999px; font-size:.9375rem; font-weight:500; color:var(--ink-2);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(13,27,42,.05), 0 8px 20px -12px rgba(13,27,42,.2)}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--amber)}
h1{margin-top:20px; font-size:clamp(2.5rem,1.45rem + 4.3vw,5rem); line-height:1.04; font-weight:650; letter-spacing:-.03em; text-wrap:balance}
.rot{display:inline-grid; vertical-align:baseline; text-align:left; justify-items:start}
.rot-w{grid-area:1/1; white-space:nowrap; opacity:0; transform:translate3d(0,.52em,0);
  background:linear-gradient(transparent 80%,rgba(245,166,35,.42) 80%,rgba(245,166,35,.42) 93%,transparent 93%);
  transition:opacity .42s var(--ease-out), transform var(--t-spring) var(--spring)}
.rot-w.is-on{opacity:1; transform:none}
.rot-w.is-out{opacity:0; transform:translate3d(0,-.52em,0)}
@media (min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .rot-w{filter:blur(6px); transition:opacity .42s var(--ease-out), transform var(--t-spring) var(--spring), filter .42s var(--ease-out)}
  .rot-w.is-on{filter:blur(0)}
  .rot-w.is-out{filter:blur(6px)}
}
.hero-sub{margin-top:22px; max-width:680px; font-size:clamp(1.0625rem,1rem + .35vw,1.25rem); line-height:1.5; color:var(--ink-2); text-wrap:balance}
.hero-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px}
.hero-note{margin-top:16px; font-size:.9375rem; color:var(--ink-2)}
.br-wide,.br-narrow{display:none}
/* pinned, so the fallback font and the web font wrap the headline the same way */
@media (max-width:479px){ .br-narrow{display:inline} .br-wide{display:inline} }
@media (min-width:920px){ .br-wide{display:inline} }
@media (max-width:919px){
  .rot{display:grid; justify-items:center; text-align:center}
}

/* trade carousel: eight 4:5 cards on one ring, moved only with transform and opacity.
   The centre card is the photo for the word in the headline. */
.row{--w:clamp(210px,22.8vw,300px); position:relative; height:calc(var(--w)*1.25 + 28px); margin:clamp(40px,6vw,64px) 0 0}
.card{position:absolute; left:50%; top:14px; width:var(--w); aspect-ratio:4/5; margin-left:calc(var(--w)/-2); opacity:0; pointer-events:none; transition:transform var(--t-slow) var(--spring-slow), opacity .42s ease}
.card-in{width:100%; height:100%; border-radius:clamp(18px,2vw,28px); overflow:hidden; background:var(--sky-2); box-shadow:var(--shadow-md)}
.card picture,.card img{display:block; width:100%; height:100%}
.card img{object-fit:cover}
.card[data-d="0"]{opacity:1; transform:none; z-index:3}
.card[data-d="-1"]{opacity:1; transform:translate3d(-104%,7%,0) scale(.8); z-index:2}
.card[data-d="1"]{opacity:1; transform:translate3d(104%,7%,0) scale(.8); z-index:2}
.card[data-d="-2"]{opacity:1; transform:translate3d(-186%,14%,0) scale(.66); z-index:1}
.card[data-d="2"]{opacity:1; transform:translate3d(186%,14%,0) scale(.66); z-index:1}
.card[data-d="3"]{transform:translate3d(250%,14%,0) scale(.6)}
.card[data-d="-3"],.card[data-d="-4"]{transform:translate3d(-250%,14%,0) scale(.6)}
.card[data-d="0"] .card-in{box-shadow:var(--shadow-lg)}
/* the soft float is a wide-screen touch only */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .card-in{animation:rowFloat 7.4s ease-in-out infinite}
  .card:nth-child(2n) .card-in{animation-duration:8.2s; animation-delay:-2.6s}
  .card:nth-child(3n) .card-in{animation-duration:6.8s; animation-delay:-4.4s}
  .row.is-still .card-in{animation-play-state:paused}
}
@keyframes rowFloat{0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-7px,0)}}
.row-pause{position:absolute; right:max(var(--gutter),calc(50% - 600px)); bottom:-52px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--ink); background:#fff; box-shadow:inset 0 0 0 1px var(--line), var(--shadow-sm); transition:transform .16s var(--ease-out)}
.row-pause:active{transform:scale(.94)}
.row-pause .i-play{display:none}
.row-pause[aria-pressed="true"] .i-play{display:block}
.row-pause[aria-pressed="true"] .i-pause{display:none}
@media (max-width:767px){
  .row{--w:44vw}
  .card[data-d="-1"]{transform:translate3d(-92%,8%,0) scale(.72)}
  .card[data-d="1"]{transform:translate3d(92%,8%,0) scale(.72)}
  .card[data-d="-2"]{opacity:0; transform:translate3d(-170%,8%,0) scale(.6)}
  .card[data-d="2"]{opacity:0; transform:translate3d(170%,8%,0) scale(.6)}
  .card[data-d="3"]{transform:translate3d(170%,8%,0) scale(.6)}
  .card[data-d="-3"],.card[data-d="-4"]{transform:translate3d(-170%,8%,0) scale(.6)}
}

@media (prefers-reduced-motion:reduce){
  .card-in{animation:none}
  .card{transition:none}
  .rot-w{transition:opacity .2s ease; transform:none !important}
  .js [data-reveal]{opacity:1; transform:none; transition:none}
  .glass::after,.btn-primary::before{display:none}
  .btn-chip,.nav-sheet,.nav-burger span{transition-duration:.01ms}
}

/* ---------- off-screen sections skip layout and paint until they're near view ----------
   Placeholders are each section's measured content height, so the scrollbar barely moves as they render. */
.demo,.talk,.calc,.feats,.showcase,.tools,.pricing,.faq,.final-sec,.foot{content-visibility:auto}
.demo{contain-intrinsic-size:auto 838px}
.talk{contain-intrinsic-size:auto 627px}
.calc{contain-intrinsic-size:auto 1110px}
.feats{contain-intrinsic-size:auto 667px}
.tools{contain-intrinsic-size:auto 620px}
.pricing{contain-intrinsic-size:auto 1248px}
.faq{contain-intrinsic-size:auto 484px}
.final-sec{contain-intrinsic-size:auto 480px}
.foot{contain-intrinsic-size:auto 399px}
@media (max-width:919px){
  .showcase{contain-intrinsic-size:auto 1025px}
  .demo{contain-intrinsic-size:auto 891px}
  .talk{contain-intrinsic-size:auto 1201px}
  .calc{contain-intrinsic-size:auto 988px}
  .feats{contain-intrinsic-size:auto 2699px}
  .tools{contain-intrinsic-size:auto 739px}
  .pricing{contain-intrinsic-size:auto 2706px}
  .faq{contain-intrinsic-size:auto 570px}
  .final-sec{contain-intrinsic-size:auto 833px}
  .foot{contain-intrinsic-size:auto 399px}
}
@media (max-width:767px){
  .showcase{contain-intrinsic-size:auto 1000px}
  .demo{contain-intrinsic-size:auto 954px}
  .talk{contain-intrinsic-size:auto 1121px}
  .calc{contain-intrinsic-size:auto 1220px}
  .feats{contain-intrinsic-size:auto 1579px}
  .tools{contain-intrinsic-size:auto 638px}
  .pricing{contain-intrinsic-size:auto 2816px}
  .faq{contain-intrinsic-size:auto 546px}
  .final-sec{contain-intrinsic-size:auto 561px}
  .foot{contain-intrinsic-size:auto 834px}
}

/* the pinned showcase's height is needed before sections.css arrives */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .js .showcase{height:360vh} }

/* nothing moves under reduced motion, so there's nothing to pause */
@media (prefers-reduced-motion:reduce){ .row-pause,.demo-toggle{display:none} }