/* Yelo marketing site — Figma "Home" frame (node 1908:1993). */

/* Self-hosted fonts. PP Agrandir is used under Pangram Pangram's commercial
   license (confirmed) — do not distribute wwwroot/fonts/PPAgrandir*.otf
   outside this licensed project. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Agrandir Text";
  src: url("../fonts/PPAgrandirText-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Agrandir Grand";
  src: url("../fonts/PPAgrandir-GrandHeavy.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Agrandir Wide";
  src: url("../fonts/PPAgrandir-WideBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --yelo-primary: #d6fe03;
  --yelo-primary-text: #d6ff00;
  --yelo-dark: #191a23;
  --yelo-black: #000000;
  --yelo-purple: #9a4eff;
  --yelo-gray-bg: #f3f1ee;
  --yelo-gray-card: #f3f3f3;
  --yelo-footer-bg: #1a1919;
  --yelo-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Text Bold (700) — Figma-confirmed for most display headings/kickers. */
  --yelo-font-display: "PP Agrandir Text", var(--yelo-font-body);
  /* Grand Heavy (800) — Figma-confirmed for "hello yelo" and the CTA's giant heading. */
  --yelo-font-display-heavy: "PP Agrandir Grand", var(--yelo-font-body);
  /* Wide Bold (700) — Figma-confirmed for the hero's main heading ("Bye bye Spinneys points."). */
  --yelo-font-display-wide: "PP Agrandir Wide", var(--yelo-font-body);
  --yelo-radius-sm: 8px;
  --yelo-radius-md: 10px;
  --yelo-radius-lg: 20px;

  /* Single shared rhythm — every section spaces itself from this, so the
     gap between sections stays uniform instead of each having its own
     hand-picked number. Redefined at each breakpoint below; every rule
     that uses it just picks up the new value automatically. */
  --yelo-section-py: 80px;
  --yelo-strip-py: 28px;

  /* Minimum breathing room images/video are guaranteed on mobile/tablet, on EACH side --
     used as calc(100vw - (2 * this)) wherever a rule used to size an image relative to the
     raw viewport (a plain Nvw value ignores its own container's padding, and several of
     these were previously >100vw, deliberately bleeding the image past the screen edge). */
  --yelo-mobile-media-gutter: 20px;
}

@media (max-width: 991.98px) {
  :root {
    --yelo-section-py: 56px;
    --yelo-strip-py: 22px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --yelo-section-py: 40px;
    --yelo-strip-py: 18px;
  }
}

html:has(.yelo-page),
body:has(.yelo-page) {
  margin: 0;
  padding: 0;
}

.yelo-page,
.yelo-page * {
  box-sizing: border-box;
}

.yelo-page {
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  color: var(--yelo-black);
  font-family: var(--yelo-font-body);
}

.yelo-page img {
  display: block;
  max-width: 100%;
}

/* Desktop-only: images with no sizing of their own get a tighter default
   cap. Anything that needs to actually fill its box (fixed-size icons, the
   dining grid tiles, the CTA image) declares its own max-width below so it
   isn't caught by this. */
@media (min-width: 768px) {
  .yelo-page img {
    max-width: 70%;
  }
}

.yelo-shell {
  width: 100%;
  max-width: 1224px;
}

.yelo-page a:focus-visible,
.yelo-page button:focus-visible,
.yelo-page summary:focus-visible {
  outline: 3px solid var(--yelo-purple);
  outline-offset: 4px;
}

/* Buttons */

.yelo-btn {
  display: inline-flex;
  min-width: max-content;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--yelo-radius-sm);
  font-family: var(--yelo-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.yelo-btn:hover {
  opacity: 0.82;
}

.yelo-btn--dark {
  background: var(--yelo-black);
  color: var(--yelo-primary-text);
}

.yelo-btn--lime {
  background: var(--yelo-primary);
  color: var(--yelo-dark);
}

.yelo-btn--outline {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.yelo-nav-backdrop {
  display: none;
}

.yelo-nav__header {
  display: none;
}

.yelo-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 45px;
}

.yelo-nav__cta {
  display: none;
}

/* Header and hero */

.yelo-hero {
  position: relative;
  overflow: hidden;
  background: var(--yelo-primary);
}

.yelo-header {
    position: relative;
    z-index: 10;
    padding-top: 30px;
    padding-bottom: 30px;
    background: var(--yelo-primary);
}

.yelo-header__inner {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 12px;
  padding-left: 12px;
}

.yelo-logo img {
  width: 96px;
  height: 47px;
  max-width: none;
}

.yelo-nav {
  margin: 0;
  padding: 0;
}

.yelo-nav a {
  color: var(--yelo-black);
  font-size: 14px;
  text-decoration: none;
}

/* Scoped to the actual link list (not `.yelo-nav a`, which also matches
   the mobile drawer's Download button — a `.yelo-btn`, and this element's
   class+element specificity would otherwise silently override its
   `display: inline-flex`, the same mistake as the earlier color bug). */
.yelo-nav__links a {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.yelo-nav__links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transition: transform 300ms ease;
}

.yelo-nav__links a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.yelo-header__cta {
  margin-left: auto;
}

.yelo-nav-toggle {
  display: none;
  width: 42px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--yelo-black);
  border-radius: var(--yelo-radius-sm);
  background: transparent;
  cursor: pointer;
}

