/* ===========================================================================
   /v2 HEADER + MEGAMENUS. Namespaced .v2hd/.v2mm - shared meganav untouched.
   FIXED bar, truly transparent over the dark hero (hero content and rings show
   through), solid glass once scrolled past (.at-hero removed by v2.js; solid
   is the no-JS default so text is always legible). Menu sits START-aligned by
   the logo; actions at the inline-end. The Start-free CTA is PLAIN TEXT.
   RULE A inside the menus: items separated by spacing + type only.
   =========================================================================== */
.v2-sentinel{position:absolute;top:0;left:0;width:1px;height:76px;pointer-events:none;opacity:0}
.v2hd{position:fixed;top:0;inset-inline:0;z-index:70;background:rgba(246,250,253,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
 transition:background .35s var(--ez),border-color .35s,backdrop-filter .35s}
.v2hd-in{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4.5vw,90px);height:70px;display:flex;align-items:center;gap:clamp(16px,2.2vw,38px)}
.v2hd-brand{display:inline-flex;direction:ltr;align-items:center;gap:9px;font:800 21px/1 var(--head);color:var(--ink);flex:0 0 auto}
/* Open Beta tag (Avni 2026-08-20): small, tag-like, baseline-aligned with the
   wordmark; quiet aqua chip that flips to translucent white over the dark hero */
