/* Apartment page — picture-specific values and the one section only this page has (care for a family member).
   The other sections live in /shared/css/solution-page.css. */

/* Hero: full-height picture as on every page, but wider and with an eased fade so its edge melts in gradually */
.vh__img{width:min(74%,1150px);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,rgba(0,0,0,.86) 56%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.36) 76%,rgba(0,0,0,.14) 86%,transparent 97%);mask-image:linear-gradient(90deg,#000 0%,#000 46%,rgba(0,0,0,.86) 56%,rgba(0,0,0,.62) 66%,rgba(0,0,0,.36) 76%,rgba(0,0,0,.14) 86%,transparent 97%)}
@media(max-width:860px){.vh__img{width:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%);mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}}

/* Floor plan: white picture on a light card; marker positions are percentages of the picture */
.property-map{--pm-ratio:1672/940}
.property-map__image{border-radius:18px;background:#fff;filter:none;box-shadow:0 18px 40px rgba(16,38,74,.12)}
.pm-marker--entry{left:41%;top:84%}
.pm-marker--window{left:11%;top:62%}
.pm-marker--interior{left:47%;top:40%}
.pm-marker--kitchen{left:34%;top:16%}
.pm-marker--bath{left:55%;top:68%}
.pm-marker--smoke{left:21%;top:31%}
.pm-marker--sos{left:75%;top:70%}
.pm-marker--emergency{color:#d9482f}

/* Home / night / away: zones of the upper unit in the facade picture */
.zone-state{--zs-ratio:1672/941}
.zone-overlay--interior{left:41%;top:26%;width:19.5%;height:24%;background:rgba(44,147,255,.24);border-color:rgba(110,190,255,.7)}
.zone-overlay--entry{left:61%;top:26%;width:15%;height:24%;background:rgba(42,209,204,.24);border-color:rgba(100,236,228,.7)}
.zone-overlay--bedroom{left:77%;top:22%;width:14.5%;height:28%;background:rgba(110,220,100,.22);border-color:rgba(150,240,140,.7)}
.zone-marker--interior{left:50.5%;top:25%}
.zone-marker--entry{left:68.5%;top:25%}
.zone-marker--bedroom{left:84%;top:21%}

/* S05 — care: a family member who needs help presses the emergency button */
.ap-care{margin-top:0;padding:72px 0;background:#f3f7fb}
@media(max-width:1040px){.ap-care{padding:48px 0}}
.ap-care__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:center;direction:rtl}
.ap-care__copy h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.ap-care__copy p{margin:14px 0 22px;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.ap-care__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ap-care__steps li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#fff;color:#0b223f;font-size:14.5px;font-weight:800;box-shadow:0 4px 14px rgba(16,38,74,.06)}
.ap-care__steps span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eaf3ff;color:var(--brand)}
.ap-care__steps li:first-child span{background:#fde9e5;color:#d9482f}
.ap-care__steps svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-care__media{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 24px 50px rgba(16,38,74,.2)}
.ap-care__media>img{width:100%;height:100%;object-fit:cover;object-position:78% center}
.ap-care__device{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 10px 24px rgba(0,0,0,.25);direction:rtl}
.ap-care__device img{width:auto;height:56px;object-fit:contain}
.ap-care__device span{display:grid;gap:1px}
.ap-care__device b{color:#0b223f;font-size:14.5px;font-weight:850}
.ap-care__device small{color:#5f7183;font-size:12.5px;font-weight:650}
@media(max-width:1180px){.ap-care__inner{grid-template-columns:1fr;gap:32px}.ap-care__copy{max-width:720px}}
@media(max-width:560px){.ap-care__device{right:12px;bottom:12px;padding:8px 12px 8px 10px}.ap-care__device img{height:44px}}

/* S04 — one day at home: five moments on a timeline, each showing what the system does and with which product */
.ap-day{margin-top:0;padding:80px 0;background:#fff}
@media(max-width:1040px){.ap-day{padding:52px 0}}
.ap-day__inner{width:min(calc(100% - (2 * var(--vs-gutter))),var(--vs-shell));margin-inline:auto;direction:rtl}
.ap-day__head{max-width:760px;margin:0 auto 40px;text-align:center}
.ap-day__head h2{margin:0;color:#0b223f;font-size:clamp(25px,2.35vw,35px);line-height:1.35;font-weight:850;letter-spacing:-.02em}
.ap-day__head p{margin:12px 0 0;color:#45536b;font-size:15px;line-height:1.85;font-weight:700}
.ap-day__line{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* the day's line runs behind the dots, from a morning tint to a night tint */
.ap-day__line::before{content:"";position:absolute;top:60px;right:10%;left:10%;height:4px;border-radius:4px;background:linear-gradient(270deg,#ffc56b,#7fb6ff 45%,#2a3f7a)}
.ap-day__stop{display:flex;flex-direction:column;align-items:center}
.ap-day__stop time{color:#5f7183;font-size:14px;font-weight:800;direction:ltr;margin-bottom:10px}
.ap-day__dot{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--brand);box-shadow:0 0 0 5px #fff,0 0 0 7px #d5e2f3}
.ap-day__stop--alert .ap-day__dot{color:#d9482f;box-shadow:0 0 0 5px #fff,0 0 0 7px #f6c9bf}
.ap-day__dot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ap-day__card{flex:1;width:100%;margin-top:18px;padding:16px 16px 18px;border-radius:16px;background:#f3f7fb;text-align:right;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.ap-day__card:hover{background:#eaf5ff;box-shadow:0 12px 26px rgba(8,58,119,.12);transform:translateY(-2px)}
.ap-day__tag{display:inline-block;padding:3px 10px;border-radius:999px;background:#e1ebfa;color:#0b5ad6;font-size:12px;font-weight:800}
.ap-day__stop--alert .ap-day__tag{background:#fde9e5;color:#c23d26}
.ap-day__card h3{margin:10px 0 6px;color:#0b223f;font-size:16.5px;font-weight:850;line-height:1.5}
.ap-day__card p{margin:0;color:#45536b;font-size:14px;line-height:1.85;font-weight:600}
.ap-day__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ap-day__links a{padding:4px 11px;border-radius:999px;background:#fff;color:#0e377b;font-size:12.5px;font-weight:800;text-decoration:none;box-shadow:0 2px 8px rgba(16,38,74,.06);transition:color .2s ease}
.ap-day__links a:hover{color:var(--brand)}
@keyframes ap-day-rise{from{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:no-preference){.ap-day.is-revealed .ap-day__stop{animation:ap-day-rise .55s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.1s + var(--k) * .09s)}}
@media(max-width:1100px){
  .ap-day__line{grid-template-columns:1fr;gap:0;max-width:640px;margin-inline:auto}
  .ap-day__line::before{top:20px;bottom:20px;right:25px;left:auto;width:4px;height:auto;background:linear-gradient(180deg,#ffc56b,#7fb6ff 45%,#2a3f7a)}
  .ap-day__stop{display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start;padding-bottom:22px}
  .ap-day__dot{grid-row:1/3;grid-column:1}
  .ap-day__stop time{grid-column:2;margin:4px 0 0;text-align:right}
  .ap-day__card{grid-column:2;margin-top:8px}
}