/* ============================================================
   Rive - cloud POS marketing site
   Rebuilt 1:1 from the Figma "Site" home frame (3976-17003).
   Fonts: Manrope (UI), Lora (pricing-page serif title only).
   ============================================================ */

:root{
  --sans:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;

  --bg:#fbf9f7;
  --surface:#ffffff;
  --surface-warm:#fffdfc;
  --ink:#1c1c1c;
  --body:#2d3744;          /* Figma "Ebony Clay" */
  --list:#2f3947;          /* Figma "Oxford Blue" */
  --muted:#6f7076;
  --eyebrow:#4d5965;
  --line:#ece7e0;

  --coral:#EF774F;
  --coral-dark:#e05e35;
  --blue:#2f6bff;
  --blue-soft:#e9f1ff;
  --blue-border:#a9c6ff;
  --green:#1fab5a;

  --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --shadow-btn:0 8px 30px rgba(0,0,0,.18);
  --shadow-card:0 20px 24px rgba(26,33,45,.06);
}

/* ================================================================
   Current Figma marketing home (Site 5624:31880)
   ================================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.home-figma-page{
  --main-orange:#ff6a32;
  --main-orange-dark:#ef5520;
  --main-peach:#fff0ea;
  --main-pink:#fff7f5;
  --main-black:#141414;
  --main-muted:#676767;
  background:#fff;
  color:var(--main-black);
}
.home-figma-page main{overflow-x:clip;overflow-y:visible;}
.main-shell{width:min(1482px,calc(100% - 64px));margin-inline:auto;}
.main-section{padding:76px 0;}
.main-center-title{
  margin:0 auto 52px;text-align:center;font-size:clamp(28px,2.3vw,45px);
  line-height:1.1;letter-spacing:-.04em;font-weight:600;
}
.main-wide-art{
  display:block;width:100%;height:auto;border-radius:30px;
}

/* home navigation */
/* Revolut-style header (owner, 2026-10-01): always visible, full-width bar with no background at
   the top of the page; once the page scrolls (.scrolled) a toned blur fades in behind it — their
   exact recipe, rgba(255,255,255,.7) + blur(110px), or rgba(0,0,0,.7) over dark sections
   (.is-dark, homepage video). Content stays centred at --nav-content. */