.yelo-nav-toggle span,
.yelo-nav-toggle span::before,
.yelo-nav-toggle span::after {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--yelo-black);
  content: "";
}

.yelo-nav-toggle span {
  position: relative;
}

.yelo-nav-toggle span::before,
.yelo-nav-toggle span::after {
  position: absolute;
  left: 0;
}

.yelo-nav-toggle span::before {
  top: -6px;
}

.yelo-nav-toggle span::after {
  top: 6px;
}

.yelo-hero__inner {
  position: relative;
  z-index: 1;
}

.yelo-hero__row {
  align-items: flex-start;
}

.yelo-hero__copy {
  position: relative;
  z-index: 2;
  margin-top: 50px;
}

.yelo-hero__copy h1 {
  max-width: 585px;
  margin: 0;
  font-family: var(--yelo-font-display-wide);
  font-size: 76px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.yelo-hero__sub {
  display: block;
  margin-top: 32px;
  font-family: var(--yelo-font-display-heavy);
  font-weight: 800;
}

.yelo-app-card {
  display: inline-flex;
  align-items: center;
  color: black;
  text-decoration: none;
  gap: 14px;
  margin-top: 32px;
  margin-bottom: 20px;
  padding: 12px 20px;
  border-radius: var(--yelo-radius-md);
  background: #ffffff;
}

.yelo-app-card img {
  width: 68px;
  height: 68px;
  max-width: none;
  border-radius: 5px;
}

.yelo-app-card span {
  font-size: 17px;
  font-weight: 600;
}

.yelo-hero__image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.yelo-hero__image img {
  width: 100%;
  max-width: 650px;
  height: auto;
}

/* Hero carousel — the original design only ever had one fixed slide; Slider is CMS-managed and
   can hold any number of rows, so each becomes a slide here. Arrows/dots only render (see the
   view) when there's more than one, and CSS below stays inert with a single slide. */

/* height transitions with JS-measured pixel values on slide change -- see InitHeroSlider in
   home-widgets.js. CSS alone can't animate to/from height:auto, which is what this container
   would otherwise use (only the active slide is ever in flow -- see below). */
.yelo-hero__slides {
  position: relative;
  overflow: hidden;
  transition: height 650ms ease;
}

/* Only the active slide stays in normal flow (position:relative), so the container's height is
   always driven by whichever slide is currently showing -- every other slide sits absolutely
   positioned on top of it, invisible via opacity. top/left/right (not inset, i.e. no `bottom`)
   so an inactive slide keeps its own natural height during a crossfade instead of being
   squashed/stretched to track .yelo-hero__slides' animating height. */
.yelo-hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  display: flex;
  opacity: 0;
  transition: opacity 650ms ease;
  pointer-events: none;
}

.yelo-hero__slide.is-active {
  position: relative;
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .yelo-hero__slide {
    transition: none;
  }

  .yelo-hero__slides {
    transition: none;
  }
}

/* Background Image -- a sibling of .yelo-hero__inner (not nested inside its column), absolutely
   positioned behind .yelo-hero__inner's z-index:1, and never extends up behind .yelo-header
   (that's a separate, earlier sibling in the DOM, untouched by this) -- so the navbar always
   stays on its own solid lime strip regardless of what photo (if any) a slide uses here.
   Capped rather than full-bleed: a photo stretched/cropped edge-to-edge across the whole slide
   overwhelmed the heading and looked oversized for a close-up shot, so this now sits as a
   contained, right-aligned image (object-fit:contain, no cropping) similar in spirit to
   .yelo-hero__image's own capped Overlay Image. Optional: a slide with no Background Image
   simply has no .yelo-hero__bg element at all, leaving .yelo-hero's own flat lime background
   visible. */
.yelo-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 3%;
  pointer-events: none;
}

.yelo-hero__bg img {
  width: auto;
  height: auto;
  max-width: 60%;
  max-height: 92%;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  /* .yelo-hero__slide is a flex row; leaving .yelo-hero__bg absolutely positioned there (as on
     desktop) would overlap the stacked copy, since the slide's height on mobile is just however
     tall .yelo-hero__inner's own content needs. Switching the slide to a column and taking the
     image out of absolute positioning puts it in normal flow, below the text (order:1, after
     .yelo-hero__inner's default order:0) instead of behind/on top of it. */
  .yelo-hero__slide {
    flex-direction: column;
  }

  .yelo-hero__bg {
    position: static;
    inset: auto;
    order: 1;
    width: 100%;
    justify-content: center;
    padding: 8px 0 24px;
  }

  .yelo-hero__bg img {
    max-width: min(320px, calc(100vw - var(--yelo-mobile-media-gutter) * 2));
    max-height: 280px;
  }
}

