/* Homepage hero C5 (ACE 2026-11-10; public in all locales since 2026-11-10), loaded by site/pages/home.php.
   Variant C5 (ACE: "C5 ano"): light background, text on the left, the hero photo on the right melting into the
   background (left and bottom edges), three upright phones with current localized screens over its lower-left;
   each screen has a black camera band and the Android 3-button navigation bar. The photo is placed by CSS only (no
   layout shift); the inline script sizes and places the phones beside the faces and the text. 1024-1279 px: no
   phone layer, the row of three phones follows the hero. Below 1024 px: the photo first (fading out at the bottom),
   then the text, then the row of three phones. RTL mirrors photo and layout. */
.hp-layer{display:none}
@media (min-width:1024px){
  .hp-layer{display:block;position:absolute;inset:0;pointer-events:none}
  /* RTL puts the phone column on the right: mirror the photo and its overlay so the free space beside the senior's face is there too. */
  [dir="rtl"] .hero-v2 > picture img,[dir="rtl"] .hero-v2 > .hero-overlay{transform:scaleX(-1)}
}
.hp-group{position:absolute;top:40px;inset-inline-start:24px;width:396px;height:761px;transform-origin:top left}
[dir="rtl"] .hp-group{transform-origin:top right}
.hp-js .hp-group,.hp-js .hp-mobile{opacity:0;transition:opacity .5s ease}
.hp-js .hp-group.hp-ready,.hp-js .hp-mobile.hp-ready{opacity:1}
.hp-phone{position:absolute;box-sizing:border-box;border-radius:40px;padding:8px;
  background:linear-gradient(150deg,#3b3e45 0%,#141519 20%,#0b0c0e 60%,#25272c 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 0 1.5px #0a0a0b,0 40px 60px -24px rgba(0,0,0,.6),0 16px 28px -12px rgba(0,0,0,.45)}
.hp-phone::before,.hp-phone::after{content:"";position:absolute;right:-3px;width:3px;border-radius:0 3px 3px 0;background:#2c2f35}
.hp-phone::before{top:17%;height:9%}
.hp-phone::after{top:29%;height:14%}
.hp-group .hp-back{width:214px;inset-inline-start:68px;top:0;z-index:1}
.hp-group .hp-small{width:168px;inset-inline-start:0;top:390px;z-index:2;border-radius:32px;padding:7px}
.hp-group .hp-front{width:250px;inset-inline-start:146px;top:230px;z-index:3}
.hp-screen{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:1080/2375;background:#000}
.hp-group .hp-small .hp-screen{border-radius:26px}
.hp-content{position:absolute;left:0;right:0;top:3.537%;height:91.158%;overflow:hidden;background:#000}
.hp-content img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;opacity:0;transition:opacity .4s ease}
.hp-content img.on,.hp-content img.hp-ns{opacity:1}
.hp-nav{position:absolute;left:0;right:0;bottom:0;height:5.305%;background:#000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAA/BAMAAABZdwz+AAAAMFBMVEX////+/v79/f38/Pz6+vrc3NyysrKNjY1QUFA5OTkuLi4REREDAwMCAgIBAQEAAAAajYvPAAAC9UlEQVR42u2aMWgTYRTH392likOSq8lSaZqYgIi0ySXa1WZQ7GCrS8V2cNOAi3SwDgEXqRQKQnGwljhIJtHB2kVFq0LQodpcjE6WXpqIIPSSywUEMZdzyKUZ3O4e1568N70lj8fve+/7/u/lGB3IusYSAsJBOAgH4SAchINwEA7CQTgIB+EgHISDcBCO/9lcVn4sN0I4WejrTJjfCzgYC8tB2dfCKS6Z40Gr4KCtKkbZh2zGoXEvfyUxzlTjmg/U01EVJ5bhtEyFM98serFvcf84xoFWfmYyrk8XUWI11ozq6Dlv791ROJZaZlOC9SOt9k0/heYjhecFy7FaB5YMHJw3ztuIQxy8nvVCKWQZh15+uBKX6pEXvqz14lDfPzE8/l2vYB+OanRuIVZgMF6Vo3cDeYAN/+MJwfJtqnwL19peQrHx7tAO3ksLIoPxn9Xn5ZNvAAC2k69jCDpKMnKSbZRhGvf8alzEkRyDBant5TIDCOF2QYbpld/3fXkc4dPSnmmG5y5av4l2Q6RvHZpbkbESaHUQtP68LTlxZtH7b2TdWAnUV6sdN644coTbWloYQsu8tLHj1pSQE3EoayMiXgaKt+t7HTng80Xad3QteGYojJYAH67vuHzBiTh6R69sxtFwRLpt48zqAG1yNi8gJeBJdEZy5jvCPGjRTMkwTpqp3QnhiASd9RoShlXHWUdWBxz+cvtSBecouR9jSeNZOeVM3QEAsa+LYw2cDPSJXLtXosNl69GYfxw7JlomqqaUsoQx4Af7z6qrAMzIh1cIgD3HjSHObepmNrvvYN2jtakTTYSGYcsXpvxB0HJphOWx98jHjnvOxuoA4ORJKb1vAIFHIJCf3wbX5ZsqwrM9PGMUBXvNTOla2OBIgXTPLYx2KQXmJfDPihhvd3cHZmobZmWhhZI/AOgFAQA2w3ixAED2gc04dBFwxKm+HvGIib0wszD0iT6C7iAchINwEA4ywkE4CAfhIByEg3AQDsJBOAgH4XCG/QXUm9JZqMHbqwAAAABJRU5ErkJggg==) center/100% 100% no-repeat}
.hp-cam{position:absolute;top:.85%;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#1b1c20;box-shadow:0 0 0 1.5px rgba(255,255,255,.08);z-index:3}
.hp-small .hp-cam{width:7px;height:7px;margin-left:-3.5px}
.hp-back .hp-content,.hp-small .hp-content{filter:brightness(.92)}
/* Below 1024 px: three phones in a row under the hero, BIG Launcher in the middle. */
.hp-mobile{display:flex;justify-content:center;align-items:center;width:min(92vw,380px);margin:0 auto;padding:6px 0 2px}
.hp-mobile .hp-phone{position:relative;flex:none;border-radius:26px;padding:6px}
.hp-mobile .hp-screen{border-radius:21px}
.hp-mobile .hp-front{width:44%;z-index:3;order:2}
.hp-mobile .hp-back{width:34%;z-index:1;order:1;margin-right:-6%}
.hp-mobile .hp-small{width:34%;z-index:2;order:3;margin-left:-6%}
.hp-mobile .hp-back,.hp-mobile .hp-small{border-radius:22px;padding:5px}
.hp-mobile .hp-back .hp-screen,.hp-mobile .hp-small .hp-screen{border-radius:18px}
.hp-mobile .hp-cam{width:6px;height:6px;margin-left:-3px}
.hp-mobile .hp-phone::before,.hp-mobile .hp-phone::after{right:-2px;width:2px}
@media (prefers-reduced-motion:reduce){.hp-content img,.hp-js .hp-group,.hp-js .hp-mobile{transition:none}}
/* ---- C5 hero ---- */
.hero-v2.hp-c5{background:linear-gradient(180deg,#f4f7fd 0%,#e7eefa 100%)}
.hero-v2.hp-c5>.hero-overlay,.hero-v2.hp-c5>.hero-fade{display:none}
.hero-v2.hp-c5 h1{color:#0f172a}
.hero-v2.hp-c5 h1 .text-blue-300{color:#2563eb}
.hero-v2.hp-c5 .hero-inner p{color:#334155}
.hero-v2.hp-c5 .hero-ctas>a:first-child{background:#2563eb;color:#fff;box-shadow:0 10px 24px -10px rgba(37,99,235,.7)}
.hero-v2.hp-c5 .hero-ctas>a:last-child{color:#0f172a;border-color:rgba(15,23,42,.22)}
.hero-v2.hp-c5 .hero-ctas>a:last-child:hover{background:rgba(15,23,42,.05);border-color:rgba(15,23,42,.4)}
.hero-v2.hp-c5 .hero-award-text{color:#475569}
.hero-v2.hp-c5 .hero-award-text .text-white,.hero-v2.hp-c5 .hero-stats .text-white{color:#0f172a}
.hero-v2.hp-c5 .hero-stat-label{color:#64748b}
.hero-v2.hp-c5 .hero-stat,.hero-v2.hp-c5 .hero-stats{border-color:rgba(15,23,42,.12)}
@media (min-width:1024px){
  /* photo box: from 110 px before the right grid column (72rem container, 2rem padding, 3rem gap) to the edge */
  .hero-v2.hp-c5{--hp-ps:calc((100% - min(100%,72rem)) / 2 + 2rem + (min(100%,72rem) - 7rem) / 2 + 3rem - 110px);min-height:max(640px,min(800px,calc(100vh - 92px)))}
  .hero-v2.hp-c5>picture img{left:var(--hp-ps);right:auto;width:calc(100% - var(--hp-ps));object-position:50% 22%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%),linear-gradient(to top,transparent 0,#000 22%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 24%),linear-gradient(to top,transparent 0,#000 22%);mask-composite:intersect}
  [dir="rtl"] .hero-v2.hp-c5>picture img{left:auto;right:var(--hp-ps)}
  .hero-v2.hp-c5 .hero-inner{padding-top:3.2rem;padding-bottom:3.6rem}
  .hero-v2.hp-c5 h1{font-size:clamp(2.5rem,3.45vw,3.2rem);margin-bottom:1.1rem}
  .hero-v2.hp-c5 .hero-ctas{margin-bottom:1.8rem}
  .hero-v2.hp-c5 .hero-inner>div>div:first-child{order:2}
  .hero-v2.hp-c5 .hero-inner>div>div:last-child{order:1}
  .hero-v2.hp-c5 .hp-spacer{display:none}
}
@media (max-width:1023.98px){
  /* photo first (fading into the background), then the text; the phone row stays below the hero */
  .hero-v2.hp-c5{flex-direction:column;align-items:stretch;min-height:0;background:linear-gradient(180deg,#eef3fb 0%,#f4f7fd 40%,#fff 100%)}
  .hero-v2.hp-c5>picture{order:1;display:block}
  .hero-v2.hp-c5>picture img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 28%;
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 30%);mask-image:linear-gradient(to top,transparent 0,#000 30%)}
  .hero-v2.hp-c5 .hero-inner{order:2;margin-top:-.5rem;padding-top:0;padding-bottom:1rem}
  div:has(>.hp-mobile){background:transparent!important}
}
@media (min-width:1024px) and (max-width:1279.98px){
  /* narrow desktops and tablets in landscape: no room beside the faces, so the phones go to the row under the hero */
  .hp-layer{display:none!important}
  div:has(>.hp-mobile){display:block!important;background:transparent!important}
}