/* Homepage sections 05 and 09. Existing styles, routes and application logic stay in place. */
.home-members-showcase,
.home-members-invite {
  --home-members-green: #073f32;
  --home-members-deep: #032d25;
  --home-members-cream: #f3ecdf;
  --home-members-coral: #f15a24;
  --home-members-gold: #cfaa62;
  --home-members-screen-scale: 363.4666667%;
  overflow: hidden;
}

.home-members-showcase {
  background: var(--home-members-cream);
  color: var(--home-members-green);
  border-top: 1px solid rgba(7, 63, 50, .14);
}

.home-members-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(36px, 4.4vw, 74px);
  align-items: center;
}

.home-members-stage {
  position: relative;
  height: clamp(610px, 52vw, 740px);
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--home-members-deep);
  border-radius: 3px;
}

.home-members-studio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.home-members-stage-brand {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--home-members-cream);
}

.home-members-stage-brand img { width: 38px; height: 38px; }
.home-members-stage-brand span { font-size: 10px; line-height: 1.5; letter-spacing: 2px; }
.home-members-stage-brand b { font-weight: 500; letter-spacing: 1.45px; }

.home-members-phone {
  position: absolute;
  padding: 7px;
  border: 2px solid #9e9c91;
  border-radius: 38px;
  background: linear-gradient(135deg, #a7a698 0%, #222723 8%, #080d0b 36%, #73796d 67%, #161d18 85%, #9b9b8b);
  box-shadow: inset 0 0 0 2px #171e18, inset 2px 0 2px rgba(255,255,255,.58), 13px 19px 24px rgba(0,0,0,.4), 30px 45px 50px rgba(0,0,0,.27);
  transform-origin: 50% 100%;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}

.home-members-phone::before,
.home-members-phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1b241c, #91988c, #263124);
}

.home-members-phone::before { left: -4px; top: 24%; height: 9%; box-shadow: 0 43px 0 #5e6b5c; }
.home-members-phone::after { right: -4px; top: 29%; height: 12%; }

.home-members-phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 834;
  padding-top: 5.87%;
  overflow: hidden;
  border: 1px solid #151b15;
  border-radius: 28px;
  background: #f7f3e9;
}

/* The JPEG canvas is 1363 × 936, with the useful 375 × 812 viewport at top left.
   1363 / 375 = 363.4666667%; this clips the capture without altering its pixels.
   The screen adds 22 relative pixels above the viewport for the camera surround.
   Set the scale to 100% when replacing these assets with native 375 × 812 captures. */
.home-members-phone-screen img {
  display: block;
  width: var(--home-members-screen-scale, 100%);
  max-width: none;
  height: auto;
  object-position: left top;
}

.home-members-phone-camera {
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 50%;
  width: 27%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #101512;
  box-shadow: inset 0 1px 1px #000;
}

.home-members-phone-camera::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #273e42;
  box-shadow: 0 0 0 1px #111b1a;
}

.home-members-phone-glass {
  position: absolute;
  z-index: 2;
  inset: 5px;
  border-radius: 31px;
  pointer-events: none;
  background: linear-gradient(116deg, rgba(255,255,255,.19), transparent 26%, transparent 69%, rgba(255,255,255,.045) 70%, transparent 84%);
  box-shadow: inset 1px 0 1px rgba(255,255,255,.3), inset -1px 0 1px rgba(255,255,255,.2);
}

.home-members-phone-back {
  z-index: 1;
  left: 14%;
  bottom: 23%;
  width: 36%;
  max-width: 228px;
  transform: rotate(-9deg);
}

.home-members-phone-front {
  z-index: 2;
  left: 43%;
  bottom: 18%;
  width: 43%;
  max-width: 260px;
  transform: rotate(8deg);
}

.home-members-stage-caption {
  position: absolute;
  z-index: 3;
  left: 28px;
  bottom: 26px;
  color: var(--home-members-deep);
}

.home-members-stage-caption span { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; margin-bottom: 9px; }
.home-members-stage-caption p { font-size: 19px; font-weight: 500; letter-spacing: -.5px; line-height: 1.2; }
.home-members-copy { min-width: 0; }
.home-members-kicker { margin: 0 0 19px; font-size: 9px; line-height: 1.6; letter-spacing: 1.3px; font-weight: 700; }
.home-members-copy h2 { font-family: var(--display); font-size: clamp(60px, 5.8vw, 88px); font-weight: 800; line-height: .94; letter-spacing: -1.2px; }
.home-members-copy h2 span { color: var(--home-members-coral); }
.home-members-intro { max-width: 440px; margin-top: 24px; font-size: 14px; line-height: 1.7; }

.home-members-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
  margin: 28px 0 30px;
}