/* Fixed banner height, desktop only -- keeps the carousel from visibly jumping in height between
   slides that do/don't have a Background Image. Mobile/tablet (see the max-width breakpoints
   below) keep their existing stacked, content-driven auto height instead -- a fixed height there
   would either clip the stacked copy+image or leave a large empty gap. Stretch (not center) the
   inner column full-height so .yelo-hero__image's own align-items:flex-end can push the hand
   photo flush against the slide's bottom edge instead of floating with equal gaps top/bottom. */
@media (min-width: 992px) {
  .yelo-hero__slide.is-active {
    align-items: stretch;
    min-height: 700px;
  }

  .yelo-hero__row {
    height: 100%;
    align-items: stretch;
  }
}

.yelo-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--yelo-black);
  border-radius: 50%;
  background: transparent;
  color: var(--yelo-black);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

.yelo-hero__arrow:hover,
.yelo-hero__arrow:focus-visible {
  background: var(--yelo-black);
  border-color: var(--yelo-black);
  color: var(--yelo-primary);
}

.yelo-hero__arrow--prev {
  left: 12px;
}

.yelo-hero__arrow--next {
  right: 12px;
}

@media (max-width: 767.98px) {
  .yelo-hero__arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* Partners — infinite logo strip */

.yelo-partners {
  padding: var(--yelo-strip-py) 0;
  overflow: hidden;
  background: #ffffff;
}

.yelo-partners__container {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.yelo-partners__track {
  display: flex;
  width: max-content;
  /* animation-duration and the @keyframes' hold/slide stops are both generated client-side, once
     every logo has loaded, by InitPartnersMarquee/buildMarquee in home-widgets.js -- this 24s
     two-stop version is only a fallback in case that script is ever missing. Left PAUSED by
     default (only .is-ready runs it): starting to play immediately with these fallback values
     and then swapping in the real keyframes/duration mid-animation once buildMarquee finishes
     caused a visible jump/gap (a currently-running animation reconciling a totally different
     keyframe shape and duration is not a clean transition) -- staying paused until the accurate
     values are already in place avoids that swap entirely. */
  animation-name: yelo-partners-slide;
  animation-duration: 24s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  will-change: transform;
}

.yelo-partners__track.is-ready {
  animation-play-state: running;
}

/* One complete strip containing every active Brand row -- sized by its own content (not a fixed
   8-item assumption) so the marquee stays seamless no matter how many brands admin has active.
   The track holds two identical groups back to back; translating exactly -50% of the track
   always lands on the start of the second (identical) group. */
.yelo-partners__group {
  display: flex;
  align-items: center;
}

.yelo-partners__item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.yelo-partners__item img {
  width: auto;
  height: auto;
  max-width: 125px;
  max-height: 48px;
  object-fit: contain;
}

/* Fallback only -- the real, item-count-correct "slide then hold at each logo" keyframes (matching
   the reference site's stepped animation, not a continuous scroll) are generated client-side by
   InitPartnersMarquee/buildMarquee in home-widgets.js and override this via a later <style>
   block. This bare two-stop version only applies if that script is somehow missing (and even
   then, .yelo-partners__track stays paused above unless something adds .is-ready). */
@keyframes yelo-partners-slide {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.yelo-partners:hover .yelo-partners__track {
  animation-play-state: paused;
}

@media (max-width: 767.98px) {
  .yelo-partners__item {
    padding: 0 16px;
  }

  .yelo-partners__item img {
    max-width: 150px;
    max-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yelo-partners__track {
    animation: none;
  }

  .yelo-partners__group[aria-hidden="true"] {
    display: none;
  }
}

/* Introduction */

.yelo-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--yelo-section-py) 24px;
  text-align: center;
}

.yelo-intro__gif {
  width: 100%;
  max-width: 70%;
  height: auto;
  margin: 0;
}

@media (min-width: 768px) and (max-width: 992px) {
  .yelo-intro__gif {
    max-width: 80%;
  }
}

.yelo-intro > p {
  max-width: 758px;
  margin: 0 auto 24px;
  font-size: 20px;
  line-height: 1.4;
}

.yelo-intro .yelo-intro__stat {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 700;
}

/* Video */

.yelo-video {
  padding: var(--yelo-section-py) 24px;
  background: var(--yelo-dark);
  text-align: center;
}

.yelo-video__frame {
  display: flex;
  width: min(962px, 100%);
  aspect-ratio: 962 / 508;
  align-items: center;
  justify-content: center;
  margin: 32px auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--yelo-radius-lg);
  background: var(--yelo-gray-card);
  cursor: pointer;
}

.yelo-video__frame {
  background-size: cover;
  background-position: center;
}

.yelo-video__frame img {
  width: clamp(92px, 14vw, 184px);
  max-width: none;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

/* Video lightbox — the demo's play button wasn't wired to anything; this plays
   CustomSetting.HomeVideoUrl over a dark backdrop. */

.yelo-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
}

.yelo-video-lightbox.is-open {
  display: flex;
}

.yelo-video-lightbox__inner {
  position: relative;
  width: min(962px, 100%);
  aspect-ratio: 962 / 508;
}

/* .yelo-video-lightbox__media (the iframe/video's actual parent, one level inside __inner) had no
   rule of its own -- height:auto with nothing inside yet, so it had no definite height for the
   iframe/video's own height:100% below to resolve against, and browsers fall back to the
   default UA size (300x150) for an <iframe> with no other sizing. Never surfaced visually before
   this: a raw (un-embeddable) YouTube share link failed to load a real player at all, so there
   was nothing to see squished. Explicit height:100% here resolves cleanly against __inner's own
   definite height (fixed via aspect-ratio), which is what breaks the chain. */
.yelo-video-lightbox__media {
  width: 100%;
  height: 100%;
}

.yelo-video-lightbox__inner iframe,
.yelo-video-lightbox__inner video {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--yelo-radius-lg);
  background: #000000;
}

