/* ============================================================
   HOST YOUR EVENT — 1:1 Figma rebuild
   Page frame 4148:3047 = 1920 x 8479 (page-absolute Y, base 1920).
   Section vertical map:
     Header chrome:                  0 -> 176
     Hero:                         176 -> 878   (h 702)
     Experience the Difference:    948 -> 1921
     Spaces for Gathering:        2021 -> 4199  (heading + cream-bg sub-block)
     Accommodations:              4269 -> 4853
     Elevate Your Event:          4923 -> 5507
     Inside the Experience:       5607 -> 6655
     Start the Conversation:      6755 -> 7755
     Footer:                      7755 -> 8479
   All sizes scaled by min(Xpx, calc(X / 1920 * 100vw)).
============================================================ */

/* ===== UNIVERSAL RESET — kill base styles.css paddings/gaps so per-section
   Figma values are not fighting clamp() defaults. Per CLAUDE.md gotcha,
   any flex/grid gap on a `__inner` element will need !important. ===== */
body[data-page="host-your-event"] section,
body[data-page="host-your-event"] [class*="__inner"] {
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  min-height: 0;
}
body[data-page="host-your-event"] {
  background: #FAFAFA;
}

/* ============ HERO (y=176, h=702) ============ */
body[data-page="host-your-event"] .hye-hero {
  position: relative;
  width: 100%;
  height: min(702px, calc(702 / 1920 * 100vw));
  overflow: hidden;
}
body[data-page="host-your-event"] .hye-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 35%;
}
/* User: remove the heavy tint so the sunset hero pops. Keep only a
   subtle gradient behind the copy stack so the white kicker/title
   stay legible without washing out the photo. */
body[data-page="host-your-event"] .hye-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0) 60%);
}
body[data-page="host-your-event"] .hye-hero__inner {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  top: 0;
  width: min(720px, calc(720 / 1920 * 100vw));
  height: 100%;
}
/* Kicker — Figma top y=332 (page) -> within hero = 332-176 = 156.
   Inter Medium 20/24, 0.1em uppercase, #FFFFFF. */
body[data-page="host-your-event"] .hye-hero__kicker {
  position: absolute;
  left: 0;
  top: min(156px, calc(156 / 1920 * 100vw));
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(24 / 20);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: nowrap;
}
/* Title — Figma top y=367 (page) -> within hero = 191.
   STIX Two Text Medium 64/80, #FFFFFF. */
body[data-page="host-your-event"] .hye-hero__title {
  position: absolute;
  left: 0;
  top: min(191px, calc(191 / 1920 * 100vw));
  width: min(671px, calc(671 / 1920 * 100vw));
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: calc(80 / 64);
  color: #FFFFFF;
}

