/* Qarhami Web 2.5 — Devices (product.html) and Pricing (pricing.html).
   Devices: the device beside its vehicle card, device thumbnails in the comparison table,
            and the widescreen laptop with the live Dashboard and alerts arriving.
   Pricing: the centred eyebrow, and the Fleet OS window beside "In every plan" that plays
            each feature's real workflow from the Qarhami app. */

/* ---------- eyebrow inside the H1 (keyword + display line) ---------- */
.h-display>.lbl{margin-bottom:18px}
.prc-hero__head .h-display>.lbl{justify-content:center;margin-bottom:16px}
.phero__copy .h-display>.lbl{margin-bottom:22px}

/* ================= Devices: device + its card ================= */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:26px}
.pair__p{display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--hair-2);border-radius:24px;padding:18px 18px 22px}
.pair__dev{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,22px)}
.pair__img{position:relative;aspect-ratio:16/11;display:grid;place-items:center;border-radius:18px;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 42%,#fff 0%,rgba(255,255,255,.65) 55%,rgba(255,255,255,0) 100%),linear-gradient(160deg,#fff 0%,var(--in-50) 100%);
  border:1px solid var(--hair-2)}
.pair__img::after{content:"";position:absolute;left:18%;right:18%;bottom:13%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(37,21,96,.22),rgba(37,21,96,0));z-index:0}
.pair__img img{position:relative;z-index:1;width:82%;height:auto;max-height:84%;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(18,12,46,.26))}
.pair__k{font-family:var(--arch);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--in-700);line-height:1.4}
.pair__id h3{font-family:var(--nexa);font-weight:900;font-size:clamp(21px,2.1vw,27px);line-height:1.1;color:var(--ink);margin:6px 0 8px}
.pair__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;line-height:1.3}
.pair__price b{font-family:var(--nexa);font-weight:900;font-size:clamp(24px,2.4vw,30px);color:var(--ink);letter-spacing:-.01em}
.pair__price span{font-size:13px;color:var(--muted)}
.pair__plan{margin-top:2px;font-size:13px;line-height:1.45;color:var(--muted)}
.pair__no{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 18px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--hair-2);font-size:13.5px;line-height:1.5;color:var(--muted)}
.pair__no svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--cr)}
.pair__link{display:flex;align-items:center;gap:12px;margin:18px 6px 12px;font-family:var(--arch);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.pair__link i{flex:1;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--in-200) 0 6px,transparent 6px 12px)}
.pair__link i:last-child{position:relative}
.pair__link i:last-child::after{content:"";position:absolute;right:-1px;top:50%;width:7px;height:7px;border-right:2px solid var(--in-200);border-bottom:2px solid var(--in-200);translate:0 -50%;rotate:-45deg}
.pair__card{margin:0}
.pair__card img{width:100%;height:auto;border-radius:16px;box-shadow:var(--sh-card);background:#fff}
.pair__card figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.55}
.pair__best{margin:14px 0 18px;font-size:14.5px;line-height:1.55;color:var(--gun)}
.pair__best b{display:block;font-family:var(--arch);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mt-700);margin-bottom:4px}
.pair__cta{margin-top:auto;width:100%}
@media (max-width:760px){
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair__dev{grid-template-columns:minmax(0,40%) minmax(0,1fr)}
}

/* the device in the table header */
.cmp--dev thead th{vertical-align:middle}
.cmp--dev th .cmp__dev{display:inline-flex;align-items:center;gap:10px}
.cmp--dev th img{height:30px;width:auto;flex:none;filter:drop-shadow(0 4px 6px rgba(18,12,46,.22))}
.cmp--dev tbody tr:nth-child(-n+2) td{color:var(--ink);font-weight:600}
.cmp--dev tbody tr:nth-child(-n+2) td:first-child{color:var(--ink)}
@media (max-width:760px){.cmp--dev th img{height:24px}.cmp--dev th .cmp__dev{gap:8px}}