.yelo-video-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: var(--yelo-black);
  cursor: pointer;
}

/* Feature sections */

.yelo-feature {
  padding: var(--yelo-section-py) 0;
  background: #ffffff;
}

.yelo-feature__text {
  position: relative;
  z-index: 2;
  padding-left: 40px;
}

.yelo-feature__text--right {
  padding-left: 135px;
}

.yelo-kicker {
  display: inline-flex;
  width: auto;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin: 0 0 25px;
  padding: 0 10px;
  border: 1px solid var(--yelo-black);
  border-radius: var(--yelo-radius-sm);
  background: transparent;
  color: var(--yelo-black);
  font-family: var(--yelo-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}

.yelo-feature__text h3 {
  max-width: 399px;
  margin: 0 0 26px;
  font-family: var(--yelo-font-display);
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.08;
}

.yelo-feature__text > p:not(.yelo-kicker) {
  max-width: 390px;
  margin: 0 0 32px;
  font-size: 20px;
  line-height: 1.4;
}

.yelo-feature__actions {
  display: flex;
  align-items: center;
}

.yelo-feature__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CMS-driven feature sections aren't tied to fixed named slots (any admin-entered row can appear
   in any position), so sizing/centering is uniform regardless of side -- previously --left and
   --right each had their own hardcoded negative margin (-111px / -172px, carried over from the
   reference site's own differently-cropped --app/--rewards/--points source images), which bled
   the media asymmetrically off-center and looked inconsistent once arbitrary admin-uploaded
   media replaced those specific reference images. Centering via the parent's justify-content
   above (rather than a per-side margin hack) also centers the BrandGrid dining card, which sits
   in this same column -- the child combinator (> img/> video) still keeps this from resizing the
   dining card's own small tile images, which size themselves independently.

   Fixed 1:1 square aspect-ratio, standardized to a 600x600 admin-upload spec, so EVERY media
   type -- image, GIF, or video -- fills the exact same box regardless of its own native
   dimensions, instead of the row's height silently changing per section based on whatever the
   admin happened to upload. 600px (not the old 790px) because the actual column at this
   breakpoint only measures ~600px wide -- a 790px-wide image doesn't shrink to fit (a flex item
   with `aspect-ratio` won't shrink below its own natural size), so it overflowed the column and
   bled past the page edge; verified live before/after this change. object-fit: cover crops
   overflow on any source that isn't natively square; a source authored square needs no cropping
   at all. */
.yelo-feature__media > img,
.yelo-feature__media > video {
  width: 600px;
  max-width: none;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 25px;
}

.yelo-dining-card {
  display: grid;
  width: 580px;
  aspect-ratio: 580 / 623;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.93%;
  padding: 14.7% 8.8%;
  border-radius: var(--yelo-radius-lg);
  background: #d6ff01;
}

.yelo-dining-cell {
  position: relative;
  aspect-ratio: 147.919 / 138.831;
  perspective: 1000px;
}

.yelo-dining-cell__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.yelo-dining-cell.is-flipped .yelo-dining-cell__inner {
  transform: rotateY(180deg);
}

.yelo-dining-cell__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #ffffff;
  backface-visibility: hidden;
}

.yelo-dining-cell__face--b {
  transform: rotateY(180deg);
}

.yelo-dining-cell__face img {
  width: 70%;
  height: 70%;
  max-width: none;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .yelo-dining-cell__inner {
    transition: none;
  }
}

/* FAQ */

.yelo-faq {
  padding: var(--yelo-section-py) 0;
  border-radius: var(--yelo-radius-lg);
  background: var(--yelo-gray-bg);
}

.yelo-faq__inner {
  padding-right: 18px;
  padding-left: 18px;
}

.yelo-faq h2 {
  max-width: 760px;
  margin: 0 auto 60px;
  font-family: var(--yelo-font-display);
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1.05;
  text-align: center;
}