.v2hd-beta{align-self:center;margin-inline-start:2px;padding:3px 7px;border-radius:999px;
  font:700 9.5px/1 var(--body,'Figtree',sans-serif);letter-spacing:.07em;text-transform:uppercase;
  color:#0E7490;background:rgba(6,182,212,.10);border:1px solid rgba(6,182,212,.30)}
.v2hd.at-hero .v2hd-beta{color:#A5F3FC;background:rgba(255,255,255,.08);border-color:rgba(165,243,252,.35)}
/* the Yetty GRADIENT mark: aqua -> pink WIDE BLEND (canonical 90deg, aqua
   0/20% -> #FF4D8D 80/100%; never mirrors RTL); transparent centre via
   border-mask. The border stays transparent so the gradient shows. */
.v2hd-ring{width:22px;height:22px;border-radius:50%;border:2.5px solid transparent;flex:0 0 auto;
  background:linear-gradient(90deg,var(--aqua) 0%,var(--aqua) 20%,#FF4D8D 80%,#FF4D8D 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:transform .3s var(--ez)}
.v2hd-brand:hover .v2hd-ring{transform:rotate(90deg)}
/* OPTICAL ALIGNMENT (Avni 2026-08-16, measured on rendered pixels @2x):
   every text item in the bar sits on the WORDMARK's baseline (nav labels,
   Pricing, lang, Sign in, Start free were ~3px high - box-centering lies when
   font sizes mix); the ring centers on the capital-Y CAP mass, not the
   descender-dragged bounding box; carets ride down to the label x-height.
   `translate` composes with the existing `transform`s, so hover rotations
   and RTL arrow flips are untouched. */
.v2hd-link,.v2hd-top,.v2hd-signin,.v2hd-cta{translate:0 3px}
.v2hd-ring{translate:0 -1px}
.v2hd-top .car{translate:0 -.5px}
.v2hd-nav{display:flex;align-items:center;gap:clamp(2px,.6vw,8px);font:700 14px/1 var(--head)}
.v2hd-item{position:relative}
.v2hd-link,.v2hd-top{appearance:none;background:none;border:0;cursor:pointer;font:700 14px/1 var(--head);color:var(--mut);white-space:nowrap;padding:10px 13px;border-radius:10px;display:inline-flex;align-items:center;gap:7px;transition:color .2s}
/* How it works: top-level only when the bar has room (CTA clips below ~1160) */
@media(max-width:1160px){.v2hd-how{display:none}}
.v2hd-link:hover,.v2hd-top:hover,.v2hd-item.open .v2hd-top{color:var(--ink)}
.v2hd-top .car{width:7px;height:7px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ez);opacity:.55}
.v2hd-item.open .v2hd-top .car{transform:rotate(225deg) translateY(-1px)}
.v2hd-acts{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(16px,1.8vw,28px);flex:0 0 auto}
.v2hd-signin{font:700 14px/1 var(--head);color:var(--mut);white-space:nowrap;transition:color .2s}
.v2hd-signin:hover{color:var(--ink)}
/* Start free: PLAIN TEXT (no pill) - subtle arrow slides on hover */
.v2hd-cta{display:inline-flex;align-items:center;gap:7px;font:700 14.5px/1 var(--head);color:var(--aqua2);white-space:nowrap;transition:color .2s}
.v2hd-cta i{font-weight:300;font-size:12px;transition:translate .2s var(--ez)}
.v2hd-cta:hover{color:var(--ink)}
.v2hd-cta:hover i{translate:3px 0}
[dir="rtl"] .v2hd-cta i{transform:scaleX(-1)}
[dir="rtl"] .v2hd-cta:hover i{translate:-3px 0}

/* transparent over the hero: NO ground at all */
.v2hd.at-hero{background:transparent;border-color:transparent;backdrop-filter:none}
.v2hd.at-hero .v2hd-brand{color:#fff}
/* over the hero, keep the border TRANSPARENT so the aqua->pink gradient ring
   shows through the mask (setting a solid border-color painted a cyan-only
   ring - the pink half was hidden). Fixed Avni 2026-08-18. */
.v2hd.at-hero .v2hd-ring{border-color:transparent}
.v2hd.at-hero .v2hd-link,.v2hd.at-hero .v2hd-top,.v2hd.at-hero .v2hd-signin{color:rgba(255,255,255,.82)}
.v2hd.at-hero .v2hd-link:hover,.v2hd.at-hero .v2hd-top:hover,.v2hd.at-hero .v2hd-signin:hover,
.v2hd.at-hero .v2hd-item.open .v2hd-top{color:#fff}
.v2hd.at-hero .v2hd-cta{color:#fff}
.v2hd.at-hero .v2hd-cta:hover{color:var(--cyan)}

/* ---- megamenus: generous navy-glass panels, big bold energy -------------- */
.v2mm{position:absolute;top:calc(100% + 12px);inset-inline-start:0;width:min(880px,calc(100vw - 48px));z-index:71;
 border-radius:26px;padding:clamp(26px,2.2vw,38px);overflow:hidden;
 background:rgba(7,21,33,.95);backdrop-filter:blur(20px);
 box-shadow:0 48px 110px -26px rgba(0,0,0,.75),0 0 70px -20px rgba(6,182,212,.35);
 opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;
 transition:opacity .22s var(--ez),transform .22s var(--ez),visibility .22s}
.v2hd-item.open .v2mm{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.v2mm::before{content:"";position:absolute;inset:0 0 auto 0;height:2.5px;background:linear-gradient(90deg,var(--aqua),var(--pink));opacity:.9}
.v2mm::after{content:"";position:absolute;width:360px;height:360px;inset-inline-end:-150px;bottom:-170px;border-radius:50%;border:38px solid rgba(34,211,238,.06);pointer-events:none}
/* colored panel variants - premium light-on-color */
.v2mm.tint-a{background:linear-gradient(160deg,#0B4B62,#072435 70%)}
.v2mm.tint-a::after{border-color:rgba(103,232,249,.10)}
.v2mm.tint-p{background:linear-gradient(160deg,#6E1140,#1E0A18 70%)}
.v2mm.tint-p::before{background:linear-gradient(90deg,var(--pink),var(--aqua))}
.v2mm.tint-p::after{border-color:rgba(255,131,180,.10)}
.v2mm-cols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px clamp(22px,2vw,40px);z-index:1}
.v2mm.has-feat .v2mm-cols{grid-template-columns:1fr 1fr .9fr}
/* Product megamenu = the feature directory (Edit / Grow / Run + AI card):
   widen so three feature groups plus the AI feature card breathe. Marker class
   set via $MM tint 'mm-prod' in site/inc/v2-chrome.php (the ONE megamenu SSOT,
   consumed by homepage-v2.php too). Desktop-only (mobile nav is a separate
   sheet); anchored inline-start so it is RTL-safe and never pushes past the
   viewport edge. Lives HERE (not v2-pages.css) so the homepage gets it. */
.v2mm.mm-prod{width:min(1140px,calc(100vw - 32px))}
.v2mm.mm-prod .v2mm-cols{grid-template-columns:1fr 1fr 1fr .82fr}
@media(max-width:1080px){.v2mm.mm-prod .v2mm-cols{grid-template-columns:1fr 1fr 1fr}
  .v2mm.mm-prod .v2mm-feat{display:none}}
.v2mm-h{font:800 11.5px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:4px 10px 12px}
.v2mm.tint-p .v2mm-h{color:var(--pink2)}
/* items: NO boxes, NO icon tiles - bare thin icon + type, spacing separates */
.v2mm-a{display:flex;align-items:flex-start;gap:14px;padding:11px 10px;border-radius:12px;transition:translate .2s var(--ez)}
.v2mm-a:hover{translate:4px 0}
[dir="rtl"] .v2mm-a:hover{translate:-4px 0}
/* item icons: ONE calm aqua tone - no even/odd alternation (Avni 2026-08-16,
   same ruling as the mobile sheet); pink stays only on deliberate accents */
.v2mm-a i{flex:0 0 auto;width:22px;text-align:center;margin-top:4px;font-weight:300;font-size:16px;color:#6FB5CC;transition:color .2s}
.v2mm-a:hover i{color:#fff}
.v2mm-a b{display:block;font:700 15px/1.3 var(--head);color:#EAF6FB;transition:color .2s}
.v2mm-a:hover b{color:#fff}
.v2mm-a span{display:block;color:#8FA9BC;font-size:12.5px;line-height:1.4;margin-top:2px}
/* item stagger on open */
.v2mm .v2mm-a{opacity:0;translate:0 6px}
.v2hd-item.open .v2mm .v2mm-a{opacity:1;translate:0 0;transition:opacity .3s var(--ez),translate .3s var(--ez)}
.v2hd-item.open .v2mm .v2mm-a:nth-child(2){transition-delay:.03s}
.v2hd-item.open .v2mm .v2mm-a:nth-child(3){transition-delay:.06s}
.v2hd-item.open .v2mm .v2mm-a:nth-child(4){transition-delay:.09s}
.v2hd-item.open .v2mm .v2mm-a:nth-child(5){transition-delay:.12s}
.v2hd-item.open .v2mm .v2mm-a:hover{translate:4px 0}
[dir="rtl"] .v2hd-item.open .v2mm .v2mm-a:hover{translate:-4px 0}
/* featured card: the panel's one intentional colored block */
.v2mm-feat{position:relative;border-radius:18px;padding:22px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:210px;
 background:linear-gradient(155deg,rgba(6,182,212,.3),rgba(255,77,141,.2) 90%)}
.v2mm-feat .fk{font:800 10.5px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:#9FE8F5}
.v2mm-feat b{font:800 18px/1.22 var(--head);color:#fff;margin:8px 0 6px;display:block}
.v2mm-feat p{color:#C9E4EF;font-size:12.5px;line-height:1.45;margin:0 0 13px}
.v2mm-feat .fcta{font:700 13px/1 var(--head);color:#fff;display:inline-flex;align-items:center;gap:7px}
.v2mm-feat .flogos{display:flex;gap:11px;margin:5px 0 11px;color:#CFF3FB}
.v2mm-feat .flogos svg{width:17px;height:17px;opacity:.9}
/* ---- language selector: globe + code, navy-glass dropdown (RULE A inside:
   spacing + type only). Works over both header states; RTL via logical
   properties; keyboard = same toggle contract as the megamenus. ---- */
.v2hd-lang{position:relative}
@media(max-width:860px){.v2hd-lang{display:none}} /* mobile: lives in the More sheet */
.v2hd-lang .v2hd-top i{font-weight:300;font-size:15px}
.v2hd-lang .v2hd-top span:not(.car){font:700 12.5px/1 var(--head);letter-spacing:.04em}
.v2lmenu{position:absolute;top:calc(100% + 12px);inset-inline-end:0;min-width:200px;z-index:71;
 border-radius:16px;padding:10px;overflow:hidden;
 background:rgba(7,21,33,.95);backdrop-filter:blur(20px);
 box-shadow:0 40px 90px -24px rgba(0,0,0,.7),0 0 50px -18px rgba(6,182,212,.3);
 opacity:0;transform:translateY(10px);visibility:hidden;pointer-events:none;
 transition:opacity .2s var(--ez),transform .2s var(--ez),visibility .2s}
.v2lmenu::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--aqua),var(--pink));opacity:.85}
.v2hd-item.open .v2lmenu{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.v2lmenu a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-radius:10px;font:600 13.5px/1.3 var(--body);color:#DCEAF3;transition:background .18s,color .18s}
.v2lmenu a:hover{background:rgba(255,255,255,.06);color:#fff}
.v2lmenu a.on{color:var(--cyan);font-weight:800}
.v2lmenu a .lc{font:600 10.5px/1 var(--mono);color:#5E7A90;text-transform:uppercase;flex:0 0 auto}
.v2lmenu a:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
 .v2hd,.v2hd-ring,.v2hd-cta i,.v2mm,.v2mm .v2mm-a,.v2mm-a i,.v2lmenu{transition:none}
 .v2mm .v2mm-a{opacity:1;translate:none}
}