/* 24iFM Hero standard · 26 October 2026.
   Shared copy rail, vertical centering and phrase-based headings (maximum 3 rows).
   Technology uses the compact long-title scale. Photos and overlays are unchanged. */
.hero { --hero-title-size: clamp(32px, 3.62vw, 52px); }
.hero.hero--technology { --hero-title-size: clamp(30px, 3.2vw, 46px); }
.hero .hero-copy {
  width: 44%;
  max-width: 500px;
}
.hero .hero-copy h1 {
  margin: 0;
  font-size: var(--hero-title-size);
  line-height: 1.1;
  letter-spacing: -.045em;
  font-weight: 600;
}
.hero .hero-copy .hero-emphasis { font-weight: 700; }
.hero .hero-copy > p:not(.hero-value) {
  margin-top: 20px;
  max-width: 470px;
  font-size: 16px;
  line-height: 27px;
}
.hero .hero-copy > .hero-value { margin-top: 12px; }
.hero .hero-copy > .actions { margin-top: 24px; }
@media (min-width: 761px) {
  .hero .hero-layout {
    min-height: 0;
    height: clamp(470px, calc(100svh - 88px), 620px);
    padding-block: 32px;
    align-items: center;
  }
  .hero--about .hero-art { top: 88px; bottom: 0; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero .hero-layout { height: clamp(470px, calc(100svh - 80px), 620px); }
  .hero--about .hero-art { top: 80px; }
}
@media (max-width: 760px) {
  .hero { --hero-title-size: clamp(28px, 8.3vw, 36px); }
  .hero.hero--technology { --hero-title-size: clamp(27px, 7.9vw, 34px); }
  .hero .hero-copy h1 { margin-inline: 24px; }
  .hero .hero-copy > p:not(.hero-value) { margin: 0 24px; max-width: none; line-height: 26px; }
  .hero .hero-copy > .hero-value { margin: -8px 24px 0; }
  .hero .hero-copy > .actions { margin: 0 24px; }
}
@media (max-width: 374px) {
  .hero .hero-copy h1,
  .hero .hero-copy > p:not(.hero-value),
  .hero .hero-copy > .hero-value,
  .hero .hero-copy > .actions { margin-inline: 16px; }
}

/* Home follows the shared title/copy rail; the value statement lives in the photo. */
@media (min-width: 761px) {
 .hero--home .home-phone { width: 630px; right: -202px; bottom: -36px; }
}
@media (max-width: 760px) {
 .hero--home .home-phone { width: 476px; right: -171px; }
}
@media (max-width: 374px) {
 .hero--home .home-phone { width: 428px; right: -166px; }
}

.home-mobile-value { display: none; }
@media (max-width: 760px) {
 .hero--home .home-scene-signals { object-fit: cover; object-position: 70% center; clip-path: inset(24% 0 0); }
 .home-mobile-value { display: block; position: absolute; z-index: 3; top: 12px; left: 16px; width: 160px; color: #fff; font-size: 22px; line-height: 25px; font-weight: 700; letter-spacing: -.03em; text-shadow: 0 0 3px #019dfa, 0 0 10px #019dfaaa, 0 0 20px #019dfa77; }
}

/* Photo labels: translucent white tags with the existing YYForce-blue halo. */
@media (max-width:760px) {
 .home-mobile-value { width:180px; padding:9px 12px; border-radius:12px; background:rgb(255 255 255 / 35%); box-shadow:0 0 12px rgb(1 157 250 / 35%); }
}

/* Content audit: availability is useful customer information, subordinate to feature copy. */
.feature-copy > p.feature-availability { margin-top:12px; font-size:13px; line-height:20px; color:#59636e; }
.contact-email-guide { margin-top:16px; color:#59636e; font-size:15px; line-height:24px; max-width:540px; }
.price a { text-decoration:underline; text-underline-offset:3px; }

/* Context projected from screens: frosted surfaces, readable ink, quiet blue halo. */
.screen-popup-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.screen-popup{position:absolute;left:var(--popup-x);top:var(--popup-y);transform:translate(-50%,-50%);width:max-content;max-width:240px;padding:10px 14px;border:1px solid rgb(255 255 255 / 90%);border-radius:14px;background:linear-gradient(135deg,rgb(255 255 255 / 94%),rgb(242 250 255 / 82%));backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);box-shadow:inset 0 1px 0 #fff,0 5px 18px rgb(12 53 78 / 13%),0 0 16px rgb(1 157 250 / 24%);color:#172e3e;text-align:left;line-height:1.25}
.screen-popup strong{display:block;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.02em}
.screen-popup .popup-context-copy>span{display:block;margin-top:3px;font-size:11px;line-height:16px;font-weight:500;color:#40566a}
.screen-popup--fee{max-width:320px;padding:12px 18px}
.screen-popup--fee strong{font-size:25px;line-height:29px;letter-spacing:-.035em}
.screen-popup--fee .popup-context-copy>span{font-size:12px}
@media(max-width:1000px) and (min-width:761px){.screen-popup{padding:8px 10px;max-width:190px}.screen-popup strong{font-size:13px;line-height:17px}.screen-popup--fee{max-width:270px}.screen-popup--fee strong{font-size:22px;line-height:26px}}
@media(max-width:760px){
 .screen-popup{max-width:155px;padding:7px 9px;border-radius:11px}
 .screen-popup strong{font-size:12px;line-height:15px}
 .screen-popup .popup-context-copy>span{font-size:11px;line-height:14px;margin-top:2px}
 .screen-popup--fee{max-width:calc(100% - 28px);padding:10px 12px;left:14px!important;top:12px!important;transform:none}
 .screen-popup--fee strong{font-size:20px;line-height:24px}
 .screen-popup--fee .popup-context-copy>span{font-size:11px;line-height:14px}
 .hero--platform .screen-popup{left:max(24%,95px)!important;max-width:170px;padding:5px 8px}
 .hero--platform .screen-popup--operations{top:16%!important}
 .hero--platform .screen-popup--resident{top:50%!important}
 .hero--platform .screen-popup--finance{top:84%!important}
 .hero--partners .screen-popup--service{left:12px!important;top:12px!important;transform:none}
 .hero--partners .screen-popup--wellness{left:auto!important;right:12px;top:auto!important;bottom:12px;transform:none}
}
@media(prefers-reduced-transparency:reduce){.screen-popup{background:#f7fbff;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Floating information is text-led; native floating symbols remain in the scene. */
.screen-popup strong{color:#00bbfa}
.popup-context-copy{min-width:0}
.popup-tags{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0 0;padding:0;list-style:none}
.popup-tags li{margin:0;padding:2px 5px;border-radius:5px;background:rgb(0 187 250 / 9%);color:#324b5b;font-size:10px;line-height:13px;font-weight:500}
@media(max-width:760px){.hero--platform .screen-popup{max-width:178px;left:max(24%,99px)!important}.hero--platform .screen-popup--resident .popup-context-copy>span{display:none}.hero--platform .popup-tags{gap:3px;margin-top:3px}.hero--platform .popup-tags li{padding:1px 3px;font-size:9px;line-height:12px}}

/* Home fills the viewport without letterboxing; photo and signals share one crop. */
@media(min-width:761px){
 .hero--home .hero-layout{height:calc(100svh - 88px);min-height:470px}
 .hero--home .hero-scene,.hero--home .home-scene-signals{object-fit:cover;object-position:70% center}
}
@media(min-width:761px) and (max-width:1000px){.hero--home .hero-layout{height:calc(100svh - 80px)}}
/* Fill the actual phone display while preserving screenshot proportions. */
.hero--home .home-phone-slides>img{object-fit:cover;object-position:center}