.yelo-faq__list {
  width: 100%;
}

.yelo-faq__item {
  border-bottom: 1px solid #413a3a;
}

.yelo-faq__item:last-child {
  border-bottom: none;
}

.yelo-faq__question {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 40px;
    padding-top: 60px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--yelo-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.25px;
    text-align: left;
}

.yelo-arrow-link {
  display: inline-flex;
  width: 41px;
  height: 41px;
  flex: 0 0 41px;
  /* Icon art points diagonally up-right (↗) by default. */
  transform: rotate(30deg);
  transition: transform 250ms ease;
}

.yelo-arrow-link img {
  width: 41px;
  height: 41px;
  max-width: none;
}

/* ↗ rotated 45deg = → (closed); rotated another 90deg = ↓ (open) */
.yelo-faq__item.is-open .yelo-arrow-link {
  transform: rotate(119deg);
}

.yelo-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.yelo-faq__item.is-open .yelo-faq__answer-wrap {
  grid-template-rows: 1fr;
}

.yelo-faq__answer-inner {
  overflow: hidden;
}

.yelo-faq__answer {
  max-width: none;
  margin: 0 64px 32px 0;
  font-size: 18px;
  line-height: 1.5;
}

/* Download CTA */

.yelo-cta {
  padding-top: 20px;
  background: var(--yelo-primary);
  text-align: center;
}

.yelo-cta h2 {
  margin: 0;
  font-family: var(--yelo-font-display-heavy);
  font-size: 130px;
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
  padding-top: 30px;
  padding-bottom: 30px;
}

.yelo-cta__subheading {
  margin: 10px 0 0;
  font-family: var(--yelo-font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.15;
}

.yelo-cta__app-card {
    color: black;
    text-decoration: none;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-top: 42px;
    padding: 18px 28px;
    border: 3px solid var(--yelo-black);
    border-radius: var(--yelo-radius-md);
    background: transparent;
}

.yelo-cta__app-card img {
  width: 110px;
  height: 110px;
  max-width: none;
  border-radius: 5px;
}

.yelo-cta__app-card span {
  font-size: 30px;
  font-weight: 600;
}

/* Purely decorative (the hand+phone photo), pulled up over the heading/QR card area above it via
   the negative margin -- pointer-events:none so it never steals clicks off the "Get the App"
   card or anything else it happens to visually overlap (its z-index:5 sits above the card's
   z-index:2, so without this the image -- not the link underneath it -- was the actual click
   target wherever the two overlapped). */
.yelo-cta__image {
  position: relative;
  z-index: 5;
  max-width: 1000px;
  margin: -152px auto 0;
  pointer-events: none;
}

.yelo-cta__image img {
  width: 100%;
  max-width: none;
  height: auto;
}

/* Partners page */

/* True background-image banner: the copy is absolutely positioned on top of the same box that
   holds the image, not stacked below it as a separate block. That box's own aspect ratio is
   locked to the recommended 1920x700 export (instead of being sized by a ~560px-tall, viewport-
   width-wide hero section, whose aspect ratio changed with every viewport width and forced
   object-fit:cover to crop the image's sides to fill it -- confirmed live, and the crop amount
   changed every time the viewport crossed a breakpoint, visibly "resetting" the image). Locking
   the box's own ratio to the image's means cover never needs to crop anything, at any width. */
.yelo-partners-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--yelo-dark);
}

.yelo-partners-hero__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 700;
}

.yelo-partners-hero__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(25, 26, 35, 0.85) 0%, rgba(25, 26, 35, 0.4) 45%, rgba(25, 26, 35, 0.05) 75%);
  pointer-events: none;
}

.yelo-partners-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.yelo-partners-hero__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Padding and type scale are all viewport-relative (clamp(min, Nvw, max)) rather than stepped at
   breakpoints, because the box they sit inside is also viewport-relative (aspect-ratio:1920/700,
   no min-height -- see .yelo-partners-hero__banner above). A fixed-px floor here would force that
   box taller than its own aspect ratio at small widths, which is exactly what crops the image's
   sides to compensate -- the thing this whole banner treatment exists to avoid. Scaling padding and
   font-size continuously with width instead keeps the CMS-edited heading/paragraph inside the
   banner at every width from 320px to 1920px+ with zero image cropping -- verified live by
   measuring content height against the pure aspect-ratio height every ~40-80px across that whole
   range. Below ~320px (narrower than any real device) there's no more room left to give. */
.yelo-partners-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(8px, 4vw, 72px) 24px;
}

.yelo-partners-hero__copy {
  max-width: 560px;
  color: #ffffff;
}

