/* lana.css (l34): Lana the character, everywhere. ONE drawing (sections/lanachar.html: the body lana-body.webp?v=45, drawn arms
   and legs, eyelids, a contact shadow, and her accessories hidden by default) instanced in a <span class="lp lp-POSE">.
   A pose is a class: it sets the angle --a of each arm or leg (about its shoulder or hip), shows an accessory, and in the
   motion block below adds one slow gesture. Ground = y 0 of the viewBox, i.e. 87.5% of the box height (.lp-on-top puts
   her feet on the top edge of the positioned parent). Also the footer scene (.lw, "Lana's world", js/lana.js).
   Linked from template.html, sections/blog-page.html and the guides pages (guides-site/guides). */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
/* l47: was --r, which collided with the site-wide radius token --r:14px (an <angle> property never inherits a length, so every
   .card on a page loading this sheet lost its rounded corners) */
@property --lr{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --y{syntax:"<length>";inherits:false;initial-value:0px}
@property --s{syntax:"<number>";inherits:false;initial-value:0}

.lc{display:block;width:100%;height:100%;overflow:visible}
.lc-lid{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 0}
.lc-acc{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}

.lp{position:absolute;z-index:2;display:block;width:var(--w,84px);aspect-ratio:160/150;pointer-events:none;user-select:none}
.lp-on-top{top:calc(var(--w,84px) * -.875 + 1px)}
.lp .lc-arm-l{transform:translate(-38px,-62px) rotate(var(--a,0deg)) translate(38px,62px)}
.lp .lc-arm-r{transform:translate(38px,-62px) rotate(var(--a,0deg)) translate(-38px,62px)}
.lp .lc-leg-l{transform:translate(-13px,-26px) rotate(var(--a,0deg)) translate(13px,26px)}
.lp .lc-leg-r{transform:translate(13px,-26px) rotate(var(--a,0deg)) translate(-13px,26px)}
.lp .lc-hold{transform:translate(54px,-35px) rotate(var(--a,0deg)) translate(-54px,35px)}
.lp .lc-fig{transform:translateY(var(--y,0px)) rotate(var(--lr,0deg))}
.lp .lc-lid{transform:scaleY(var(--s,0))}
.lp .lc-page{transform:scaleX(1)}
/* l39: the arms sit in front of the round body (the shoulder pivot stays 38,-62 in their own frame, js/main.js and
   js/lana.js rely on it); a raised right arm moves its shoulder to the rim so it does not lie across the body */
.lc .lc-sh-l{transform:translate(-2px,4px)}.lc .lc-sh-r{transform:translate(2px,4px)}
.lp-wave .lc-sh-r,.lp-tg .lc-sh-r,.lp-look .lc-sh-r{transform:translate(8px,2px)}

/* sitting (typing, reading): the legs out in front, the body down on the ground */
.lp-sit .lc-fig{--y:12px}
.lp-sit .lc-leg-l{--a:64deg}.lp-sit .lc-leg-r{--a:-64deg}
/* l52 perched on an edge (the "Get started" button): the seat on the edge, the thighs coming at us (two knees in front of
   the body), the shins hanging from the knees in front of whatever she sits on, a soft shadow
   of the thighs on its face; no ground, so no shadow and no breathing */
.lp-perch .lc-shadow{display:none}
.lp-perch .lc-acc-knees{opacity:1;visibility:visible}.lp-perch ellipse.lc-acc-knees{opacity:.6}
/* legs a deeper pink than the button with a crisp white rim (four unblurred shadows, in viewBox units: ~1 px on screen) */
.lp-perch .lc-leg path{stroke:#c92a66}.lp-perch .lc-leg ellipse:first-of-type,.lp-perch g.lc-acc-knees ellipse:nth-child(-n+2){fill:#d9336f}
.lp-perch .lc-leg,.lp-perch g.lc-acc-knees{filter:drop-shadow(2.2px 0 0 #fff) drop-shadow(-2.2px 0 0 #fff) drop-shadow(0 2.2px 0 #fff) drop-shadow(0 -2.2px 0 #fff)}
.lp-perch .lc-leg-l{transform:translate(-12px,-19px) rotate(9deg) translate(12px,39px)}.lp-perch .lc-leg-r{transform:translate(12px,-19px) rotate(-4deg) translate(-12px,39px)}
/* typing at her laptop, reading a book: both hands on it */
.lp-type .lc-arm-l,.lp-read .lc-arm-l{--a:-26deg}.lp-type .lc-arm-r,.lp-read .lc-arm-r{--a:26deg}
.lp-type .lc-acc-laptop,.lp-read .lc-acc-book{opacity:1;visibility:visible}
.lp-read .lc-lid{--s:.48}
/* waving */
.lp-wave .lc-arm-r{--a:-142deg}.lp-wave .lc-arm-l{--a:8deg}
/* pointing to her left, a spark at the fingertip */
.lp-point .lc-arm-l{--a:58deg}.lp-point .lc-fig{--lr:-3deg}
.lp-point .lc-acc-spark{opacity:1;visibility:visible}
/* holding up a price tag ($19, or a Stars tag), a bag of money, a Telegram plane: the accessory hangs straight */
.lp-tag .lc-arm-r,.lp-star .lc-arm-r{--a:-74deg}.lp-tag .lc-hold,.lp-star .lc-hold{--a:74deg}
.lp-tag .lc-acc-tag,.lp-star .lc-acc-star{opacity:1;visibility:visible}
.lp-bag .lc-arm-r{--a:-16deg}.lp-bag .lc-hold{--a:16deg}.lp-bag .lc-fig{--lr:2deg}
.lp-bag .lc-acc-bag{opacity:1;visibility:visible}
.lp-tg .lc-arm-r{--a:-122deg}.lp-tg .lc-hold{--a:122deg}
.lp-tg .lc-acc-tg{opacity:1;visibility:visible}
/* looking at the screen: a hand over her eyes, a little lean */
.lp-look .lc-arm-r{--a:-128deg}.lp-look .lc-fig{--lr:-4deg}.lp-look .lc-lid{--s:.28}

/* where she stands */
.fx-panel .fx-lana{--w:92px;left:30%}
.prc-card{position:relative}
.prc-lana{--w:118px;top:16px;right:34px}
.faq{position:relative}
.faq-lana{--w:104px;right:-8px}
.cta-box{position:relative}
.cta-lana{--w:116px;left:40px;bottom:14px}
.pay-card:first-child{position:relative}
.pay-lana{--w:86px;top:12px;right:24px}
/* l52: on the right end of "Get started" (placed from the button's right edge, never from the text): the edge at y -20 of the
   viewBox (the bottom of her round body), i.e. 80% of the box height, sunk 3.5 px so the seat is ON the edge; a white rim keeps her readable on the white hover */
.go-lana{--w:74px;right:-2px;top:calc(var(--w) * -.75 + 4.5px);z-index:3;filter:drop-shadow(0 0 .8px #fff) drop-shadow(0 0 .8px #fff) drop-shadow(0 0 .5px #fff) drop-shadow(0 2px 2px rgba(80,0,30,.35))}
@media (min-width:961px){.fx-panel{top:150px}}
@media (max-width:960px){.fx-panel{position:relative;top:0;margin-top:50px}.fx-panel .fx-lana{--w:74px;left:26%}}
@media (max-width:760px){
  .prc-lana{--w:84px;top:10px;right:18px}
  .faq{margin-top:72px}.faq-lana{--w:80px;right:0}
  .cta-lana{--w:62px;left:12px;bottom:8px}
  .pay-lana{--w:70px;top:8px;right:14px}
  .go-lana{--w:54px;right:auto;left:calc(50% + 50px - var(--w) / 2)}
}

/* the footer scene: Lana at her laptop, words and Telegram planes flying from her to a constellation of phones and computers,
   money coming back into her gold bag (l43) */
.lw{position:relative;height:300px;margin-top:48px;overflow:hidden;pointer-events:none;user-select:none;
  background:radial-gradient(34% 64% at 50% 92%,rgba(242,72,134,.10),transparent 72%)}
.lw-links{position:absolute;inset:0;width:100%;height:100%}
.lw-links path{fill:none;stroke:rgba(242,72,134,.2);stroke-width:1;stroke-dasharray:2 5;stroke-linecap:round}
.lw .lw-lana{--w:132px;left:50%;bottom:6px;margin-left:calc(var(--w) * -.5);z-index:3}
.lw-scr{position:absolute;left:var(--lx);top:var(--ly);z-index:1;display:grid;align-content:start;gap:3px;width:calc(58px * var(--k,1));aspect-ratio:16/10.5;padding:6px 6px 0;
  transform:translate(-50%,-50%);border:1.5px solid #d9d9e2;border-radius:6px;background:#fff;box-shadow:0 10px 22px -16px rgba(17,17,17,.35)}
.lw-scr::after{content:"";position:absolute;left:50%;top:100%;width:34%;height:7px;transform:translateX(-50%);border-radius:0 0 3px 3px;background:linear-gradient(#d9d9e2 0 3px,transparent 3px),linear-gradient(90deg,transparent 40%,#d9d9e2 40% 60%,transparent 60%)}
.lw-scr.lw-ph{width:calc(30px * var(--k,1));aspect-ratio:10/18;border-radius:7px;padding:7px 4px 0}
.lw-scr.lw-ph::after{display:none}
.lw-scr i{display:block;height:4px;width:60%;border-radius:3px;background:#ececf1}
.lw-scr i:nth-child(2){width:44%;margin-left:auto;background:rgba(242,72,134,.32)}
.lw-scr i:nth-child(3){width:70%}
.lw-scr.lw-far{opacity:.55;z-index:0}
.lw-scr.hit{border-color:rgba(242,72,134,.6);box-shadow:0 0 0 3px rgba(242,72,134,.10),0 10px 22px -16px rgba(17,17,17,.35)}
.lw-scr.hit i:nth-child(2){background:#f24886}
.lw-tok{position:absolute;left:0;top:0;z-index:2;padding:3px 8px;border:1px solid rgba(242,72,134,.25);border-radius:999px;background:#fff;color:#c92a68;
  font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;box-shadow:0 4px 10px -6px rgba(242,72,134,.5)}
.lw-tok.lw-buy{border-color:transparent;background:#f24886;color:#fff}
.lw-pl{position:absolute;left:0;top:0;z-index:2;width:20px;height:20px}
.lw-still{transform:translate(-50%,-50%)}
/* l43: laptops (the base is drawn under the screen), iPhones get their island; the money: "+$12" pops over a screen that
   pays, bills and coins fly into her gold bag (js/lana.js), the screen flashes green */
.lw-scr.lw-lap{width:calc(54px * var(--k,1));border-radius:5px 5px 2px 2px;padding:5px 5px 0}
.lw-scr.lw-lap::after{top:calc(100% + 1px);width:128%;height:4px;border-radius:1px 1px 4px 4px;background:#d9d9e2}
.lw-scr.lw-ph::before{content:"";position:absolute;left:50%;top:3px;width:34%;height:3px;border-radius:2px;background:#d9d9e2;transform:translateX(-50%)}
.lw-scr.lw-ph{padding-top:9px}
.lw-scr.paid{border-color:rgba(15,174,116,.65);box-shadow:0 0 0 3px rgba(15,174,116,.12),0 10px 22px -16px rgba(17,17,17,.35)}
.lw-scr.paid i:nth-child(2){background:#0fae74}
.lw-bag{position:absolute;left:calc(50% + 58px);bottom:4px;z-index:4;width:46px;height:46px;transform-origin:50% 100%;filter:drop-shadow(0 6px 8px rgba(160,100,10,.28))}
.lw-bill,.lw-coin{position:absolute;left:0;top:0;z-index:5;width:26px;height:14px;translate:-50% -50%}
.lw-coin{width:15px;height:15px}
.lw-pop{position:absolute;left:0;top:0;z-index:5;translate:-50% -100%;padding:2px 7px;border-radius:999px;background:#0fae74;color:#fff;font-size:11px;font-weight:700;line-height:1.35;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(12,100,70,.7)}
.lw-bill.lw-still,.lw-coin.lw-still,.lw-pop.lw-still{translate:none}
/* l45w: Stars and voice notes in the pills, the money stacks around her and the running total (all built by js/lana.js) */
.lw-st{display:inline-block;width:1em;height:1em;margin-left:2px;vertical-align:-.14em}
.lw-tok.lw-voice{display:inline-flex;align-items:center;gap:4px}
.lw-vn{width:24px;height:10px;flex:none}
.lw-pop.lw-pop-s{background:#fff7dc;color:#8f5a05;box-shadow:0 0 0 1px rgba(201,138,18,.35),0 6px 14px -8px rgba(160,100,10,.6)}
.lw-pc{position:absolute;left:calc(50% + var(--px) * var(--ps,1));bottom:calc(var(--py) * var(--ps,1));z-index:4;width:26px;height:14px;margin-left:-13px;opacity:0;
  filter:drop-shadow(0 2px 2px rgba(160,100,10,.18))}
.lw-pc.lw-pc-c{width:15px;height:15px;margin-left:-7.5px}
.lw-pc.in{opacity:1}
.lw-sum{position:absolute;left:calc(50% + 81px * var(--ps,1));bottom:58px;z-index:5;transform:translate(-50%,0);padding:1px 7px;border-radius:999px;
  background:#fff;color:#8f5a05;font-size:10.5px;font-weight:700;line-height:1.4;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1px rgba(201,138,18,.3),0 6px 14px -9px rgba(160,100,10,.6)}
@media (max-width:760px){
  .lw{height:236px;margin-top:36px}
  .lw .lw-lana{--w:104px}
  .lw-scr{width:calc(46px * var(--k,1))}.lw-scr.lw-ph{width:calc(24px * var(--k,1))}
  .lw-scr.lw-wide{display:none}
  .lw-tok{font-size:10px;padding:2px 7px}
  .lw-scr.lw-lap{width:calc(44px * var(--k,1))}
  .lw-bag{left:calc(50% + 44px);width:38px;height:38px}
  .lw-pop{font-size:10px;padding:1px 6px}
  .lw{--ps:.8}
  .lw-pc.lw-wide{display:none}
  .lw-sum{bottom:48px;font-size:10px}
}
.foot{padding-bottom:0;overflow:hidden}

/* motion (nothing below runs for a visitor who asked for less motion: she stays in her pose, the scene stays still) */
@media (prefers-reduced-motion:no-preference){
  .lp .lc-lid{animation:lp-blink 4.8s ease-in-out var(--bd,1.2s) infinite}
  .lp-read .lc-lid{animation-name:lp-blink-half}
  .lp-look .lc-lid{animation-name:lp-blink-squint}
  .lp .lc-air{animation:lp-breathe 1.7s ease-in-out infinite alternate}
  .lp-type .lc-arm-l{animation:lp-type-l 3.6s ease-in-out infinite}
  .lp-type .lc-arm-r{animation:lp-type-r 3.6s ease-in-out .12s infinite}
  .lw-lana.lp-type .lc-arm-l{animation-duration:1.1s}.lw-lana.lp-type .lc-arm-r{animation-duration:1.1s}
  .lp-read .lc-page{animation:lp-page 7s ease-in-out 1s infinite}
  .lp-wave .lc-arm-r{animation:lp-wave 5.6s ease-in-out .6s infinite}
  .lp-point .lc-arm-l{animation:lp-point 3.2s ease-in-out infinite}
  .lp-point .lc-spark{transform-box:fill-box;transform-origin:50% 50%;animation:lp-spark 3.2s ease-in-out infinite}
  .lp-tag .lc-hold,.lp-star .lc-hold{animation:lp-swing-tag 3.4s ease-in-out infinite alternate}
  .lp-bag .lc-hold{animation:lp-swing-bag 2.8s ease-in-out infinite alternate}
  .lp-tg .lc-arm-r{animation:lp-tg 3s ease-in-out infinite alternate}
  .lp-look .lc-fig{animation:lp-look 6.4s ease-in-out infinite}
  /* l52: a wave with no pause, ±18deg around the raised arm, 1.1 s there and back; the body stays still */
  .lp-wave-loop .lc-arm-r{animation:lp-wave-loop .55s ease-in-out infinite alternate}
  .lp-perch .lc-air{animation:none}
  /* a pose change (the feature tabs): no loop while the arms glide to the new pose */
  .lp .lc-sh{transition:transform .45s ease}
  .lp .lc-arm,.lp .lc-leg,.lp .lc-hold,.lp .lc-fig{transition:--a .55s cubic-bezier(.3,1.25,.5,1),--lr .55s ease,--y .4s ease}
  .lp.lp-swap .lc-arm,.lp.lp-swap .lc-hold,.lp.lp-swap .lc-fig,.lp.lp-swap .lc-page{animation:none}
  .lp.lp-swap .lc-air{animation:lp-hop .5s cubic-bezier(.3,0,.3,1)}
  .lw-still{display:none}
  .lw-scr{transition:border-color .5s ease,box-shadow .5s ease}
  .lw-scr i{transition:background-color .5s ease}
  /* l43: one screen in three floats (the scene stays under ~40 moving pieces) */
  .lw-scr:nth-child(3n+1):not(.lw-far){animation:lw-float 6s ease-in-out infinite alternate}
  .lw-scr:nth-child(6n+4):not(.lw-far){animation-duration:7.4s;animation-delay:-2s;animation-direction:alternate-reverse}
  /* off screen (js/lana.js): !important because every pose sets its loop with the animation shorthand, which resets the play state */
  .lw-off .lp *,.lw-off .lw-scr,.lp-off *{animation-play-state:paused!important}
}
@keyframes lp-blink{0%,90%,100%{--s:0}93%{--s:1}96%{--s:0}}
@keyframes lp-blink-half{0%,90%,100%{--s:.48}93%{--s:1}96%{--s:.48}}
@keyframes lp-blink-squint{0%,90%,100%{--s:.28}93%{--s:1}96%{--s:.28}}
@keyframes lp-breathe{to{transform:translateY(-1.6px)}}
@keyframes lp-type-l{0%,52%,100%{--a:-26deg}6%,18%,30%,42%{--a:-33deg}12%,24%,36%,48%{--a:-25deg}}
@keyframes lp-type-r{0%,52%,100%{--a:26deg}6%,18%,30%,42%{--a:33deg}12%,24%,36%,48%{--a:25deg}}
@keyframes lp-page{0%,70%{transform:scaleX(1)}86%,100%{transform:scaleX(-1)}}
@keyframes lp-wave{0%,52%,100%{--a:-14deg}10%{--a:-148deg}16%,28%{--a:-120deg}22%,34%{--a:-150deg}42%{--a:-142deg}}
@keyframes lp-point{0%,55%,100%{--a:58deg}68%{--a:52deg}80%{--a:60deg}}
@keyframes lp-spark{0%,55%,100%{transform:scale(.6);opacity:.5}70%{transform:scale(1.15) rotate(45deg);opacity:1}}
@keyframes lp-swing-tag{from{--a:68deg}to{--a:82deg}}
@keyframes lp-swing-bag{from{--a:10deg}to{--a:22deg}}
@keyframes lp-tg{from{--a:-118deg}to{--a:-130deg}}
@keyframes lp-wave-loop{from{--a:-124deg}to{--a:-160deg}}
@keyframes lp-look{0%,100%{--lr:-5deg}45%,55%{--lr:4deg}}
@keyframes lp-hop{40%{transform:translateY(-6px)}}
@keyframes lw-float{to{translate:0 -5px}}