/* ==========================================================================
   VibeMagic · hero.css
   Hero (poster 4 + poster 1): mesh-gradient shader + sparkle dust behind a
   centred stack: brand line, giant 2-line headline with an orbit ring that
   passes behind / in front of "מרעיון", a twinkling 4-point sparkle, a tapered
   gradient swoosh, the morphing rotator, the big pill CTA, a glass proof bar
   and a scroll hint. Then the tools marquee band.
   21st.dev ports styled here: Mesh Gradient · Purple (paper-design), Sparkles
   (Aceternity), Particles / Morphing Text / Marquee (Magic UI).
   Hidden entrance states live under html.js only and have a CSS failsafe.
   ========================================================================== */

/* ---------- local tokens ---------- */
.hero {
  --hero-title: clamp(2.95rem, 12vw, 8.9rem);
  --hero-grad: var(--grad-headline);
  --hero-comet: #FFF7EA;
  --hero-comet-glow: rgba(255, 166, 0, .85);
  --hero-ring-glow: rgba(252, 184, 40, .55);
  --hero-fb:
    radial-gradient(55% 48% at 12% 18%, rgba(109, 4, 160, .55), transparent 70%),
    radial-gradient(48% 44% at 88% 22%, rgba(200, 5, 254, .32), transparent 70%),
    radial-gradient(40% 36% at 80% 86%, rgba(203, 146, 3, .22), transparent 70%),
    radial-gradient(52% 46% at 16% 88%, rgba(76, 4, 124, .5), transparent 70%);
}
[data-theme="light"] .hero {
  --hero-grad: var(--grad-text-light); /* gradient TEXT on white: gold end >= 3:1 (core.css token) */
  --hero-comet: #B21FE6;
  --hero-comet-glow: rgba(200, 5, 254, .35);
  --hero-ring-glow: rgba(252, 179, 40, .5);
  --hero-fb:
    radial-gradient(52% 46% at 12% 16%, rgba(255, 226, 165, .95), transparent 70%),
    radial-gradient(48% 44% at 90% 20%, rgba(245, 201, 252, .9), transparent 70%),
    radial-gradient(42% 38% at 82% 88%, rgba(254, 230, 172, .85), transparent 70%),
    radial-gradient(50% 44% at 14% 86%, rgba(249, 227, 252, .85), transparent 70%);
}

/* ---------- section ---------- */
.hero {
  position: relative;
  z-index: var(--z-content);
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) clamp(96px, 13vh, 132px);
  overflow: hidden;
  overflow: clip;
  --hero-fade: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
/* CSS fallback / underlay for the shader; like the canvas it fades out at the bottom so the
   hero melts into the page (and the global ambient blobs) without a seam */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--hero-fb), var(--bg);
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
}

/* layers (inside the hero's own stacking context) */
.hero__shader,
.hero__sparkles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__shader {
  z-index: 0;
  opacity: 0;
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
  transition: opacity 1.8s var(--ease-out);
  transform-origin: 50% 0;
}
.hero__shader.is-on { opacity: 1; }
.hero--no-gl .hero__shader { display: none; }
.hero__sparkles {
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
}
.hero__veil {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  /* dims the nebula behind the proof bar, then hands over to the mask at the very bottom */
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--bg) 62%, transparent) 62%, transparent 100%);
}
.hero .brackets {
  z-index: 3;
  inset: calc(var(--nav-h) + clamp(18px, 3vw, 36px)) clamp(14px, 3vw, 40px) clamp(14px, 3vw, 40px);
}
.hero > .plus { z-index: 3; }

/* ---------- content stack ---------- */
.hero__inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 3.2vh, 38px);
}
.hero__brand .eyebrow {
  padding-left: .48em; /* balances the trailing letter-spacing (the eyebrow is LTR) */
  color: var(--text);
}
.hero__brand .tagline {
  font-size: clamp(.82rem, 1.05vw, .95rem);
  color: var(--text-2);
}