.yelo-partners-hero__copy h1 {
  margin: 0 0 clamp(2px, 1vw, 16px);
  font-family: var(--yelo-font-display-wide);
  font-size: clamp(17px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1.08;
}

.yelo-partners-hero__copy p {
  margin: 0;
  font-size: clamp(11px, 1.6vw, 17px);
  line-height: 1.35;
}

/* The optional CTA button (ng-if="PartnersBannerHasButton") -- only given space when it's
   actually rendered, so it doesn't cost any of the narrow-width headroom above when it's off. */
.yelo-partners-hero__copy > div {
  margin-top: clamp(4px, 1.5vw, 16px);
}

.yelo-partners-form {
  padding: var(--yelo-section-py) 0;
}

.yelo-partners-form__inner {
  max-width: 600px;
}

.yelo-partners-form__tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--yelo-black);
  border-radius: 999px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.yelo-partners-form h2 {
  margin: 0 0 12px;
  font-family: var(--yelo-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
}

.yelo-partners-form > p {
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.5;
  color: #51514f;
}

.yelo-field {
  margin-bottom: 20px;
}

.yelo-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.yelo-field__required {
  color: #c0392b;
}

.yelo-field__error {
  margin: 6px 0 0;
  font-size: 13px;
  color: #b3261e;
}

.yelo-field input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e3e1dd;
  border-radius: var(--yelo-radius-sm);
  background: var(--yelo-gray-card);
  font-family: var(--yelo-font-body);
  font-size: 15px;
  color: var(--yelo-black);
}

.yelo-field input:focus-visible {
  outline: 2px solid var(--yelo-purple);
  outline-offset: 1px;
}

.yelo-field input::placeholder {
  color: #9b9894;
}

/* Re-skins the vendored intl-tel-input widget (flag + country picker, Lebanon default via
   ngIntlTelInputProvider) to match this form's plain .yelo-field inputs instead of the plugin's
   bare default look. Scoped to .yelo-partners-form so Contact Us / admin's own <form-input-phonenumber>
   usages elsewhere keep their existing dashboard styling untouched.
   intlTelInput.css also ships a stray leftover rule (`.iti { position: absolute; top: 24px;
   left: 14px; }` plus `input.iti__tel-input { border: none !important; background-color:
   transparent !important; }`, around line 1208) that appears to be demo-page CSS accidentally
   concatenated into the vendor file. Every other usage in this app only "works" because its own
   container happens to set position:relative and patches over it with !important width/top hacks
   (see theme-base.less/style.custom.less's `form-input-phonenumber div.iti` rules). Here we reset
   it properly instead of patching around it. */
.yelo-partners-form .yelo-field .iti {
  position: relative;
  top: auto;
  left: auto;
  display: block;
  width: 100%;
}

.yelo-partners-form .yelo-field input.iti__tel-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 52px;
  border: 1px solid #e3e1dd !important;
  border-radius: var(--yelo-radius-sm);
  background: var(--yelo-gray-card) !important;
  font-family: var(--yelo-font-body);
  font-size: 15px;
  color: var(--yelo-black);
}

.yelo-partners-form .yelo-field input.iti__tel-input:focus-visible {
  outline: 2px solid var(--yelo-purple);
  outline-offset: 1px;
}

.yelo-partners-form .yelo-field input.iti__tel-input::placeholder {
  color: #9b9894;
}

/* Must come after (and win over) the plain border rule above, and needs !important to beat the
   vendor's own conflicting !important border declaration -- see the comment on .iti above. */
.yelo-partners-form .yelo-field--invalid input.iti__tel-input {
  border-color: #b3261e !important;
}

.yelo-partners-form .yelo-field .iti__country-container {
  padding: 0;
}

.yelo-partners-form .yelo-field .iti__selected-country {
  background: transparent;
  border-radius: var(--yelo-radius-sm) 0 0 var(--yelo-radius-sm);
}

.yelo-partners-form .yelo-field .iti__country-list {
  border: 1px solid #e3e1dd;
  border-radius: var(--yelo-radius-sm);
  font-family: var(--yelo-font-body);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.yelo-partners-form .yelo-field .iti__search-input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e3e1dd;
  border-radius: var(--yelo-radius-sm);
  font-family: var(--yelo-font-body);
  font-size: 14px;
}

.yelo-partners-form__submit {
  height: 48px;
  width: 100%;
  gap: 10px;
  padding: 0 20px;
  font-size: 15px;
}

.yelo-partners-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.yelo-partners-form__submit .yelo-arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  transform: none;
  border-radius: 50%;
  background: var(--yelo-primary);
}

.yelo-partners-form__submit .yelo-arrow-link img {
  width: 12px;
  height: 12px;
}

.yelo-partners-form__disclaimer {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #878682;
}

.yelo-partners-form__message {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--yelo-radius-sm);
  font-size: 14px;
  font-weight: 600;
}

.yelo-partners-form__message--success {
  background: #e7f7ec;
  color: #1b6b3a;
}

.yelo-partners-form__message--danger {
  background: #fbe9e7;
  color: #b3261e;
}

/* Footer */

.yelo-footer {
  padding: var(--yelo-section-py) 24px;
  background: var(--yelo-footer-bg);
}