.home-members-feature { position: relative; padding-top: 16px; border-top: 1px solid rgba(7,63,50,.22); }
.home-members-feature > svg { width: 21px; height: 21px; margin-bottom: 8px; }
.home-members-feature h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; line-height: 1.4; }
.home-members-feature p { margin-top: 6px; font-size: 11px; line-height: 1.6; color: #37564c; }

.home-members-actions { display: flex; flex-direction: column; align-items: flex-start; }
.home-members-primary { width: auto; min-width: 290px; max-width: 100%; min-height: 58px; font-size: 13px; }
.home-members-primary > span { font-size: 22px; line-height: 1; }
.home-members-access-note { margin-top: 11px; font-size: 10px; line-height: 1.5; color: #426055; }
.home-members-install { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; padding: 7px 0; font-size: 10px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(7,63,50,.35); }
.home-members-install > svg { width: 17px; height: 17px; flex: 0 0 17px; }
.home-members-install > span { padding-left: 2px; font-size: 14px; }
.home-members-install:hover { text-decoration-color: currentColor; }
.home-members-showcase a:focus-visible { outline: 2px solid var(--home-members-green); outline-offset: 5px; }
.home-members-invite a:focus-visible { outline: 2px solid var(--home-members-deep); outline-offset: 5px; }

.home-members-invite {
  background: var(--home-members-coral);
  color: var(--home-members-deep);
}

.home-members-invite-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(44px, 7vw, 112px); }
.home-members-invite-copy { padding-bottom: 5px; min-width: 0; }
.home-members-invite-question { margin-bottom: 18px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; line-height: 1.5; }
.home-members-invite h2 { font-family: var(--display); font-size: clamp(58px, 6vw, 94px); font-weight: 800; line-height: .96; letter-spacing: -1px; }
.home-members-invite-description { margin-top: 27px; font-size: 21px; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; }
.home-members-invite-detail { max-width: 420px; margin-top: 18px; font-size: 14px; line-height: 1.75; }
.home-members-invite .home-members-primary { margin-top: 30px; background: var(--home-members-deep); color: var(--home-members-cream); }
.home-members-invite-note { margin-top: 13px; font-size: 10px; line-height: 1.6; }

.home-members-community-stage {
  position: relative;
  isolation: isolate;
  height: 590px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--home-members-deep);
}