/* headline */
.hero__title {
  display: grid;
  justify-items: center;
  font-size: var(--hero-title);
  line-height: .98;
  letter-spacing: -.015em;
}
.hero__line {
  position: relative;
  display: block;
  white-space: nowrap;
}
.hero__line--1 {
  isolation: isolate;
  color: var(--text);
  padding-inline: .06em;
}
.hero__word {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.hero__line--2 {
  margin-top: .02em;
  padding-inline: .08em;
}
.hero__line--2 .grad-text {
  background-image: var(--hero-grad);
  padding-block: .06em .1em;
}
/* while SplitText runs, each char carries a slice of the gradient (set by hero.js) */
.hero__line--2 .grad-text.is-split { background: none; }
.hero__line--2 .grad-text.is-split .hero-ch {
  background-image: var(--hero-grad);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-ch { display: inline-block; will-change: transform, opacity, filter; }

/* orbit ring: one copy behind the word (top arc), one in front (bottom arc) */
.hero__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148%;
  max-width: none; /* the global svg reset (max-width:100%) would squeeze the ring to the word's width */
  height: .56em;
  translate: -50% -52%;
  rotate: -4deg;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  clip-path: inset(-20% -10% 50% -10%);
  filter: drop-shadow(0 0 calc(5px * var(--glow-a)) var(--hero-ring-glow));
}
.hero__orbit--front {
  z-index: 2;
  clip-path: inset(50% -10% -20% -10%);
}
.hero__orbit ellipse { fill: none; }
.hero__orbit-ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
html.js .hero:not(.hero--in) .hero__orbit-ring { stroke-dashoffset: 1; }
.hero__orbit-comet {
  stroke: var(--hero-comet);
  stroke-dasharray: .075 .925;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 calc(4px + 4px * var(--glow-a)) var(--hero-comet-glow));
}
.hero.is-orbiting .hero__orbit-comet {
  opacity: 1;
  animation: hero-comet 6.5s linear infinite;
  transition: opacity .8s var(--ease-out);
}
@keyframes hero-comet { to { stroke-dashoffset: 0; } }

/* 4-point sparkle at the top-start corner of line 1 */
.hero__sparkle {
  position: absolute;
  z-index: 3;
  top: -.26em;
  inset-inline-start: -.3em;
  font-size: .4em;
  pointer-events: none;
  /* poster 1: ink outline on white (inherited into the <use> shadow tree); none on dark */
  stroke: var(--ink);
  stroke-width: calc(4.5 * (1 - var(--glow-a)));
  stroke-linejoin: round;
  transition: opacity .5s var(--ease-out), scale 1s var(--ease-spring), rotate 1.2s var(--ease-out);
}
html.js .hero:not(.hero--in):not(.is-spark) .hero__sparkle { opacity: 0; scale: 0; rotate: -120deg; }

/* swoosh under line 2 (sized off the headline, so it scales with it) */
.hero__swoosh {
  font-size: var(--hero-title);
  width: min(4.7em, 90%);
  height: .3em;
  margin-top: .02em;
  margin-inline: auto;
}
html.js .hero:not(.hero--in) .hero__swoosh { clip-path: inset(0 0 0 100%); }

