/* One app, one full-width section (landing/bodies/index and landing/bodies/templatesShowcase): the stacked logo, the heading,
   the showcase video with its player bar, the three feature cards and the three Templates scenes drawn under them
   (javascripts/landing/appfull.js). The Margin scenes stay in index.css, only the home page shows them */

/* 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");

/* An app's wordmark (common/includes/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/landing/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/landing/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}

/* 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/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/landing/world-building-brands.webp")}
.inb__doc--b{animation-name:inb-db;background-image:url("../../images/landing/durable-brand.webp")}
.inb__doc--c{animation-name:inb-dc;background-image:url("../../images/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/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/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/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/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)}}