/* Home page (landing/v2/index), the <style> block of index.html with its overrides folded in. The shared parts (hero,
   belt, capture, steps, trusted, cta) are in base.css, this file only adds what the home page does differently */

/* the feature scenes letter in the deck's Montserrat and the version bar's Plus Jakarta Sans, loaded for this page only
   (the shell loads Inter and Manrope) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Plus+Jakarta+Sans:wght@500;700&display=swap");

/* One vertical rhythm for the whole page: every section owns the space
   after it, and nothing adds a second helping on top. */
:root{--section-y:clamp(88px,7.4vw,128px)}
.section-header{margin-bottom:clamp(40px,3.4vw,58px)}
.section-header h2:first-child,
.section-header h3:first-child{margin-top:0}

/* anchors that travel */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- Hero ---------- */
.hero-home{padding-top:18px;padding-bottom:var(--section-y)}
.hero-home .belt{margin-bottom:44px}
/* the hero subline gets more room: 34px under the title, 48px before the email row */
.hero-home h1{margin-bottom:34px}
.hero-home h1 + .lead{margin-bottom:48px}
.hero-join__note{margin:26px 0 0;text-align:center;font-size:13px;color:var(--muted);position:relative;z-index:2}

/* white buttons: on hover the fill turns 80% white over a 20px blur of whatever is behind it */
.btn-white{transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s,-webkit-backdrop-filter .2s,backdrop-filter .2s}
.btn.btn-white:hover{background:rgba(255,255,255,.8);border-color:transparent;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
/* ...except the ones sitting on plain light surfaces (the hero), which take the light grey */
.btn.btn-white:not(.cta.dark .btn-white):not(.fx-join .btn-white):hover{background:var(--bg-soft);border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* An app's wordmark (common/v2/wordmark) at the cap height --wm. The artwork
   keeps room above the capitals, so the svg is drawn --k times taller and that
   room is cut off the top; descenders are left to hang. */
.wm{display:inline-block;height:var(--wm,1em);overflow:hidden;line-height:0;
      vertical-align:calc(var(--wm,1em) * -.22)}
.wm .wordmark{height:calc(var(--wm,1em) * var(--k));width:calc(var(--wm,1em) * var(--k) * var(--ar));
      margin-top:calc(var(--wm,1em) * (1 - var(--k)))}
.wm--margin{--k:1.272}
.wm--templates{--k:1.308}
.wm--resopie{--k:1.290}
.belt .wm{--wm:13px}

/* ---------- One app, one full-width section ---------- */
#margin.appfull{padding-bottom:calc(var(--section-y) * 1.15)}
.appfull__brand{display:flex;justify-content:center;margin:0 auto 24px}
.appfull__logo{position:relative;display:inline-block;line-height:0}
/* the stacked logo, 86px tall as the design's vertical logo file: mark,
   then the wordmark on the artwork's own gap */
.vlogo{display:flex;flex-direction:column;align-items:center;gap:3px}
.vlogo .mark,.vlogo .lot{width:45.5px;height:45.5px}
.vlogo .wordmark{height:37.5px;width:calc(37.5px * var(--ar))}
.tag-new{position:absolute;z-index:2;top:-3px;left:calc(50% + 16px);
      font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
      color:var(--blue-dark);background:var(--blue-10);padding:1px 7px;border-radius:var(--pill)}
/* one breathing space under the heading (title + lead) before its content: 64px on desktop, easing to 44px on phones */
.appfull__head{max-width:720px;margin:0 auto clamp(44px,4.6vw,64px);text-align:center}
.appfull__head h3{font-size:clamp(26px,3.2vw,36px);margin:0 0 14px;letter-spacing:-.025em}
.appfull__head .lead{margin:0 auto;color:var(--ink-2)}
.appfull__cta{justify-content:center;margin:72px 0 0}
.appfull__note{margin:18px auto 0;max-width:620px;text-align:center;
      font-size:14.5px;line-height:1.55;color:var(--muted)}

/* the explore buttons bloom (bloom.css) in blue, so they keep no fill of their own */
.appfull__cta .btn-primary{--bloom-fill:var(--blue);--bloom-glow:#006EDB,#68A9DD;--bloom-o:.85;background:transparent;border-color:transparent}
.appfull__cta .btn-primary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Showcase video (javascripts/v2/index.js): plays while on screen, a click
   pauses it and the player bar shows until it plays again */
.shot-video{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#fff;cursor:pointer}
.shot-video video{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}

/* the player bar, a frosted pill along the bottom while paused (or while the keyboard is on it, not after a click) */
.sv-bar{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:14px;
      padding:8px 18px 8px 8px;border-radius:var(--pill);color:#fff;cursor:default;
      background:rgba(18,18,18,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
      opacity:0;transform:translateY(10px);pointer-events:none;
      transition:opacity .22s var(--ease),transform .28s var(--ease)}
.shot-video.is-paused .sv-bar,.sv-bar:has(:focus-visible){opacity:1;transform:none;pointer-events:auto}
.sv-play{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;
      background:#fff;color:var(--ink);cursor:pointer;transition:transform .2s var(--ease)}
.sv-play:hover{transform:scale(1.06)}
.sv-play svg{width:16px;height:16px;fill:currentColor}
.sv-play .sv-i-pause,.shot-video.is-playing .sv-play .sv-i-play{display:none}
.shot-video.is-playing .sv-play .sv-i-pause{display:inline}
/* the seek track fills up to --p, set by the script as the video plays */
.sv-seek{flex:1;min-width:0;height:18px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}
.sv-seek::-webkit-slider-runnable-track{height:4px;border-radius:99px;
      background:linear-gradient(90deg,#fff var(--p,0%),rgba(255,255,255,.3) var(--p,0%))}
.sv-seek::-moz-range-track{height:4px;border-radius:99px;
      background:linear-gradient(90deg,#fff var(--p,0%),rgba(255,255,255,.3) var(--p,0%))}
.sv-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:#fff;
      box-shadow:0 1px 4px rgba(0,0,0,.35)}
.sv-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.sv-seek:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:99px}
.sv-time{flex:none;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:620px){
  .sv-bar{left:10px;right:10px;bottom:10px;gap:10px;padding:6px 14px 6px 6px}
  .sv-play{width:30px;height:30px}
  .sv-time{font-size:12px}
}

/* three features under the video, each over a scene drawn below (the grey placeholder stays for a row without one) */
.feat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 56px;margin-top:40px;padding:0 32px}
.feat3 article{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.feat3__video{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;background:#F1F2F5;
      display:flex;align-items:center;justify-content:center}
.feat3__video>svg{width:44px;height:44px;fill:#C7CBD3}
.feat3__text{display:flex;flex-direction:column;gap:16px;align-self:stretch;padding:0 16px}
.feat3 h4{margin:0;font-weight:700;font-size:20px;line-height:21px;letter-spacing:-.165px;color:var(--ink);text-box:trim-both cap alphabetic}
.feat3 p{margin:0;font-size:14px;line-height:18px;color:var(--ink-2);text-box:trim-both cap alphabetic}
@media (max-width:900px){.feat3{column-gap:36px;padding:0 8px}}
@media (max-width:760px){.feat3{grid-template-columns:1fr;gap:20px}}
@media (max-width:700px){.feat3__video{border-radius:16px}}

/* Margin's three feature scenes, as on margin.html: no side padding, 36px between columns, 18px above the text.
   Each scene is drawn on a 453px stage scaled to its card (javascripts/v2/index.js) */
.feat3.feat3--margin{padding:0;column-gap:36px}
.feat3--margin article{gap:18px}
.feat3--margin .feat3__video{border-radius:16px}
.feat3--margin .feat3__video.vfl{display:block;background:#F4F7FC}
.feat3--margin .feat3__text{padding:0 8px}

.vfl{overflow:hidden;background:#F4F7FC;display:block}
/* soft light-blue and light-yellow glows drifting slowly behind the scene */
.vfl::before,.feat3__glow::before{content:"";position:absolute;inset:-40%;pointer-events:none;z-index:1;
      background:radial-gradient(38% 42% at 30% 35%,rgba(120,180,240,.55),transparent 70%),
                 radial-gradient(36% 40% at 72% 65%,rgba(255,214,120,.55),transparent 70%),
                 radial-gradient(30% 34% at 65% 25%,rgba(170,210,250,.4),transparent 70%),
                 radial-gradient(30% 34% at 35% 75%,rgba(255,232,170,.45),transparent 70%);
      animation:vfl-glow 14s ease-in-out infinite alternate}
.hta::before{animation-delay:-7s}
/* the glows are shown 1.5x and only drift a little */
@keyframes vfl-glow{
  0%{transform:scale(1.5) translate(-2%,-1.5%) rotate(0deg)}
  50%{transform:scale(1.5) translate(2%,1.5%) rotate(6deg)}
  100%{transform:scale(1.5) translate(-1%,2%) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.vfl::before,.feat3__glow::before{transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.vfl::before,.feat3__glow::before{animation:none}}
.vfl .vfl__stage{z-index:2}
.vfl__stage{position:absolute;left:0;top:0;width:453px;height:279px;transform-origin:0 0;
      transform:scale(var(--k,1));font-family:'Inter',var(--font-body);color:#000}
.vfl__track{position:absolute;left:0;bottom:0;height:6px;width:0;background:#006EDB;border-radius:48px}
/* 35.7px avatar when open; scaled to a 13.6px dot at rest */
.vfl__mk{position:absolute;bottom:8px;width:35.7px;height:35.7px;margin-left:-17.85px;border-radius:50%;
      background:#006EDB center/cover no-repeat;transform-origin:50% 100%;transform:scale(.381);
      box-shadow:inset 0 0 0 18px #006EDB,0 0 0 0 rgba(255,255,255,0),0 0 0 rgba(0,0,0,0);
      transition:transform .45s cubic-bezier(.2,.8,.3,1.25),box-shadow .14s ease-in,background-color .14s}
/* the photo stays loaded under a blue fill: opening the fill reveals it as the dot grows, and on the
   way back the fill closes fast, before the dot shrinks, so no empty circle or late photo ever shows */
.vfl__mk.is-on{transform:none;background-color:#fff;box-shadow:inset 0 0 0 0 #006EDB,0 0 0 1.5px #fff,0 3px 8px rgba(0,0,0,.18);
      transition:transform .45s cubic-bezier(.2,.8,.3,1.25),box-shadow .35s ease-out .08s,background-color .2s}
.vfl__beat{position:absolute;inset:0;pointer-events:none}
.vfl__mark{position:absolute;opacity:0;transform:scale(.85);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.3,1.2);
      -webkit-backdrop-filter:blur(3.67px);backdrop-filter:blur(3.67px)}
.vfl__card{position:absolute;display:flex;box-sizing:border-box;background:#fff;
      box-shadow:0 4.55px 7.17px rgba(255,255,255,.27),0 11.38px 14.79px rgba(54,54,54,.16);
      -webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px);
      opacity:0;transform:translateY(8px) scale(.94);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.3,1.2)}
.vfl__beat.is-on .vfl__mark{opacity:1;transform:none}
.vfl__beat.is-on .vfl__card{opacity:1;transform:none;transition-delay:.18s}
.vfl__hd{display:flex;align-items:flex-start;gap:7px}
.vfl__hd b{font-weight:700;font-size:16px;line-height:19px}
.vfl__ts{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:19px;
      padding:2px 8px;background:rgba(255,160,0,.15);border:1px solid #FFA000;border-radius:8px;
      font-size:11.03px;line-height:13px;color:#FFA000;white-space:nowrap}
/* 1. Anna: voice note over a hand-drawn loop and arrow (drawn further down) */
.vfl__mark--a{left:62px;top:84px;width:132.87px;height:93.06px;border-radius:50%;
      background:rgba(0,110,219,.3);border:1.83px dashed #006EDB;box-sizing:border-box;
      -webkit-backdrop-filter:blur(3.67px);backdrop-filter:blur(3.67px)}
/* each card's square corner sits 20% into its mark; the card stays on top */
/* Anna's card runs wide (its square corner kept at the same point on the ellipse),
   with a taller comment bar holding a bold, lively wave and a round blue send */
.vfl__card--a{left:148px;top:19px;width:288px;height:90px;padding:10px 16px;border-radius:20.05px 20.05px 20.05px 0;transform-origin:0 100%}
.vfl__card--a .vfl__in{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;width:256px;height:70px;flex:none}
.vfl__card--a .vfl__tb{width:256px;height:40px;gap:10px;padding:6px 6px 6px 12px;border-radius:20px}
.vfl__card--a .vfl__tb>svg{width:16px;height:16px}
.vfl__card--a .vfl__wave{flex:1;width:auto;height:24px;justify-content:space-between}
.vfl__card--a .vfl__wave i{width:2.6px;border-radius:1.3px}
.vfl__card--a .vfl__wave i:nth-child(7n+1){--t:21;animation-duration:.46s}
.vfl__card--a .vfl__wave i:nth-child(7n+2){--t:16;animation-duration:.58s}
.vfl__card--a .vfl__wave i:nth-child(7n+3){--t:3;animation-duration:.5s}
.vfl__card--a .vfl__wave i:nth-child(7n+4){--t:22;animation-duration:.62s}
.vfl__card--a .vfl__wave i:nth-child(7n+5){--t:2.5;animation-duration:.48s}
.vfl__card--a .vfl__wave i:nth-child(7n+6){--t:19;animation-duration:.55s}
.vfl__card--a .vfl__wave i:nth-child(7n+7){--t:4;animation-duration:.44s}
.vfl__card--a .vfl__hd{height:19.01px;flex:none}
.vfl__card--a .vfl__ts{width:48.04px;height:19.01px}
.vfl__tb{box-sizing:border-box;display:flex;align-items:center;gap:8.86px;padding:6px;width:120.72px;height:27.52px;flex:none;
      background:#EDEEF3;border-radius:14.5px}
.vfl__tb>svg{display:block;width:13.99px;height:13.99px;flex:none}
/* Figma's Grid frame is 59.81px wide and clips its 28 bars */
.vfl__wave{display:flex;align-items:center;gap:1.53px;width:59.81px;height:13.14px;flex:none;overflow:hidden}
.vfl__wave i{flex:none}
/* the same live wave as the Comment step: each bar breathes between its
   resting height (--h) and a target (--t) on its own beat */
.vfl__wave i{display:block;width:1.51px;height:calc(var(--h) * 1px);border-radius:.5px;background:#006EDB;
      animation:vfl-wave .8s ease-in-out infinite alternate}
.vfl__wave i:nth-child(7n+1){--t:10.6;animation-duration:.72s}
.vfl__wave i:nth-child(7n+2){--t:3.5;animation-duration:.9s;animation-delay:-.35s}
.vfl__wave i:nth-child(7n+3){--t:12.4;animation-duration:.8s;animation-delay:-.15s}
.vfl__wave i:nth-child(7n+4){--t:5.4;animation-duration:.95s;animation-delay:-.6s}
.vfl__wave i:nth-child(7n+5){--t:8.9;animation-duration:.76s;animation-delay:-.25s}
.vfl__wave i:nth-child(7n+6){--t:2.4;animation-duration:.86s;animation-delay:-.5s}
.vfl__wave i:nth-child(7n+7){--t:11.9;animation-duration:.7s;animation-delay:-.1s}
@keyframes vfl-wave{from{height:calc(var(--h) * 1px)}to{height:calc(var(--t) * 1px)}}
@media (prefers-reduced-motion:reduce){.vfl__wave i{animation:none}}
/* send: Hugeicons' "sent" plane, drawn filled in white on a blue circle */
.vfl__go{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;
      background:#006EDB;border-radius:50%}
.vfl__go svg{display:block;width:14px;height:14px;margin:1px 1px 0 0}
/* 2. Max: text note over an orange box */
.vfl__mark--b{left:296px;top:126px;width:113.53px;height:71.42px;background:rgba(255,160,0,.4);
      border:1.83px dashed #FFA000;box-sizing:border-box}
.vfl__card--b{left:185px;top:77px;width:134px;height:63.03px;padding:10px 16px;border-radius:20px 20px 0 20px;transform-origin:100% 100%}
.vfl__card--b .vfl__in{display:flex;flex-direction:column;gap:7px}
.vfl__card--b p{margin:0;font-size:14.03px;line-height:17px;white-space:nowrap}
/* Max attaches the logo: a paperclip chip under his note; the card grows up from its corner */
.vfl__card--b{top:48px;height:auto}
.vfl__card--b .vfl__in{align-items:flex-start}
.vfl__att{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 8px;box-sizing:border-box;
      border-radius:12px;background:#E6F1FC;color:#006EDB;font-size:12px;line-height:1;font-weight:600;white-space:nowrap}
.vfl__att svg{display:block;width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round}
/* 3. Jay: image reply over a green freehand loop */
/* moved down-left so the enlarged card's square corner sits inside it, clear of the dots */
.vfl__mark--c{left:232px;top:92px;width:188.15px;height:150.33px;background:none}
.vfl__mark--c svg{display:block;width:100%;height:100%;overflow:visible}
/* drawn 1.5x (same proportions), grown down and left from its top-right corner;
   padding and gap kept modest so the image gets the extra room */
.vfl__card--c{left:32.5px;top:30px;width:250.5px;height:184.5px;flex-direction:column;gap:10px;padding:12px;border-radius:24px 24px 0 24px;
      transform-origin:100% 100%}
.vfl__card--c .vfl__hd{flex:none}
.vfl__img{width:226.5px;height:auto;flex:1;min-height:0;border-radius:12px;background:#2A2A2A}
.vfl__mark--c path{stroke-dasharray:4 4}
/* Anna's mark is a hand-drawn loop with an arrow pointing into it, drawn on stroke by stroke
   while her comment is up (loop, then shaft, then head); it resets once the mark has faded */
.vfl__mark--a{left:40px;top:70px;width:260px;height:170px;border:0;border-radius:0;background:none;
      -webkit-backdrop-filter:none;backdrop-filter:none}
.vfl__mark--a svg{display:block;width:100%;height:100%;overflow:visible}
.vfl__mark--a path{fill:none;stroke:#006EDB;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
      stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 0s .4s}
.vfl__beat.is-on .vfl__mark--a path{stroke-dashoffset:0}
.vfl__beat.is-on .vfl__loop{transition:stroke-dashoffset .75s cubic-bezier(.5,.1,.4,1) .1s}
.vfl__beat.is-on .vfl__shaft{transition:stroke-dashoffset .4s cubic-bezier(.4,0,.3,1) .85s}
.vfl__beat.is-on .vfl__head{transition:stroke-dashoffset .22s ease-out 1.22s}
/* a video dropped into Jay's placeholder fills it */
.vfl__img{overflow:hidden}
.vfl__img:has(video){background:none;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
.vfl__img video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}

/* "Human talk. AI execution." scene, on the same 453px stage. One 9.92s loop:
   the owner leaves two comments, a teammate's cursor comes in and replies to
   the first, then the Claude agent picks up the second and reports back.
   Every piece runs the same-length animation so they stay in step. */
.hta *{animation-duration:9.92s;animation-iteration-count:infinite;animation-fill-mode:both}
.hta.is-paused *{animation-play-state:paused!important}
/* the threads sit in one centred column, drawn at Figma size and scaled up to fill the card */
.hta__stack{position:absolute;left:50%;top:50%;width:315px;display:flex;flex-direction:column;
      transform:translate(-50%,-50%) scale(1.15)}
.hta__c{position:relative;display:flex;align-items:center;gap:11px;box-sizing:border-box;flex:none}
.hta__c--own{background:rgba(255,255,255,.95);
      box-shadow:0 4.5px 7.08px rgba(255,255,255,.27),0 11.24px 14.61px rgba(54,54,54,.16);
      -webkit-backdrop-filter:blur(3.46px);backdrop-filter:blur(3.46px);transform-origin:0 50%}
.hta__c--1{height:51.86px;padding:10.97px 18.29px 10.97px 10.97px;border-radius:21.94px;animation-name:hta-c1}
/* same left inset and gap as the first comment, so avatars, text, the voice
   bar and both reply elbows all line up on the same verticals */
.hta__c--2{height:50px;padding:8px 8px 8px 10.97px;gap:11px;border-radius:21.94px;margin-top:12px;animation-name:hta-c2}
.hta__c--re{height:43.92px;padding:6px;margin-top:6px;background:rgba(255,255,255,.6);border:1px solid #fff;border-radius:21.94px;
      -webkit-backdrop-filter:blur(3.46px);backdrop-filter:blur(3.46px);transform-origin:0 0}
.hta__c--r1{margin-left:44.92px;animation-name:hta-r1}
.hta__c--r2{margin-left:44.92px;animation-name:hta-r2}
/* the comments have a square bottom-left corner, like a chat bubble; replies stay fully round */
.hta .hta__c--own{border-bottom-left-radius:0}
/* the elbow from the parent's avatar into the reply: drawn under both cards
   (it starts beneath the parent and ends beneath the reply), and wiped in
   along its path just before the reply appears */
/* replies sit under the main comments and slide out from beneath them */
.hta__c{z-index:1}.hta__c--own{z-index:2}
.hta .hta__elb{position:absolute;z-index:0;left:25.43px;width:26px;height:30px;max-width:none;overflow:visible;fill:none}
.hta__elb path{fill:none;stroke:#535353;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation-timing-function:linear}
.hta__elb--1{top:49.82px}
.hta__elb--2{top:161.74px}
.hta__elb--1 path{animation-name:hta-e1}
.hta__elb--2 path{animation-name:hta-e2}
@keyframes hta-e1{0%,16.5%{stroke-dashoffset:1;opacity:1;animation-timing-function:linear}20%,90%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hta-e2{0%,40%{stroke-dashoffset:1;opacity:1;animation-timing-function:linear}43.5%,90%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
/* avatars: blue line drawings on a 25% blue disc. The drawing is the png (images/v2/landing) used as a mask */
.hta__av{position:relative;flex:none;width:29.92px;height:29.92px;border-radius:50%;background:rgba(0,110,219,.25)}
.hta__av::before{content:"";position:absolute;inset:0;border-radius:50%;background:#006EDB;
      -webkit-mask:var(--img) center/86% no-repeat;mask:var(--img) center/86% no-repeat}
.hta__av--own{--img:url("../../images/v2/landing/hta-own.png")}
.hta__av--team{--img:url("../../images/v2/landing/hta-team.png");background:rgba(229,72,110,.25)}
.hta__av--team::before{background:#E5486E}
.hta__av--ai{display:flex;align-items:center;justify-content:center;background:#DA7351}
.hta__av--ai::before{content:none}
.hta__av--ai svg{width:16px;height:16px;max-width:none}
.hta__t{position:relative;display:inline-block;color:#000;white-space:nowrap}
.hta__c--1 .hta__t{font-size:16px;line-height:19px;font-weight:500}
.hta__c--r1 .hta__t{font-size:14px;line-height:17px}
.hta__c--r2 .hta__t{font-size:12.78px;line-height:15px}
/* the voice note: play, then a long live wave filling the bar */
.hta__tb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;box-sizing:border-box;height:34px;
      padding:5.46px 12px 5.46px 8px;background:#EDEEF3;border-radius:13.21px}
.hta__tb>svg{flex:none;display:block;width:23.07px;height:23.07px;max-width:none}
.vfl__wave.hta__wave{flex:1;width:auto;min-width:0;height:19px;gap:0;justify-content:space-between}
/* the same bold, lively wave as Anna's voice card: thicker bars, fast wide swings */
.hta__wave i{width:2.6px;border-radius:1.3px}
.hta__wave i:nth-child(7n+1){--t:19;animation-duration:.46s}.hta__wave i:nth-child(7n+2){--t:3;animation-duration:.58s}
.hta__wave i:nth-child(7n+3){--t:18;animation-duration:.5s}.hta__wave i:nth-child(7n+4){--t:2.5;animation-duration:.62s}
.hta__wave i:nth-child(7n+5){--t:17;animation-duration:.48s}.hta__wave i:nth-child(7n+6){--t:4;animation-duration:.55s}
.hta__wave i:nth-child(7n+7){--t:19;animation-duration:.44s}
/* Reply shows on the first comment as the teammate's cursor reaches it */
.hta__reply{position:absolute;right:12px;top:50%;margin-top:-12px;height:24px;padding:0 11px;display:flex;align-items:center;
      border-radius:99px;background:rgba(0,110,219,.1);color:#006EDB;font-size:12px;font-weight:600;animation-name:hta-btn}
/* replies type themselves in; the agent "thinks" first */
.hta__c--r1 .hta__t{animation-name:hta-type1}
.hta__c--r2 .hta__t{animation-name:hta-type2}
.hta__say{position:relative;display:block}
.hta__dots{position:absolute;left:0;top:50%;display:flex;gap:3px;margin-top:-2px;animation-name:hta-dots}
.hta__dots i{width:4px;height:4px;border-radius:50%;background:#9A9DA6;animation:hta-dot .9s ease-in-out infinite!important}
.hta__dots i:nth-child(2){animation-delay:-.6s!important}
.hta__dots i:nth-child(3){animation-delay:-.3s!important}
/* the teammate: avatar riding with a blue pointer, tip on the Reply button */
.hta__who{position:absolute;left:279px;top:26px;z-index:3;width:0;height:0;animation-name:hta-who}
.hta__who svg{position:absolute;left:0;top:0;width:17px;height:17px;max-width:none;fill:#E5486E;transform-origin:0 0;animation-name:hta-press}
.hta__who .hta__av{position:absolute;left:13px;top:15px;width:27px;height:27px;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.18)}
/* 9.92s: first comment (0.4s) -> cursor in fast, clicks Reply (~1.6s) -> the
   reply slides out from under it and types (~1.9-3.2s) -> second comment
   (~3.6s) -> Claude's reply slides out, thinks, types (~5.2-7.3s) -> fade */
@keyframes hta-c1{0%,1%{opacity:0;transform:translateY(8px) scale(.94)}
  4%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes hta-c2{0%,33%{opacity:0;transform:translateY(8px) scale(.94)}
  37%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes hta-r1{0%,18.5%{opacity:0;transform:translateY(-22px)}
  22.5%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes hta-r2{0%,41.5%{opacity:0;transform:translateY(-22px)}
  45.5%,90%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes hta-type1{0%,23%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(15,end)}32%,100%{clip-path:inset(0 0 0 0)}}
@keyframes hta-type2{0%,50.5%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(25,end)}60%,100%{clip-path:inset(0 0 0 0)}}
@keyframes hta-dots{0%,45.5%{opacity:0}46.5%,50%{opacity:1}50.5%,100%{opacity:0}}
@keyframes hta-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-2px);opacity:1}}
@keyframes hta-btn{0%,9%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:none}
  14%{background:rgba(0,110,219,.18);transform:none}16%{transform:scale(.9)}18%{transform:none}
  20%{opacity:1}24%,100%{opacity:0;transform:none}}
@keyframes hta-who{0%,4%{opacity:0;transform:translate(120px,110px)}
  5%{opacity:1;animation-timing-function:cubic-bezier(.3,0,.2,1)}
  13.5%,19%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  26%{opacity:0;transform:translate(60px,120px)}100%{opacity:0;transform:translate(60px,120px)}}
@keyframes hta-press{0%,14.5%{transform:none}16%{transform:scale(.8)}17.5%,100%{transform:none}}
/* reduced motion: hold the finished frame */
@media (prefers-reduced-motion:reduce){.hta *{animation-delay:-8.4s!important;animation-play-state:paused!important}}

/* "Comments become tasks" scene, same stage and backdrop. One 10.4s loop: five
   comments arrive one at a time in the centre, the cursor ticks each one off,
   and each resolved card is pushed up as the next arrives; they all fly out
   through the top, the version bar rises in, the cursor approves V4 and adds
   V5 (back to In Progress), and it blurs out. The
   keyframes are built by the script (keep its T in step with the duration). */
.cbt::before{animation-delay:-3.5s}
.cbt *{animation-duration:10.4s;animation-iteration-count:infinite;animation-fill-mode:both}
.cbt.is-paused *{animation-play-state:paused!important}
.cbt__wrap{position:absolute;left:50%;top:50%;width:0;height:0;transform:scale(1.15)}
.cbt__c{position:absolute;left:-157.5px;top:-24.96px;width:315px;height:49.92px;box-sizing:border-box;
      display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;opacity:0;
      background:rgba(255,255,255,.95);border-radius:21.94px 21.94px 21.94px 0;
      box-shadow:0 4.5px 7.08px rgba(255,255,255,.27),0 11.24px 14.61px rgba(54,54,54,.16);
      -webkit-backdrop-filter:blur(3.46px);backdrop-filter:blur(3.46px)}
.cbt__l{display:flex;align-items:center;gap:11px;min-width:0}
.cbt__t{position:relative;font-size:16px;line-height:19px;font-weight:500;color:#000;white-space:nowrap}
.cbt__s{position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.5px;background:currentColor;
      transform:scaleX(0);transform-origin:0 50%}
/* the tick: grey outline until clicked, then Figma's green */
.cbt__ck{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;box-sizing:border-box;
      border-radius:50%;border:1.5px solid #D3D6DD;background:#fff;color:#B4B9C2}
.cbt .cbt__ck svg{width:20px;height:20px;max-width:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the cursor's tip sits on the tick of the centre card */
.cbt__who{position:absolute;left:133px;top:2px;z-index:3;width:0;height:0}
.cbt .cbt__who svg{position:absolute;left:0;top:0;width:17px;height:17px;max-width:none;fill:#E5486E;transform-origin:0 0}
.cbt__who .hta__av{position:absolute;left:13px;top:15px;width:27px;height:27px;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(0,0,0,.18)}
/* then the version bar: V4 ▾ | status. The cursor opens the status menu, picks
   Approved, and the version rolls over to V5 */
.cbt__vb{position:absolute;left:-142px;top:-52px;z-index:2;display:flex;align-items:flex-start;gap:4px;padding:4px;
      width:284px;height:52px;box-sizing:border-box;background:#fff;border-radius:20px;opacity:0;
      box-shadow:0 0 4px rgba(0,0,0,.1),0 8px 18px -6px rgba(0,0,0,.05),0 12px 42px -4px rgba(0,0,0,.08);
      font-family:'Plus Jakarta Sans',Inter,sans-serif}
.cbt__vd{display:flex;align-items:center;gap:16px;padding:12px;width:87px;height:44px;box-sizing:border-box;flex:none;border-radius:12px}
.cbt__vn{display:block;width:27px;height:20px;overflow:hidden;font-size:20px;font-weight:700;line-height:20px;letter-spacing:-.02em;color:#0F172A}
.cbt__vn i{display:block;font-style:normal}
.cbt .cbt__vb svg{flex:none;width:20px;height:20px;max-width:none;fill:none}
.cbt__vb hr{align-self:center;flex:none;width:0;height:34px;margin:0 -.5px;border:0;border-left:1px solid #D1D5DB}
.cbt__sl{position:relative;flex:none;width:181px;height:44px}
.cbt__row{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;height:44px;box-sizing:border-box;
      border-radius:12px;font-size:16px;font-weight:500;line-height:20px;white-space:nowrap}
.cbt__row svg circle{fill:currentColor}
.cbt__row--ip{color:#006EDB}.cbt__row--nr{color:#FFA000}.cbt__row--ap{color:#13AA5D}
.cbt__menu .cbt__row--nr{background:rgba(255,160,0,.15)}
/* the version menu: the current version and "Add V5" */
.cbt__menu.cbt__vm{left:4px;top:4px;width:150px}
.cbt__row--v{font-weight:700;color:#0F172A;background:#F1F5F9}
.cbt__row--add{color:#006EDB}
.cbt__row--add path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cbt__st{position:absolute;inset:0}
.cbt__st .cbt__row{position:absolute;inset:0}
.cbt__menu{position:absolute;left:0;top:0;z-index:1;display:flex;flex-direction:column;gap:4px;padding:4px;width:181px;box-sizing:border-box;
      background:#fff;border-radius:16px;opacity:0;transform-origin:50% 0;
      box-shadow:0 0 4px rgba(0,0,0,.1),0 8px 18px -6px rgba(0,0,0,.05),0 12px 42px -4px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:reduce){.cbt *{animation-delay:-9.1s!important;animation-play-state:paused!important}}

/* the Templates row: same spacing, with the scenes' drifting blue/yellow glow behind its scenes */
.feat3__video.feat3__glow{overflow:hidden;background:#F4F7FC}
.feat3__glow::before{animation-delay:-3.5s}
.feat3__glow>svg{position:relative;z-index:2}
/* "Zero slop. All killer." scene: someone building a slide on a plain white monitor, keyboard
   under it, no desk (Illustrations/elements.svg, desk and coffee left out, framed closer). One 10s loop: they type the title, glance left at the
   slide rail, type two bullets, then look right as the picture drops in; the slide clears
   and it starts again, with steam curling off the coffee throughout. The keyframes are
   written by the script below. */
.feat3__video>svg.dsk{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2}
.dsk *{animation-duration:10s;animation-iteration-count:infinite;animation-fill-mode:both}
.feat3__dsk.is-paused .dsk *{animation-play-state:paused!important}
.dsk .dsk__head,.dsk .dsk__hand,.dsk .dsk__caret{transform-box:view-box}
/* the person is see-through to the card's gradient: their fills are left empty, and a copy of
   them (moving with the same animations) cuts the monitor, desk and keyboard out behind them */
.dsk .dsk__skin{fill:none}
/* a soft shadow lifts the white monitor off the pale card */
.dsk .dsk__mon{filter:drop-shadow(0 12px 28px rgba(20,60,130,.16)) drop-shadow(0 2px 6px rgba(20,60,130,.08))}
.dsk .dsk__cut *{fill:#000!important}
.dsk__head{transform-origin:674px 640px;animation-name:dsk-hd}
/* the hands press from the wrist, so the sleeve tops they are drawn with barely move */
.dsk__hand--l{transform-origin:440px 745px;animation-name:dsk-hdl}.dsk__hand--r{transform-origin:925px 745px;animation-name:dsk-hdr}
.dsk .dsk__ln,.dsk .dsk__dot,.dsk .dsk__pic,.dsk .dsk__mt,.dsk .dsk__sun,.dsk .dsk__stm{transform-box:fill-box}
.dsk__ln{transform-origin:0 50%}
.dsk__ln--t{animation-name:dsk-lt}.dsk__ln--a{animation-name:dsk-la}.dsk__ln--b{animation-name:dsk-lb}
.dsk__ln--tt{animation-name:dsk-ltt}.dsk__ln--ta{animation-name:dsk-lta}.dsk__ln--tb{animation-name:dsk-ltb}
.dsk__dot,.dsk__pic,.dsk__sun{transform-origin:50% 50%}
.dsk__dot--a{animation-name:dsk-da}.dsk__dot--b{animation-name:dsk-db}
.dsk__pic{animation-name:dsk-pic}.dsk__sun{animation-name:dsk-sun}
.dsk__mt{transform-origin:50% 100%;animation-name:dsk-mt}
.dsk .dsk__caret{animation-name:dsk-caret,dsk-blink;animation-duration:10s,1s;animation-timing-function:linear,steps(1)}
@keyframes dsk-blink{0%{opacity:1}50%{opacity:0}}
/* steam curling up off the coffee, on its own 2.5s beat */
.dsk .dsk__stm{transform-origin:50% 100%;animation-name:dsk-stm;animation-duration:2.5s;animation-timing-function:ease-out}
.dsk .dsk__stm--b{animation-delay:-.85s}.dsk .dsk__stm--c{animation-delay:-1.7s}
@keyframes dsk-stm{0%{opacity:0;transform:translateY(24px) scaleY(.6)}30%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translateY(-60px) scaleY(1.1)}}
@media (prefers-reduced-motion:reduce){.dsk *{animation-delay:-8.5s!important;animation-play-state:paused!important}}
/* "In your inbox" scene: a white envelope on the 453px stage (scaled by script). One 8s loop:
   0.2-1.4s the new message flies in, settles with a little bounce and its badge pops
   2.2-2.9s the badge clears and the flap opens
   2.56-3.5s three designs rise out of it, starting as the flap passes halfway
   5.3-6s   they sink back in; the flap closes
   6.9-7.4s the envelope flies back out, and it all starts again.
   Only transforms animate. */
.inb .vfl__stage{z-index:2}
.inb *{animation-duration:8s;animation-iteration-count:infinite;animation-fill-mode:both}
.inb.is-paused *{animation-play-state:paused!important}
/* centred on the stage, so it zooms in from the middle of the gradient */
.inb__pos{position:absolute;left:140.6px;top:50%;margin-top:-50.35px;width:171.75px;height:100.7px;transform:scale(1.25);transform-origin:50% 50%;
      filter:drop-shadow(0 12px 28px rgba(20,60,130,.16)) drop-shadow(0 2px 6px rgba(20,60,130,.08))}
.inb__env{position:absolute;inset:0;animation-name:inb-env}
.inb__env>*{position:absolute;display:block}
/* the envelope, drawn from the layered art (171.74 x 100.7 body, 62.93 flap, 14px corners): every piece is solid */
.inb__back{inset:0;border-radius:14px;background:#EEF2F9}
/* the flap: closed it lies over the front, its top corners rounded with the body; open it stands up behind the
   designs, its base tucked 1px under the body so no hairline shows at the join */
.inb__flapo,.inb__flapc{left:0;width:100%;height:62.93px}
.inb__flapo{top:-62.93px;height:63.93px;transform-origin:50% 62.93px;background:#EEF2F9;
      clip-path:path("M1.81,63.93V62.93A14,14,0,0,1,5.44,58.71L77.54,2.84c4.91-3.79,11.76-3.79,16.66,0L166.3,58.71A14,14,0,0,1,169.93,62.93V63.93Z");animation-name:inb-fo}
/* while the flap is open the body's rounded top corners are filled, so its sides run up into the flap, meeting it
   in the same 14px round; it doesn't fold with the flap, so the corners stay clean as the flap rises */
.inb__flaps{left:0;top:0;width:100%;height:14px;background:#EEF2F9;animation-name:inb-fs;
      clip-path:path("M1.81,0H14V14H0V6.88A14,14,0,0,1,1.81,0ZM169.93,0H157.74V14H171.74V6.88A14,14,0,0,0,169.93,0Z")}
.inb__flapc{top:0;transform-origin:50% 0;animation-name:inb-fc;filter:drop-shadow(0 3px 6px rgba(20,60,130,.14))}
.inb__flapc::before{content:"";position:absolute;inset:0;background:#fff;
      clip-path:path("M157.74,0H14A14,14,0,0,0,4.64,3.59L77.54,60.09c4.91,3.79,11.76,3.79,16.66,0L167.1,3.59A14,14,0,0,0,157.74,0Z")}
/* the front: one solid white piece (bottom and both sides joined, so no seams to see through),
   cut to shape with a mask; its two lower folds are drawn as lines */
.inb__v{inset:0;filter:drop-shadow(0 -3px 7px rgba(20,60,130,.12));
      --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 171.74 100.7' preserveAspectRatio='none'%3E%3Cpath d='M0,0.06L73.95,43.39L77.54,40.61c4.91-3.79,11.76-3.79,16.66,0L97.79,43.39L171.74,0.06V100.7H0Z'/%3E%3C/svg%3E")}
.inb__v::before{content:"";position:absolute;inset:0;border-radius:14px;background:#fff;
      -webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat;
      --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 171.74 100.7' preserveAspectRatio='none'%3E%3Cpath d='M0,0.06L73.95,43.39L77.54,40.61c4.91-3.79,11.76-3.79,16.66,0L97.79,43.39L171.74,0.06V100.7H0Z'/%3E%3C/svg%3E")}
.inb__v::after{content:"";position:absolute;inset:0;border-radius:14px;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 171.74 100.7' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23143C82' stop-opacity='.09'/%3E%3Cstop offset='.55' stop-color='%23143C82' stop-opacity='.03'/%3E%3Cstop offset='1' stop-color='%23143C82' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0,100.7L73.95,43.39L77.54,40.61c4.91-3.79,11.76-3.79,16.66,0L97.79,43.39L171.74,100.7Z'/%3E%3Cpath fill='none' stroke='%23143C82' stroke-opacity='.07' stroke-width='1.2' vector-effect='non-scaling-stroke' d='M0,100.7L73.95,43.39M171.74,100.7L97.79,43.39'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* no outlines: like the monitor and template cards beside it, the pieces are plain white and read by their
   soft shadows and the pale inside of the pocket; the front's creases are shaded in (.inb__v::after) */
.inb__badge{right:-19.5px;top:-19.5px;width:39px;height:39px;border-radius:50%;background:#E5486E;color:#fff;
      display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--font-head);
      box-shadow:0 4px 8px rgba(229,72,110,.3);animation-name:inb-badge}
/* the designs wait inside, hidden behind the front, and rise out from their bottom edge */
/* three library covers (images/v2/landing), with a white edge: 80% of the envelope's width, they
   rise in a vertical stack, the back one highest, so the top of each shows */
.inb__doc{left:17.17px;top:17.4px;width:137.4px;height:77.29px;box-sizing:border-box;border:1.5px solid #fff;border-radius:6px;
      background:#D5D8E0 center/cover no-repeat;transform-origin:50% 100%;
      box-shadow:0 -3px 8px rgba(0,40,90,.14)}
.inb__doc--a{animation-name:inb-da;background-image:url("../../images/v2/landing/world-building-brands.webp")}
.inb__doc--b{animation-name:inb-db;background-image:url("../../images/v2/landing/durable-brand.webp")}
.inb__doc--c{animation-name:inb-dc;background-image:url("../../images/v2/landing/first-principles.webp")}
/* it zooms in from (and out to) its own centre. While the designs are out it drops 31.45px, so the
   whole open piece - from the flap's tip (-62.9) to the envelope's foot (100.7) - sits centred */
@keyframes inb-env{
  0%,2.5%{transform:translate(0,0) scale(0);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  10%{transform:translate(0,0) scale(1.06);animation-timing-function:ease-in-out}
  13%{transform:translate(0,0) scale(.97);animation-timing-function:ease-in-out}
  16%{transform:translate(0,0) scale(1.01);animation-timing-function:ease-in-out}
  18%,32%{transform:translate(0,0) scale(1);animation-timing-function:cubic-bezier(.45,0,.25,1)}
  44%,66%{transform:translate(0,31.45px) scale(1);animation-timing-function:cubic-bezier(.45,0,.25,1)}
  75%,86%{transform:translate(0,0) scale(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}
  93%,100%{transform:translate(0,0) scale(0)}}
@keyframes inb-badge{
  0%,12%{transform:scale(0);animation-timing-function:cubic-bezier(.2,.9,.3,1.5)}
  16%,25%{transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}
  28%,100%{transform:scale(0)}}
@keyframes inb-fc{
  0%,28%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  32%,79.5%{transform:scaleY(0);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  83%,100%{transform:scaleY(1)}}
@keyframes inb-fs{
  0%,31.9%{transform:scaleY(0)}
  32%,79.4%{transform:scaleY(1)}
  79.5%,100%{transform:scaleY(0)}}
@keyframes inb-fo{
  0%,32%{transform:scaleY(0);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  36%,76%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  79.5%,100%{transform:scaleY(0)}}
@keyframes inb-da{
  0%,32%{transform:translate(0,0) rotate(0deg);animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  41%,69%{transform:translate(0,-80px) rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.75,0)}
  75%,100%{transform:translate(0,0) rotate(0deg)}}
@keyframes inb-db{
  0%,33.5%{transform:translate(0,0);animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  42.5%,67.5%{transform:translate(0,-55px);animation-timing-function:cubic-bezier(.5,0,.75,0)}
  73.5%,100%{transform:translate(0,0)}}
@keyframes inb-dc{
  0%,35%{transform:translate(0,0) rotate(0deg);animation-timing-function:cubic-bezier(.2,.9,.3,1.25)}
  44%,66%{transform:translate(0,-30px) rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.75,0)}
  72%,100%{transform:translate(0,0) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.inb *{animation-delay:-4.4s!important;animation-play-state:paused!important}}
/* "No gatekeeping" scene: on the 453px stage (scaled by script). One 17.9s loop:
   0-2.6s    a cover-flow row of templates (PPT, XLS, Google Slides) steps along under its rolling format name, and settles on the deck
   2.6-3.8s  the pointer clicks the deck and, while it opens into its Download PPT card, heads straight for the button and clicks it
   3.8-5.2s  the card shrinks away as the download toast comes up and fills; the editor opens over the toast as it finishes
   5.3-11.9s one text edit (Brand > Moat), one colour (green > yellow), then on slide 2 a bar of the chart is dragged up
   12-13.1s  it zooms into Share, which is clicked
   13.1-17.9s a person celebrates under a burst of confetti, then it all fades and starts again */
.tpl .vfl__stage{z-index:2}
.tpl *{animation-duration:17.9s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.45,0,.25,1)}
.tpl.is-paused *{animation-play-state:paused!important}
@property --tplp{syntax:'<integer>';inherits:false;initial-value:0}
@property --tplv{syntax:'<integer>';inherits:false;initial-value:14}
.tpl__cam{position:absolute;inset:0;transform-origin:415.3px calc(50% - 104.6px);animation-name:tpl-cam}
/* everything is placed from the middle of the stage */
.tpl__o{position:absolute;left:226.5px;top:50%;width:0;height:0}
.tpl__o>div{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
/* the template row: each card is the same 398 x 294 frame as the deck's card below; the script places them
   from this loop's clock (front one largest, the ones out to the sides smaller and lightly washed out) */
.tpl__w{animation-name:tpl-wheel}
/* the format name over the row: rolls up with a blur as each card comes to the front (placed by the script),
   then sinks away blurred once the deck is clicked */
.tpl__lb{animation-name:tpl-lb}
/* set large and tucked behind the row, in a see-through black that fades out toward the cards so it stays quiet */
.tpl__lb span{position:absolute;left:0;top:-78px;transform:translate(-50%,-50%);white-space:nowrap;padding:0 .04em;
      font:800 58px/1.1 'Manrope',sans-serif;letter-spacing:-.03em;color:transparent;
      background:linear-gradient(180deg,rgba(18,18,18,.32),rgba(18,18,18,.04) 85%);-webkit-background-clip:text;background-clip:text}
.tpl__k{position:absolute;left:-199.085px;top:-146.855px;width:398.17px;height:293.71px;background:#fff;border-radius:20px;
      box-shadow:0 8px 16px rgba(20,40,90,.12);will-change:transform}
.tpl__k::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#F4F7FC;opacity:var(--d,0)}
.tpl__k>i{position:absolute;left:10px;top:10px;width:378.17px;height:212.71px;border-radius:10px;background:#E9EEF6 center/cover no-repeat}
.tpl__k>p{position:absolute;left:10px;top:227.71px;width:378.17px;height:56px;margin:0;box-sizing:border-box;padding:0 6px;display:flex;
      align-items:center;gap:12px;font:600 22px/1.2 'Inter',sans-serif;color:#121212;white-space:nowrap}
/* the format icons (PowerPoint, Excel, Google Slides) */
.tpl__f{flex:none;display:block;width:auto;height:30px}
/* the deck's card (Figma frame, 398 wide, shown at .8), grown from the ring's front card: the title slide (images/v2/landing), with the
   Download PPT button under it */
.tpl__c1{animation-name:tpl-card}
.tpl__c2{position:absolute;left:-159.27px;top:-117.48px;width:398.17px;height:293.71px;transform:scale(.8);transform-origin:0 0;
      filter:drop-shadow(0 8px 16px rgba(20,40,90,.12))}
.tpl__card{position:absolute;inset:0;background:#fff;border-radius:20px;transform-origin:50% 50%;animation-name:tpl-cardin}
.tpl__img{position:absolute;left:10px;top:10px;width:378.17px;height:212.71px;border-radius:10px;z-index:2;
      background:#1A4BE5 url("../../images/v2/landing/slide-1.jpg") center/cover}
.tpl__btn{position:absolute;left:10px;top:227.71px;width:378.17px;height:56px;box-sizing:border-box;padding:10px 20px;border-radius:14px;
      background:var(--blue,#006EDB);display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;font:600 22px/26px 'Inter',sans-serif;
      z-index:1;animation-name:tpl-btn}
.tpl__btn svg,.tpl__share svg{flex:none;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tpl__btn svg{width:30px;height:30px}
/* the download toast (Figma frame 435 x 100, at .55) */
.tpl__t1{animation-name:tpl-toast}
.tpl__t2{position:absolute;left:-119.63px;top:-27.5px;width:435px;height:100px;transform:scale(.55);transform-origin:0 0;box-sizing:border-box;
      padding:10px 14px 10px 10px;background:#fff;border-radius:20px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(20,40,90,.14)}
.tpl__tthumb{flex:none;width:91px;height:80px;border-radius:10px;background:url("../../images/v2/landing/slide-1.jpg") 40% 50%/cover}
.tpl__tcol{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px}
.tpl__trow{display:flex;justify-content:space-between;align-items:center;height:17px;font:500 24px/17px 'Inter',sans-serif;color:#2A2A2A}
.tpl__tlbl{position:relative}
.tpl__tlbl b{font-weight:500;animation-name:tpl-doing}
.tpl__tlbl b+b{position:absolute;left:0;top:0;animation-name:tpl-done}
.tpl__pct{counter-reset:tplp var(--tplp);animation-name:tpl-pct}
.tpl__pct::after{content:counter(tplp) "%"}
.tpl__track{position:relative;height:24px;border-radius:12px;background:#E5E7EB}
.tpl__track i{position:absolute;left:0;top:0;bottom:0;width:24px;border-radius:12px;background:var(--blue,#006EDB);animation-name:tpl-prog}
/* the editor, drawn at its artboard size (534 x 294) and shown at .8 */
.tpl__e1{animation-name:tpl-ed}
.tpl__e2{position:absolute;left:-213.64px;top:-117.42px;width:534.11px;height:293.56px;transform:scale(.8);transform-origin:0 0;
      border-radius:11.69px;box-shadow:0 10px 30px rgba(20,40,90,.14)}
.tpl__chrome{position:absolute;left:0;top:0;width:100%;height:100%}
.tpl__aline{animation-name:tpl-aline}
.tpl__share{position:absolute;left:481px;top:8.6px;width:44px;height:14.8px;border-radius:7.4px;background:#006EDB;color:#fff;
      display:flex;align-items:center;justify-content:center;gap:2.5px;font:600 6.6px/1 'Inter',sans-serif;animation-name:tpl-share}
.tpl__share svg{width:6.5px;height:6.5px;stroke-width:2.6}
.tpl__th{position:absolute;left:17.81px;width:61.16px;height:34.4px;border-radius:7.26px;overflow:hidden;background:#F1F3F8 center/cover no-repeat}
.tpl__th::after{content:"";position:absolute;inset:0;border-radius:inherit;border:.5px solid #E0E0E2}
.tpl__ring{position:absolute;left:16.61px;top:44.76px;width:63.56px;height:36.8px;box-sizing:border-box;border:1.2px solid #006EDB;
      border-radius:8.2px;animation-name:tpl-ring}
.tpl__main{position:absolute;left:103.47px;top:45.96px;width:406.04px;height:228.4px;border-radius:7.26px;overflow:hidden}
/* the slides, at their own 1280 x 720 */
.tpl__sl{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden}
.tpl__main .tpl__sl{transform:scale(.31722)}
.tpl__th .tpl__sl{transform:scale(.04778)}
.tpl__th .tpl__hl,.tpl__th .tpl__caret,.tpl__th .tpl__bsel{display:none}
.tpl__sla{background:url("../../images/v2/landing/slide-1.jpg") 0 0/100% 100%}
/* the title: "Brand" is selected, then retyped over a fill of the slide's own blue and grid */
.tpl__hl{position:absolute;left:722px;top:462px;width:330px;height:92px;background:rgba(140,190,255,.55);animation-name:tpl-hl}
.tpl__patch{position:absolute;left:700px;top:449px;width:368px;height:114px;background-color:#1A4BE5;
      background-image:linear-gradient(90deg,#1444D8 1.5px,transparent 1.5px),linear-gradient(#1444D8 1.5px,transparent 1.5px);
      background-size:29.7px 30px;background-position:13.3px 14.3px;animation-name:tpl-patch}
.tpl__word{position:absolute;left:728px;top:453px;font:600 107px/107px 'Montserrat',sans-serif;color:#48E6A8;white-space:nowrap;animation-name:tpl-col}
.tpl__word i{display:inline-block;vertical-align:top;font-style:normal;overflow:hidden;animation-name:tpl-ch}
.tpl__word i:nth-child(2){animation-delay:.12s}
.tpl__word i:nth-child(3){animation-delay:.24s}
.tpl__word i:nth-child(4){animation-delay:.36s}
.tpl__caret{display:inline-block;vertical-align:top;width:6px;height:94px;margin:8px 0 0 6px;background:#fff;animation-name:tpl-caret}
/* slide 2: a bar chart in the deck's cream style; its third bar is dragged up */
.tpl__slb{background-color:#FEF5E6;background-image:linear-gradient(90deg,#F4E9D6 2px,transparent 2px),linear-gradient(#F4E9D6 2px,transparent 2px);
      background-size:29.5px 29.5px;background-position:-1px -1px}
.tpl__main .tpl__slb{animation-name:tpl-slb}
.tpl__tag{position:absolute;left:90px;top:72px;display:flex;align-items:center;gap:22px;font:600 24px/1 'Montserrat',sans-serif;color:#1A4BE5;letter-spacing:.02em}
.tpl__tag b{padding:9px 20px;background:#1A4BE5;color:#fff;font-weight:600}
.tpl__h{position:absolute;left:90px;top:128px;font:600 60px/1.1 'Montserrat',sans-serif;color:#090F27;white-space:nowrap}
.tpl__bar{position:absolute;bottom:80px;width:150px;background:#1A4BE5}
.tpl__bar3{transform-origin:50% 100%;animation-name:tpl-bar}
.tpl__val{position:absolute;width:150px;text-align:center;font:600 40px/1 'Montserrat',sans-serif;color:#090F27}
.tpl__v3{counter-reset:tplv var(--tplv);animation-name:tpl-up,tpl-val}
.tpl__v3::after{content:counter(tplv)}
.tpl__base{position:absolute;left:150px;width:950px;top:640px;height:3px;background:#090F27}
.tpl__yr{position:absolute;top:662px;width:150px;text-align:center;font:500 28px/1 'Montserrat',sans-serif;color:#4A5068}
.tpl__bsel{position:absolute;inset:0;animation-name:tpl-bsel}
.tpl__bsel i{position:absolute;background:#3FDDB0}
.tpl__bsx{bottom:80px;width:3px;height:140px;transform-origin:50% 100%;animation-name:tpl-bar}
.tpl__bst{position:absolute;inset:0;animation-name:tpl-up}
.tpl__bsel .tpl__bh{width:16px;height:16px}
/* the text colour picker */
.tpl__pop{position:absolute;left:158px;top:25px;width:66px;height:17px;box-sizing:border-box;border-radius:5px;background:#fff;
      border:.5px solid #E5E7EB;box-shadow:0 3px 10px rgba(16,24,40,.16);transform-origin:12px 0;animation-name:tpl-pop}
.tpl__pop i{position:absolute;top:3.75px;width:9px;height:9px;border-radius:50%;box-sizing:border-box}
.tpl__pop .tpl__pick{left:16.6px;top:2.35px;width:11.8px;height:11.8px;background:none;border:1px solid #006EDB;animation-name:tpl-pick}
/* the pointer: its tip is at the element's origin */
.tpl__curi{position:absolute;left:-.8px;top:-.8px;width:18px;height:24px;transform-origin:.8px .8px;animation-name:tpl-press}
.tpl__curi svg{display:block;width:100%;height:100%;overflow:visible}
.tpl__cur{animation-name:tpl-cur}
.tpl__veil{position:absolute;inset:0;background:rgba(244,247,252,.85);animation-name:tpl-veil}
/* the celebration (Illustrations/Confetti celebration.svg, 290.67 x 306.94): the person bounces up in from the
   bottom right and stays cut off by the frame; the arms swing up from a little lower, each turning on its shoulder;
   the laughing mouth gives a softer bounce; the confetti bursts from behind them, spinning out to where it lands.
   It hangs off the bottom edge so the frame cuts the person off below the head and hands (about y 210 of 307) */
.tpl__cel{position:absolute;left:50%;bottom:-100px;width:300px;transform:translateX(-50%);animation-name:tpl-cel}
.tpl__cel svg{display:block;width:100%;height:auto;overflow:visible}
.tpl__pp{transform-origin:150px 300px;animation-name:tpl-pp}
/* the person's fills take the frame's pale blue, so it reads as the background masked in, not as white */
.tpl__pp [fill="#fff"]{fill:#EFF4FB}
.tpl__al{transform-origin:80px 168px;animation-name:tpl-al}
.tpl__ar{transform-origin:206px 194px;animation-name:tpl-ar}
.tpl__mo{transform-origin:148px 135px;animation-name:tpl-hd}
.tpl__cp{transform-box:fill-box;transform-origin:50% 50%;animation-name:tpl-cp}
@keyframes tpl-cam{
  0%,67.039%{transform:translate(0,0) scale(1);opacity:1;filter:blur(0)}
  71.509%,72.905%{transform:translate(-188.8px,104.6px) scale(2.4);opacity:1;filter:blur(0)}
  77.094%,89.943%{transform:translate(-188.8px,104.6px) scale(2.4);opacity:.45;filter:blur(6px)}
  95.53%,100%{transform:translate(-188.8px,104.6px) scale(2.4);opacity:0;filter:blur(6px)}}
@keyframes tpl-card{
  0%,16.313%{transform:translate(0,19.25px) scale(.6875);opacity:0}
  16.48%{transform:translate(0,19.25px) scale(.6875);opacity:1;animation-timing-function:cubic-bezier(.3,0,.3,1)}
  19.832%,21.006%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.5,0,.75,0)}
  22.905%,100%{transform:translate(0,0) scale(.6);opacity:0}}
@keyframes tpl-cardin{
  0%,18.436%{transform:scale(1)}
  19.832%,100%{transform:scale(1.03)}}
@keyframes tpl-wheel{
  0%{transform:scale(.9);opacity:0}
  3.352%,16.48%{transform:scale(1);opacity:1}
  18.436%,100%{transform:scale(1.06);opacity:0}}
@keyframes tpl-lb{
  0%{transform:translateY(0);opacity:0;filter:blur(0)}
  3.352%,15.922%{transform:translateY(0);opacity:1;filter:blur(0)}
  18.995%,100%{transform:translateY(18px);opacity:0;filter:blur(6px)}}
@keyframes tpl-btn{
  0%,19.553%{transform:translateY(0) scale(1);background-color:var(--blue,#006EDB)}
  19.888%,20.112%{transform:translateY(0) scale(1);background-color:var(--blue-dark,#005BB8)}
  20.447%{transform:translateY(0) scale(.96);background-color:var(--blue-dark,#005BB8)}
  21.006%,100%{transform:translateY(0) scale(1);background-color:var(--blue-dark,#005BB8)}}
@keyframes tpl-toast{
  0%,21.229%{transform:scale(.85);opacity:0}
  23.184%,26.816%{transform:scale(1);opacity:1}
  27.933%,100%{transform:scale(1.25);opacity:0}}
@keyframes tpl-prog{0%,22.067%{width:24px} 25.978%,100%{width:308px}}
@keyframes tpl-pct{0%,22.067%{--tplp:0} 25.978%,100%{--tplp:100}}
@keyframes tpl-doing{0%,26.034%{opacity:1} 26.369%,100%{opacity:0}}
@keyframes tpl-done{0%,26.034%{opacity:0} 26.369%,100%{opacity:1}}
@keyframes tpl-ed{
  0%,27.151%{transform:scale(.35);opacity:0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  29.609%,100%{transform:scale(1);opacity:1}}
@keyframes tpl-hl{0%,33.966%{opacity:0} 34.246%,35.921%{opacity:1} 36.089%,100%{opacity:0}}
@keyframes tpl-patch{0%,35.977%{opacity:0} 36.089%,100%{opacity:1}}
@keyframes tpl-ch{0%,36.313%{max-width:0} 36.368%,100%{max-width:1em}}
@keyframes tpl-caret{0%,36.089%{opacity:0} 36.144%,39.385%{opacity:1} 39.441%,40.503%{opacity:0} 40.559%,41.9%{opacity:1} 41.955%,100%{opacity:0}}
@keyframes tpl-col{0%,48.603%{color:#48E6A8} 49.441%,100%{color:#FFC233}}
@keyframes tpl-aline{0%,48.603%{fill:#DF3303} 49.441%,100%{fill:#FFC233}}
@keyframes tpl-pop{
  0%,44.58%{opacity:0;transform:translateY(-3px) scale(.92)}
  45.531%,49.051%{opacity:1;transform:translateY(0) scale(1)}
  50%,100%{opacity:0;transform:translateY(-3px) scale(.92)}}
@keyframes tpl-pick{0%,48.157%{opacity:0} 48.491%,100%{opacity:1}}
@keyframes tpl-ring{0%,53.91%{transform:translateY(0)} 55.029%,100%{transform:translateY(38.8px)}}
@keyframes tpl-slb{0%,54.19%{opacity:0} 55.307%,100%{opacity:1}}
@keyframes tpl-bsel{0%,59.497%{opacity:0} 59.776%,66.482%{opacity:1} 67.039%,100%{opacity:0}}
@keyframes tpl-bar{0%,60.335%{transform:scaleY(1)} 64.246%,100%{transform:scaleY(2.142857)}}
@keyframes tpl-up{0%,60.335%{transform:translateY(0)} 64.246%,100%{transform:translateY(-160px)}}
@keyframes tpl-val{0%,60.335%{--tplv:14} 64.246%,100%{--tplv:30}}
@keyframes tpl-share{
  0%,70.391%{transform:scale(1);background-color:#006EDB}
  70.949%,71.62%{transform:scale(1);background-color:#005BB8}
  72.068%{transform:scale(.92);background-color:#005BB8}
  72.737%,100%{transform:scale(1);background-color:#005BB8}}
@keyframes tpl-veil{0%,72.905%{opacity:0} 77.094%,89.943%{opacity:.5} 95.53%,100%{opacity:0}}
@keyframes tpl-cel{0%,73.185%{opacity:0} 73.408%,89.943%{opacity:1} 95.53%,100%{opacity:0}}
@keyframes tpl-pp{
  0%,73.185%{transform:translate(120px,170px) rotate(10deg);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  78.212%{transform:translate(-3px,-12px) rotate(-2deg);animation-timing-function:ease-in-out}
  80.448%{transform:translate(2px,5px) rotate(1deg);animation-timing-function:ease-in-out}
  82.124%{transform:translate(0,-3px) rotate(0deg);animation-timing-function:ease-in-out}
  83.24%,100%{transform:translate(0,0) rotate(0deg)}}
@keyframes tpl-al{
  0%,74.302%{transform:rotate(-26deg);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  79.329%{transform:rotate(8deg);animation-timing-function:ease-in-out}
  81.23%{transform:rotate(-3deg);animation-timing-function:ease-in-out}
  82.682%,100%{transform:rotate(0deg)}}
@keyframes tpl-ar{
  0%,74.302%{transform:rotate(26deg);animation-timing-function:cubic-bezier(.3,.7,.4,1)}
  79.329%{transform:rotate(-8deg);animation-timing-function:ease-in-out}
  81.23%{transform:rotate(3deg);animation-timing-function:ease-in-out}
  82.682%,100%{transform:rotate(0deg)}}
@keyframes tpl-hd{
  0%,76.536%{transform:scale(.88);animation-timing-function:ease-out}
  79.329%{transform:scale(1.07);animation-timing-function:ease-in-out}
  81.564%{transform:scale(.97);animation-timing-function:ease-in-out}
  83.24%{transform:scale(1.02);animation-timing-function:ease-in-out}
  84.358%,100%{transform:scale(1)}}
@keyframes tpl-cp{
  0%,74.302%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3);opacity:0;animation-timing-function:cubic-bezier(.15,.7,.3,1)}
  75.418%{opacity:1}
  79.888%{transform:translate(0,-8px) rotate(calc(var(--r) * -.06)) scale(1.12);opacity:1;animation-timing-function:ease-in-out}
  82.124%{transform:translate(0,3px) rotate(calc(var(--r) * .03)) scale(.95);animation-timing-function:ease-in-out}
  84.358%,100%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}}
@keyframes tpl-cur{
  0%,7.822%{transform:translate(250px,175px)}
  13.966%,16.48%{transform:translate(46px,18px)}
  19.553%,20.782%{transform:translate(10px,90px)}
  24.022%,29.609%{transform:translate(150px,64px)}
  32.682%,34.917%{transform:translate(85px,48px)}
  36.872%,40.503%{transform:translate(112px,74px)}
  43.574%,45.531%{transform:translate(-77px,-104px)}
  47.766%,50.28%{transform:translate(-69.2px,-90.6px)}
  53.073%,55.587%{transform:translate(-174.9px,-35.8px)}
  58.939%,60.335%{transform:translate(58.2px,46.3px)}
  64.246%,67.039%{transform:translate(58.2px,5.7px)}
  70.949%,100%{transform:translate(186px,-103px)}}
@keyframes tpl-press{
  0%,15.363%{transform:scale(1)} 15.922%{transform:scale(.8)} 16.48%,19.944%{transform:scale(1)} 20.335%{transform:scale(.8)} 20.782%,33.016%{transform:scale(1)}
  33.241%{transform:scale(.8)} 33.688%,33.855%{transform:scale(1)} 34.078%{transform:scale(.8)} 34.524%,43.911%{transform:scale(1)}
  44.134%{transform:scale(.8)} 44.58%,47.821%{transform:scale(1)} 48.044%{transform:scale(.8)} 48.491%,53.408%{transform:scale(1)}
  53.631%{transform:scale(.8)} 54.078%,59.273%{transform:scale(1)} 59.664%,64.525%{transform:scale(.85)} 64.917%,71.62%{transform:scale(1)}
  71.843%{transform:scale(.8)} 72.29%,100%{transform:scale(1)}}

/* ---------- Trusted by: three rows of names rolling ---------- */
.trusted{padding-top:var(--section-y)}
.trusted--hero{padding-bottom:var(--section-y)}
#templates.appfull + .trusted{padding-top:clamp(8px,1vw,16px)}
.logos--reel{display:block;max-width:1100px;margin:0 auto;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.reel{overflow:hidden;min-width:0}
.reel + .reel{margin-top:clamp(10px,1.1vw,16px)}
/* four copies of the set, the track moves by half its width so the loop has no seam */
.reel__track{display:flex;width:max-content;animation:reel-roll var(--d,76s) linear infinite}
.reel--0{--d:82s}
.reel--1{--d:68s}
.reel--2{--d:94s}
.reel--1 .reel__track{animation-direction:reverse}
.reel__set{display:flex;align-items:center;gap:clamp(30px,3.6vw,56px);padding-right:clamp(30px,3.6vw,56px)}
.logos--reel .reel__set span{white-space:nowrap;line-height:1.5}
.logos--reel:hover .reel__track{animation-play-state:paused}
@keyframes reel-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.reel__track{animation:none}}
.trusted .logos__more{margin:clamp(14px,1.6vw,22px) 0 0;
      font-family:var(--font-head);font-weight:600;font-size:clamp(14.5px,1.15vw,17.5px);color:#9BA1AB;line-height:1.5}

/* ---------- One subscription: the plan, beside its price on the flowers ---------- */
.eco{display:flex;justify-content:space-between;align-items:center;gap:48px;padding:64px;
      background:#fff;border:1px solid var(--border);border-radius:32px}
.eco__feat{display:flex;flex-direction:column;align-items:flex-start;gap:40px;min-width:0}
.eco__feat h2{margin:0;max-width:300px;font-weight:700;font-size:32px;line-height:36px;letter-spacing:-.01em;color:#000;
      text-box:trim-both cap alphabetic}
.eco__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.eco__list li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:24px;letter-spacing:-.0025em;color:var(--ink);white-space:nowrap}
.eco__list li b{font-weight:700}
.eco__list svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the panel is drawn at 1.25 and the button back at 1 (zoom .8), as the design scaled them */
.eco__price{position:relative;isolation:isolate;flex:0 1 430px;min-width:300px;max-width:100%;min-height:283px;
      display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:32px;border-radius:24px;zoom:1.25}
/* the photo grows a few px past the panel on hover */
.eco__price::before{content:"";position:absolute;inset:-6.4px;z-index:-1;pointer-events:none;border-radius:24px;
      background:radial-gradient(ellipse 64% 78% at 0% 42%,rgba(255,160,0,.72) 0%,rgba(255,160,0,.42) 45%,rgba(255,160,0,0) 100%),
            linear-gradient(rgba(9,34,96,.62),rgba(9,34,96,.62)),#2B4A8A var(--eco-photo) 55% 40%/cover no-repeat;
      clip-path:inset(6.4px round 24px);transition:clip-path .35s var(--ease)}
.eco__price:hover::before{clip-path:inset(0 round 24px)}
.eco__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:auto 0 0}
.eco__amount{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.eco__amount span{font-weight:700;font-size:14px;line-height:18px;letter-spacing:-.01em;text-transform:uppercase;color:rgba(255,255,255,.85);
      text-box:trim-both cap alphabetic}
.eco__amount b{font-family:var(--font-head);font-weight:700;font-size:60px;line-height:49px;letter-spacing:-.01em;color:#fff;white-space:nowrap;
      text-box:trim-both cap alphabetic}
.eco__amount small{font-size:18px;letter-spacing:0;margin-left:2px}
.eco__terms{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:12px;border-top:1px solid rgba(255,255,255,.5)}
.eco__terms span{font-weight:500;font-size:13px;line-height:24px;letter-spacing:-.0025em;color:#fff;white-space:nowrap}

/* See Pro has the bloom of every yellow button (bloom.css), drawn back at 1 inside the zoomed panel */
.eco .btn-pro{zoom:.8}

@media (max-width:1279px){.eco{gap:32px;padding:48px}}
@media (max-width:1100px){
  .eco{padding:40px}
  .eco__price{zoom:1.1;min-width:280px}
  .eco .btn-pro{zoom:.91}
}
@media (max-width:900px){
  .eco{gap:32px;padding:32px;border-radius:24px}
  .eco__price{zoom:1;min-width:270px}
  .eco .btn-pro{zoom:1}
  .eco__terms{flex-wrap:wrap;gap:4px 18px}
}
@media (max-width:760px){
  .eco{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .eco__feat{gap:28px}
  .eco__price{flex:none;min-width:0;min-height:0}
}
@media (max-width:600px){
  .eco{gap:28px;padding:24px 20px}
  .eco__feat{gap:24px}
  .eco__feat h2{font-size:28px;line-height:32px}
  .eco__list{gap:14px}
  .eco__list li{align-items:flex-start;line-height:22px;white-space:normal}
  .eco__list svg{margin-top:1px}
  .eco__price{padding:24px 20px}
  .eco__price::before{inset:-8px;clip-path:inset(8px round 24px)}
  .eco .btn-pro{align-self:center;padding-left:14px;padding-right:14px}
  .eco__terms{gap:4px 16px}
}

/* ---------- Three apps: white cards, Margin edged in blue, a plain blue link names the app ---------- */
.steps .step{background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.steps .step:hover{background:var(--bg-soft);box-shadow:inset 0 0 0 1px transparent;transform:none}
.steps .step--primary,.steps .step--primary:hover{box-shadow:inset 0 0 0 2px var(--blue)}
.steps .step:hover .mark--anim > g{animation:mark-part .68s cubic-bezier(.22,.86,.28,1) both;animation-delay:var(--d,0ms)}
.steps .step-head .mark,.steps .step-head .lot{width:29.4px;height:29.4px}
.steps .step-num{color:var(--ink)}
.steps .step-num .wm{--wm:20.475px}
.steps .step p{margin-bottom:29px}
.steps .step-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding-top:0;font-size:16px}
.step-arw{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Closing band: the meadow, a few px of it hiding until hover ---------- */
.cta.dark .cta-inner{--band-r:var(--r-lg);background:transparent;overflow:visible;padding-top:132px;padding-bottom:132px}
.cta.dark .cta-inner::before{inset:-8px;z-index:-1;transform:none;border-radius:var(--band-r);
      background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),#2F4A1C var(--cta-photo) 55% 30%/125% auto no-repeat;
      clip-path:inset(8px round var(--band-r));transition:clip-path .35s var(--ease)}
.cta.dark .cta-inner:hover::before{clip-path:inset(0 round var(--band-r))}
.cta.dark .capture{transition:background-color .2s var(--ease),box-shadow .2s var(--ease),transform .25s var(--ease)}
.cta.dark .capture:focus-within{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.cta.dark .capture:focus-within input{color:#fff;caret-color:#fff}
.cta.dark .capture:focus-within input::placeholder{color:rgba(255,255,255,.6)}
.cta.dark .capture:focus-within .btn-primary{background:#fff;border-color:#fff;color:var(--blue)}
@media (max-width:760px){.cta.dark .cta-inner{--band-r:var(--r);padding-top:84px;padding-bottom:84px}}

/* ---------- A word from the CEO ---------- */
.note-from{display:grid;grid-template-columns:232px 1fr;gap:38px;align-items:center;
      padding:38px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm),0 0 0 1px var(--border)}
.note-from__photo{display:block;width:100%;height:auto;aspect-ratio:539/629;object-fit:cover;border-radius:var(--r);background:#9DBBE4;
      transition:transform .35s var(--ease)}
.note-from__photo:hover{transform:scale(1.035)}
.note-from blockquote{margin:0;text-wrap:pretty;font-family:var(--font-head);font-weight:600;
      font-size:clamp(19px,2.1vw,23px);line-height:1.45;letter-spacing:-.015em;color:var(--ink)}
.note-from blockquote a{color:var(--blue);box-shadow:inset 0 -2px 0 rgba(0,110,219,.22);
      transition:color .18s var(--ease),box-shadow .18s var(--ease)}
.note-from blockquote a:hover{color:var(--blue-dark);box-shadow:inset 0 -2px 0 rgba(0,91,184,.55)}
.note-from .by{margin:20px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
      font-size:13.5px;color:var(--muted)}
.note-from .by b{font-size:15px;font-weight:700;color:var(--ink)}
@media (max-width:760px){
  .note-from{grid-template-columns:1fr;gap:26px;padding:26px}
  .note-from__photo{aspect-ratio:3/2;max-width:300px;margin:0 auto}
}

/* ============================================================
   PARALLAX FOOTER (ported from the dira1 concept)
   Scene canvas 1376 x 1554; every offset below is that canvas in %,
   so the whole thing scales with the page. Layer attributes read by
   the engine in javascripts/v2/index.js:
     data-pspeed   scroll travel in px, negative starts high and sinks
     data-pmouse   pointer-depth factor (0-1)
     data-pfade    "start,end" opacity window
     data-pscale   starting scale, eases to 1 across the fade
     data-pwindow  "start,end" confines travel to that part of the reveal
   Type and the signup form stay on the site's own scale, not dira1's.
   ============================================================ */
/* the sticky header would cut a frosted band across the middle of the
   scene, so it steps out of the way once the footer takes the screen */
header.nav{transition:background-color .35s var(--ease),box-shadow .35s var(--ease),
     backdrop-filter .35s var(--ease),transform .4s var(--ease)}
.fx-nav-away header.nav{transform:translateY(-101%)}
.fx-footer{position:relative;border-top:0;height:max(112.936vw,560px);
     background:linear-gradient(#fff 0%,#fff 70%,#191d0f 99%,#191d0f 100%);
     container-type:inline-size}
.fx-clip{position:absolute;inset:0;overflow:hidden}
/* the cloud stack is open at the top so clouds drift in front of the
   section above before sinking into the sky */
.fx-cloudclip{position:absolute;inset:0;overflow-x:clip;overflow-y:visible;pointer-events:none}
.fx-cloudclip .fx-layer{inset:0 0 30% 0}
.fx-contentclip{position:absolute;inset:0;z-index:10;overflow:hidden}
.fx-scene{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
     width:max(100%,496px);aspect-ratio:1376/1554;container-type:inline-size}
.fx-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.fx-layer img{position:absolute;height:auto}
/* safety fill, only ever seen for a frame mid-resize */
.fx-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,#f2f4fa 0%,#aebcdf 30%,#e8d9c8 47%,#fdb958 55%,#8fae62 63%,#2a3618 76%,#191d0f 100%)}
/* page white melting into the sky */
.fx-fade{position:absolute;left:0;right:0;top:0;height:23%;pointer-events:none;
     background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 14%,rgba(255,255,255,.82) 32%,
     rgba(255,255,255,.58) 52%,rgba(255,255,255,.32) 72%,rgba(255,255,255,.12) 88%,rgba(255,255,255,0) 100%)}

img.fx-sky {left:0;      top:.77%;   width:100%}
img.fx-h4  {left:0;      bottom:0;   width:100%}
img.fx-h3  {left:0;      bottom:0;   width:100%}
img.fx-logo{left:15.70%; top:47.17%; width:69.84%;
     filter:drop-shadow(0 0 20px rgba(255,255,255,.38)) drop-shadow(0 4px 34px rgba(255,255,255,.16))}
img.fx-h2  {left:0;      bottom:0;   width:100%}
img.fx-g1  {left:0;      bottom:0;   width:100%}
/* each cloud is cropped hard on its outer edge, so it sits ~3% further
   out than the artboard and the cut stays off-canvas at full drift */
img.fx-lc2 {left:-3.4%;  top:17.86%; width:44.26%}
img.fx-lc1 {left:-3.4%;  top:2.14%;  width:35.03%}
img.fx-rc3 {left:53.6%;  top:25.43%; width:49.71%}
img.fx-rc2 {left:64.2%;  top:32.57%; width:39.10%}
img.fx-rc1 {left:44.8%;  top:1.86%;  width:58.94%}

/* the tagline keeps this site's display face and heading scale */
.fx-talk{position:absolute;left:0;right:0;top:36.8%;text-align:center;
     font-family:var(--font-head);font-weight:800;line-height:1;letter-spacing:-.03em;
     font-size:clamp(28px,4.2cqw,64px);color:#fff;text-shadow:0 0 24px rgba(255,255,255,.35)}

@keyframes fxdriftA{from{transform:translateX(-2.1%)}to{transform:translateX(2.1%)}}
@keyframes fxdriftB{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
img.fx-lc1{animation:fxdriftA 46s -12s ease-in-out infinite alternate}
img.fx-lc2{animation:fxdriftB 58s -30s ease-in-out infinite alternate}
img.fx-rc1{animation:fxdriftA 40s  -6s ease-in-out infinite alternate}
img.fx-rc2{animation:fxdriftB 52s -22s ease-in-out infinite alternate}
img.fx-rc3{animation:fxdriftA 64s -40s ease-in-out infinite alternate}

/* ---- content over the scene: the site's own capture form, links, legal ---- */
.fx-content{position:absolute;inset:0;z-index:10;will-change:transform}
/* nowrap: a wrapping flex box measures max-content short and breaks the row */
.fx-join{position:absolute;left:50%;top:70.4%;transform:translateX(-50%);
     width:max-content;max-width:min(94%,900px);gap:14px;flex-wrap:nowrap}
/* a percentage width contributes its *intrinsic* size to the row's
   max-content, which measured the row short - so pin the basis */
.fx-content .capture{margin:0;flex:0 0 420px;width:420px;max-width:420px;
     box-shadow:0 10px 30px rgba(30,70,20,.25)}
/* on the grass, the divider has to be white to read at all */
.fx-join .or{color:#fff;text-shadow:0 1px 6px rgba(20,40,16,.55)}
.fx-join .btn-white{border:1px solid rgba(255,255,255,.55);min-height:55px;
     box-shadow:0 10px 30px rgba(30,70,20,.25)}
.fx-content .capture:focus-within{box-shadow:0 10px 30px rgba(30,70,20,.3),0 16px 36px -22px rgba(20,22,26,.36)}
@media (max-width:760px){.fx-join{flex-direction:column;flex-wrap:wrap;width:min(92%,420px);gap:10px}
  .fx-join .capture{flex:1 1 auto;width:100%;max-width:none}
  .fx-join .btn-white{width:100%;justify-content:center}}
.fx-links{position:absolute;left:3.6%;right:3.5%;top:86.1%;
     display:flex;justify-content:space-between;align-items:center;gap:24px}
.fx-links ul{list-style:none;display:flex;gap:clamp(20px,3.2cqw,52px);margin:0;padding:0}
.fx-links ul:last-child{gap:clamp(20px,3.6cqw,56px)}
.fx-links a{color:#fff;font-weight:600;font-size:14px;opacity:.95;transition:opacity .2s;
     text-shadow:0 1px 6px rgba(30,70,20,.25)}
.fx-links a:hover{opacity:.7}
.fx-links .soon{margin-left:6px;vertical-align:1px}
.fx-legal{position:absolute;left:0;right:0;top:95.05%;text-align:center;
     color:rgba(255,255,255,.92);font-size:13px;text-shadow:0 1px 6px rgba(30,70,20,.25)}
/* stacked, the form plus two rows of links need more room than the grass
   under the logo has, so the scene lifts onto a band of the grass's own
   dark and the content flows up from the bottom instead of sitting on
   percentages */
@media (max-width:760px){
  .fx-footer{--fx-band:160px;height:calc(max(112.936vw,560px) + var(--fx-band));
     background:linear-gradient(#fff 0%,#fff 50%,#191d0f calc(100% - var(--fx-band)),#191d0f 100%)}
  .fx-scene{bottom:var(--fx-band)}
  .fx-clip:first-child::after{content:"";position:absolute;left:0;right:0;bottom:var(--fx-band);height:72px;
     background:linear-gradient(rgba(25,29,15,0),#191d0f);pointer-events:none}
  .fx-content{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
     gap:22px;padding:0 16px 20px}
  .fx-join,.fx-links,.fx-legal{position:static;transform:none}
  .fx-links{width:100%;flex-direction:column;gap:12px;justify-content:flex-start}
  .fx-links ul{flex-wrap:wrap;justify-content:center;gap:14px 22px}
  .fx-legal{font-size:12px}
}