/* ============ EXPERIENCE THE ASHRAM DIFFERENCE (y=948-1921) ============ */
body[data-page="host-your-event"] .hye-difference {
  position: relative;
  width: 100%;
  margin-top: min(70px, calc(70 / 1920 * 100vw));   /* 948 - 878 = 70 */
}
/* Heading — y=948, STIX Two Medium 52/58, center, #5E2A29. */
body[data-page="host-your-event"] .hye-difference__heading {
  margin: 0 auto;
  width: min(900px, calc(900 / 1920 * 100vw));
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #5E2A29;
  text-align: center;
}
/* Body — y=1026, Inter 400 20/36, #282828, center, width 977. */
body[data-page="host-your-event"] .hye-difference__body {
  margin: min(20px, calc(20 / 1920 * 100vw)) auto 0;
  width: min(977px, calc(977 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  text-align: center;
}
/* 6 feature cards — 2 rows of 3, each 457 wide. Row 1 top y=1168
   (so 142px from body 1026 + ~120 body height). Row 2 top y=1564
   (gap 41 from row 1 bottom). Cards 457x355/357 with 30 gap.
   Full grid width = 457*3 + 30*2 = 1431, centered horizontally. */
body[data-page="host-your-event"] .hye-features {
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
  width: min(1451px, calc(1451 / 1920 * 100vw)); /* QC r10: Figma grid 1451 (3x457 + 2x40) */
  display: grid !important;
  grid-template-columns: repeat(3, min(457px, calc(457 / 1920 * 100vw)));
  gap: min(41px, calc(41 / 1920 * 100vw)) min(40px, calc(40 / 1920 * 100vw)) !important; /* QC r10: col-gap 40 (Figma) */
  justify-content: center;
}
/* Each card: bg rgba(240,234,222,0.5), radius 4, padding 60 top/bot 26 sides,
   flex column, align center, gap 30. */
body[data-page="host-your-event"] .hye-feature-card {
  width: min(457px, calc(457 / 1920 * 100vw));
  height: min(355px, calc(355 / 1920 * 100vw));
  background: rgba(240, 234, 222, 0.5);
  border-radius: min(4px, calc(4 / 1920 * 100vw));
  padding: min(60px, calc(60 / 1920 * 100vw)) min(26px, calc(26 / 1920 * 100vw));
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: min(30px, calc(30 / 1920 * 100vw)) !important;
  text-align: center;
}
/* Icon circle 65x65 #F5F2EC radius 56, padding 10. */
body[data-page="host-your-event"] .hye-feature-card__icon {
  width: min(65px, calc(65 / 1920 * 100vw));
  height: min(65px, calc(65 / 1920 * 100vw));
  border-radius: 50%;
  background: #F5F2EC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #5A381C; /* QC r13 */
}
body[data-page="host-your-event"] .hye-feature-card__icon svg,
body[data-page="host-your-event"] .hye-feature-card__icon img {
  /* Bumped 60% -> 75% per user image #62 so the glyphs read at the
     same proportion as Figma. object-fit: contain keeps the heart
     (39.92x32.67 viewBox) etc. at their natural aspect. */
  width: 75%;
  height: 75%;
  object-fit: contain;
  display: block;
}
/* Title — Inter 500 22/28, ls 0.06em, uppercase, #46474B, center. */
body[data-page="host-your-event"] .hye-feature-card__title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(22px, calc(22 / 1920 * 100vw));
  line-height: calc(28 / 22);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #46474B;
}
/* Body — Inter 400 18/28, #46474B, width 405, center. */
body[data-page="host-your-event"] .hye-feature-card__body {
  margin: 0;
  width: min(405px, calc(405 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(18px, calc(18 / 1920 * 100vw));
  line-height: calc(28 / 18);
  color: #46474B;
}

/* ============ SPACES FOR GATHERING (y=2021-4199) ============ */
body[data-page="host-your-event"] .hye-spaces {
  position: relative;
  width: 100%;
  margin-top: min(102px, calc(102 / 1920 * 100vw));   /* 2021 - 1919 = 102 */
}
/* Heading — y=2021 STIX 500 52/58, capitalize, center, #5E2A29. */
body[data-page="host-your-event"] .hye-spaces__heading {
  margin: 0 auto;
  width: min(900px, calc(900 / 1920 * 100vw));
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  text-transform: capitalize;
  color: #5E2A29;
  text-align: center;
}
/* Body — y=2099 Inter 400 20/38, #282828, center, width 940. */
body[data-page="host-your-event"] .hye-spaces__body {
  margin: min(20px, calc(20 / 1920 * 100vw)) auto 0;
  width: min(940px, calc(940 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  text-align: center;
}
/* Cream-bg block starts y=2283. Spaces__body ends ~2213 (114h),
   so margin-top = 70. */
body[data-page="host-your-event"] .hye-spaces__bg {
  position: relative;
  width: 100%;
  background: rgba(239, 234, 223, 0.5);
  margin-top: min(70px, calc(70 / 1920 * 100vw));
  padding-top: min(72px, calc(72 / 1920 * 100vw));    /* 2355 - 2283 = 72 */
  padding-bottom: min(76px, calc(76 / 1920 * 100vw)); /* tail before next section */
}
/* Indoor group top y=2355 within bg (relative 0 after padding).
   Sub-heading "Indoor Spaces" — Inter 600 28/40.6 #5E2A29 center. */
body[data-page="host-your-event"] .hye-spaces__group {
  position: relative;
  width: 100%;
}
body[data-page="host-your-event"] .hye-spaces__group--outdoor {
  margin-top: min(72px, calc(72 / 1920 * 100vw));  /* 3276 - 3204 = 72 */
}
body[data-page="host-your-event"] .hye-spaces__sub-heading {
  margin: 0;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: min(28px, calc(28 / 1920 * 100vw));
  line-height: 1.45;
  color: #5E2A29;
  text-align: center;
}
body[data-page="host-your-event"] .hye-spaces__sub-body {
  margin: min(20px, calc(20 / 1920 * 100vw)) auto 0;
  width: min(843px, calc(843 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
  text-align: center;
}
/* 4 cards row — 440 wide, 30 gap (x=0/470/940/1410, total 1790).
   Top y=2558. Indoor sub-body ends ~2488 (top 2416, h 72), so
   margin-top of 70 within group. */
body[data-page="host-your-event"] .hye-space-cards {
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
  width: min(1850px, calc(1850 / 1920 * 100vw)); /* QC r15: Figma 1850 (4x440 + 3x30) */
  display: grid !important;
  grid-template-columns: repeat(4, min(440px, calc(440 / 1920 * 100vw)));
  gap: min(30px, calc(30 / 1920 * 100vw)) !important;
  justify-content: center;
}
/* Each card: 440x648, radius 10, indoor bg rgba(255,255,255,0.7),
   outdoor bg #FFFFFF. Photo 440x403 at top, then text below. */
body[data-page="host-your-event"] .hye-space-card {
  width: min(440px, calc(440 / 1920 * 100vw));
  height: min(648px, calc(648 / 1920 * 100vw));
  border-radius: min(10px, calc(10 / 1920 * 100vw));
  overflow: hidden;
  position: relative;
}
body[data-page="host-your-event"] .hye-space-card--indoor {
  background: rgba(255, 255, 255, 0.7);
}
body[data-page="host-your-event"] .hye-space-card--outdoor {
  background: #FFFFFF;
}
body[data-page="host-your-event"] .hye-space-card__photo {
  width: 100%;
  height: min(403px, calc(403 / 1920 * 100vw));
  background-size: cover;
  background-position: center top;
  /* Kill the 1-2px grey seam at the bottom edge of the dining-hall
     photo. The seam was the natural image edge bleeding through;
     shifting bg-position to "center top" anchors the image at the
     top so the bottom edge is clipped inside the visible window
     instead of touching the card border. */
  display: block;
  border: 0;
}
/* Title — STIX 500 24/36 ls -0.169 #5A381C, padded 33 left. */
body[data-page="host-your-event"] .hye-space-card__title {
  position: absolute;
  left: min(33px, calc(33 / 1920 * 100vw));
  top: min(436px, calc(436 / 1920 * 100vw));
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: calc(36 / 24);
  letter-spacing: -0.169px;
  color: #5A381C;
  white-space: nowrap;
}
/* Stats — Inter 500 18/28 uppercase ls 0.04em #46474B, sits between
   title and body. Use left+right anchoring to use full card width. */
body[data-page="host-your-event"] .hye-space-card__stats {
  position: absolute;
  /* Left stays aligned with the title (33). Right pulled in tighter
     so the body has more horizontal room WITHOUT shifting the left
     edge per user image #59. */
  left: min(33px, calc(33 / 1920 * 100vw));
  right: min(20px, calc(20 / 1920 * 100vw));
  top: min(478px, calc(478 / 1920 * 100vw));
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(18px, calc(18 / 1920 * 100vw));
  line-height: calc(28 / 18);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #46474B;
}
/* Body — Inter 400 18/28 #46474B, widened from 374 -> full card-width
   minus padding so the copy wraps in 2 lines like Figma (was wrapping
   to 3 in mine). Card is 440 wide with 33px left/right padding -> 374
   was right but caused 3-line wraps; using calc(100% - 66px) lets it
   use the full available width when the card stretches at sub-1920vp. */
body[data-page="host-your-event"] .hye-space-card__body {
  position: absolute;
  /* Left stays aligned with title (33). Right pulled in tighter so
     the body gets extra width on the right only — keeps text aligned
     with the title's left edge per user image #59. Top pushed
     531 -> 560 (#63) but that over-shot — walked back to 548
     per user image #65 to tighten the stats/body gap. */
  left: min(33px, calc(33 / 1920 * 100vw));
  right: min(20px, calc(20 / 1920 * 100vw));
  top: min(548px, calc(548 / 1920 * 100vw));
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(18px, calc(18 / 1920 * 100vw));
  line-height: calc(28 / 18);
  color: #46474B;
}

/* ============ ACCOMMODATIONS (y=4269-4853) ============ */
/* Text left x=259, photo right x=883 width 779 (group spans 259-1662 = 1403 wide). */
body[data-page="host-your-event"] .hye-accom {
  position: relative;
  width: 100%;
  margin-top: min(65px, calc(65 / 1920 * 100vw));     /* lands accom at y=4269 */
  height: min(584px, calc(584 / 1920 * 100vw));
}
body[data-page="host-your-event"] .hye-accom__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
body[data-page="host-your-event"] .hye-accom__copy {
  position: absolute;
  left: min(259px, calc(259 / 1920 * 100vw));
  top: 0;
  width: min(554px, calc(554 / 1920 * 100vw));
  height: 100%;
}
body[data-page="host-your-event"] .hye-accom__heading {
  position: absolute;
  left: 0;
  top: min(142px, calc(142 / 1920 * 100vw));      /* 4411 - 4269 = 142 */
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(65 / 52);
  color: #5E2A29;
}
body[data-page="host-your-event"] .hye-accom__body {
  position: absolute;
  left: 0;
  top: min(227px, calc(227 / 1920 * 100vw));      /* 4496 - 4269 = 227 */
  margin: 0;
  width: min(554px, calc(554 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
}
body[data-page="host-your-event"] .hye-accom__photo {
  position: absolute;
  left: min(883px, calc(883 / 1920 * 100vw));
  top: 0;
  width: min(779px, calc(779 / 1920 * 100vw));
  height: min(584px, calc(584 / 1920 * 100vw));
  background-size: cover;
  background-position: center;
  border-radius: min(4px, calc(4 / 1920 * 100vw));
}

/* ============ ELEVATE YOUR EVENT (y=4923-5507) ============ */
/* Photo left x=230 width 779, text right x=1079 width 612. */
body[data-page="host-your-event"] .hye-elevate {
  position: relative;
  width: 100%;
  margin-top: min(70px, calc(70 / 1920 * 100vw));     /* 4923 - 4853 = 70 */
  height: min(584px, calc(584 / 1920 * 100vw));
}
body[data-page="host-your-event"] .hye-elevate__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
body[data-page="host-your-event"] .hye-elevate__photo {
  position: absolute;
  left: min(230px, calc(230 / 1920 * 100vw));
  top: 0;
  width: min(779px, calc(779 / 1920 * 100vw));
  height: min(584px, calc(584 / 1920 * 100vw));
  background-size: cover;
  background-position: center;
  border-radius: min(4px, calc(4 / 1920 * 100vw));
}
body[data-page="host-your-event"] .hye-elevate__copy {
  position: absolute;
  left: min(1079px, calc(1079 / 1920 * 100vw));
  top: 0;
  width: min(612px, calc(612 / 1920 * 100vw));
  height: 100%;
}
body[data-page="host-your-event"] .hye-elevate__heading {
  position: absolute;
  left: 0;
  top: min(171px, calc(171 / 1920 * 100vw));      /* 5094 - 4923 = 171 */
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(65 / 52);
  color: #5E2A29;
}
body[data-page="host-your-event"] .hye-elevate__body {
  position: absolute;
  left: 0;
  top: min(256px, calc(256 / 1920 * 100vw));      /* 5179 - 4923 = 256 */
  margin: 0;
  width: min(612px, calc(612 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
}

/* ============ INSIDE THE EXPERIENCE testimonial (y=5607-6655) ============ */
body[data-page="host-your-event"] .hye-experience {
  position: relative;
  width: 100%;
  margin-top: min(100px, calc(100 / 1920 * 100vw));   /* 5607 - 5507 = 100 */
  padding-bottom: min(120px, calc(120 / 1920 * 100vw));
}
body[data-page="host-your-event"] .hye-experience__heading {
  margin: 0 auto;
  width: 100%;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #5E2A29;
  text-align: center;
}
/* Card area 1640x787 at (127, 5715). Heading y=5607 height ~58. */
body[data-page="host-your-event"] .hye-experience__card {
  position: relative;
  margin: min(50px, calc(50 / 1920 * 100vw)) auto 0;
  width: min(1640px, calc(1640 / 1920 * 100vw));
  height: min(787px, calc(787 / 1920 * 100vw));
  background: rgba(240, 234, 222, 0.5);
  border-radius: min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="host-your-event"] .hye-experience__quote {
  position: absolute;
  left: 50%;
  top: min(241px, calc(241 / 1920 * 100vw));
  transform: translateX(-50%);
  margin: 0;
  width: min(878px, calc(878 / 1920 * 100vw));
  font-family: 'STIX Two Text', serif;
  font-weight: 400;
  font-size: min(36px, calc(36 / 1920 * 100vw));
  line-height: calc(48 / 36);
  letter-spacing: 0.02em;
  color: #282828;
  text-align: center;
}
body[data-page="host-your-event"] .hye-experience__attribution {
  position: absolute;
  left: 50%;
  top: min(381px, calc(381 / 1920 * 100vw));
  transform: translateX(-50%);
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: calc(80 / 24);
  color: #5E2A29;
  text-align: center;
  white-space: nowrap;
}
body[data-page="host-your-event"] .hye-experience__nav {
  position: absolute;
  left: 50%;
  bottom: min(80px, calc(80 / 1920 * 100vw));
  transform: translateX(-50%);
  display: flex !important;
  gap: min(33px, calc(33 / 1920 * 100vw)) !important;
}
body[data-page="host-your-event"] .hye-experience__arrow {
  width: min(54px, calc(54 / 1920 * 100vw));
  height: min(54px, calc(54 / 1920 * 100vw));
  border: 1px solid #5E2A29;
  background: transparent;
  border-radius: 50%;
  color: #5E2A29;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
body[data-page="host-your-event"] .hye-experience__arrow:hover {
  background: #5E2A29;
  color: #FAFAFA;
}
body[data-page="host-your-event"] .hye-experience__arrow svg {
  width: min(42px, calc(42 / 1920 * 100vw));
  height: min(42px, calc(42 / 1920 * 100vw));
}

/* ============ START THE CONVERSATION form (y=6755-7755) ============ */
body[data-page="host-your-event"] .hye-form {
  position: relative;
  width: 100%;
  height: min(1000px, calc(1000 / 1920 * 100vw));
  background: #BEA884;
  margin-top: min(100px, calc(100 / 1920 * 100vw));    /* QC r17: 100px gap to form (Figma) */
  overflow: hidden;
}
body[data-page="host-your-event"] .hye-form__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Heading "Start the Conversation" — STIX 500 52/58, capitalize, #FFFFFF,
   at (149, 6804) -> within form section (149, 49). */
body[data-page="host-your-event"] .hye-form__heading {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  top: min(49px, calc(49 / 1920 * 100vw));
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  text-transform: capitalize;
  color: #FFFFFF;
  white-space: nowrap;
}
/* Body — Inter 400 20/36, #FFFFFF, width 847, at (149, 6882) -> (149, 127). */
body[data-page="host-your-event"] .hye-form__body {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  top: min(127px, calc(127 / 1920 * 100vw));
  margin: 0;
  width: min(847px, calc(847 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #FFFFFF;
}
/* Form — start y 6989 -> within section 234. */
body[data-page="host-your-event"] .hye-form__form {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  top: min(234px, calc(234 / 1920 * 100vw));
  width: min(1622px, calc(1622 / 1920 * 100vw));
  display: flex !important;
  flex-direction: column;
  gap: min(35px, calc(35 / 1920 * 100vw)) !important;
}
/* Row of 2 inputs — 800 wide each, 19 gap (so 800+19+800 = 1619). */
body[data-page="host-your-event"] .hye-form__row {
  display: flex !important;
  gap: min(19px, calc(19 / 1920 * 100vw)) !important;
}
body[data-page="host-your-event"] .hye-form__row--full {
  display: block !important;
}
/* Each input: 800x56, white bg, radius 8, border 1px #CCC, padding 16,
   placeholder Inter 400 16/24 #666. */
body[data-page="host-your-event"] .hye-form__input {
  width: min(800px, calc(800 / 1920 * 100vw));
  height: min(56px, calc(56 / 1920 * 100vw));
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  padding: 0 min(16px, calc(16 / 1920 * 100vw));
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: calc(24 / 16);
  color: #282828;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body[data-page="host-your-event"] .hye-form__input::placeholder {
  color: #666666;
}
body[data-page="host-your-event"] .hye-form__input--full {
  width: min(1619px, calc(1619 / 1920 * 100vw));
}
body[data-page="host-your-event"] .hye-form__input:focus {
  border-color: #5E2A29;
  box-shadow: 0 0 0 2px rgba(94, 42, 41, 0.15);
}
/* Textarea — 1619x233, white bg, border 2px rgba(240,234,222,0.5),
   radius 8, padding 25/20, placeholder Inter 400 16/28 #666. */
body[data-page="host-your-event"] .hye-form__textarea {
  width: min(1619px, calc(1619 / 1920 * 100vw));
  height: min(233px, calc(233 / 1920 * 100vw));
  background: #FFFFFF;
  border: 2px solid rgba(240, 234, 222, 0.5);
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  padding: min(25px, calc(25 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: calc(28 / 16);
  color: #282828;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body[data-page="host-your-event"] .hye-form__textarea::placeholder {
  color: #666666;
}
body[data-page="host-your-event"] .hye-form__textarea:focus {
  border-color: #5E2A29;
  box-shadow: 0 0 0 2px rgba(94, 42, 41, 0.15);
}
/* Submit pill — 183x60 #FFFFFF radius 40, padding 10/20, centered
   horizontally within section at top=7635 (page) -> within section 880. */
body[data-page="host-your-event"] .hye-form__submit {
  /* Centered horizontally. Walked from 70 -> 40 (#58) and now 40 -> 20
     per user image #66 — pill still sat too close to the maroon footer
     edge; needs to hug the textarea more tightly to match Figma. */
  align-self: center;
  margin-top: min(20px, calc(20 / 1920 * 100vw));
  width: min(183px, calc(183 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  background: #FFFFFF;
  color: #5E2A29;
  border: 0;
  border-radius: 40px;
  padding: min(10px, calc(10 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
body[data-page="host-your-event"] .hye-form__submit-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: calc(20 / 16);
  color: #5E2A29;
  white-space: nowrap;
}
body[data-page="host-your-event"] .hye-form__submit-arrow {
  /* Figma-spec asset is the full SVG (rect + path strokes); just size
     the container. No bg/border-radius — the SVG owns the circle. */
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
body[data-page="host-your-event"] .hye-form__submit-arrow svg {
  width: 65%;
  height: 65%;
}
/* Hover state — mirrors Wisdom/Sound Healing pill: white pill -> maroon fill,
   white label, white arrow circle with maroon chevron inside. */
body[data-page="host-your-event"] .hye-form__submit:hover {
  background: #5E2A29;
}
body[data-page="host-your-event"] .hye-form__submit:hover .hye-form__submit-label {
  color: #FFFFFF;
}
body[data-page="host-your-event"] .hye-form__submit:hover .hye-form__submit-arrow {
  /* No white box — the SVG owns the circle. Just nudge it forward.
     (Per user image #68: hover was showing a square white plate
     behind the chevron-circle.) */
  background: transparent;
  transform: translateX(3px);
}
/* Invert the chevron-circle on hover: maroon-fill -> white-fill,
   white-stroke chevron -> maroon-stroke chevron (per user image #69). */
body[data-page="host-your-event"] .hye-form__submit:hover .hye-form__submit-arrow rect {
  fill: #FFFFFF;
}
body[data-page="host-your-event"] .hye-form__submit:hover .hye-form__submit-arrow path {
  stroke: #5E2A29;
}

/* ============================================================
   MOBILE 1:1 — Figma artboard 4149:6648 (Host Your Event, 390x7239).
   Layout scales min(Xpx, calc(X/390*100vw)); TEXT fixed px.
   Hero (centred upper text) -> Experience the Difference (left copy + 6
   centred feature cards) -> Spaces for Gathering (left copy + cream block
   w/ Indoor + Outdoor horizontal-scroll cards) -> Accommodations
   (heading/image/body) -> Elevate (same) -> Inside the Experience ->
   Start the Conversation form (#f0eade, stacked fields).
   ============================================================ */
/* ===== iPad (768-1023) — QC r19/r20/r21: reflow space cards (2-up), elevate text-before-photo, center feature cards ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* r19: indoor/outdoor space cards -> 2-up, static flowed text, fit the width */
  body[data-page="host-your-event"] .hye-space-cards {
    width: 100%; margin: 32px 0 0; padding: 0 40px; box-sizing: border-box;
    display: grid !important; grid-template-columns: repeat(2, 1fr);
    gap: 20px !important; justify-content: stretch; overflow: visible;
  }
  body[data-page="host-your-event"] .hye-space-card {
    width: 100%; height: auto; min-height: 0; background: #fafafa; border-radius: 8px;
  }
  body[data-page="host-your-event"] .hye-space-card--indoor,
  body[data-page="host-your-event"] .hye-space-card--outdoor { background: #fafafa; }
  body[data-page="host-your-event"] .hye-space-card__photo { height: 230px; }
  body[data-page="host-your-event"] .hye-space-card__title {
    position: static; left: auto; top: auto; white-space: normal;
    margin: 16px 20px 0; font-size: 22px; line-height: 1.3; color: #5A381C;
  }
  body[data-page="host-your-event"] .hye-space-card__stats {
    position: static; left: auto; right: auto; top: auto;
    margin: 8px 20px 0; font-size: 14px; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: #46474B;
  }
  body[data-page="host-your-event"] .hye-space-card__body {
    position: static; left: auto; right: auto; top: auto;
    margin: 10px 20px 22px; font-size: 14px; line-height: 24px; color: #46474B;
  }
  /* r20: Elevate Your Event -> text (heading + body) before the photo */
  body[data-page="host-your-event"] .hye-elevate { height: auto; margin-top: 80px; padding: 0; }
  body[data-page="host-your-event"] .hye-elevate__inner { position: static; height: auto; display: flex; flex-direction: column; }
  body[data-page="host-your-event"] .hye-elevate__copy { display: contents; }
  body[data-page="host-your-event"] .hye-elevate__heading {
    position: static; left: auto; top: auto; order: 1; width: auto;
    margin: 0 64px 16px; font-size: 40px; line-height: 1.14; color: #5E2A29;
  }
  body[data-page="host-your-event"] .hye-elevate__body {
    position: static; left: auto; top: auto; order: 2; width: auto;
    margin: 0 64px; font-size: 16px; line-height: 28px; color: #282828;
  }
  body[data-page="host-your-event"] .hye-elevate__photo {
    position: static; left: auto; top: auto; order: 3;
    width: calc(100% - 128px); height: 340px; margin: 28px 64px 0; border-radius: 6px;
  }
  /* r21: feature cards -> auto height so the icon/title/body stay centered */
  body[data-page="host-your-event"] .hye-features {
    width: 100%; padding: 0 40px; box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr); gap: 20px !important;
  }
  body[data-page="host-your-event"] .hye-feature-card { height: auto; min-height: 0; padding: 26px 18px; }
  body[data-page="host-your-event"] .hye-feature-card__body { width: 100%; }
}

@media (max-width: 1023px) {
  /* ---------- HERO (centred kicker + title, upper portion of the photo) ---------- */
  body[data-page="host-your-event"] .hye-hero {
    height: min(588px, calc(588 / 390 * 100vw)); min-height: 0;
  }
  body[data-page="host-your-event"] .hye-hero__image {
    /* Match the Figma's exact image transform (node 4149:6655):
       img w-260.31% h-128.89% left--7.25% top--11.61% of the box -> these
       CSS bg values reproduce the same crop/scale on the same photo. */
    background-size: 260.31% 128.89%;
    background-position: 4.5% 40%;
    transform: none;
    /* Figma matte on this sunset hero is a gentle darken + slight desaturate
       (sampled to bri 120 / sat 92 from the raw 140 / 120 — contrast() washed it). */
    filter: brightness(0.85) saturate(0.78);
  }
  body[data-page="host-your-event"] .hye-hero__veil {
    background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.10) 28%, rgba(0,0,0,0) 50%);
  }
  body[data-page="host-your-event"] .hye-hero__inner {
    position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%;
  }
  body[data-page="host-your-event"] .hye-hero__kicker {
    position: absolute; left: 50%; top: min(104px, calc(104 / 390 * 100vw));
    transform: translateX(-50%);
    width: min(220px, calc(220 / 390 * 100vw)); margin: 0;
    font-size: 12px; line-height: 20px; letter-spacing: 0.84px; text-transform: uppercase;
    color: #FFFFFF; text-align: center; white-space: normal;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  }
  body[data-page="host-your-event"] .hye-hero__title {
    position: absolute; left: 50%; top: min(171px, calc(171 / 390 * 100vw));
    transform: translate(-50%, -50%);
    width: auto; margin: 0;
    font-size: 32px; line-height: 1.05; color: #FFFFFF; text-align: center; white-space: nowrap;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  }

  /* ---------- EXPERIENCE THE ASHRAM DIFFERENCE (left copy + 6 centred cards) ---------- */
  body[data-page="host-your-event"] .hye-difference {
    margin-top: min(34px, calc(34 / 390 * 100vw)); padding: 0;
  }
  body[data-page="host-your-event"] .hye-difference__heading {
    width: auto; margin: 0 min(38px, calc(38 / 390 * 100vw));
    font-size: 28px; line-height: 1.12; color: #5E2A29; text-align: left;
  }
  body[data-page="host-your-event"] .hye-difference__body {
    width: auto; margin: min(20px, calc(20 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw)) 0;
    font-size: 14px; line-height: 26px; color: #282828; text-align: left;
  }
  body[data-page="host-your-event"] .hye-features {
    width: 100%; margin: min(28px, calc(28 / 390 * 100vw)) 0 0;
    display: flex !important; flex-direction: column; grid-template-columns: none;
    gap: min(25px, calc(25 / 390 * 100vw)) !important;
    padding: 0 min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="host-your-event"] .hye-feature-card {
    width: 100%; height: auto; min-height: min(150px, calc(150 / 390 * 100vw));
    background: #f7f5ef; border-radius: min(4px, calc(4 / 390 * 100vw));
    padding: min(20px, calc(20 / 390 * 100vw)) min(33px, calc(33 / 390 * 100vw));
    gap: min(12px, calc(12 / 390 * 100vw)) !important;
    align-items: center; justify-content: center; text-align: center;
  }
  body[data-page="host-your-event"] .hye-feature-card__icon {
    width: min(30px, calc(30 / 390 * 100vw)); height: min(30px, calc(30 / 390 * 100vw));
    background: transparent; border-radius: 0;
  }
  body[data-page="host-your-event"] .hye-feature-card__icon img { width: 100%; height: 100%; object-fit: contain; }
  body[data-page="host-your-event"] .hye-feature-card__title {
    font-size: 14px; line-height: 20px; letter-spacing: 0.84px; text-transform: uppercase;
    color: #46474B; text-align: center;
  }
  body[data-page="host-your-event"] .hye-feature-card__body {
    width: 100%; font-size: 12px; line-height: 22px; letter-spacing: -0.23px;
    color: #282828; text-align: left;   /* Figma: desc is left-aligned (icon + title stay centred) */
  }

  /* ---------- SPACES FOR GATHERING (left copy + cream block + scroll cards) ---------- */
  body[data-page="host-your-event"] .hye-spaces { margin-top: min(70px, calc(70 / 390 * 100vw)); }
  body[data-page="host-your-event"] .hye-spaces__heading {
    width: auto; margin: 0 min(38px, calc(38 / 390 * 100vw));
    font-size: 28px; line-height: 1.12; color: #5E2A29; text-align: left; text-transform: none;
  }
  body[data-page="host-your-event"] .hye-spaces__body {
    width: auto; margin: min(20px, calc(20 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw)) 0;
    font-size: 14px; line-height: 26px; color: #282828; text-align: left;
  }
  body[data-page="host-your-event"] .hye-spaces__bg {
    background: rgba(239,234,223,0.5);
    margin-top: min(30px, calc(30 / 390 * 100vw));
    padding: min(34px, calc(34 / 390 * 100vw)) 0;
  }
  body[data-page="host-your-event"] .hye-spaces__group--outdoor { margin-top: min(40px, calc(40 / 390 * 100vw)); }
  body[data-page="host-your-event"] .hye-spaces__sub-heading {
    width: 100%; font-size: 20px; line-height: 1.45; color: #5E2A29; text-align: center;
  }
  body[data-page="host-your-event"] .hye-spaces__sub-body {
    width: auto; margin: min(14px, calc(14 / 390 * 100vw)) min(38px, calc(38 / 390 * 100vw)) 0;
    font-size: 14px; line-height: 28px; color: #282828; text-align: center;
  }
  body[data-page="host-your-event"] .hye-space-cards {
    width: auto; margin: min(22px, calc(22 / 390 * 100vw)) 0 0;
    display: flex !important; flex-wrap: nowrap; grid-template-columns: none;
    justify-content: flex-start;   /* desktop centers it -> centred overflow hides card 1 off the left */
    gap: min(14px, calc(14 / 390 * 100vw)) !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 min(11px, calc(11 / 390 * 100vw)); scrollbar-width: none;
  }
  body[data-page="host-your-event"] .hye-space-cards::-webkit-scrollbar { display: none; }
  body[data-page="host-your-event"] .hye-space-card {
    flex: 0 0 min(268px, calc(268 / 390 * 100vw)); width: min(268px, calc(268 / 390 * 100vw));
    height: auto; min-height: min(426px, calc(426 / 390 * 100vw));
    background: #fafafa; border-radius: min(10px, calc(10 / 390 * 100vw));
  }
  body[data-page="host-your-event"] .hye-space-card--indoor,
  body[data-page="host-your-event"] .hye-space-card--outdoor { background: #fafafa; }
  body[data-page="host-your-event"] .hye-space-card__photo { height: min(224px, calc(224 / 390 * 100vw)); }
  body[data-page="host-your-event"] .hye-space-card__title {
    position: static; left: auto; top: auto; white-space: normal;
    margin: min(14px, calc(14 / 390 * 100vw)) min(14px, calc(14 / 390 * 100vw)) 0;
    font-size: 18px; line-height: 1.4; letter-spacing: -0.17px; color: #5A381C;
  }
  body[data-page="host-your-event"] .hye-space-card__stats {
    position: static; left: auto; right: auto; top: auto;
    margin: min(6px, calc(6 / 390 * 100vw)) min(14px, calc(14 / 390 * 100vw)) 0;
    font-size: 12px; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: #46474B;
  }
  body[data-page="host-your-event"] .hye-space-card__body {
    position: static; left: auto; right: auto; top: auto;
    margin: min(8px, calc(8 / 390 * 100vw)) min(14px, calc(14 / 390 * 100vw)) min(14px, calc(14 / 390 * 100vw));
    font-size: 12px; line-height: 22px; color: #46474B;
  }

  /* ---------- ACCOMMODATIONS (heading -> image -> body) ---------- */
  body[data-page="host-your-event"] .hye-accom { height: auto; margin-top: min(70px, calc(70 / 390 * 100vw)); padding: 0; }
  body[data-page="host-your-event"] .hye-accom__inner { position: static; height: auto; display: flex; flex-direction: column; }
  body[data-page="host-your-event"] .hye-accom__copy { display: contents; }
  body[data-page="host-your-event"] .hye-accom__heading {
    position: static; left: auto; top: auto; order: 1;
    margin: 0 min(35px, calc(35 / 390 * 100vw)) min(18px, calc(18 / 390 * 100vw));
    font-size: 28px; line-height: 1.12; color: #5E2A29;
  }
  body[data-page="host-your-event"] .hye-accom__photo {
    position: static; left: auto; top: auto; order: 2;
    width: min(323px, calc(323 / 390 * 100vw)); height: min(202px, calc(202 / 390 * 100vw));
    margin: 0 auto; border-radius: min(4px, calc(4 / 390 * 100vw));
  }
  body[data-page="host-your-event"] .hye-accom__body {
    position: static; left: auto; top: auto; order: 3; width: auto;
    margin: min(22px, calc(22 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw)) 0;
    font-size: 14px; line-height: 26px; color: #282828;
  }

  /* ---------- ELEVATE YOUR EVENT (heading -> image -> body) ---------- */
  body[data-page="host-your-event"] .hye-elevate { height: auto; margin-top: min(70px, calc(70 / 390 * 100vw)); padding: 0; }
  body[data-page="host-your-event"] .hye-elevate__inner { position: static; height: auto; display: flex; flex-direction: column; }
  body[data-page="host-your-event"] .hye-elevate__copy { display: contents; }
  body[data-page="host-your-event"] .hye-elevate__heading {
    position: static; left: auto; top: auto; order: 1;
    margin: 0 min(35px, calc(35 / 390 * 100vw)) min(18px, calc(18 / 390 * 100vw));
    font-size: 28px; line-height: 1.12; color: #5E2A29;
  }
  body[data-page="host-your-event"] .hye-elevate__photo {
    position: static; left: auto; top: auto; order: 2;
    width: min(323px, calc(323 / 390 * 100vw)); height: min(202px, calc(202 / 390 * 100vw));
    margin: 0 auto; border-radius: min(4px, calc(4 / 390 * 100vw));
  }
  body[data-page="host-your-event"] .hye-elevate__body {
    position: static; left: auto; top: auto; order: 3; width: auto;
    margin: min(22px, calc(22 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw)) 0;
    font-size: 14px; line-height: 26px; color: #282828;
  }

  /* ---------- INSIDE THE EXPERIENCE (beige testimonial card + arrows) ---------- */
  body[data-page="host-your-event"] .hye-experience { margin-top: min(70px, calc(70 / 390 * 100vw)); padding: 0; }
  body[data-page="host-your-event"] .hye-experience__heading { width: 100%; font-size: 28px; line-height: 1.1; text-transform: none; }
  body[data-page="host-your-event"] .hye-experience__card {
    width: min(362px, calc(362 / 390 * 100vw)); height: auto; min-height: min(516px, calc(516 / 390 * 100vw));
    border-radius: min(12px, calc(12 / 390 * 100vw)); margin: min(28px, calc(28 / 390 * 100vw)) auto 0;
    padding: min(46px, calc(46 / 390 * 100vw)) min(28px, calc(28 / 390 * 100vw)) min(78px, calc(78 / 390 * 100vw));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  body[data-page="host-your-event"] .hye-experience__quote {
    position: static; left: auto; top: auto; transform: none; width: 100%;
    font-size: 20px; line-height: 1.35;
  }
  body[data-page="host-your-event"] .hye-experience__attribution {
    position: static; left: auto; top: auto; transform: none; white-space: normal;
    font-size: 14px; line-height: 1.4; margin: min(24px, calc(24 / 390 * 100vw)) 0 0;
  }
  body[data-page="host-your-event"] .hye-experience__nav { bottom: min(26px, calc(26 / 390 * 100vw)); gap: min(16px, calc(16 / 390 * 100vw)) !important; }
  body[data-page="host-your-event"] .hye-experience__arrow {
    width: min(32px, calc(32 / 390 * 100vw)); height: min(32px, calc(32 / 390 * 100vw)); border-color: #4a3b2e; color: #4a3b2e;
  }
  body[data-page="host-your-event"] .hye-experience__arrow svg { width: 22px; height: 22px; }

  /* ---------- START THE CONVERSATION (cream #f0eade form) ---------- */
  body[data-page="host-your-event"] .hye-form {
    height: auto; min-height: 0; background: #f0eade;
    margin-top: min(70px, calc(70 / 390 * 100vw));
    padding: min(57px, calc(57 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw)) min(50px, calc(50 / 390 * 100vw));
  }
  body[data-page="host-your-event"] .hye-form__inner { position: static; width: 100%; height: auto; display: flex; flex-direction: column; }
  body[data-page="host-your-event"] .hye-form__heading {
    position: static; left: auto; top: auto; white-space: normal; margin: 0;
    font-size: 28px; line-height: 1.12; color: #5E2A29; text-transform: none;
  }
  body[data-page="host-your-event"] .hye-form__body {
    position: static; left: auto; top: auto; width: auto;
    margin: min(20px, calc(20 / 390 * 100vw)) 0 0; font-size: 14px; line-height: 26px; color: #282828;
  }
  body[data-page="host-your-event"] .hye-form__form {
    position: static; left: auto; top: auto; width: 100%;
    margin: min(28px, calc(28 / 390 * 100vw)) 0 0; gap: min(8px, calc(8 / 390 * 100vw)) !important;
  }
  body[data-page="host-your-event"] .hye-form__row { flex-direction: column !important; gap: min(8px, calc(8 / 390 * 100vw)) !important; }
  body[data-page="host-your-event"] .hye-form__input,
  body[data-page="host-your-event"] .hye-form__input--full {
    width: 100%; height: min(56px, calc(56 / 390 * 100vw));
    background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: min(8px, calc(8 / 390 * 100vw));
    padding: 0 16px; font-size: 16px; line-height: 24px;
  }
  body[data-page="host-your-event"] .hye-form__textarea {
    width: 100%; height: min(165px, calc(165 / 390 * 100vw));
    background: #FFFFFF; border: 2px solid rgba(240,234,222,0.5); border-radius: min(4px, calc(4 / 390 * 100vw));
    padding: 20px; font-size: 16px; line-height: 28px;
  }
  body[data-page="host-your-event"] .hye-form__submit {
    position: static; transform: none; align-self: center;
    margin-top: min(24px, calc(24 / 390 * 100vw));
    width: min(120px, calc(120 / 390 * 100vw)); height: min(44px, calc(44 / 390 * 100vw));
    background: #fafafa; border-radius: 40px; gap: min(8px, calc(8 / 390 * 100vw)); padding: 0 min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="host-your-event"] .hye-form__submit-label { font-size: 14px; line-height: 20px; }
  body[data-page="host-your-event"] .hye-form__submit-arrow { width: 18px; height: 18px; }
}