.yelo-footer__legal {
  padding-top: 24px;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.yelo-footer__disclaimer {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    display: flex;
}

.yelo-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  margin-bottom: 72px;
}

.yelo-footer__col {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 16px;
}

.yelo-footer__col--brand {
  flex: 1 1 220px;
  max-width: 260px;
}

.yelo-footer__col-title {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--yelo-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.yelo-footer__col a {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
}

.yelo-footer__col a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transition: transform 300ms ease;
}

.yelo-footer__col a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.yelo-footer__socials {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
}

.yelo-footer__socials a {
  display: inline-flex;
  width: 24px;
  height: 24px;
}

.yelo-social-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background-color 200ms ease;
}

.yelo-footer__socials a:hover .yelo-social-icon {
  background-color: var(--yelo-primary);
}

.yelo-social-icon--tiktok {
  mask-image: url("../images/yelo/icon-social-tiktok.svg");
  -webkit-mask-image: url("../images/yelo/icon-social-tiktok.svg");
}

.yelo-social-icon--instagram {
  mask-image: url("../images/yelo/icon-social-instagram.svg");
  -webkit-mask-image: url("../images/yelo/icon-social-instagram.svg");
}

.yelo-social-icon--linkedin {
  mask-image: url("../images/yelo/icon-social-linkedin.svg");
  -webkit-mask-image: url("../images/yelo/icon-social-linkedin.svg");
}

.yelo-social-icon--x {
  mask-image: url("../images/yelo/icon-social-x.svg");
  -webkit-mask-image: url("../images/yelo/icon-social-x.svg");
}

.yelo-footer__app-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 2px solid #ffffff;
  border-radius: var(--yelo-radius-md);
}

/* Pre-existing specificity bug (present before this markup was ever ported to Angular --
   .yelo-footer__col a's own width:fit-content has higher specificity (class+element) than a
   plain .yelo-footer__app-card class selector, so it silently won and let the card grow to fit
   its 1151px-wide QR image instead of the intended 176px). Scoped to the actual parent context
   instead of just bumping specificity in the abstract, so it stays correct if this rule or its
   competitor ever gets reordered. */
.yelo-footer__col--brand .yelo-footer__app-card {
  width: 176px;
}

.yelo-footer__app-card img {
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 4px;
}

.yelo-footer__app-card span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.yelo-footer__wordmark {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 1250 / 588;
  margin: 0 auto;
}

.yelo-footer__wordmark img {
  position: absolute;
  max-width: none;
}

.yelo-footer__wordmark .letter-y {
  top: 22.96%;
  left: 0;
  width: 28.48%;
  height: 77.04%;
}

.yelo-footer__wordmark .letter-e {
  top: 20.92%;
  left: 31.36%;
  width: 27.44%;
  height: 56.12%;
}

.yelo-footer__wordmark .letter-l {
  top: 0;
  left: 60.8%;
  width: 7.84%;
  height: 75.17%;
}

.yelo-footer__wordmark .letter-o {
  top: 20.92%;
  left: 71.52%;
  width: 28.48%;
  height: 56.12%;
}

/* Responsive layout — section vertical rhythm is already handled by
   --yelo-section-py/--yelo-strip-py above; everything below is purely
   about column stacking, type scale, and image sizing per breakpoint. */

@media (max-width: 991.98px) {
  .yelo-shell {
    max-width: 744px;
  }

  .yelo-hero__row {
    flex-direction: column;
    align-items: center;
  }

  .yelo-hero__copy {
    order: 1;
    padding-bottom: 36px;
    text-align: center;
  }

  .yelo-hero__copy h1 {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(58px, 10vw, 76px);
  }

  .yelo-hero__image {
    order: 2;
  }

  .yelo-hero__image img {
    max-width: min(650px, calc(100vw - var(--yelo-mobile-media-gutter) * 2));
  }

  .yelo-feature--app .yelo-feature__text,
  .yelo-feature__text,
  .yelo-feature__text--right {
    padding-left: 0;
  }

  .yelo-feature__text {
    order: 1;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
  }

  .yelo-feature__media {
    order: 2;
    width: 100%;
    justify-content: center;
    margin-top: 60px;
    padding-left: 0;
  }

  .yelo-feature__media > img,
  .yelo-feature__media > video {
    width: min(600px, calc(100vw - var(--yelo-mobile-media-gutter) * 2));
    max-width: none;
  }

  .yelo-dining-card {
    width: min(580px, calc(100vw - var(--yelo-mobile-media-gutter) * 2));
  }

  .yelo-faq h2 {
    font-size: clamp(48px, 8vw, 64px);
  }

  .yelo-faq__question {
    padding: 32px 0;
  }

  .yelo-cta h2 {
    font-size: clamp(76px, 15vw, 112px);
  }

  .yelo-cta__subheading {
    font-size: clamp(28px, 5vw, 38px);
  }

    .yelo-cta__image {
        max-width: min(1040px, calc(100vw - var(--yelo-mobile-media-gutter) * 2));
        margin: -122px auto 0;
    }

  .yelo-footer__wordmark {
    max-width: calc(100% - 48px);
  }

  /* Get the App card, tablet/mobile only, hero + CTA sections specifically -- NOT the mobile nav
     drawer's own card (same .yelo-app-card class, scoped out via .yelo-hero__copy) or the
     footer's .yelo-footer__app-card, both of which keep their QR code. The QR code isn't
     scannable off your own screen anyway, so it's dropped in favor of a plain solid button. */
  .yelo-hero__copy .yelo-app-card img,
  .yelo-cta__app-card img {
    display: none;
  }

  .yelo-hero__copy .yelo-app-card,
  .yelo-cta__app-card {
    background: var(--yelo-black);
    color: #ffffff;
  }
}

