/* Home page (landing/bodies/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, the app sections and the Templates scenes in appfull.css, this
   file only adds what the home page does differently */


/* 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}

/* 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}

/* 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/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/landing/hta-own.png")}
.hta__av--team{--img:url("../../images/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}}

/* ---------- 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)}
/* the band grows tall once the sign-up row stacks: the photo at 125% wide no longer reaches its top and bottom
   (a strip of meadow between two bands of its green backdrop on a phone), so from tablets down it covers the band */
@media (max-width:1024px){.cta.dark .cta-inner::before{background-size:cover}}
@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/landing/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}
}