.main-nav{
  --nav-content:1610px;
  position:sticky;top:0;z-index:80;isolation:isolate;display:flex;align-items:center;
  width:100%;height:84px;margin:0;padding-inline:max(32px,calc((100% - var(--nav-content)) / 2));
  background:transparent;color:#141414;transition:color 250ms var(--ease-in-out);
}
.main-nav::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(110px);backdrop-filter:blur(110px);
  opacity:0;transition:opacity 250ms var(--ease-in-out),background-color 250ms var(--ease-in-out);
}
.main-nav.scrolled::before{opacity:1;}
.main-nav.is-dark{color:#fff;}
.main-nav.is-dark::before{background:rgba(0,0,0,.7);}
.main-nav.is-dark .main-brand img{filter:brightness(0) invert(1);}
.main-nav.is-dark .main-language{background:rgba(255,255,255,.16);color:#fff;}
.main-nav.is-dark .main-language:hover{background:rgba(255,255,255,.24);}
.main-nav.is-dark .main-login{border-color:rgba(255,255,255,.7);}
.main-nav.is-dark .main-menu-toggle{background:rgba(255,255,255,.16);color:#fff;}
/* Logo ~7% smaller than the original 52x37 mark / 29px wordmark (owner, 2026-10-02) */
.main-brand{display:flex;align-items:center;gap:7px;font-size:27px;font-weight:700;letter-spacing:-.05em;}
.main-brand img{width:48px;height:34.5px;object-fit:contain;}
.main-brand span{width:74px;overflow:hidden;}
/* Links get Revolut's hover: a soft pill fades in behind the label (8px x 20px padding, round,
   300ms cubic-bezier(.15,.5,.5,1); rgba(31,31,31,.15) on light, rgba(255,255,255,.15) on dark).
   The padding replaces the old 40px gap so the labels keep their spacing. */
.main-links{display:flex;align-items:center;gap:0;margin-left:40px;}
.main-links>a,.biz-trigger{padding:8px 20px;border-radius:50px;font-size:16px;font-weight:500;
  transition:background-color 300ms cubic-bezier(.15,.5,.5,1),color 300ms cubic-bezier(.15,.5,.5,1);}
.main-links>a:hover,.biz-trigger:hover,.biz-menu.is-open .biz-trigger{background-color:rgba(31,31,31,.15);}
.main-nav.is-dark .main-links>a:hover,.main-nav.is-dark .biz-trigger:hover,.main-nav.is-dark .biz-menu.is-open .biz-trigger{background-color:rgba(255,255,255,.15);}
.main-nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;}
/* Language switcher: flag pill + menu (EN / RU / HY). Flags: HatScripts circle-flags, MIT. */
.lang-menu{position:relative;display:flex;align-items:center;}
.main-language{
  display:inline-flex;align-items:center;gap:9px;height:45px;padding:0 13px 0 9px;border:0;border-radius:16px;
  background:#ededed;color:#1f1f1f;font:500 15px/1 var(--sans);cursor:pointer;transition:background-color 150ms ease;
}
.main-language:hover{background:#e3e3e3;}
.main-language:focus-visible{outline:2px solid #111;outline-offset:3px;}
.lang-flag{flex:none;width:26px;height:26px;border-radius:50%;}
.lang-chevron{flex:none;width:12px;height:12px;margin-left:5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dropdown-open-dur) var(--dropdown-ease);}
.lang-menu.is-open .lang-chevron{transform:rotate(180deg);}
.lang-list{
  position:absolute;z-index:6;top:calc(100% + 10px);right:0;min-width:210px;margin:0;padding:6px;list-style:none;
  border:1px solid rgba(20,20,20,.08);border-radius:20px;background:#fff;
  box-shadow:0 24px 60px rgba(20,20,20,.13),0 4px 14px rgba(20,20,20,.05);
}
.lang-list.t-dropdown:not(.is-open):not(.is-closing){visibility:hidden;}
.lang-list button{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:14px;background:none;
  color:#141414;font:500 15px/1.2 var(--sans);text-align:left;cursor:pointer;transition:background-color 150ms ease;
}
.lang-list button:hover,.lang-list button:focus-visible{background:#f4f4f4;outline:none;}
.lang-list button[aria-checked="true"]{font-weight:600;}
.lang-list button[aria-checked="true"]::after{content:"";width:9px;height:5px;margin-left:auto;border:solid #111;border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg);}
.lang-list img{flex:none;width:24px;height:24px;border-radius:50%;}
.main-links>a,.biz-trigger{white-space:nowrap;}
@media(max-width:1360px){
  .main-language{padding:0 11px 0 9px;}
  .main-language .lang-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .main-links{margin-left:29px;}
  .main-links>a,.biz-trigger{padding-inline:15px;}
}
.main-login{
  display:grid;place-items:center;height:45px;min-width:100px;padding:0 24px;
  border:1px solid #111;border-radius:999px;font-weight:600;font-size:15px;
}
.main-language,.main-login{transition:background-color 300ms cubic-bezier(.15,.5,.5,1),border-color 300ms cubic-bezier(.15,.5,.5,1),color 300ms cubic-bezier(.15,.5,.5,1);}
/* Log in: the outline pill fills with the header's text colour on hover */
.main-login:hover{background-color:#141414;border-color:#141414;color:#fff;}
.main-nav.is-dark .main-login:hover{background-color:#fff;border-color:#fff;color:#141414;}
.main-login:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
.nav-cta-label{white-space:nowrap;}
.main-nav .orange-glow-small{width:168px;min-width:168px;height:45px;min-height:45px;padding:0 18px;border:0;background:#ff5e0c;box-shadow:inset 0 2px 6px #ffc886;font-size:14px;}
.main-nav .orange-glow-small{gap:8px;}
.main-menu-toggle{
  display:none;width:42px;height:42px;border:0;border-radius:50%;background:#f2f2f2;
  padding:10px;cursor:pointer;
}
.main-menu-toggle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;}

/* Business Types menu: hover/focus/click dropdown built on the .t-dropdown motion
   tokens. Tiles reuse the Terminal's menu-group palette. */
.biz-menu{position:relative;display:flex;align-items:center;}
.biz-trigger{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:inherit;font-family:inherit;line-height:1;cursor:pointer;}
.biz-trigger svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dropdown-open-dur) var(--dropdown-ease);}
.biz-menu.is-open .biz-trigger{opacity:1;}
.biz-menu.is-open .biz-trigger svg{transform:rotate(180deg);}
.biz-trigger:focus-visible{outline:2px solid #ff5e0c;outline-offset:2px;}
/* Desktop nav panels (owner, 2026-09-30): compact white cards with Lucide line icons (ISC,
   assets/site/icons/nav-icons.svg). Business types is a short list; Product groups every Rive
   product by audience. site.js clamps --biz-left so a panel never leaves the header. */
.biz-panel{
  position:absolute;z-index:5;top:calc(100% + 16px);left:var(--biz-left,-30px);width:300px;padding:18px 10px 10px;
  border:1px solid rgba(20,20,20,.08);border-radius:26px;background:#fff;color:#141414;
  box-shadow:0 30px 70px rgba(20,20,20,.13),0 4px 14px rgba(20,20,20,.05);
}
.biz-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;}
.biz-panel.t-dropdown:not(.is-open):not(.is-closing){visibility:hidden;}
.nav-panel-title{margin:0 12px 8px;color:#8b8b8b;font-size:12px;line-height:1.2;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.nav-list{display:grid;gap:2px;}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:#141414;font-size:15.5px;line-height:1.25;font-weight:500;transition:background-color 150ms ease;}
.nav-link:hover,.nav-link[aria-current="page"]{background:#f5f4f2;}
.nav-ico{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.product-col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.product-item{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:12px;padding:12px;border-radius:16px;color:#141414;transition:background-color 150ms ease;}
.product-item:hover,.product-item[aria-current="page"]{background:#f5f4f2;}
.product-item .nav-ico{margin-top:-1px;}
.product-copy{display:grid;gap:4px;min-width:0;}
.product-copy strong{display:flex;align-items:center;gap:7px;font-size:15.5px;line-height:1.25;font-weight:600;letter-spacing:-.01em;}
.product-copy small{color:#7a7a7a;font-size:13px;line-height:1.4;font-weight:500;}
.nav-soon{padding:3px 7px;border-radius:999px;background:#fff0e6;color:#c9510c;font-size:11px;line-height:1;font-weight:600;letter-spacing:0;}
.biz-panel a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #ffb58f;}
/* Revolut-style skin (owner, 2026-09-30): dark gradient panel spanning the header, big "Discover"
   title, grouped columns. site.js sets --biz-left/--biz-width from the header for .nav-mega. */
/* Glass (owner, 2026-10-01): Revolut's navigation menu recipe, rgba(0,0,0,.5) + blur(85px) and a
   24px radius, so the page shows through toned. Over white pages the tone deepens to .72 so the
   white text keeps its contrast. */
.nav-mega{
  width:var(--biz-width,1000px);padding:34px 32px 34px;border-color:rgba(255,255,255,.08);border-radius:24px;color:#fff;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(85px);backdrop-filter:blur(85px);
  box-shadow:0 30px 80px rgba(10,10,12,.18);
}
.main-nav.is-dark .nav-mega{background:rgba(0,0,0,.5);}
.mega-title{display:inline-flex;align-items:center;gap:14px;margin-left:12px;color:#fff;font:600 28px/1.1 var(--sans);letter-spacing:-.02em;}
.mega-title svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out);}
.mega-title:hover svg{transform:translateX(4px);}
.mega-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:34px;}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0;}
.nav-mega .nav-panel-title{margin:0 12px 10px;color:rgba(255,255,255,.5);font-size:18px;font-weight:500;letter-spacing:0;text-transform:none;}
.nav-mega .nav-link,.nav-mega .product-item{color:#fff;}
.nav-mega .nav-link{font-size:16.5px;}
.nav-mega .nav-link:hover,.nav-mega .nav-link[aria-current="page"],
.nav-mega .product-item:hover,.nav-mega .product-item[aria-current="page"]{background:rgba(255,255,255,.08);}
.nav-mega .product-copy small{color:rgba(255,255,255,.58);}
.nav-mega .nav-soon{background:rgba(255,94,12,.2);color:#ffb58f;}
.nav-mega a:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);}
.mega-title:focus-visible{border-radius:8px;}
@media (prefers-reduced-motion:reduce){.mega-title svg{transition:none;}}
.biz-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--biz,#ff5e0c);transition:transform 250ms cubic-bezier(.22,1,.36,1);}
.biz-icon img{width:28px;height:28px;object-fit:contain;}
.biz-icon-kds{background:linear-gradient(145deg,#ff8a3d,#ff5e0c);box-shadow:inset 0 2px 6px #ffc886;}
.biz-icon.biz-icon-kds img{width:26px;height:20px;filter:brightness(0) invert(1);}
@media (prefers-reduced-motion:reduce){.biz-icon,.biz-trigger svg,.lang-chevron{transition:none;}}

/* Mobile + tablet menu (<=1180px, owner 2026-10-02): Revolut's full-screen dark sheet with Square's
   structure. Big expandable rows (Business types, Product), plain rows (Pricing, Docs), icon utility
   rows (Log in, Contact, language), and the two sales CTAs pinned to the bottom. The header stays on
   top as logo + close; html.mm-open locks page scroll. */
/* The sheet is a dark glass over the page itself (backdrop blur), not a painted gradient */
.mm{position:fixed;z-index:79;inset:0;display:flex;flex-direction:column;padding-top:76px;color:#fff;
  background:rgba(6,6,7,.9);-webkit-backdrop-filter:blur(36px) saturate(140%);backdrop-filter:blur(36px) saturate(140%);
  visibility:hidden;opacity:0;transition:opacity 200ms var(--ease-out),visibility 0s linear 200ms}
.mm.is-open{visibility:visible;opacity:1;transition:opacity 280ms var(--ease-out),visibility 0s}
.mm-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:22px 24px 28px}
.mm-scroll::-webkit-scrollbar{display:none}
.mm-inner{max-width:640px}
.mm-discover{display:inline-flex;align-items:center;gap:14px;font-family:Manrope,var(--sans);font-size:28px;font-weight:700;letter-spacing:-.03em}
.mm-discover svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.mm-discover:hover svg{transform:translateX(3px)}
.mm-list{margin-top:26px}
/* .mm prefix outranks the generic .t-acc-head reset (font:inherit), which loads later */
.mm .mm-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0;border:0;background:none;
  color:inherit;font:500 21px/1.2 var(--sans);letter-spacing:-.01em;text-align:left;cursor:pointer}
.mm-chev{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--acc-chevron,250ms) var(--acc-ease,cubic-bezier(.22,1,.36,1))}
.mm-group[data-open="true"] .mm-chev{transform:rotate(180deg)}
/* an open section ends with a hairline so the next row reads as separate */
.mm-sub{display:grid;gap:2px;padding:2px 0 16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12)}
.mm-sub a{display:flex;align-items:center;gap:14px;min-height:52px;margin-inline:-10px;padding:6px 10px;border-radius:16px;
  color:rgba(255,255,255,.9);font-size:16.5px;font-weight:500;transition:background-color 200ms var(--ease-out)}
.mm-sub a:hover,.mm-sub a:focus-visible{background:rgba(255,255,255,.08)}
.mm-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.09)}
.mm-ico .nav-ico{width:21px;height:21px}
.mm-product span:last-child{display:grid;gap:2px}
.mm-product strong{display:flex;align-items:center;gap:8px;font-weight:600}
.mm-product small{color:rgba(255,255,255,.55);font-size:14px;font-weight:400;line-height:1.3}
.mm-soon{padding:2px 8px;border-radius:999px;background:rgba(255,133,76,.18);color:#ffb08a;font-size:11.5px;font-weight:600}
.mm-utility{display:grid;gap:2px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.mm-utility>a,.mm-lang{display:flex;align-items:center;gap:14px;min-height:50px;color:rgba(255,255,255,.88);font-size:17px;font-weight:500}
.mm-utility>a:hover{color:#fff}
.mm-utility svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-lang-pills{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08)}
.mm-lang-pills button{min-width:46px;height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.7);
  font:600 13.5px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
.mm-lang-pills button[aria-pressed="true"]{background:rgba(255,255,255,.18);color:#fff}
.mm-actions{display:flex;justify-content:center;gap:12px;padding:14px 24px calc(18px + env(safe-area-inset-bottom))}
.mm-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 0;max-width:230px;min-height:56px;padding:0 22px;border-radius:999px;
  font-size:17px;font-weight:600;white-space:nowrap;transition:transform 200ms var(--ease-out),background-color 200ms var(--ease-out)}
.mm-btn:active{transform:scale(.97)}
.mm-btn--dark{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mm-btn--light{background:#fff;color:#000}
.mm a:focus-visible,.mm button:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}
/* rows rise in one after another when the sheet opens */
.mm.is-open .mm-anim{animation:mm-rise 420ms var(--ease-out) both;animation-delay:calc(60ms + var(--i,0) * 35ms)}
@keyframes mm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* header while open: logo + close on the sheet */
/* lock on body, not html: an html overflow stops body's overflow-x from propagating to the viewport,
   body becomes the scroller and the sticky header pins to it (off-screen when scrolled) */
html.mm-open body{overflow:hidden}
html.mm-open .main-nav{color:#fff}
html.mm-open .main-nav::before{opacity:0}
html.mm-open .main-nav .main-brand img{filter:brightness(0) invert(1)}
html.mm-open .main-nav-actions>:not(.main-menu-toggle){visibility:hidden;opacity:0}
html.mm-open .main-menu-toggle{background:rgba(255,255,255,.12);color:#fff}
.main-menu-toggle .mm-ico-close,html.mm-open .main-menu-toggle .mm-ico-open{display:none}
html.mm-open .main-menu-toggle .mm-ico-close{display:block}
@media(min-width:1181px){.mm{display:none}}
@media(min-width:761px){
  .mm-scroll{padding:36px 48px 32px}
  .mm-discover{font-size:34px}
  .mm .mm-row{min-height:66px;font-size:24px}
  .mm-actions{justify-content:flex-start;padding-inline:48px}
}
@media (prefers-reduced-motion:reduce){.mm,.mm.is-open{transition:none}.mm.is-open .mm-anim{animation:none}}

/* Tailwind Play button treatment, recolored to the Figma orange */
.orange-glow{
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;
  justify-content:center;gap:12px;min-height:54px;padding:0 28px;border-radius:999px;
  border:0;background:#ff5e0c;color:#fff;
  font:600 16px/1 var(--sans);box-shadow:inset 0 2px 6px #ffc886;
  transition:transform 160ms var(--ease-out);
}
.orange-glow-label,.orange-glow svg{position:relative;z-index:2;}
.orange-glow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.orange-glow-light{
  position:absolute;z-index:1;left:10.47%;top:37.14%;width:78.87%;height:155.65%;
  background:url("assets/brand/button-inner-glow.svg") center/100% 100% no-repeat;
  transform:translateY(0);transition:transform 250ms ease;pointer-events:none;
}
.orange-glow:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .orange-glow:hover{background:#ff5e0c;transform:translateY(-2px);box-shadow:inset 0 2px 6px #ffc886;}
  .orange-glow:hover .orange-glow-light{transform:translateY(10px);}
  .main-nav .orange-glow-small:hover{transform:none;}
}
.orange-glow:focus-visible{outline:3px solid rgba(255,106,50,.3);outline-offset:3px;}
.orange-glow-small{min-height:45px;padding-inline:24px;font-size:14px;}
.orange-glow-small svg{width:18px;height:18px;}

/* hero */
.main-hero{padding:26px 0 30px;}
.main-hero-grid{
  position:relative;display:grid;grid-template-columns:1.04fr 1fr;align-items:center;
  min-height:664px;padding:54px 48px;
}
.main-hero-copy{position:relative;z-index:2;align-self:center;padding-left:0;}
.main-hero-copy h1{
  margin:0;font-size:clamp(48px,4.5vw,78px);line-height:1.04;letter-spacing:-.055em;font-weight:500;
}
.main-hero-copy>p{
  max-width:700px;margin:26px 0 0;color:#515151;font-size:clamp(18px,1.35vw,24px);line-height:1.43;
}
.main-hero-actions{display:flex;align-items:center;gap:16px;margin-top:50px;}
.main-soft-button{
  display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;
  border-radius:999px;background:#f2f0ef;color:#242424;font-weight:600;transition:transform .2s,background .2s;
}
.main-soft-button:hover{transform:translateY(-2px);background:#e9e6e4;}
.main-hero-visual{position:relative;display:grid;place-items:center;align-self:stretch;}
.main-hero-glow{
  position:absolute;width:94%;height:80%;border-radius:50%;
  background:radial-gradient(circle at center,rgba(255,183,143,.28),rgba(255,219,192,.12) 50%,transparent 72%);
  filter:blur(12px);
}
.main-hero-visual img{position:relative;z-index:1;width:min(100%,666px);height:auto;filter:drop-shadow(0 18px 19px rgba(0,0,0,.12));}
.main-slider-dots{display:flex;justify-content:center;gap:9px;}
.main-slider-dots span{width:7px;height:7px;border-radius:50%;background:#ffc9b4;}
.main-slider-dots .active{background:var(--main-orange);}

/* core product sections */
.main-order{padding-top:82px;}
.main-order .main-shell{width:min(1371px,calc(100% - 64px));}
.main-order .main-center-title{margin-bottom:52px;}
.main-feature-showcase{width:100%;}
.main-feature-tabs{
  display:flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:100%;
  margin:0 auto 25px;padding:5px;border:1px solid rgba(0,0,0,.1);border-radius:100px;background:#fff;
}
.main-feature-tabs button{
  min-height:41px;padding:0 25px;border:0;border-radius:100px;background:transparent;color:#111;
  font:500 12px/1.4 Inter,"Noto Sans Armenian",var(--sans);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.main-feature-tabs button.active{background:rgba(0,0,0,.1);}
.main-feature-tabs button:focus-visible{outline:2px solid var(--main-orange);outline-offset:2px;}
.main-feature-panel{
  position:relative;height:auto;aspect-ratio:1371/566;overflow:hidden;border-radius:55px;
  background:#fccea5;isolation:isolate;
}
.main-feature-glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(42px);}
.main-feature-glow-one{inset:-12% -14% -22% 31%;background:radial-gradient(ellipse at center,#ef7041 0 49%,rgba(239,112,65,0) 74%);}
.main-feature-glow-two{width:58%;height:128%;right:-8%;bottom:-43%;background:radial-gradient(ellipse at center,#ffaf6a 0 43%,rgba(255,175,106,0) 72%);}
.main-feature-device{position:absolute;z-index:2;left:-10.36%;top:3.9%;width:64.89%;aspect-ratio:889.565/682;}
.main-feature-device img,.main-feature-dim{position:absolute;display:block;}
.main-feature-screen{left:4.05%;top:5.09%;width:91.88%;height:91.8%;object-fit:fill;}
.main-feature-dim{left:4.05%;top:5.09%;width:93.06%;height:90.65%;background:rgba(0,0,0,.45);}
.main-feature-modifier{left:20.65%;top:14.29%;width:74.08%;height:79.09%;object-fit:fill;}
.main-feature-frame{inset:0;width:99.98%;height:99.98%;object-fit:fill;pointer-events:none;}
.main-feature-copy{position:absolute;z-index:3;left:56.46%;top:15.9%;width:41.43%;color:#fff;}
.main-feature-copy h3{width:97.7%;margin:0;font-size:45px;line-height:1.11;letter-spacing:-.03em;font-weight:700;}
.main-feature-copy p{margin:66px 0 0;font-size:30px;line-height:1.17;letter-spacing:-.025em;font-weight:500;}
.main-feature-star{position:absolute;z-index:4;height:auto;object-fit:contain;}
.main-feature-star-one{right:8.2%;top:9.2%;width:5.3%;}
.main-feature-star-two{left:57%;bottom:7.7%;width:6.4%;}
.main-feature-soup{position:absolute;z-index:1;right:-4.2%;bottom:-27%;width:50.76%;height:auto;opacity:.68;}
.main-manage .main-split{align-items:center;}
.main-split{display:grid;grid-template-columns:1.05fr .95fr;gap:86px;align-items:center;}
.main-split-reverse{grid-template-columns:.86fr 1.14fr;}
.main-photo{width:100%;height:auto;aspect-ratio:1.2/1;object-fit:cover;border-radius:34px;}
.main-copy h2{
  margin:0;font-size:clamp(38px,4vw,68px);line-height:1.03;letter-spacing:-.055em;font-weight:600;
}
.main-copy>p:not(.main-kicker){margin:28px 0 0;max-width:660px;color:#484848;font-size:19px;line-height:1.55;}
.main-kicker{margin:0 0 10px;color:var(--main-orange);font-size:15px;font-weight:600;}
.main-feature-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px;
  margin:32px 0 0;padding:0;list-style:none;font-size:16px;font-weight:600;
}
.main-feature-list li::before{content:"◈";display:inline-block;margin-right:12px;color:#222;}
.main-arrow-button{
  display:flex;align-items:center;justify-content:space-between;width:min(100%,390px);
  min-height:58px;margin-top:36px;padding:0 24px;border-radius:999px;background:#f2f2f2;font-weight:600;
  transition:transform .22s var(--ease),background .2s;
}
.main-arrow-button:hover{transform:translateY(-2px);background:#e9e9e9;}
.main-arrow-button span{font-size:24px;}
.main-meeting-pill{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:max-content;max-width:calc(100% - 40px);
  min-height:66px;margin:66px auto 0;padding:0 22px;border-radius:999px;
  background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.12);font-size:17px;font-weight:600;
}
.main-meeting-pill b{font-size:22px;font-weight:400;}
.main-cost{padding-top:48px;}
.main-cost .main-photo{aspect-ratio:1.5/1;}
.main-partner-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px;}
.main-partner-row span{
  display:grid;place-items:center;min-height:54px;padding:8px 15px;border-radius:12px;
  background:#f5f5f5;font-size:12px;line-height:1.25;
}

/* value cards and compliance */
.main-values{padding-top:80px;background:#fffafa;}
.main-values{padding-top:80px;}
.main-values .main-shell{width:min(1371px,calc(100% - 64px));}
.main-values .main-center-title{margin-bottom:50px;font-size:45px;line-height:1.6;font-weight:600;letter-spacing:-.04em;}
.main-value-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;
  gap:25px;max-width:1371px;margin:0 auto;padding-inline:14px;
}
.main-value-card{
  position:relative;grid-column:span 2;height:509px;overflow:hidden;border-radius:42px;
  background:radial-gradient(ellipse 390px 425px at -66px -94px,#ffedd5 0%,#fff8ef 49%,#fff 100%);
  box-shadow:0 14px 32px rgba(58,48,39,.045);container-type:inline-size;
}
.main-value-card:nth-child(4){grid-column:2/span 2;}
.main-value-card:nth-child(5){grid-column:4/span 2;}
.main-value-green{border:3px solid #55ed45;}
.main-value-art{position:absolute;inset:0 0 auto;height:263px;pointer-events:none;}
.main-value-main-art{position:absolute;height:auto;max-width:none;object-fit:contain;}
.art-ipad{left:25px;top:-18px;width:347px;}
.art-play{left:32px;top:-17px;width:320px;}
.art-mail{left:33px;top:-13px;width:325px;}
.art-user{left:32px;top:-20px;width:363px;}
.art-lightning{left:46px;top:-16px;width:309px;transform:rotate(5.21deg);}
.main-value-copy{position:absolute;z-index:4;left:30px;right:27px;top:260px;}
.main-value-card h3{margin:0;font-size:28px;line-height:68px;letter-spacing:-.045em;font-weight:700;}
.main-value-card p{margin:0;color:#303030;font-size:20px;line-height:1.4;letter-spacing:-.02em;font-weight:400;}
.main-value-money{position:absolute;height:auto;object-fit:contain;}
.main-value-money-one{width:73px;right:105px;top:35px;transform:rotate(-151.84deg);}
.main-value-money-two{width:55px;left:60px;top:97px;transform:rotate(162.59deg);}
.main-card-star{position:absolute;z-index:3;height:auto;object-fit:contain;}
.first-star-a{left:119px;top:50px;width:41px}.first-star-b{left:307px;top:159px;width:36px}
.play-star-a{left:279px;top:206px;width:45px}.play-star-b{left:192px;top:21px;width:31px}.play-star-c{left:92px;top:190px;width:28px}
.mail-star{left:235px;top:48px;width:59px}
.user-star-a{left:121px;top:60px;width:42px}.user-star-b{left:300px;top:156px;width:27px}
.main-value-badge{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;border-radius:15px;background:#000;color:#fff;font-family:Manrope,"Noto Sans Armenian",Inter,sans-serif;line-height:1;}
.main-value-time{left:54.064cqw;top:5.769cqw;width:41.578cqw;height:12.045cqw;padding:0 3.474cqw;gap:0;font-size:5.643cqw;font-weight:700;letter-spacing:-.125cqw;white-space:nowrap;}
.main-value-time-icon{position:relative;display:grid;place-items:center;width:6.6cqw;height:6.6cqw;flex:0 0 6.6cqw;}
.main-value-time-icon img{display:block;width:3.237cqw;height:5.085cqw;}
.main-value-typing{left:56.695cqw;top:39.842cqw;width:28.028cqw;height:10.192cqw;padding:0 2.94cqw;font-size:4.774cqw;font-weight:700;letter-spacing:-.106cqw;white-space:nowrap;}
.main-value-shield{position:absolute;z-index:4;left:213px;top:148px;width:90px;height:84px;object-fit:contain;}
.main-values,.main-compliance,.main-control,.main-sales,.main-stories,.main-kds,.main-faq{
  background:var(--main-pink);
}
.main-icon-heading{margin:0 0 40px;text-align:center;font-size:24px;font-weight:600;}
.main-icon-heading span{margin-right:8px;}
.main-compliance-card{
  position:relative;display:grid;grid-template-columns:1fr 1.15fr .7fr;align-items:center;
  min-height:430px;padding:54px 60px;border-radius:48px;overflow:hidden;
  background:
    radial-gradient(circle at 60% 52%,rgba(255,255,255,.85),transparent 29%),
    repeating-radial-gradient(circle at 54% 52%,transparent 0 36px,rgba(150,150,150,.1) 37px 39px),
    linear-gradient(120deg,#f3f1ef,#fff7f3);
}
.main-compliance-card h3{margin:0;font-size:42px;line-height:1.05;letter-spacing:-.04em;}
.main-compliance-card p{max-width:370px;margin:26px 0 0;color:#555;line-height:1.55;}
.main-compliance-card>img{width:390px;max-height:270px;justify-self:center;object-fit:contain;}
.main-compliance-logos{display:grid;gap:24px;}
.main-compliance-logos span{
  display:grid;place-items:center;min-height:58px;padding:10px;border-radius:13px;background:rgba(255,255,255,.74);
  box-shadow:0 10px 30px rgba(0,0,0,.07);font-weight:700;
}
.main-control{padding-top:90px;}
.main-section-tabs{
  display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:0 auto 26px;padding:6px;
  border:1px solid #ddd;border-radius:999px;background:#fff;
}
.main-section-tabs span{padding:11px 24px;border-radius:999px;font-size:14px;}
.main-section-tabs .active{background:#f0dfcc;}

/* CRM, loyalty, stories */
.main-sales{padding-top:78px;}
.main-crm-card{
  display:grid;grid-template-columns:.9fr 1.1fr;min-height:500px;padding:55px 65px;
  border-radius:48px;background:linear-gradient(120deg,#ffe1d5,#fff5f0);overflow:hidden;
}
.main-crm-card h3,.main-loyalty-row h3{margin:0;font-size:42px;letter-spacing:-.04em;line-height:1.1;}
.main-crm-card p{max-width:550px;color:#4d4d4d;font-size:17px;line-height:1.5;}
.main-crm-card .main-soft-button{margin-top:18px;background:#fff;}
.main-crm-visual{position:relative;display:grid;place-items:center;}
.main-crm-visual::before{
  content:"";position:absolute;inset:9% 4%;border-radius:50%;
  background:radial-gradient(circle,#f8a98c,transparent 67%);filter:blur(20px);opacity:.5;
}
.main-crm-visual img{position:relative;width:78%;height:auto;border-radius:26px;filter:drop-shadow(0 24px 30px rgba(99,50,35,.14));}
.main-loyalty-row{
  display:flex;align-items:center;justify-content:center;gap:24px;max-width:800px;margin:66px auto 0;
}
.main-loyalty-row img{width:210px;height:210px;object-fit:contain;}
.main-loyalty-row p{margin:12px 0 0;color:#555;line-height:1.5;}
.main-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.main-story-grid article{min-height:180px;padding:30px;border-radius:22px;background:rgba(255,255,255,.72);}
.main-story-grid p{margin:0;font-size:18px;line-height:1.55;}
.main-story-grid span{display:block;margin-top:26px;color:#777;font-size:13px;font-weight:600;}
.main-kds{padding-top:130px;}

/* FAQ and footer */
.main-faq{padding:120px 0 160px;}
.main-faq-card{padding:54px 66px;border-radius:44px;background:#fff;}
.main-faq-card h2{margin:0 0 36px;font-size:31px;letter-spacing:-.03em;}
.main-faq-card .t-acc{border-top:1px solid #ececec;}
.main-faq-card .t-acc>h3,.pricing-faq .t-acc>h3{margin:0;font:inherit;letter-spacing:inherit;}
.main-faq-card .t-acc-head{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:62px;font-weight:500;
}
.main-faq-card .t-acc-head span{font-size:27px;font-weight:400;}
/* Answer spacing lives on the paragraph: padding on the clipping inner box
   would stop the 0fr track from collapsing fully. */
.main-faq-card .t-acc-panel-inner p{margin:0;padding:0 40px 22px 0;color:#666;line-height:1.55;}
.main-footer{
  position:relative;display:grid;grid-template-columns:.85fr 1.15fr;min-height:450px;overflow:hidden;
  background:#050505;color:#fff;
}
.main-footer-mark{position:absolute;left:-60px;bottom:-230px;width:800px;height:auto;transform:rotate(-10deg);opacity:.96;}
.main-footer-content{
  position:relative;z-index:1;grid-column:2;display:grid;grid-template-columns:1fr auto;gap:34px 70px;
  align-content:center;padding:58px 9vw 28px 40px;
}
.main-newsletter h2{margin:0 0 20px;font-size:25px;font-weight:500;}
.main-newsletter form{display:flex;max-width:520px;height:54px;}
.main-newsletter input{
  min-width:0;flex:1;border:1px solid #777;border-right:0;border-radius:10px 0 0 10px;
  background:#fff;color:#111;padding:0 16px;font:500 15px/1 var(--sans);outline:none;
}
.main-newsletter button{
  width:54px;border:0;border-radius:0 10px 10px 0;background:#fff;color:#111;font-size:25px;cursor:pointer;
}
.main-newsletter small{display:block;max-width:520px;margin-top:12px;color:#999;line-height:1.4;}
.main-footer-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.main-footer-button{padding:14px 22px;border-radius:999px;background:#fff;color:#111;font-weight:700;}
.main-footer-content>p{grid-column:1/-1;margin:14px 0 0;color:#888;font-size:13px;}

@media(max-width:1180px){
  .main-links{display:none;}
  .main-menu-toggle{display:block;}
  .main-nav{height:76px;}
  .main-hero-grid{grid-template-columns:1fr 1fr;min-height:590px;padding-inline:20px;}
  .main-hero-copy h1{font-size:52px;}
  .main-feature-copy h3{font-size:clamp(30px,3.25vw,45px);}
  .main-feature-copy p{margin-top:4.3vw;font-size:clamp(18px,2.17vw,30px);}
  .main-value-card{height:440px;border-radius:34px;}
  .main-value-art{height:230px;transform:scale(.86);transform-origin:top center;}
  .main-value-copy{top:226px;left:26px;right:22px;}
  .main-value-card h3{font-size:23px;line-height:1.08;margin-bottom:14px;}
  .main-value-card p{font-size:16px;}
  .main-split{gap:48px;}
  .main-compliance-card{grid-template-columns:1fr 1fr;padding:44px;}
  .main-compliance-logos{grid-column:1/-1;grid-template-columns:repeat(3,1fr);}
  .main-footer-mark{left:-180px;}
}
@media(max-width:800px){
  .main-shell{width:min(100% - 32px,680px);}
  .main-section{padding:56px 0;}
  .main-nav{padding-inline:16px;}
  .main-brand{font-size:21.5px;}
  .main-brand img{width:35px;height:29px;}
  .main-nav-actions>.lang-menu,.main-nav-actions>.main-login,.main-nav-actions>.orange-glow{display:none;}
  .main-hero{padding-top:24px;}
  .main-hero-grid{grid-template-columns:1fr;min-height:0;padding:26px 0 0;text-align:center;}
  .main-hero-copy h1{font-size:clamp(39px,11vw,56px);}
  .main-hero-copy>p{margin-inline:auto;font-size:17px;}
  .main-hero-actions{justify-content:center;margin-top:30px;}
  .main-hero-visual{margin-top:42px;}
  .main-slider-dots{margin-top:18px;}
  .main-wide-art{border-radius:18px;}
  .main-order .main-shell,.main-values .main-shell{width:min(100% - 32px,680px);}
  .main-feature-tabs{justify-content:flex-start;width:100%;overflow-x:auto;scrollbar-width:none;}
  .main-feature-tabs::-webkit-scrollbar{display:none;}
  .main-feature-panel{aspect-ratio:auto;min-height:620px;border-radius:30px;}
  .main-feature-device{left:-24%;top:5%;width:112%;}
  .main-feature-copy{left:8%;right:8%;top:auto;bottom:8%;width:auto;text-shadow:0 1px 12px rgba(150,55,20,.12);}
  .main-feature-copy h3{font-size:34px;}
  .main-feature-copy p{margin-top:20px;font-size:20px;}
  .main-feature-star-one{right:8%;top:44%;width:10%;}.main-feature-star-two{left:4%;bottom:5%;width:11%;}
  .main-feature-soup{right:-20%;bottom:-7%;width:85%;opacity:.34;}
  .main-split,.main-split-reverse{grid-template-columns:1fr;gap:34px;}
  .main-copy h2{font-size:40px;}
  .main-copy>p:not(.main-kicker){font-size:16px;}
  .main-cost .main-copy{order:2;}
  .main-cost .main-photo{order:1;}
  .main-values .main-center-title{font-size:36px;line-height:1.15;}
  .main-value-grid{grid-template-columns:1fr 1fr;}
  .main-value-card,.main-value-card:nth-child(4),.main-value-card:nth-child(5){grid-column:span 1;width:100%;}
  .main-value-card:last-child{grid-column:1/-1;width:calc(50% - 12px);justify-self:center;}
  .main-compliance-card{grid-template-columns:1fr;text-align:center;border-radius:30px;}
  .main-compliance-card p{margin-inline:auto;}
  .main-compliance-card>img{width:280px;}
  .main-compliance-logos{grid-column:auto;grid-template-columns:repeat(3,1fr);}
  .main-crm-card{grid-template-columns:1fr;padding:38px 30px;border-radius:30px;}
  .main-crm-visual{margin-top:30px;}
  .main-story-grid{grid-template-columns:1fr;}
  .main-kds{padding-top:80px;}
  .main-faq-card{padding:34px 26px;border-radius:28px;}
  .main-footer{grid-template-columns:1fr;min-height:650px;}
  .main-footer-mark{left:-140px;bottom:-120px;width:600px;opacity:.45;}
  .main-footer-content{grid-column:1;grid-template-columns:1fr;padding:64px 28px 28px;}
}
@media(max-width:520px){
  .main-center-title{margin-bottom:32px;}
  .main-hero-actions{align-items:stretch;flex-direction:column;}
  .orange-glow,.main-soft-button{width:100%;}
  .main-photo{border-radius:22px;}
  .main-feature-list{grid-template-columns:1fr;}
  .main-value-grid{grid-template-columns:1fr;}
  .main-value-card,.main-value-card:nth-child(4),.main-value-card:nth-child(5),.main-value-card:last-child{
    grid-column:1;width:100%;
  }
  .main-compliance-card{padding:32px 20px;}
  .main-compliance-card h3{font-size:34px;}
  .main-compliance-logos{grid-template-columns:1fr;}
  .main-section-tabs{width:100%;overflow-x:auto;justify-content:flex-start;}
  .main-section-tabs span{padding-inline:18px;white-space:nowrap;}
  .main-crm-card h3,.main-loyalty-row h3{font-size:34px;}
  .main-loyalty-row{align-items:flex-start;flex-direction:column;}
  .main-loyalty-row img{margin-inline:auto;}
  .main-faq{padding-bottom:90px;}
  .main-faq-card h2{font-size:27px;}
  .main-faq-card .t-acc-head{font-size:14px;}
}
@media(prefers-reduced-motion:reduce){
  .orange-glow,.orange-glow-light{transition:none;}
  .main-nav,.main-nav::before,.main-language,.main-login{transition-duration:.01ms;}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--sans);
  background:#fff;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.home-page{
  background:linear-gradient(180deg,#fff 0%,#fff 42%,#fff7f5 100%);
}
.pricing-page{background:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
svg{display:block;}
.wrap{max-width:1236px;margin:0 auto;padding:0 28px;}
.serif{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;}

/* ---------------------------------------------------------------- buttons */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:15px;font-weight:700;line-height:1;
  padding:14px 24px;border-radius:var(--pill);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),color .2s;
}
.btn::after{
  content:"";position:absolute;inset:-100% auto -100% -45%;width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);pointer-events:none;
}
.btn:hover::after{left:118%;}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--shadow-btn),inset 0 2.75px 3.7px rgba(255,255,255,.2);}
.btn-dark:hover{background:#000;transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-btn);}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 22px rgba(240,110,70,.35);}
.btn-coral:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 14px 30px rgba(240,110,70,.4);}
.btn-ghost{background:#f3eeeb;color:var(--ink);}
.btn-ghost:hover{background:#ece5e1;transform:translateY(-2px);}
.btn-soft{background:#f5f5f5;color:#1b1615;}
.btn-soft:hover{background:#ebebeb;transform:translateY(-2px);}
.btn-lg{padding:17px 30px;font-size:16px;}
.btn-block{width:100%;}

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,247,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.scrolled{border-color:var(--line);background:rgba(251,249,247,.92);}
.nav-in{display:flex;align-items:center;gap:32px;height:90px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.03em;}
.logo-mark{height:21px;width:29px;}
.logo-mark-home{object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:34px;margin:0 auto;}
.nav-links a{font-size:15px;font-weight:400;color:var(--ink);position:relative;padding:4px 0;transition:color .2s;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--ink);transition:right .3s var(--ease);}
.nav-links a:hover::after{right:0;}
.nl-caret{color:var(--muted);}
.nav-menu{position:relative;}
.nav-menu-trigger{
  display:flex;align-items:center;gap:6px;padding:4px 0;border:0;background:none;
  color:var(--ink);font:400 15px/1 var(--sans);cursor:pointer;
}
.nav-menu-trigger svg{transition:transform .25s var(--ease);}
.nav-menu.open .nav-menu-trigger svg,.nav-menu:focus-within .nav-menu-trigger svg{transform:rotate(180deg);}
.nav-dropdown{
  position:absolute;top:calc(100% + 18px);left:50%;width:310px;padding:10px;
  transform:translate(-50%,8px);opacity:0;visibility:hidden;
  background:rgba(255,255,255,.96);border:1px solid rgba(25,25,25,.08);
  border-radius:16px;box-shadow:0 22px 55px rgba(27,24,22,.13);
  backdrop-filter:blur(18px);transition:opacity .2s ease,transform .25s var(--ease),visibility .2s;
}
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px;}
.nav-dropdown a{
  display:flex;flex-direction:column;gap:2px;padding:12px 13px;border-radius:10px;
  transition:background .18s ease,transform .18s ease;
}
.nav-dropdown a::after{display:none;}
.nav-dropdown a:hover{background:#f5f3f1;transform:translateX(2px);}
.nav-dropdown span{font-weight:700;}
.nav-dropdown small{font-size:12px;line-height:1.35;color:var(--muted);}
.nav-menu:hover .nav-dropdown,.nav-menu.open .nav-dropdown,.nav-menu:focus-within .nav-dropdown{
  transform:translate(-50%,0);opacity:1;visibility:visible;
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px;}
.nav-lang{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:4px;cursor:pointer;margin-right:6px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px;}
@media(max-width:1080px){
  .nav-links,.nav-lang{display:none;}
  .nav-toggle{display:flex;}
  .nav-right .btn-outline{display:none;}
  .nav-in{height:72px;}
}

/* mobile menu */
.mobile-menu{position:fixed;inset:72px 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line);
  padding:18px 28px 26px;display:none;flex-direction:column;gap:6px;z-index:49;box-shadow:0 20px 40px rgba(26,33,45,.12);}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 4px;font-size:17px;font-weight:600;border-bottom:1px solid var(--line);}
.mobile-menu .btn{margin-top:14px;}
.mobile-menu .mobile-login{display:none;}

/* ---------------------------------------------------------------- hero */
.hero{padding:64px 0 24px;text-align:center;}
.hero h1{
  font-size:clamp(40px,5.2vw,67px);line-height:1.06;font-weight:800;letter-spacing:-.045em;
  margin:0 auto;color:var(--ink);
}
.hero .sub{font-size:clamp(16px,1.4vw,18px);color:var(--muted);max-width:62ch;margin:22px auto 0;line-height:1.55;}
.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap;}
.hero-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;font-size:14px;color:#8a8a88;}
.hero-note svg{color:#8a8a88;}
.hero-ipad{margin:40px auto 0;width:min(1099px,100%);height:auto;}

/* hero reveal on load */
.hero h1,.hero .sub,.hero-cta,.hero-note,.hero-ipad{opacity:0;transform:translateY(22px);animation:rise .9s var(--ease) forwards;}
.hero .sub{animation-delay:.1s;}
.hero-cta{animation-delay:.18s;}
.hero-note{animation-delay:.24s;}
.hero-ipad{animation-delay:.3s;}
@keyframes rise{to{opacity:1;transform:translateY(0);}}

/* ---------------------------------------------------------------- section scaffolding */
.section{padding:88px 0;}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:16px;}
.h2{
  font-size:clamp(34px,3.6vw,56px);line-height:1.06;font-weight:800;letter-spacing:-.035em;
  margin:0;color:var(--ink);max-width:24ch;
}
.lead{color:var(--body);font-size:18px;max-width:62ch;margin:20px 0 0;line-height:1.55;}

/* ---------------------------------------------------------------- Figma banners */
.banners-wrap{max-width:1424px;margin:0 auto;padding:0 28px;}
.banners{display:grid;grid-template-columns:repeat(3,1fr);gap:4.17%;max-width:1368px;margin:0 auto;}
@media(max-width:900px){.banners{grid-template-columns:1fr;max-width:440px;gap:24px;}}
.bnr{
  position:relative;aspect-ratio:418/563;border-radius:5.2cqw;overflow:hidden;container-type:inline-size;
  isolation:isolate;background:#d8d8e8;
}
.bnr-blue{background:#c6cfff;}
.bnr-purple{background:#e4bcff;}
.bnr-pink{background:#eb8688;}
/* background blobs: exact Figma vectors with baked blur */
.bnr .blob{position:absolute;height:auto;max-width:none;pointer-events:none;z-index:1;transform-origin:center;}
.b1-radial{left:-54.16%;top:-32%;width:210.58%;}
.b1-machine-wrap{
  position:absolute;z-index:1;left:-59.67%;top:31.34%;right:24.79%;bottom:-17.6%;
  display:grid;place-items:center;pointer-events:none;
}
.b1-machine-rot{position:relative;width:87.12%;height:79.94%;transform:rotate(-12.54deg);}
.b1-machine-rot img{
  position:absolute;left:-22.35%;right:-22.35%;top:-31.07%;bottom:-25.47%;
  width:144.7%;height:156.54%;max-width:none;display:block;
}
.b1-radial-bottom{left:-51.3%;top:34.95%;width:151.62%;}
.b2-radial{left:-65.86%;top:-39.23%;width:245.14%;transform:rotate(-7.92deg);}
.b2-radial-bottom{left:-28.9%;top:19.75%;width:171.14%;}
.b2-machine{left:15.26%;top:45.78%;width:90.26%;}
.b3-radial{left:-32.7%;top:-40.93%;width:210.58%;transform:rotate(-7.92deg);}
.b3-radial-bottom{left:-59.57%;top:19%;width:158.62%;}
.b3-machine{left:8.12%;top:48.92%;width:102.68%;}
/* banner title */
.bnr-title{
  position:absolute;left:7.14%;top:5.33%;width:87%;margin:0;z-index:7;
  font-family:var(--sans);font-weight:600;color:#fff;font-size:6.9cqw;line-height:1.294;letter-spacing:0;
}
/* floating items */
.bnr .f{
  position:absolute;
  transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(var(--r,0deg)) scale(var(--scale,1));
  transition:transform .52s cubic-bezier(.2,.78,.2,1);will-change:transform;z-index:5;
}
.bnr img.f{display:block;height:auto;pointer-events:none;}
.bnr .cart{filter:drop-shadow(0 3.5cqw 6cqw rgba(20,30,80,.25));}
.order-chip{
  position:absolute;z-index:5;display:flex;align-items:center;color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.27));
  border:1px solid rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4cqw 8cqw rgba(25,62,130,.13);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
  backdrop-filter:blur(14px) saturate(1.18);
  transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(var(--r,0deg)) scale(var(--scale,1));
  transition:transform .52s cubic-bezier(.2,.78,.2,1),box-shadow .52s ease;
  will-change:transform;
}
.order-chip-efood{left:32.8%;top:27.3%;width:61.8%;height:21.5%;padding:2.8cqw 3.7cqw;border-radius:7.2cqw;--r:16.04deg;}
.order-chip-wolt{left:8.5%;top:55.1%;width:57.2%;height:18.8%;padding:2.7cqw 3.6cqw;border-radius:6.6cqw;--r:-6.07deg;}
.order-chip-logo{width:14.2cqw;height:14.2cqw;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.order-chip-logo-wolt{
  display:grid;place-items:center;background:#10b9d5;color:#fff;
  font-size:4.3cqw;font-weight:700;font-style:italic;letter-spacing:-.04em;
}
.order-chip span{display:grid;margin-left:3.2cqw;line-height:1.08;}
.order-chip b{font-size:4.15cqw;font-weight:500;}
.order-chip strong{color:#f3ff2e;font-size:5.35cqw;font-weight:500;}
.order-chip-coin{position:absolute;right:-2.5cqw;top:-2.2cqw;width:10.5cqw;height:10.5cqw;object-fit:contain;}
/* levitation on banner hover (staggered) */
.bnr:hover .f.lev{--ty:-3.5cqw;--scale:1.025;}
.bnr:hover .order-chip.lev{--ty:-3.5cqw;--scale:1.02;}
.bnr:hover .order-chip[data-d="1"]{transition-delay:.06s;}
.bnr:hover .order-chip[data-d="2"]{transition-delay:.12s;}
.bnr-blue:hover .cart{--tx:2.4cqw;--ty:1.8cqw;--scale:1.035;}
.bnr-blue:hover .order-chip-efood{--tx:-1.2cqw;--ty:-3.2cqw;}
.bnr-blue:hover .order-chip-wolt{--tx:1.4cqw;--ty:-2.3cqw;}
.bnr-purple:hover .percent{--tx:1.8cqw;--ty:1.2cqw;--scale:1.035;}
.bnr-purple:hover .lcard{--tx:-1.3cqw;--ty:-3.2cqw;--scale:1.02;}
.bnr-purple:hover img[alt="Offers"]{--tx:1.5cqw;--ty:-2.8cqw;--scale:1.05;}
.bnr-pink:hover .ipad{--tx:2cqw;--ty:1.4cqw;--scale:1.025;}
.bnr-pink:hover .android{--tx:-1.5cqw;--ty:-2.8cqw;--scale:1.045;}
.bnr-pink:hover .apple{--tx:1.4cqw;--ty:-2.8cqw;--scale:1.045;}
.bnr:hover .f.lev[data-d="1"]{transition-delay:.06s;}
.bnr:hover .f.lev[data-d="2"]{transition-delay:.12s;}
.bnr:hover .lcard.lev{--ty:-4.2cqw;}
/* sparkles idle twinkle */
.bnr .star{z-index:6;animation:twinkle 3.4s ease-in-out infinite;}
.bnr .star[data-d="1"]{animation-delay:.7s;}
.bnr .star[data-d="2"]{animation-delay:1.4s;}
@keyframes twinkle{0%,100%{opacity:.6;transform:rotate(var(--r,0deg)) scale(.85);}50%{opacity:1;transform:rotate(var(--r,0deg)) scale(1.1);}}
/* loyalty glass card (live backdrop blur, per Figma rgba(255,255,255,.2)) */
.lcard{
  position:absolute;z-index:5;font-family:var(--sans);color:#fff;overflow:hidden;
  background:rgba(255,255,255,.2);border:0;
  -webkit-backdrop-filter:blur(7px) saturate(1.28) brightness(1.04);
  backdrop-filter:blur(7px) saturate(1.28) brightness(1.04);
  border-radius:4.91cqw;padding:3.4cqw;
  transform:translate3d(var(--tx,0),var(--ty,0),0) rotate(var(--r,0deg)) scale(var(--scale,1));
  transition:transform .52s cubic-bezier(.2,.78,.2,1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 1.5cqw 1.8cqw 4cqw rgba(255,255,255,.1),
    inset -1.2cqw -1.4cqw 3.6cqw rgba(110,77,153,.08),
    0 6cqw 12cqw rgba(60,30,90,.16);
}
.lcard::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(75% 26% at 34% 0%,rgba(255,255,255,.42),transparent 68%),
    radial-gradient(42% 72% at 100% 78%,rgba(255,255,255,.14),transparent 72%),
    linear-gradient(135deg,rgba(255,255,255,.11),transparent 48%,rgba(255,255,255,.07));
  mix-blend-mode:screen;
}
.lcard::after{
  content:"";position:absolute;inset:1px;z-index:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(255,255,255,.12);
}
.lcard > *{position:relative;z-index:1;}
.lcard-head{display:flex;align-items:center;gap:2.6cqw;}
.lcard-head .lav{width:11.8cqw;height:11.8cqw;border-radius:49%;object-fit:cover;flex-shrink:0;}
.lcard-name{font-weight:700;font-size:3.21cqw;line-height:1.3;}
.lcard-sub{font-size:2.5cqw;font-weight:400;opacity:.95;}
.lcard-sub b{font-weight:600;}
.lcard hr{border:none;border-top:1px solid rgba(255,255,255,.4);margin:2.6cqw 0;}
.lcard-lbl{font-size:2.5cqw;font-weight:500;opacity:.9;margin-bottom:1cqw;}
.lcard-body{font-size:3.12cqw;font-weight:600;line-height:1.29;}

/* ---------------------------------------------------------------- white feature cards */
.wcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px;}
@media(max-width:900px){.wcards{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.wcards{grid-template-columns:1fr;}}
.wcard{background:var(--surface-warm);border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(30,20,20,.03);}
.wcard h4{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;}
.wcard p{font-size:15px;color:var(--body);margin:0;line-height:1.5;}

/* ---------------------------------------------------------------- financial split */
.fin{display:grid;grid-template-columns:1fr 1.06fr;gap:54px;align-items:center;}
@media(max-width:900px){.fin{grid-template-columns:1fr;gap:36px;}}
.fin-img img{width:100%;height:auto;}
.fin-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px;}
@media(max-width:560px){.fin-cards{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------- integrate band */
.int-band{
  margin-top:56px;background:var(--surface-warm);border-radius:20px;padding:44px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(30,20,20,.03);
}
.int-band h3{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.025em;margin:0 0 10px;color:var(--ink);}
.int-band p{font-size:15px;color:var(--body);margin:0;}

/* ---------------------------------------------------------------- pricing preview (home) */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:21px;margin-top:44px;}
@media(max-width:900px){.pgrid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}
.pcard{
  background:var(--surface);border-radius:24px;padding:26px 26px 30px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-5px);box-shadow:0 28px 40px rgba(26,33,45,.1);}
.pcard h3{font-size:26px;font-weight:700;letter-spacing:-.04em;margin:0 0 14px;color:var(--ink);}
.pcard .pamt{font-size:48px;font-weight:800;letter-spacing:-.06em;line-height:1.1;color:var(--ink);}
.pcard .psub{font-size:18px;color:var(--body);margin:14px 0 4px;}
.pcard ul{margin:6px 0 26px;padding:0 0 0 20px;display:grid;gap:1px;}
.pcard li{font-size:16px;color:var(--list);line-height:1.8;}
.pcard li::marker{color:var(--list);}
.pcard .btn{margin-top:auto;}

/* ---------------------------------------------------------------- blog */
.bgrid{display:grid;grid-template-columns:1.505fr 1fr 1fr;gap:21px;margin-top:44px;}
@media(max-width:900px){.bgrid{grid-template-columns:1fr;}}
.bcard{
  background:var(--surface);border-radius:20px;padding:18px;
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.bcard:hover{transform:translateY(-5px);box-shadow:0 28px 40px rgba(26,33,45,.1);}
.bcard img{width:100%;height:auto;border-radius:10px;}
.bbody{padding:18px 4px 6px;}
.bbody h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 10px;line-height:1.25;color:var(--ink);}
.bbody p{font-size:14.5px;color:var(--body);margin:0;line-height:1.5;}
.bbody .btag{color:var(--muted);}

/* ---------------------------------------------------------------- CTA band */
.cta-white{
  background:var(--surface-warm);border-radius:24px;padding:48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(30,20,20,.03);
}
.cta-white h3{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;margin:0 0 10px;color:var(--ink);}
.cta-white p{font-size:15px;color:var(--body);margin:0;}

/* ---------------------------------------------------------------- footer */
.footer{padding:34px 0 60px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;
  font-size:14px;color:var(--body);flex-wrap:wrap;gap:12px;}

/* ================================================================
   Pricing page (pricing.html) - matches Figma frame 3839-741
   ================================================================ */
.bill-toggle{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;
  width:300px;background:#f5f5f5;border-radius:var(--pill);padding:0;margin:56px auto 0;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.05);
}
.bill-toggle button{border:none;background:none;font-family:var(--sans);font-weight:700;font-size:15px;color:#6e6e6e;
  min-height:45px;padding:10px 20px;border-radius:var(--pill);cursor:pointer;transition:background .3s var(--ease),color .3s,box-shadow .3s;}
.bill-toggle button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.save-badge{
  position:absolute;z-index:2;left:-19px;top:-16px;background:#1fbb4f;color:#fff;
  font-size:12px;font-weight:800;padding:4px 10px;border-radius:var(--pill);
  box-shadow:0 5px 12px rgba(31,187,79,.2);pointer-events:none;
}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}
.price-card{background:var(--surface);border:1px solid rgba(0,0,0,.1);border-radius:24px;padding:30px 28px;
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
  box-shadow:var(--shadow-card);}
.price-card:hover{transform:translateY(-6px);box-shadow:0 28px 40px rgba(26,33,45,.12);}
.price-card .plan{font-size:26px;font-weight:700;letter-spacing:-.04em;display:flex;align-items:center;justify-content:space-between;}
.price-card .amt{font-size:48px;font-weight:800;letter-spacing:-.06em;margin:14px 0 2px;line-height:1;}
.price-card .amt .old{font-size:21px;font-weight:500;color:rgba(28,28,28,.7);text-decoration:line-through;margin-left:8px;letter-spacing:-.06em;}
.price-card .per{font-size:15px;font-weight:500;color:rgba(28,28,28,.65);min-height:18px;}
.price-card .blurb{font-size:18px;color:var(--body);margin:16px 0 14px;}
.price-card ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px;}
.price-card li{display:flex;align-items:flex-start;gap:10px;font-size:16px;color:var(--list);}
.price-card li svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:3px;}
.price-card .btn{margin-top:auto;}
.price-card.popular{background:linear-gradient(180deg,#aed5f3 0%,#e4f1fc 27%,#ffffff 70%);border:3px solid #51b2ff;position:relative;
  margin-top:-18px;margin-bottom:-18px;padding-top:50px;box-shadow:0 24px 42px rgba(26,33,45,.16);}
.price-card.popular:hover{transform:translateY(-4px);box-shadow:0 32px 60px rgba(26,33,45,.2);}
.badge-pop{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.02em;
  padding:8px 16px;border-radius:var(--pill);box-shadow:0 1px 3px rgba(0,0,0,.08);white-space:nowrap;}
.btn.green{background:var(--ink);color:#fff;}

/* ---------------------------------------------------------------- scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}

/* ---------------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero h1,.hero .sub,.hero-cta,.hero-note,.hero-ipad{opacity:1 !important;transform:none !important;}
  .btn:hover,.pcard:hover,.bcard:hover,.price-card:hover{transform:none !important;}
  .bnr:hover .f.lev,.bnr:hover .lcard.lev{--ty:0;}
}

@media(max-width:640px){
  .wrap,.banners-wrap{padding-inline:20px;}
  .nav-right .btn-dark{display:none;}
  .mobile-menu .mobile-login{display:block;}
  .hero{padding-top:44px;}
  .hero h1{font-size:42px;}
  .hero-ipad{margin-top:26px;}
  .section{padding:64px 0;}
  .int-band,.cta-white{padding:30px 24px;}
  .price-card.popular{margin:0;padding-top:50px;}
  .bill-toggle{width:min(300px,calc(100vw - 56px));}
}

/* ---------------------------------------------------------------- Figma pricing page */
/* Site Figma: hero 5624:32945, plan cards 5624:33352, Enterprise 5624:33515.
   --u is one Figma pixel. It is capped below 1px so the hero, toggle and all three
   plan cards fit on common laptop screens without cropping. */
.pricing-figma-page {
  --pricing-ink: #141414;
  --pricing-muted: #878787;
  --pricing-soft: #f4f2f2;
  --pricing-orange: #ffb14c;
  --u: clamp(.72px, min(calc((100vw - 80px) / 1440), calc((100vh - 110px) / 1057)), .8px);
  min-width: 320px;
  background: #fff;
  color: var(--pricing-ink);
  font-family: Manrope, var(--sans);
  overflow-x: hidden;
}

.pricing-figma-page img {
  object-fit: contain;
}

.pricing-main {
  background: #fff;
}

.pricing-hero {
  display: grid;
  justify-items: center;
  gap: calc(50 * var(--u));
  padding: calc(104 * var(--u)) 24px 0;
}

.pricing-hero h1 {
  min-height: calc(89 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(954 * var(--u));
  margin: 0;
  color: #000;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(75 * var(--u));
  font-weight: 400;
  line-height: calc(65 * var(--u));
  letter-spacing: calc(-3 * var(--u));
  text-align: center;
}

.pricing-billing {
  display: grid;
  justify-items: center;
  gap: calc(20 * var(--u));
}

.pricing-toggle {
  display: flex;
  gap: calc(2.359 * var(--u));
  align-items: flex-start;
  height: calc(51.897 * var(--u));
  padding: calc(4.718 * var(--u));
  border-radius: 999px;
  background: var(--pricing-soft);
}

.pricing-toggle button {
  height: calc(42.513 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pricing-muted);
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(18.046 * var(--u));
  font-weight: 600;
  letter-spacing: calc(.2359 * var(--u));
  line-height: calc(25.948 * var(--u));
  padding: 0 calc(14.154 * var(--u));
  white-space: nowrap;
  cursor: pointer;
}

.pricing-toggle button.on {
  background: #fff;
  color: var(--pricing-ink);
  font-size: calc(17.81 * var(--u));
}

.pricing-toggle button span {
  color: #1da948;
  font-weight: 700;
}

.pricing-save {
  margin: 0;
  color: #707070;
  font-family: Inter, Manrope, sans-serif;
  font-size: max(12px, calc(15.1 * var(--u)));
  font-weight: 400;
  line-height: calc(24 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.pricing-save strong {
  color: #1da948;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Owner (2026-09-30): the plan cards read small at the page's .8px cap, so the plans block
   gets its own unit — up to .9px, never wider than the viewport allows for three cards. */
.pricing-plans {
  --u: min(.9px, calc((100vw - 96px) / 1405));
  width: min(calc(1438 * var(--u)), calc(100% - 48px));
  margin: calc(45 * var(--u)) auto 0;
}

.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, calc(453 * var(--u))));
  justify-content: center;
  gap: calc(23 * var(--u));
}

.pricing-card {
  position: relative;
  isolation: isolate;
  min-height: calc(673 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
  background: var(--pricing-soft);
  color: var(--pricing-ink);
  padding: calc(29 * var(--u)) calc(29 * var(--u)) calc(33 * var(--u));
}

/* The Plus stroke sits outside the card (459 x 679 render of a 453 x 673 card)
   and fades from the card grey into orange below the middle. */
.pricing-card-popular {
  min-height: calc(673 * var(--u) + 6px);
  margin: -3px;
  border: 3px solid transparent;
  border-radius: calc(30 * var(--u) + 3px);
  background:
    linear-gradient(var(--pricing-soft), var(--pricing-soft)) padding-box,
    linear-gradient(180deg, var(--pricing-soft) 52%, var(--pricing-orange) 100%) border-box;
}

.pricing-card-glow {
  position: absolute;
  z-index: -1;
  left: calc(-240 * var(--u));
  top: calc(-252 * var(--u));
  width: calc(862 * var(--u));
  max-width: none;
  height: calc(888 * var(--u));
  pointer-events: none;
}

.pricing-card-head {
  min-height: calc(64 * var(--u));
  margin-bottom: calc(24 * var(--u));
}

.pricing-card h2 {
  margin: 0;
  color: var(--pricing-ink);
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(29.006 * var(--u));
  font-weight: 700;
  line-height: calc(36.257 * var(--u));
  white-space: nowrap;
}

.pricing-card-head p {
  margin: 0;
  color: rgba(0,0,0,.65);
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(17.887 * var(--u));
  font-weight: 500;
  letter-spacing: calc(.2417 * var(--u));
  line-height: calc(26.589 * var(--u));
}

.pricing-title-row {
  height: calc(37 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9.669 * var(--u));
}

.pricing-title-row span {
  height: calc(37 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(12 * var(--u));
  background: #ffb76b;
  color: #000;
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(14.261 * var(--u));
  font-weight: 600;
  letter-spacing: calc(.2417 * var(--u));
  line-height: calc(19.337 * var(--u));
  padding: 0 calc(10 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-price {
  height: calc(59 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0;
  color: var(--pricing-ink);
  font-family: "Noto Sans Armenian", Inter, Manrope, sans-serif;
}

.pricing-price strong {
  font-size: calc(49.673 * var(--u));
  font-weight: 700;
  letter-spacing: calc(-.4834 * var(--u));
  line-height: calc(58.012 * var(--u));
  white-space: nowrap;
}

.pricing-price em {
  height: calc(35 * var(--u));
  display: inline-flex;
  align-items: center;
  border-radius: calc(10 * var(--u));
  background: rgba(255,255,255,.5);
  color: rgba(0,0,0,.5);
  font-size: calc(19.022 * var(--u));
  font-style: normal;
  font-weight: 500;
  letter-spacing: calc(-.3678 * var(--u));
  line-height: 1;
  padding: 0 calc(10 * var(--u));
  text-decoration: line-through;
  white-space: nowrap;
}

.pricing-period {
  min-height: calc(20 * var(--u));
  margin: calc(15 * var(--u)) 0 0;
  color: rgba(0,0,0,.5);
  font-family: Inter, Manrope, sans-serif;
  font-size: max(12px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: calc(.2417 * var(--u));
  line-height: calc(19.337 * var(--u));
  white-space: nowrap;
}

.pricing-start {
  height: calc(60 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(19 * var(--u));
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(18.854 * var(--u));
  font-weight: 600;
  letter-spacing: calc(.2417 * var(--u));
  line-height: calc(26.589 * var(--u));
}

.pricing-includes {
  display: grid;
  gap: calc(10 * var(--u));
  margin-top: calc(36 * var(--u));
}

.pricing-includes p,
.pricing-includes li {
  min-height: calc(44 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
  font-size: max(12px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: calc(24 * var(--u));
  padding: calc(10 * var(--u));
  white-space: nowrap;
}

.pricing-includes p {
  font-size: max(12px, calc(15.8 * var(--u)));
}

.pricing-includes strong {
  font-weight: 500;
}

.pricing-includes ul {
  display: grid;
  gap: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-includes li {
  border-radius: calc(10 * var(--u));
  background: rgba(255,255,255,.5);
}

.pricing-includes img {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  display: block;
  flex: 0 0 auto;
}

.pricing-enterprise {
  width: min(calc(1390 * var(--u)), 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: calc(40 * var(--u)) auto 0;
  border: 2px solid rgba(0,0,0,.1);
  border-radius: calc(40 * var(--u));
  background: #fff;
  overflow: hidden;
  padding: calc(35 * var(--u));
}

.pricing-enterprise > div {
  width: calc(383 * var(--u));
  height: calc(204 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 0 0 auto;
}

.pricing-enterprise-copy {
  display: grid;
  gap: calc(5 * var(--u));
}

.pricing-enterprise h2 {
  margin: 0;
  color: #000;
  font-family: Inter, Manrope, sans-serif;
  font-size: calc(36.5 * var(--u));
  font-weight: 500;
  letter-spacing: calc(-1.14 * var(--u));
  line-height: calc(38 * var(--u));
}

.pricing-enterprise p {
  margin: 0;
  color: rgba(0,0,0,.65);
  font-family: Manrope, var(--sans);
  font-size: max(12px, calc(15.3 * var(--u)));
  font-weight: 500;
  line-height: calc(24 * var(--u));
}

.pricing-enterprise a {
  width: calc(305.423 * var(--u));
  height: calc(56 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12.444 * var(--u));
  border-radius: calc(17.303 * var(--u));
  background: #000;
  color: #fff;
  font-family: Manrope, var(--sans);
  font-size: calc(17.843 * var(--u));
  font-weight: 700;
  white-space: nowrap;
}

.pricing-arrow {
  width: calc(26.134 * var(--u));
  height: calc(26.134 * var(--u));
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.pricing-arrow img {
  width: calc(20.312 * var(--u));
  height: calc(16.593 * var(--u));
  display: block;
}

.pricing-enterprise figure {
  position: relative;
  width: calc(416 * var(--u));
  height: calc(204 * var(--u));
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  border-radius: calc(22 * var(--u));
  background: #fff;
}

.pricing-enterprise figure img {
  position: absolute;
  left: calc(-17 * var(--u));
  top: calc(-7 * var(--u));
  width: calc(605 * var(--u));
  max-width: none;
  height: calc(278 * var(--u));
  object-fit: cover;
  object-position: bottom;
}

.pricing-compare {
  width: min(1435px, calc(100% - 48px));
  min-height: 1578px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 55px;
  margin: 311px auto 0;
}

.pricing-compare h2,
.pricing-faq h2 {
  margin: 0;
  color: #000;
  font-size: 45px;
  font-weight: 800;
  line-height: 45px;
  letter-spacing: .22px;
  text-align: center;
}

.pricing-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  color: #141414;
}

.pricing-table th {
  height: 108px;
  background: #fff;
  color: #141414;
  font-family: Inter, Manrope, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
  text-align: center;
  text-transform: none;
  padding: 0 20px;
}

.pricing-table th:first-child,
.pricing-table td:first-child {
  width: 35%;
  text-align: left;
}

.pricing-table th:last-child,
.pricing-table td:last-child {
  width: 52px;
}

.pricing-table td {
  height: 52px;
  border-top: 1.1px solid #ededed;
  color: #141414;
  font-family: Inter, Manrope, sans-serif;
  font-size: 16.7px;
  font-weight: 600;
  letter-spacing: .22px;
  text-align: center;
  vertical-align: middle;
  padding: 13px 20px;
}

/* The label cell stays a real table cell (display:flex broke the row layout and wrapped
   "Comments & mentions" over the next row); the info icon sits inline after the text */
.pricing-table td:first-child {
  white-space: nowrap;
}

.pricing-table td:first-child .pricing-info {
  margin-left: 9px;
  vertical-align: -3px;
}

.pricing-table button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 38px;
  font-weight: 600;
  line-height: 20px;
  padding: 0;
}

.pricing-info {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  opacity: .5;
}

.pricing-info img {
  position: absolute;
}

.pricing-info img:first-child {
  inset: 10%;
  width: 80%;
  height: 80%;
}

.pricing-info img:nth-child(2) {
  left: 45%;
  top: 50%;
  width: 10%;
  height: 20%;
}

.pricing-info img:nth-child(3) {
  left: 45%;
  top: 25%;
  width: 10%;
  height: 10%;
}

.pricing-check,
.pricing-x {
  width: 22px;
  height: 22px;
  display: inline-block;
}

.pricing-faq {
  width: min(1300px, calc(100% - 48px));
  display: grid;
  justify-items: center;
  margin: 0 auto;
  padding-bottom: 330px;
}

.pricing-faq-list {
  width: 100%;
  display: grid;
  gap: 13px;
  margin-top: 88px;
}

.pricing-faq .t-acc {
  border-radius: 18px;
  background: rgba(64,64,64,.06);
}

.pricing-faq .t-acc-head {
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #141414;
  font-family: Inter, Manrope, sans-serif;
  font-size: 16.8px;
  font-weight: 700;
  letter-spacing: .22px;
  list-style: none;
  padding: 22px 26px;
  cursor: pointer;
}

.pricing-faq .t-acc-head img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.pricing-faq .t-acc-panel-inner p {
  margin: 0;
  padding: 0 26px 22px;
  color: #777;
  font-family: Inter, Manrope, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.pricing-contact-note {
  margin: 86px 0 27px;
  color: #9a9a9a;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

.pricing-book {
  min-width: 402px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 19px;
  background: rgba(64,64,64,.06);
  color: #141414;
  font-size: 20px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0 25px;
}

.pricing-book img:first-child {
  width: 31px;
  height: 27px;
  flex: 0 0 auto;
}

.pricing-book img:last-child {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

@media(max-width:1060px) {
  .pricing-plans {
    --u: inherit;
  }

  .pricing-figma-page {
    --u: .8px;
  }

  .pricing-plan-grid {
    grid-template-columns: minmax(0, calc(453 * var(--u)));
  }

  .pricing-enterprise {
    width: min(calc(453 * var(--u)), 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .pricing-enterprise > div {
    width: 100%;
  }

  .pricing-enterprise figure {
    width: 100%;
  }

  .pricing-compare {
    margin-top: 220px;
  }
}

/* Pricing on tablets (761-1060px, owner 2026-10-02): plan cards at full Figma scale (the .8px
   page unit made feature rows ~11px), and the compare table fits the width instead of scrolling */
@media (min-width:761px) and (max-width:1060px) {
  .pricing-plans {
    --u: 1px;
  }

  .pricing-table {
    min-width: 0;
  }

  .pricing-table th,
  .pricing-table td {
    padding-inline: 12px;
  }

  .pricing-compare {
    min-height: 0;
    margin-top: 160px;
  }

  .pricing-faq {
    margin-top: 140px;
    padding-bottom: 160px;
  }
}

@media(max-width:760px) {
  .pricing-hero {
    gap: 34px;
    padding-top: 56px;
  }

  .pricing-hero h1 {
    font-size: 42px;
    line-height: 43px;
    letter-spacing: -1px;
  }

  .pricing-save {
    max-width: 300px;
    white-space: normal;
  }

  .pricing-plans,
  .pricing-compare,
  .pricing-faq {
    width: calc(100% - 32px);
  }

  .pricing-plans {
    margin-top: 48px;
  }

  .pricing-plan-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: calc(453 * var(--u));
    margin: 0 auto;
  }

  .pricing-card-popular {
    margin: 0 -3px;
  }

  .pricing-enterprise {
    padding: 24px 22px 0;
  }

  .pricing-enterprise a {
    width: 100%;
  }

  .pricing-enterprise figure {
    height: 150px;
  }

  .pricing-enterprise figure img {
    left: auto;
    right: -70px;
    top: -12px;
    width: 420px;
    height: auto;
  }

  .pricing-compare {
    min-height: 980px;
    gap: 42px;
    margin-top: 160px;
  }

  .pricing-compare h2,
  .pricing-faq h2 {
    font-size: 34px;
    line-height: 1.1;
  }

  .pricing-faq-list {
    margin-top: 50px;
  }

  .pricing-faq .t-acc-head {
    font-size: 15px;
    line-height: 1.35;
  }

  .pricing-book {
    min-width: 0;
    width: 100%;
    gap: 14px;
    font-size: 17px;
  }
}

/* ================================================================
   transitions.dev motion (skill: transitions-dev)
   Hero texts reveal, sliding tab pills, FAQ accordions, mobile menu
   dropdown, pricing number pop-in + period text swap.
   ================================================================ */
:root{
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;

  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
}

/* ---- Texts reveal: hero copy ---- */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
/* The action rows stay flex rows while they reveal. */
.main-hero-actions.t-stagger-line{display:flex;}

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* ---- Tabs sliding: order features, Back Office picker, pricing billing ----
   The bars keep their Figma styling; the pill replaces the active fill once
   JS has measured it (.has-pill), so the static look is unchanged. */
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  width: 0;
  background: var(--tabs-pill-bg, #ffffff);
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}
.main-feature-tabs,.main-section-tabs,.pricing-toggle{position:relative;}
.main-feature-tabs button,.main-section-tabs button,.pricing-toggle button{position:relative;z-index:1;}
.main-feature-tabs{--tabs-pill-bg:rgba(0,0,0,.1);}
.main-section-tabs{--tabs-pill-bg:#ffe9d5;}
.pricing-toggle{--tabs-pill-bg:#fff;}
.main-feature-tabs.has-pill button.active,
.home-figma-page .main-section-tabs.has-pill button.active,
.pricing-toggle.has-pill button.on{background:transparent;}
.pricing-toggle button{transition:color var(--tabs-dur) var(--tabs-ease);}

@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .pricing-toggle button { transition: none !important; }
}

/* ---- Accordion expand: homepage + pricing FAQ ---- */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron {
  transform: scaleY(-1);
}
/* Homepage FAQ keeps its Figma plus, which turns into a cross on the same timing. */
.t-acc-plus{transition:transform var(--acc-chevron) var(--acc-ease);}
.t-acc[data-open="true"] .t-acc-plus{transform:rotate(45deg);}
.t-acc-head{
  width:100%;margin:0;padding:0;border:0;background:transparent;color:inherit;
  font:inherit;text-align:left;cursor:pointer;
}
.t-acc-head:focus-visible{outline:2px solid #ff5e0c;outline-offset:4px;border-radius:12px;}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron, .t-acc-plus {
    transition: none !important;
  }
}

/* ---- Menu dropdown: mobile navigation ---- */
.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity   var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
.t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
.t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity   var(--dropdown-close-dur) var(--dropdown-ease);
}
/* The menu stays laid out so it can animate; hide it from focus and hit
   testing whenever it is neither open nor closing. */
.mobile-menu.t-dropdown{display:flex;}
.mobile-menu.t-dropdown:not(.is-open):not(.is-closing){visibility:hidden;}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* ---- Number pop-in: pricing amounts ---- */
@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}

.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
/* Keep the thousands separator ("10 300") at its real width. */
.pricing-price .t-digit-group{white-space:pre;}

@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* ---- Text states swap: pricing period line ---- */
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
.pricing-period.t-text-swap{display:block;}

@media (prefers-reduced-motion: reduce) {
  .t-text-swap { transition: none !important; }
}

/* ---- Learn more hover (transitions.dev 24) on CTA arrows: header CTA, hero "Try for free",
   "Talk to sales". The chevron nudges right and its arms spread while a shaft draws in behind it,
   so the chevron becomes a full arrow on hover (owner, 2026-10-02). ---- */
:root {
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }

.cta-arrow{--learn-shift:3px;position:relative;z-index:2;flex:none;width:16px;height:16px;}
.cta-arrow svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cta-arrow-shaft{transform-box:view-box;transform-origin:10px 8px;transform:scaleX(0);opacity:0;vector-effect:non-scaling-stroke;
  transition:transform var(--learn-out) var(--learn-ease),opacity var(--learn-out) var(--learn-ease);}
.t-learn:hover .cta-arrow-shaft{transform:scaleX(1);opacity:1;transition-duration:var(--learn-in);}

@media (prefers-reduced-motion: reduce) {
  .t-learn-chevron, .t-learn-arm, .cta-arrow-shaft { transition: none !important; }
}

/* Translated feature copy must wrap within its card and comparison grid. */
.pricing-includes p,.pricing-includes li{white-space:normal;min-width:0;line-height:1.45;}
.pricing-includes{min-width:0;max-width:100%;}
.pricing-compare>*{min-width:0;max-width:100%;}
.mm-btn{min-width:0;white-space:normal;text-align:center;line-height:1.2;}
:lang(hy) .pricing-hero h1{font-family:var(--sans);line-height:1.15;}
@media(max-width:640px){
  :lang(hy) .pricing-compare h2{font-size:clamp(24px,7.1vw,34px);overflow-wrap:anywhere;}
}

/* Keep longer localized navigation labels readable. */
.main-brand,.main-brand img,.main-brand span{flex-shrink:0;}
html:not(:lang(en)) .main-nav .orange-glow-small{width:auto;flex-shrink:0;}
html:not(:lang(en)) .main-nav .main-links{margin-left:20px;}
html:not(:lang(en)) .main-nav .main-links>a,html:not(:lang(en)) .main-nav .biz-trigger{padding-inline:9px;font-size:15px;}
html:not(:lang(en)) .main-nav .main-login{padding-inline:16px;min-width:90px;}
html:not(:lang(en)) .main-nav .main-nav-actions{gap:10px;}
@media(max-width:1280px){
  html:not(:lang(en)) .main-nav .main-links{display:none;}
  html:not(:lang(en)) .main-nav .main-menu-toggle{display:block;}
}

/* Consistent navigation targets and a business-only dropdown. */
.main-links>a,.main-links .biz-trigger{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;height:40px;line-height:24px;padding:8px 20px;}
#bizPanel{width:min(720px,var(--biz-width,720px));padding:28px;}
#bizPanel .mega-cols{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px;gap:24px;}
.nav-mega p.mega-title{margin-top:0;margin-bottom:0;}
.pricing-book{min-width:0;max-width:100%;height:auto;min-height:64px;gap:16px;padding:18px 24px;text-align:center;text-decoration:none;}
.pricing-book span{line-height:1.35;}
.plan-comparison.pricing-compare{display:grid;width:min(1140px,calc(100% - 40px));margin:112px auto 0;gap:32px;}
.compare-eyebrow{text-align:center;color:#e65c16;font-weight:700;font-size:14px;margin:0 0 12px;}
.compare-intro{text-align:center;color:#777;margin:18px 0 0;}
.compare-scroll{width:100%;overflow:auto;border:1px solid #e9e9eb;border-radius:24px;}
.compare-grid{border-collapse:collapse;width:100%;min-width:610px;font-size:15px;}
.compare-grid th,.compare-grid td{padding:18px 24px;border-bottom:1px solid #e9e9eb;text-align:center;}
.compare-grid th:first-child{text-align:left;width:46%;}
.compare-grid thead{background:#191919;color:white;}
.compare-grid thead th{font-size:18px;padding-block:24px;}
.compare-grid tbody th{font-weight:500;}
.compare-grid .compare-group th{background:#f5f5f7;font-weight:750;color:#6b6b70;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding-block:14px;}
.compare-grid td:nth-child(3){background:#fff8f2;}
.compare-yes{font-size:22px;color:#178340;}.compare-no{color:#b0b0b5;}
.compare-enterprise{display:flex;align-items:center;gap:24px;width:100%;padding:24px;border-radius:20px;background:#f5f5f7;}
.compare-enterprise strong{font-size:22px;}.compare-enterprise p{flex:1;color:#65656b;font-size:14px;line-height:1.5;margin:0;}.compare-enterprise a{font-size:14px;font-weight:700;text-decoration:underline;}
@media(max-width:760px){.plan-comparison.pricing-compare{margin-top:64px;}.plan-comparison h2{font-size:32px;line-height:1.15;}.compare-enterprise{align-items:flex-start;flex-direction:column;gap:12px;}.compare-grid th,.compare-grid td{padding:16px;}}

.compare-hint{display:none}@media(max-width:760px){.compare-hint{display:block;margin:0 0 -18px;text-align:center;font-size:12px;color:#777}}