/* rotator: "בונים יחד" + Magic UI Morphing Text */
.hero__rotator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: .32em;
  margin-top: clamp(16px, 2.6vh, 30px);
  font-size: clamp(1.32rem, 2.5vw, 2.05rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-2);
}
.hero__rotator .morph {
  position: relative;
  display: inline-block;
  height: 1.25em;
  min-width: 4em;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  transition: width 1.1s var(--ease-in-out);
}
.morph.is-gooey { filter: url(#vm-threshold) blur(.6px); }
.morph__t {
  position: absolute;
  inset-inline: -.5em;
  top: 0;
  margin: auto;
  display: block;
  text-align: center;
  white-space: nowrap;
  background-image: var(--hero-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-inline: .5em;
}
.morph__m {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  inset-inline-start: 0;
  top: 0;
  pointer-events: none;
}

.hero__lead {
  max-width: 50ch;
  margin-top: clamp(12px, 2vh, 20px);
  color: var(--text-2);
}
.hero__lead b { color: var(--text); font-weight: 800; }
/* keep the punchline in one piece where there is room for it */
@media (min-width: 420px) { .hero__lead b { white-space: nowrap; } }

/* CTAs */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  margin-top: clamp(24px, 3.6vh, 42px);
}
.hero__ctas .btn--ghost { padding-block: 1em; }
.hero__ctas .btn--ghost .i { transition: translate .4s var(--ease-out); }
.hero__ctas .btn--ghost:hover .i { translate: 0 3px; }

/* proof bar: glass, three cells separated by hairlines */
.hero__proof {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin: clamp(28px, 4.6vh, 56px) 0 0;
  padding: 6px;
  list-style: none;
  border-radius: 24px;
  background: var(--surface-glass);
  border: 1px solid var(--card-border);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: var(--shadow);
}
.hero__proof li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 12px clamp(18px, 2.6vw, 34px);
}
.hero__proof li + li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-strong), transparent);
}
.hero__proof b {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  background-image: var(--hero-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-block: .04em;
}
.hero__proof span {
  font-size: .84rem;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
}

/* scroll hint: pinned to the inline-end corner of the FIRST viewport (the hero itself can be taller) */
.hero__scroll {
  position: absolute;
  z-index: 4;
  inset-inline-end: clamp(22px, 3.6vw, 56px);
  /* RTL: inline-end is the left edge; stay clear of a landscape notch */
  inset-inline-end: max(clamp(22px, 3.6vw, 56px), calc(env(safe-area-inset-left, 0px) + 12px));
  top: calc(100vh - 168px);
  top: calc(100svh - 168px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  transition: color .3s;
}
.hero__scroll .eyebrow {
  font-size: .6rem;
  letter-spacing: .42em;
  writing-mode: vertical-rl;
  padding-bottom: .42em;
}
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: var(--line-strong);
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, #FFA600 45%, #C805FE 70%, transparent);
  translate: 0 -100%;
  animation: hero-scroll 2.4s var(--ease-in-out) infinite;
}
@keyframes hero-scroll { to { translate: 0 100%; } }
.hero__scroll:hover { color: var(--text); }
.hero.hero--in .hero__scroll { transition: color .3s, opacity .5s var(--ease-out), translate .6s var(--ease-out), visibility 0s; }
/* once faded it is really gone (no invisible focus target), and comes back at once on the way up */
.hero.is-scrolled .hero__scroll {
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  visibility: hidden;
  transition: color .3s, opacity .5s var(--ease-out), translate .6s var(--ease-out), visibility 0s .5s;
}

/* loops pause while the hero is off screen */
.hero.is-off .hero__orbit-comet,
.hero.is-off .hero__scroll-line::after,
.hero.is-off .hero__sparkle,
.hero.is-off .beam::after { animation-play-state: paused; }

/* ---------- entrance (hidden states, html.js only) ---------- */
html.js .hero:not(.hero--in) [data-hero-in],
html.js .hero:not(.hero--in) .hero__title,
html.js .hero:not(.hero--in) .hero__scroll { opacity: 0; }

/* CSS failsafe: if hero.js never takes over, show everything after the intro failsafe */
html.js .hero:not(.hero--ready) :is([data-hero-in], .hero__title, .hero__scroll, .hero__swoosh, .hero__sparkle) {
  animation: hero-failsafe .8s var(--ease-out) 7.5s forwards;
}
html.js .hero:not(.hero--ready) .hero__orbit-ring { animation: hero-failsafe-ring 1s var(--ease-out) 7.5s forwards; }
@keyframes hero-failsafe { to { opacity: 1; clip-path: inset(0 0 0 0); scale: 1; rotate: 0deg; } }
@keyframes hero-failsafe-ring { to { stroke-dashoffset: 0; } }

/* no-GSAP fallback: plain CSS transitions once .hero--in lands */
.hero--css [data-hero-in],
.hero--css .hero__title,
.hero--css .hero__scroll { transition: opacity 1s var(--ease-out); }
.hero--css .hero__swoosh { transition: clip-path 1.1s var(--ease-out) .3s; }
.hero--css .hero__orbit-ring { transition: stroke-dashoffset 1.6s var(--ease-in-out) .2s; }

/* reduced motion: final states, no loops */
.hero.is-reduced .hero__sparkle,
.hero.is-reduced .hero__scroll-line::after,
.hero.is-reduced .hero__orbit-comet { animation: none; }
.hero.is-reduced .hero__orbit-comet { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .hero {
    --hero-title: clamp(2.5rem, 15.6vw, 5.2rem);
    padding-block: calc(var(--nav-h) + 34px) 72px;
    align-items: start;
  }
  .hero__brand { gap: 10px; margin-bottom: 22px; }
  .hero__brand .eyebrow { font-size: .62rem; letter-spacing: .4em; padding-left: .4em; }
  .hero__brand .tagline { letter-spacing: .22em; }
  .hero__orbit { width: 146%; }
  .hero__sparkle { inset-inline-start: -.2em; top: -.3em; }
  .hero__swoosh { width: min(4.9em, 94%); }
  .hero__rotator { font-size: clamp(1.18rem, 5.4vw, 1.5rem); }
  .hero__lead { font-size: 1.06rem; }
  .hero__ctas { width: 100%; flex-direction: column; gap: 12px; }
  .hero__ctas .cta-pill { width: min(100%, 380px); justify-content: space-between; grid-template-columns: 1fr auto; }
  .hero__ctas .btn--ghost { width: min(100%, 380px); }
  .hero__proof {
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    padding: 4px;
  }
  .hero__proof li { flex: 1 1 0; padding: 12px 6px; }
  .hero__proof span { white-space: normal; font-size: .8125rem; line-height: 1.3; }
  .hero__scroll { display: none; }
  .hero .plus { display: none; }
}
/* narrow phones: a little more room per proof cell so no label breaks onto a third line */
@media (max-width: 380px) {
  .hero__proof li { padding-inline: 3px; }
  .hero__proof span { font-size: .78rem; }
}
@media (max-width: 340px) {
  .hero { --hero-title: 2.6rem; }
}
/* shorter desktop screens (laptops, 1080p windows): the title follows the viewport height and the
   gaps tighten, so the whole stack (proof bar included) lands inside the first screen */
@media (min-width: 721px) and (max-height: 1060px) and (orientation: landscape) {
  .hero {
    --hero-title: clamp(2.9rem, min(12vw, 13.2vh), 8.9rem);
    padding-top: calc(var(--nav-h) + clamp(18px, 2.6vh, 30px));
  }
  .hero__brand { margin-bottom: clamp(12px, 1.6vh, 18px); }
  .hero__rotator { margin-top: clamp(10px, 1.4vh, 16px); }
  .hero__ctas { margin-top: clamp(18px, 2.4vh, 28px); }
  .hero__proof { margin-top: clamp(18px, 2.4vh, 28px); }
}
/* too short for the proof bar to fit whole: drop it (its numbers repeat in #about) rather than slice
   it at the fold, and give the freed room back to the title (wide screens set a taller stack) */
@media (min-width: 721px) and (max-height: 799.98px), (min-width: 1360px) and (max-height: 829.98px) {
  .hero { --hero-title: clamp(2.9rem, min(8.6vw, 15vh), 7.4rem); }
  .hero__proof { display: none; }
}

/* ==========================================================================
   Marquee (Magic UI "Marquee"): duplicate groups, each translating one group
   width + gap per loop, so the seam can never show. RTL: content enters from
   the reading side (left) and travels right.
   ========================================================================== */
.marquee {
  --duration: 46s;
  --gap: clamp(1.4rem, 2.8vw, 2.6rem);
  --tilt: -2deg;
  position: relative;
  z-index: var(--z-content);
  overflow: hidden;
  padding-block: clamp(30px, 4.4vw, 60px);
  margin-top: clamp(-40px, -3vw, -16px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-user-select: none;
  user-select: none;
}
.marquee__track {
  position: relative;
  display: flex;
  gap: var(--gap);
  padding-block: clamp(16px, 1.9vw, 24px);
  rotate: var(--tilt);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.marquee__track::before,
.marquee__track::after {
  content: '';
  position: absolute;
  inset-inline: -20vw;
  height: 1px;
  background: var(--grad-swoosh);
  opacity: .75;
}
.marquee__track::before { top: 0; }
.marquee__track::after { bottom: 0; }
[data-theme="dark"] .marquee__track::before,
[data-theme="dark"] .marquee__track::after { box-shadow: 0 0 10px rgba(221, 84, 253, .55); }
.marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee var(--duration) linear infinite;
  will-change: transform;
}
[dir="rtl"] .marquee__group { animation-name: marquee-rtl; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(calc(100% + var(--gap))); } }

.marquee__group li {
  display: flex;
  align-items: center;
  gap: var(--gap);
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.3vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  white-space: nowrap;
  color: var(--text);
  transition: color .35s var(--ease-out);
}
/* outline names: a plain rgba token, no color-mix() (an unsupported color-mix inside a var()-bearing
   declaration would leave the stroke at 0px and the names invisible on older Safari) */
.marquee { --marquee-stroke: rgba(10, 10, 11, .78); }
[data-theme="dark"] .marquee { --marquee-stroke: rgba(253, 253, 253, .78); }
.marquee__group li:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--marquee-stroke);
}
/* gradient 4-point star separator */
.marquee__group li::after {
  content: '';
  flex: none;
  width: .5em;
  height: .5em;
  background: linear-gradient(45deg, #F8C966 0%, #FED2AF 45%, #E87DF4 75%, #DD58F3 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C53 33 67 47 100 50C67 53 53 67 50 100C47 67 33 53 0 50C33 47 47 33 50 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C53 33 67 47 100 50C67 53 53 67 50 100C47 67 33 53 0 50C33 47 47 33 50 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-theme="light"] .marquee__group li::after {
  background: linear-gradient(45deg, #E89100 0%, #F29A1F 35%, #EE5FA8 60%, #9B00D6 100%);
}

@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__group { animation-play-state: paused; }
  .marquee__group li:hover {
    color: transparent;
    -webkit-text-stroke: 0;
    background-image: var(--grad-headline);
    -webkit-background-clip: text;
    background-clip: text;
  }
  [data-theme="light"] .marquee__group li:hover { background-image: var(--grad-text-light); }
}
.marquee.is-off .marquee__group { animation-play-state: paused; }
.marquee.is-reduced .marquee__group { animation: none; }

@media (max-width: 720px) {
  .marquee { --tilt: -2.4deg; --duration: 38s; margin-top: -8px; }
  .marquee__group li:nth-child(even) { -webkit-text-stroke-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__group { animation: none; }
  .hero__sparkle,
  .hero__scroll-line::after,
  .hero__orbit-comet { animation: none; }
}

/* the hero's single action (2026-10): "תפריט" opens the menu, styled as the primary pill */
.hero__menu {
  --btn-pad-y: 1em;
  --btn-pad-x: 2.2em;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--pill-text);
  border: 2px solid transparent;
  background: linear-gradient(var(--pill-bg), var(--pill-bg)) padding-box, var(--grad-cta) border-box;
  box-shadow: -12px 0 30px -8px rgba(255, 166, 0, .35), 12px 0 30px -8px rgba(217, 22, 227, .4), var(--shadow);
}
.hero__menu:hover { box-shadow: -16px 0 40px -6px rgba(255, 166, 0, .5), 16px 0 40px -6px rgba(217, 22, 227, .55), var(--shadow); }
.hero__menu .i { width: 1.3em; height: 1.3em; }
@media (max-width: 720px) { .hero__ctas .hero__menu { width: min(100%, 380px); } }