.hero{padding-top:clamp(52px,7.6vw,112px)}
.hero h1{max-width:19em;font:400 clamp(25px,2.05vw,30px)/1.24 var(--sans);letter-spacing:-.024em;
  color:var(--tx);text-wrap:balance}
.hero .sub{max-width:34em;margin-top:14px;font:400 clamp(16px,1.2vw,18px)/1.5 var(--sans);
  letter-spacing:-.01em;color:var(--grey);text-wrap:pretty}
.hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px}

.proof{display:flex;align-items:flex-start;gap:8px;font:400 14px/1.4 var(--sans);
  letter-spacing:-.005em;color:var(--grey)}
.hero .proof{margin-top:20px}
.ast{width:11px;height:11px;flex:none;margin-top:4px;fill:var(--tx)}

.urlcta{display:flex;align-items:center;gap:6px;width:min(100%,430px);min-height:52px;
  padding:4px 4px 4px 20px;background:#fff;border:1px solid rgba(38,37,30,.16);border-radius:999px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.urlcta:focus-within{border-color:rgba(38,37,30,.5);box-shadow:0 0 0 3px rgba(38,37,30,.1)}
.urlcta input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:400 16px var(--sans);letter-spacing:-.01em;color:var(--tx)}
.urlcta input::placeholder{color:var(--grey)}
.urlcta .pill{min-height:42px;padding:0 18px}

.hero .cta .pill.soft{min-height:52px;padding:0 24px}



.stage{position:relative;overflow:hidden;overflow:clip;border-radius:4px;background:#e6e1d8;
  isolation:isolate;container-type:inline-size}
.stage>.paint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.st-hero{margin-top:clamp(40px,4.2vw,58px);padding:clamp(26px,4.4%,60px) clamp(18px,8.5%,112px) 0}

.st-hero .win{margin-bottom:-16px}



.shotwin,.win{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fafaf8;border:1px solid rgba(38,37,30,.13);border-radius:10px;color:var(--tx);
  box-shadow:0 1px 2px rgba(38,37,30,.06),0 26px 60px -30px rgba(38,37,30,.45)}