@media (max-width: 767.98px) {
  .yelo-footer__row {
    flex-direction: column;
    gap: 40px;
    margin-bottom: 56px;
  }

  .yelo-footer__col--brand {
    max-width: none;
  }

  .yelo-header__inner {
    justify-content: space-between;
    padding-right: 22px;
    padding-left: 22px;
  }

  .yelo-nav-toggle {
    display: inline-flex;
  }

  .yelo-header__cta {
    display: none;
  }

  .yelo-nav-backdrop {
    position: fixed;
    display: block;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
  }

  .yelo-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .yelo-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    width: min(320px, 82vw);
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    transform: translateX(-100%);
    transition: transform 300ms ease;
    overflow-y: auto;
  }

  .yelo-nav.is-open {
    transform: translateX(0);
  }

  .yelo-nav__header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .yelo-nav__header img {
    width: 72px;
    height: auto;
  }

  .yelo-nav-close {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .yelo-nav-close::before,
  .yelo-nav-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: var(--yelo-black);
    content: "";
  }

  .yelo-nav-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .yelo-nav-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .yelo-nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 24px 28px;
  }

  .yelo-nav__cta {
    display: block;
    margin-top: auto;
    padding: 24px 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* Same treatment as the hero/CTA cards above: no QR code, solid black button. */
  .yelo-nav__cta .yelo-app-card {
    width: 100%;
    margin: 0;
    justify-content: center;
    text-decoration: none;
    background: var(--yelo-black);
    color: #ffffff;
  }

  .yelo-nav__cta .yelo-app-card img {
    display: none;
  }

  .yelo-hero__copy h1 {
    font-size: clamp(48px, 14vw, 68px);
    letter-spacing: 0;
  }

  .yelo-intro__gif {
    max-width: calc(100vw - var(--yelo-mobile-media-gutter) * 2);
  }

  .yelo-intro > p {
    font-size: 11px;
  }

  .yelo-feature__text h3 {
    font-size: 40px;
  }

  .yelo-feature__text > p:not(.yelo-kicker) {
    font-size: 16px;
  }

  .yelo-feature__media > img,
  .yelo-feature__media > video {
    width: calc(100vw - var(--yelo-mobile-media-gutter) * 2);
  }

  .yelo-faq {
    border-radius: 12px;
  }

  .yelo-faq h2 {
    margin-bottom: 42px;
    font-size: 35px;
    letter-spacing: -1.25px;
  }

  .yelo-faq__question {
    padding: 24px 0;
    gap: 18px;
    font-size: 17px;
  }

  .yelo-arrow-link,
  .yelo-arrow-link img {
    width: 36px;
    height: 36px;
  }

  .yelo-arrow-link {
    flex-basis: 36px;
  }

  .yelo-faq__answer {
    margin: 0 44px 24px 0;
    font-size: 16px;
  }

    .yelo-cta h2 {
        font-size: clamp(54px, 13vw, 44px);
        letter-spacing: -2px;
    }

  .yelo-cta__subheading {
    font-size: 24px;
  }

  .yelo-cta__app-card {
    gap: 14px;
    margin-top: 32px;
    padding: 14px 20px;
    border-width: 2px;
  }

  .yelo-cta__app-card img {
    width: 82px;
    height: 82px;
  }

  .yelo-cta__app-card span {
    font-size: 21px;
  }

    .yelo-cta__image {
        max-width: calc(100vw - var(--yelo-mobile-media-gutter) * 2);
        margin: -70px auto 0;
    }

  .yelo-footer__wordmark {
    max-width: calc(100% - 28px);
  }
}

@media (max-width: 420px) {
  .yelo-logo img {
    width: 82px;
    height: auto;
  }

  .yelo-hero__copy h1 {
    font-size: 48px;
  }


  .yelo-app-card img {
    width: 58px;
    height: 58px;
  }

  .yelo-app-card span {
    font-size: 15px;
  }

  .yelo-feature__text h3 {
    font-size: 35px;
  }

    .yelo-cta__image {
        max-width: calc(100vw - var(--yelo-mobile-media-gutter) * 2);
        margin: -60px auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
  .yelo-page *,
  .yelo-page *::before,
  .yelo-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}