/* ================= Devices: the widescreen laptop ================= */
.lapst{position:relative;width:min(1120px,100%);margin:0 auto;aspect-ratio:1.55}
.lapst__lap{position:absolute;left:6.5%;top:3%;width:78%;z-index:1;will-change:transform}
.lapst__ph{position:absolute;right:.5%;bottom:0;width:18%;z-index:3;transform:rotate(3deg);will-change:transform}
.lapst__ph .dv{width:100%}
.lap{position:relative}
.lap::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-3.2%;height:6%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(37,21,96,.34),rgba(37,21,96,0));filter:blur(5px)}
.lap__lid{position:relative;padding:1.9% 1.9% 2.4%;border-radius:2% / 3.4%;
  background:linear-gradient(180deg,#2b2d36 0%,#14151b 60%,#101116 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 0 0 1.5px #bfc1c9,0 0 0 2.5px #8e919a,0 40px 70px -30px rgba(37,21,96,.35)}
.lap__cam{position:absolute;top:.72%;left:50%;width:.55%;aspect-ratio:1;border-radius:50%;translate:-50% 0;z-index:2;
  background:radial-gradient(circle at 35% 35%,#555966 0%,#15161c 65%)}
.lap__scr{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:.45% / .8%;background:#fff}
.lap__scr>img,.lap__scr>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.lap__scr>video.vlive{z-index:1}
.lap__scr::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 36%)}
.lap__base{position:relative;width:114%;margin-left:-7%;height:0;padding-bottom:3.1%;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:linear-gradient(180deg,#f3f4f7 0%,#dcdee3 34%,#b4b7bf 78%,#9b9ea7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 2px rgba(0,0,0,.12)}
.lap__base i{position:absolute;top:0;left:50%;translate:-50% 0;width:13%;height:44%;border-radius:0 0 10px 10px / 0 0 7px 7px;
  background:linear-gradient(180deg,#a9acb4 0%,#d6d8dd 100%)}

/* alerts arriving on the Dashboard: the newest on top */
.lapst__nt{position:absolute;left:60.6%;top:12.5%;width:21%;z-index:4;pointer-events:none}
.nt{position:absolute;left:0;top:0;width:100%;margin:0;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 22px 38px -22px rgba(37,21,96,.6),0 4px 12px rgba(37,21,96,.10),0 0 0 1px rgba(37,21,96,.07);
  opacity:0;transform:translateY(calc(var(--s,0) * 112%)) scale(.94);transform-origin:50% 0;
  transition:transform .65s cubic-bezier(.34,1.32,.64,1),opacity .45s var(--ease),box-shadow .6s var(--ease)}
.nt img{display:block;width:100%;height:auto}
.nt.is-in{opacity:1;transform:translateY(calc(var(--s,0) * 112%))}
.nt.is-out{opacity:0;transform:translateY(calc(var(--s,0) * 112%)) scale(.96)}
.nt.is-reset{transition:none!important;opacity:0;transform:translateY(-40%) scale(.92)}
.nt.is-in.is-new{transition-delay:.12s}
.nt.is-out{transition-duration:.45s,.28s,.6s}
.nt.is-new{box-shadow:0 22px 38px -22px rgba(37,21,96,.6),0 4px 12px rgba(37,21,96,.10),0 0 0 2px rgba(89,51,229,.55)}
@media (max-width:700px){
  .lapst{aspect-ratio:1.12}
  .lapst__lap{left:7%;top:2%;width:86%}
  .lapst__ph{width:25%;right:-1%}
  .lapst__nt{left:2%;top:73%;width:60%}
  .nt{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){.nt{transition:none}}

/* ================= Pricing: the Fleet OS window ================= */
.osx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"head view" "grid grid";column-gap:clamp(32px,5vw,72px);align-items:end}
.osx__head{grid-area:head;margin-bottom:0;max-width:640px}
.osx__view{grid-area:view;min-width:0}
.osx__grid{grid-area:grid}
.osw{position:relative;border-radius:20px;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh-win);overflow:hidden}
.osw__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-bottom:1px solid var(--hair-2);background:var(--paper-2)}
.osw__bar>i{flex:none;width:9px;height:9px;border-radius:50%;background:#dcd8ec}
.osw__name{flex:1;min-width:0;margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--arch);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--in-700)}
.osw__live{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--mt-700)}
.osw__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mt);box-shadow:0 0 0 0 rgba(13,188,147,.5);animation:oswPulse 2.4s ease-out infinite}
@keyframes oswPulse{0%{box-shadow:0 0 0 0 rgba(13,188,147,.45)}70%,100%{box-shadow:0 0 0 7px rgba(13,188,147,0)}}
.osw__scr{position:relative;aspect-ratio:1000/774;background:#fff;overflow:hidden}
.osw__still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.osw__still img.is-on{opacity:1}
.osw__lot{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .4s var(--ease);background:#fff}
.osw__lot.is-on{opacity:1}
.osw__lot svg{display:block;width:100%!important;height:100%!important}
.osw__load{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;overflow:hidden;opacity:0;transition:opacity .3s}
.osw__load.is-on{opacity:1}
.osw__load i{position:absolute;top:0;bottom:0;width:30%;background:var(--in);border-radius:3px;animation:oswLoad 1.1s var(--ease) infinite}
@keyframes oswLoad{0%{left:-30%}100%{left:100%}}

.osx .osg__c{position:relative;cursor:pointer;outline:0;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.osx .osg__c:hover{border-color:var(--in-100)}
.osx .osg__c[aria-selected="true"]{border-color:var(--in-200);background-color:#fff;box-shadow:0 18px 40px -22px rgba(89,51,229,.5),0 1px 2px rgba(37,21,96,.05)}
.osx .osg__c[aria-selected="true"] h4{color:var(--in-700)}
.osx .osg__c::after{content:"";position:absolute;left:24px;bottom:-1px;height:3px;width:calc((100% - 48px) * var(--p,0));border-radius:3px 3px 0 0;background:var(--in);opacity:0;transition:opacity .25s}
.osx .osg__c[aria-selected="true"]::after{opacity:1}
.osx .osg__c:focus-visible{box-shadow:0 0 0 3px var(--in-300),0 18px 40px -22px rgba(89,51,229,.5)}
@media (max-width:900px){
  .osx{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "view" "grid"}
  .osx__head{margin-bottom:clamp(24px,4vw,36px)}
  .osx__view{position:sticky;top:calc(var(--hdr) + 10px);z-index:5;width:100%;max-width:560px;margin:0 auto}
  .osw{box-shadow:0 24px 50px -26px rgba(37,21,96,.45),0 2px 8px rgba(37,21,96,.08)}
}
@media (max-width:640px){
  .osw__scr{aspect-ratio:16/11}
  .osw__bar{height:34px}
  .osx__view{top:calc(var(--hdr) + 6px)}
}
@media (prefers-reduced-motion:reduce){.osw__live::before{animation:none}.osw__still img{transition:none}}

/* more than 10 devices in the estimate: fleet pricing */
.est__fleet{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.est__fleet a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* what the laptop and phone show, in three lines */
.lapcaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,32px);max-width:1040px;margin:clamp(28px,3.8vw,48px) auto 0;padding:0;list-style:none}
.lapcaps li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--muted)}
.lapcaps svg{flex:none;width:38px;height:38px;padding:9px;border-radius:12px;background:#fff;border:1px solid var(--hair-2);color:var(--in);box-shadow:0 1px 2px rgba(37,21,96,.05)}
.lapcaps b{display:block;font-family:var(--nexa);font-weight:900;font-size:16px;line-height:1.3;color:var(--ink);margin-bottom:3px}
@media (max-width:760px){.lapcaps{grid-template-columns:minmax(0,1fr);max-width:520px}}
/* 2.5.1 · Devices: the 360 section gets its own top padding inside the continuous dark run, and a shorter bottom so the
   anatomy story follows without a dead band; the anatomy section keeps a little room before Choose your device. */
#turn{padding-top:clamp(40px,4.5vw,72px);padding-bottom:clamp(24px,3vw,48px)}
.phero{padding-bottom:clamp(32px,4vw,64px)}
#anatomy{padding-bottom:clamp(40px,5vw,72px)}