.home-members-community-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; filter: saturate(.72); }
.home-members-community-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,45,37,.85), rgba(3,45,37,.24) 50%, rgba(3,45,37,.72)); }
.home-members-community-caption { position: absolute; top: 26px; left: 26px; right: 20px; z-index: 3; display: flex; align-items: center; gap: 11px; color: var(--home-members-cream); }
.home-members-community-caption img { width: 34px; height: 34px; }
.home-members-community-caption p { font-size: 9px; line-height: 1.65; letter-spacing: .8px; }
.home-members-community-caption strong { font-weight: 600; }
.home-members-phone-community { z-index: 2; width: 48%; max-width: 234px; bottom: 53px; left: 29%; transform: rotate(9deg); box-shadow: inset 0 0 0 2px #171e18, inset 2px 0 2px rgba(255,255,255,.58), 16px 25px 24px rgba(0,0,0,.5), 35px 45px 55px rgba(0,0,0,.4); }
.home-members-concept-note { position: absolute; bottom: 17px; left: 20px; right: 20px; z-index: 3; color: var(--home-members-cream); font-size: 8px; line-height: 1.5; text-align: center; opacity: .8; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-members-stage:hover .home-members-phone-back { transform: rotate(-11deg) translateY(-3px); }
  .home-members-stage:hover .home-members-phone-front { transform: rotate(6deg) translateY(-5px); }
  .home-members-community-stage:hover .home-members-phone-community { transform: rotate(6deg) translateY(-4px); }
}

@media (min-width: 1600px) {
  .home-members-grid { gap: 72px; }
  .home-members-stage { height: 760px; }
}

@media (max-width: 1100px) {
  .home-members-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .home-members-stage { height: 650px; }
  .home-members-phone-back { left: 13%; bottom: 29%; width: 36%; }
  .home-members-phone-front { left: 43%; bottom: 24%; width: 45%; }
  .home-members-stage-caption { bottom: 36px; }
  .home-members-copy h2 { font-size: 64px; }
  .home-members-intro { font-size: 13px; }
  .home-members-features { gap: 20px 18px; }
  .home-members-invite-grid { gap: 40px; }
  .home-members-community-stage { height: 550px; }
  .home-members-phone-community { width: 57%; left: 22%; bottom: 62px; }
}

@media (max-width: 800px) {
  .home-members-showcase > .section-label,
  .home-members-invite > .section-label { margin-bottom: 30px; }
  .home-members-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .home-members-copy { display: contents; }
  .home-members-showcase .home-members-copy.reveal { opacity: 1; transform: none; }
  .home-members-kicker { grid-row: 1; margin: 0 0 -20px; }
  .home-members-copy h2 { grid-row: 2; font-size: clamp(56px, 9vw, 78px); }
  .home-members-copy h2 br:last-child { display: none; }
  .home-members-intro { grid-row: 3; max-width: 510px; margin-top: -12px; font-size: 14px; }
  .home-members-stage { grid-row: 4; width: 100%; height: 600px; }
  .home-members-phone-back { left: 18%; width: 30%; max-width: 170px; bottom: 23%; }
  .home-members-phone-front { left: 47%; width: 34%; max-width: 190px; bottom: 18%; }
  .home-members-stage-caption { bottom: 24px; }
  .home-members-features { grid-row: 5; gap: 22px 30px; margin: -6px 0 0; }
  .home-members-feature { padding-top: 16px; }
  .home-members-feature h3 { font-size: 13px; }
  .home-members-feature p { font-size: 12px; }
  .home-members-actions { grid-row: 6; margin-top: -6px; }
  .home-members-access-note, .home-members-install { font-size: 11px; }
  .home-members-invite-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .home-members-invite h2 { font-size: clamp(58px, 10vw, 80px); }
  .home-members-invite-detail { max-width: 510px; }
  .home-members-community-stage { height: 530px; }
  .home-members-phone-community { width: 43%; max-width: 220px; left: 35%; bottom: 44px; }
  .home-members-community-caption { left: 28px; top: 28px; }
}

@media (max-width: 540px) {
  .home-members-showcase.section,
  .home-members-invite.section { padding-top: 58px; padding-bottom: 58px; }
  .home-members-showcase > .section-label,
  .home-members-invite > .section-label { font-size: 9px; letter-spacing: 1.3px; margin-bottom: 26px; }
  .home-members-grid { gap: 28px; }
  .home-members-kicker { font-size: 8px; letter-spacing: .8px; margin-bottom: -14px; }
  .home-members-copy h2 { font-size: clamp(48px, 13.4vw, 68px); letter-spacing: -.7px; }
  .home-members-intro { font-size: 13px; line-height: 1.7; margin-top: -8px; }
  .home-members-stage { height: 405px; }
  .home-members-stage-brand { top: 19px; left: 19px; gap: 8px; }
  .home-members-stage-brand img { width: 26px; height: 26px; }
  .home-members-stage-brand span { font-size: 7px; letter-spacing: 1.4px; }
  .home-members-stage-brand b { letter-spacing: 1px; }
  .home-members-phone { padding: 4px; border-width: 1.5px; border-radius: 25px; }
  .home-members-phone-screen { border-radius: 19px; }
  .home-members-phone-camera { top: 8px; height: 8px; }
  .home-members-phone-camera::after { top: 2px; width: 3px; height: 3px; right: 5px; }
  .home-members-phone-glass { inset: 3px; border-radius: 21px; }
  .home-members-phone::before { left: -3px; width: 2px; box-shadow: 0 27px 0 #5e6b5c; }
  .home-members-phone::after { right: -3px; width: 2px; }
  .home-members-phone-back { left: 14%; bottom: 26%; width: 35%; }
  .home-members-phone-front { left: 44%; bottom: 21%; width: 43%; }
  .home-members-stage-caption { left: 19px; bottom: 20px; }
  .home-members-stage-caption span { font-size: 7px; letter-spacing: 1px; margin-bottom: 7px; }
  .home-members-stage-caption p { font-size: 15px; }
  .home-members-features { gap: 22px 22px; margin-top: 0; }
  .home-members-feature > svg { width: 20px; height: 20px; }
  .home-members-feature h3 { font-size: 12px; }
  .home-members-feature p { font-size: 11px; line-height: 1.6; }
  .home-members-actions { margin-top: 0; width: 100%; }
  .home-members-primary { width: 100%; min-width: 0; min-height: 56px; padding: 17px 18px; font-size: 12px; }
  .home-members-access-note { font-size: 9px; }
  .home-members-install { font-size: 10px; margin-top: 11px; }
  .home-members-invite-question { font-size: 9px; letter-spacing: 1.25px; margin-bottom: 16px; }
  .home-members-invite h2 { font-size: clamp(48px, 13.3vw, 69px); letter-spacing: -.7px; }
  .home-members-invite-description { margin-top: 22px; font-size: 20px; }
  .home-members-invite-detail { margin-top: 16px; font-size: 13px; line-height: 1.75; }
  .home-members-invite .home-members-primary { margin-top: 25px; }
  .home-members-invite-note { font-size: 9px; }
  .home-members-community-stage { height: 425px; }
  .home-members-community-caption { top: 19px; left: 19px; gap: 9px; }
  .home-members-community-caption img { width: 27px; height: 27px; }
  .home-members-community-caption p { font-size: 7px; letter-spacing: .6px; }
  .home-members-phone-community { width: 50%; max-width: 175px; left: 28%; bottom: 43px; }
  .home-members-concept-note { font-size: 7px; bottom: 14px; left: 12px; right: 12px; }
}

@media (max-width: 360px) {
  .home-members-copy h2,
  .home-members-invite h2 { font-size: 43px; }
  .home-members-stage { height: 365px; }
  .home-members-stage-caption p { font-size: 14px; }
  .home-members-community-stage { height: 385px; }
  .home-members-phone-community { width: 50%; bottom: 42px; }
  .home-members-features { column-gap: 18px; }
  .home-members-kicker { font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-members-phone { transition: none; }
  .home-members-showcase .reveal,
  .home-members-invite .reveal { opacity: 1; transform: none; }
}