.wbar{position:relative;flex:none;display:flex;align-items:center;gap:7px;height:34px;
  padding:0 13px;border-bottom:1px solid var(--line);background:#f3f2ee;font-size:12.5px}
.wbar>i{width:10px;height:10px;border-radius:50%;background:#d8d6ce;flex:none}
.wbar>.wt{position:absolute;left:0;right:0;text-align:center;color:var(--mut);pointer-events:none}
.wbar .addr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;
  align-items:center;gap:8px;width:min(46%,340px);height:23px;padding:0 9px;border-radius:6px;
  background:#fff;border:1px solid var(--line);color:var(--mut)}
.wbar .addr span{flex:1;text-align:center;white-space:nowrap}
.ico{width:13px;height:13px;flex:none;color:var(--faint)}
.pic{position:relative;overflow:hidden;background:#fafaf9}
.pic img{display:block;width:100%;height:auto}


.st-hero .shotwin{margin-bottom:-16px}

.st-hero .pic{aspect-ratio:1152/700}
.st-hero .pic img{height:100%;object-fit:cover;object-position:left top}



.st-hero .pic .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:left top;opacity:0;transition:opacity .7s var(--ease);background:#fff}
.st-hero .pic .film.on{opacity:1}
.film-pp{position:absolute;top:5px;right:7px;z-index:2;display:grid;place-items:center;
  width:24px;height:24px;padding:0;border:0;border-radius:6px;background:transparent;
  color:var(--faint);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.film-pp[hidden]{display:none}
.film-pp:hover{background:rgba(38,37,30,.07);color:var(--tx)}
.film-pp svg{width:12px;height:12px;fill:currentColor}
.film-pp .i-play,.film-pp.paused .i-pause{display:none}
.film-pp.paused .i-play{display:block}

.film-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);
  margin:clamp(20px,2.2vw,28px) clamp(18px,8.5%,112px) 0}
.film-rail[hidden]{display:none}
.film-rail .ch{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin:0;padding:0;
  border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.film-rail .bar{position:relative;display:block;height:2px;margin-bottom:9px;border-radius:2px;
  background:var(--line2);overflow:hidden}
.film-rail .bar i{position:absolute;inset:0;background:var(--tx);transform-origin:left;
  transform:scaleX(var(--p,0))}
.film-rail b{font-weight:500;font-size:14.5px;line-height:1.35;color:var(--mut);
  transition:color .2s var(--ease)}
.film-rail .d{font-size:13.5px;line-height:1.5;color:var(--faint)}
.film-rail .ch.on b,.film-rail .ch:hover b{color:var(--tx)}
.film-rail .ch:focus-visible{outline-offset:6px}



.feats{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);margin-top:clamp(44px,5vw,72px)}
.fcard{display:grid;grid-template-columns:minmax(0,35fr) minmax(0,65fr);padding:18px;
  border-radius:4px;background:var(--card)}
.fcard.rev{grid-template-columns:minmax(0,65fr) minmax(0,35fr)}
.fcard.rev .ftext{order:2;padding:24px 8px 24px clamp(26px,3.2vw,48px)}
.ftext{align-self:center;padding:24px clamp(26px,3.2vw,48px) 24px 8px}
.ftext h2,.ftext p{font:400 clamp(19px,1.56vw,23px)/1.32 var(--sans);letter-spacing:-.02em;
  text-wrap:pretty}
.ftext h2{color:var(--tx)}
.ftext p{color:var(--grey)}
.ftext .more{margin-top:clamp(20px,2vw,30px)}
.fstage{aspect-ratio:4/3}
.fstage .win{position:absolute}

.fstage .shotwin{position:absolute;left:6%;top:8%;width:106%}
.fstage .sw-panel{width:96%}
.fstage .sw-lab{top:7%}


main{--ground:#ecebe5;--r-lg:20px;--r-md:12px;
  --shadow:0 0 0 1px rgba(38,37,30,.08),0 24px 56px -28px rgba(38,37,30,.34)}
.rowh h2,.c>h3,.close h2{font-family:var(--sans);font-weight:560;color:var(--tx);text-wrap:balance}
.rowh .lead,.close .lead{font:400 clamp(18px,1.4vw,20px)/1.5 var(--sans);letter-spacing:-.011em;
  color:var(--mut);text-wrap:pretty}
.rowh{max-width:34em;margin:clamp(120px,11vw,168px) 0 clamp(36px,3.6vw,52px)}
.rowh h2{font-size:clamp(28px,2.5vw,36px);line-height:1.1;letter-spacing:-.03em}
.rowh .lead{margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.c{position:relative;display:flex;flex-direction:column;overflow:hidden;overflow:clip;
  padding:30px 30px 0;border-radius:var(--r-lg);background:var(--ground);isolation:isolate}
.c>h3{font-size:20px;line-height:1.3;letter-spacing:-.02em}
.c>p{margin-top:8px;font:400 17px/1.55 var(--sans);letter-spacing:-.008em;color:var(--mut);text-wrap:pretty}
.c .more{margin-top:18px;align-self:flex-start}
.cards .more{display:inline-flex;align-items:center;gap:6px;font:500 17px/1.4 var(--sans);
  letter-spacing:-.012em;color:var(--tx);text-decoration:none}
.cards .more .ar{margin-left:0;color:var(--grey);transition:transform .22s var(--ease),color .22s var(--ease)}
.cards .more:hover .ar{transform:translateX(3px);color:var(--tx)}
.cards .more:hover{color:var(--tx);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:5px;text-decoration-color:rgba(38,37,30,.3)}
.cv{position:relative;margin-top:30px;flex:1;min-height:0;height:250px}

.ui{position:absolute;overflow:hidden;background:var(--panel);border-radius:var(--r-md);
  box-shadow:var(--shadow);aspect-ratio:var(--w)/var(--h)}
.ui img{position:absolute;left:0;top:0;max-width:none;height:auto;
  width:calc(100% * 1200 / var(--w));
  transform:translate(calc(var(--x) / 1200 * -100%),calc(var(--y) / 760 * -100%))}
.cv .ui{left:0;top:0;width:var(--uw,112%)}

.tool{position:absolute;left:0;top:0;width:112%;height:120%;padding:18px 20px;background:var(--panel);
  border-radius:var(--r-md) 0 0 0;box-shadow:var(--shadow)}
.tcall{padding-bottom:14px;border-bottom:1px solid var(--line);font:400 14px/1.4 var(--sans);color:var(--grey)}
.tcall b{font-weight:560;color:var(--tx)}
.tres{list-style:none;margin:0;padding:0}
.tres li{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);
  font:400 14px/1.4 var(--sans);color:var(--tx);white-space:nowrap;min-width:0}
.tres i{flex:none;font-style:normal;font-weight:560;font-size:12px;letter-spacing:.01em;color:var(--stoptx);
  background:var(--stopbg);padding:2px 8px;border-radius:999px}
.tres span{overflow:hidden;text-overflow:ellipsis}
.tres em{flex:none;font-style:normal;color:var(--grey)}


.close{padding:clamp(120px,11vw,168px) 0 clamp(72px,7vw,112px)}
.close .shut{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(80px,9vw,128px) 24px;border-radius:24px;background:#22211c;color:#f7f7f4;overflow:hidden;
  isolation:isolate}

.close .shut:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(255,255,255,.1),transparent 70%)}
.close h2{font-size:clamp(36px,3.6vw,52px);line-height:1.06;letter-spacing:-.036em;color:#f7f7f4}
.close .lead{margin-top:16px;max-width:30em;color:rgba(247,247,244,.72)}
.close .urlcta{width:min(100%,460px);min-height:54px;margin-top:36px;padding:4px 4px 4px 22px;
  border-color:transparent;box-shadow:none}
.close .urlcta:focus-within{box-shadow:0 0 0 4px rgba(247,247,244,.18)}
.close .urlcta .pill{min-height:44px;padding:0 20px;font-weight:500}

.close .proof{display:block;margin-top:24px;text-align:center;color:rgba(247,247,244,.66)}
.close .proof .ast{display:inline-block;vertical-align:-1px;margin:0 7px 0 0;fill:#f7f7f4}
.close .proof a{display:inline-block;padding-block:4px;margin-block:-4px;color:#f7f7f4;text-decoration:underline;text-decoration-color:rgba(247,247,244,.45);text-underline-offset:3px;white-space:nowrap}
.close .proof a .ar{margin-left:.3em}
.close .proof a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(247,247,244,.4)}


.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.c.fact{padding-bottom:30px}
.fact .big{font:560 clamp(40px,4vw,56px)/1 var(--sans);letter-spacing:-.04em;color:var(--tx);
  font-variant-numeric:tabular-nums}

.fact .big span{font-weight:400;color:var(--grey)}
.fact>h3{margin-top:14px}


@media(max-width:1180px){
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.four .cv{aspect-ratio:16/10}
}
@media(max-width:1080px){
  .fcard,.fcard.rev{grid-template-columns:minmax(0,1fr);padding:14px}
  .fcard.rev .ftext,.ftext{order:0;padding:18px 10px 26px}
  .fstage{aspect-ratio:16/11}
  .cards{grid-template-columns:minmax(0,1fr);gap:26px}
  .cv{height:300px}
}
@media(max-width:900px){
  .cards.four{grid-template-columns:minmax(0,1fr)}
}

@media(min-width:721px) and (max-width:1080px){
  .cards:not(.two) .c{display:grid;grid-row:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto 1fr;column-gap:clamp(24px,4vw,40px);padding:30px 0 0 30px;min-height:300px}
  .cards:not(.two) .c>h3{grid-column:1;grid-row:1}
  .cards:not(.two) .c>p{grid-column:1;grid-row:2}
  .cards:not(.two) .c .more{grid-column:1;grid-row:3;align-self:start;justify-self:start;margin-bottom:30px}
  .cards:not(.two) .c .cv{grid-column:2;grid-row:1 / span 3;margin-top:0;height:auto;min-height:270px}
}

@media(max-width:720px){
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .pill.soft{align-self:flex-start}
  
  .urlcta{padding:3px 3px 3px 20px}
  .urlcta input{align-self:stretch}
  .urlcta .pill{min-height:44px}
  
  .feats{gap:32px}
  .st-hero,.fstage{aspect-ratio:auto;padding:22px 14px}
  .st-hero .shotwin,.fstage .shotwin{position:relative;left:auto;top:auto;width:auto;margin-bottom:0}
  .st-hero .pic,.fstage .shotwin .pic{aspect-ratio:4/3.3}
  .st-hero .pic img,.fstage .shotwin .pic img{position:absolute;left:0;top:0;width:240%;max-width:none;
    height:auto;object-fit:fill;transform:translateX(-19%)}
  .fstage .sw-panel .pic img{transform:translateX(-24%)}
  
  .fstage .sw-map .pic img,.fstage .sw-bugs .pic img{width:195%;transform:translateX(-22%)}
  .wbar .addr{width:auto;left:auto;right:12px;transform:translateY(-50%)}
  
  .js .st-hero .pic{aspect-ratio:1/1}
  .st-hero .pic .film{object-position:center}
  .st-hero .wbar .addr{right:auto;left:64px}
  
  .film-rail{position:relative;gap:6px;margin:12px 14px 0;padding-bottom:24px}
  .film-rail .ch{padding:12px 0}
  .film-rail .bar{margin:0}
  .film-rail b{position:absolute;left:0;bottom:0;font-size:14px;opacity:0;pointer-events:none}
  .film-rail .ch.on b{opacity:1}
  .film-rail .d{display:none}
  
  .ui{aspect-ratio:var(--mw,var(--w))/var(--mh,var(--h))}
  .ui img{width:calc(100% * 1200 / var(--mw,var(--w)));
    transform:translate(calc(var(--mx,var(--x)) / 1200 * -100%),calc(var(--my,var(--y)) / 760 * -100%))}
  .cv .ui{width:112%}
  .c{padding:26px 24px 0}
  .cv{height:240px}
  .cards.two{grid-template-columns:minmax(0,1fr)}
  .c.fact{padding-bottom:26px}
  .close{padding-top:120px}
  .close .shut{padding:72px 20px;border-radius:20px}
  .close .urlcta{width:100%}
}



header.nav{transition:border-color .25s var(--ease)}
header.nav.stuck{border-bottom-color:var(--line2)}


@supports (grid-template-rows:subgrid){
  .cards .c{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .cards .c .more{justify-self:start}
}

.pill{transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease)}
.pill:active{transform:scale(.98)}


   The hero is on screen at first paint, so its entrance is CSS alone; the rows below wait for
   home.js to mark <html> with .rv, so a script that never loads leaves them where they are. */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .sub,.hero .cta,.hero .proof{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .sub{animation-delay:.07s}
  .hero .cta{animation-delay:.14s}
  .hero .proof{animation-delay:.21s}
  .st-hero{animation:rise-far 1.1s cubic-bezier(.2,.7,.2,1) .18s both}
  .rv .fcard,.rv .rowh,.rv .cards .c,.rv .close .shut{opacity:0;transform:translateY(18px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .rv .fcard.in,.rv .rowh.in,.rv .cards .c.in,.rv .close .shut.in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rise-far{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}


@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .stage>.paint{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .fstage .shotwin{transition:transform .7s cubic-bezier(.2,.7,.2,1),
    box-shadow .7s cubic-bezier(.2,.7,.2,1)}
  .cv .ui,.cv .tool{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .fcard:hover .paint{transform:scale(1.035)}
  .fcard:hover .fstage .shotwin{transform:translateY(-5px);
    box-shadow:0 1px 2px rgba(38,37,30,.06),0 38px 72px -30px rgba(38,37,30,.5)}
  .cards .c:hover .cv .ui,.cards .c:hover .cv .tool{transform:translateY(-4px)}
}


@media(max-width:900px){
  .urlcta input,.urlcta .pill{min-height:44px}
}


@media(max-width:720px){
  .feats{gap:72px;margin-top:64px}
  .fcard,.fcard.rev{padding:0;border-radius:0;background:none}
  .fcard.rev .ftext,.ftext{padding:0 0 24px}
  
  .st-hero,.fstage{margin-left:calc(-1 * var(--g));margin-right:calc(-1 * var(--g));border-radius:0;
    padding:24px var(--g) 0}
  .st-hero .shotwin,.fstage .shotwin{margin-bottom:-14px}
  .film-rail{margin:12px 0 0}
  
  .film-rail .ch{padding:21px 0}
  .film-pp{top:-5px;right:2px;width:44px;height:44px}
}