/* ===== Raahi D1 · bento ("Made for Pakistan"). Option 1 reuses raahi-pk's bento (css/cities.css) with two tiles
   rebuilt in the reference's style; option 2 is a new dark bento of quiet real-UI vignettes. ===== */
.bento { --paper: #fff; --green: #0F6B47; --saffron: #F2A33A; --dusk: #1E3557; --teal: #0F4C4F; --down: #D4442E;
  --font: "Switzer", ui-sans-serif, system-ui, sans-serif; --r-frame: 26px; --max: 1200px; --pad-x: clamp(20px, 4vw, 56px);
  --ease-out: cubic-bezier(.19, 1, .22, 1); --ease-ui: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tile: #131715; --tile-line: rgba(255,255,255,.06);
  padding: clamp(96px, 14vh, 150px) 0; background: var(--cement); transition: background-color .6s var(--e); font-family: var(--font); }

.bento__head { display: grid; justify-items: center; gap: 14px; margin: 0 auto clamp(36px, 5vh, 52px); padding: 0 20px; text-align: center; font-family: var(--display); }
.bento__h { margin: 0; font-size: clamp(2rem, 1.1rem + 2vw, 3rem); font-weight: 500; line-height: 1.04; letter-spacing: -.045em; color: var(--ink); transition: color .6s var(--e); }
.bento__h .dim { color: var(--dim); }
.bento__sw { display: inline-flex; gap: 3px; margin-top: 6px; padding: 4px; border-radius: 22px; background: rgba(13,18,16,.06); }
.bento__sw button { height: 34px; padding: 0 16px; border: 0; border-radius: 17px; background: none; font: 500 13.5px/1 var(--display); color: var(--graphite); cursor: pointer; }
.bento__sw button[aria-selected="true"] { background: #fff; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(13,18,16,.12); }
[data-grid][hidden] { display: none !important; }

.bx {
  max-width: calc(var(--max) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 264px); gap: 12px;
  grid-template-areas:
    "m2  m2  plug live"
    "m2  m2  lhr  isb"
    "khi khi lhr  batt";
}
.bx__t {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; padding: 26px; border-radius: var(--r-frame); color: #fff;
  clip-path: inset(0 round var(--r-frame));
}
.bx__t--m2 { grid-area: m2; background: var(--green); padding: 34px; }
.bx__t--plug { grid-area: plug; background: var(--ink); }
.bx__t--live { grid-area: live; background: var(--paper); color: var(--ink); }
.bx__t--lhr { grid-area: lhr; background: var(--dusk); }
.bx__t--isb { grid-area: isb; background: var(--teal); }
.bx__t--khi { grid-area: khi; background: var(--saffron); color: var(--ink); }
.bx__t--batt { grid-area: batt; background: var(--paper); color: var(--ink); }

/* type: the headline is the copy; a meta line at most */
.bx__h { position: relative; z-index: 2; margin: 0; font-size: clamp(1.5rem, 1.1rem + .8vw, 2rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.bx__t--m2 .bx__h { font-size: clamp(2.5rem, 1.4rem + 2.8vw, 4.25rem); letter-spacing: -.05em; line-height: .94; }
.bx__m { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 500; opacity: .72; }
.bx__t--khi .bx__m { opacity: .66; }
.plate { padding: 3px 7px 2px; border-radius: 5px; background: #fff; color: var(--green); font-family: Overpass, var(--font); font-size: 12px; letter-spacing: .02em; opacity: 1; }
.bx__t--khi .plate { background: var(--ink); color: var(--saffron); }

.bx__go {
  position: absolute; z-index: 3; top: 20px; right: 20px;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: currentColor;
  transition: background-color .25s var(--ease-ui), transform .4s var(--ease-spring);
}
.bx__t--m2 .bx__go { top: 28px; right: 28px; width: 46px; height: 46px; }
.bx__t--khi .bx__go { background: rgba(13, 18, 16, .1); }
a.bx__t:hover .bx__go { background: #fff; color: var(--ink); transform: translateX(3px); }
a.bx__t:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 3D objects: bleed off the edge, lift on hover */
.bx__obj { position: absolute; z-index: 1; width: auto; max-width: none; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .32)); transition: transform .7s var(--ease-spring); pointer-events: none; }

/* M-2 hero: the road runs in from the left, the sign stands on the right */
.bx__t--m2::before { content: ""; position: absolute; inset: auto -10% -30% 30%; height: 70%; z-index: 0; background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent); }
.m2-road { left: -40px; bottom: -36px; height: 300px; transform: rotate(-4deg); filter: none; }
.m2-sign { right: 34px; bottom: -22px; height: 330px; transform: rotate(4deg); }
.bx__t--m2:hover .m2-sign { transform: rotate(1deg) translateY(-10px); }
.bx__t--m2:hover .m2-road { transform: rotate(-4deg) translateX(8px); }
.m2-stops { position: relative; z-index: 2; display: flex; gap: 6px; margin-top: 20px; }
.m2-stops span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: 12.5px; font-weight: 500; backdrop-filter: blur(6px); }
.m2-stops i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }

/* plug */
.bx__chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.bx__chips span { padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 500; }
.plug-obj { right: -26px; bottom: -18px; height: 168px; transform: rotate(-10deg); }
.bx__t--plug:hover .plug-obj { transform: rotate(-4deg) translateY(-8px); }

/* live: one number */
.bx__t--live { justify-content: space-between; }
.bx__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--graphite); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--live); opacity: 0; animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.6); } }
.bx__num { display: block; font-size: clamp(3.5rem, 2.2rem + 2.8vw, 5rem); font-weight: 500; line-height: .86; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.bx__lbl { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--graphite); }
/* bays as cells, like the motorway ticks on the map: green free, amber busy, red down */
.bx__cells { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-top: 14px; }
.bx__cells i { height: 14px; border-radius: 2px; background: rgba(13, 18, 16, .08); transition: background-color .3s var(--ease-ui); transition-delay: calc(var(--n) * 22ms + .2s); }
.bx.is-in .bx__cells i.is-live { background: var(--live); } .bx.is-in .bx__cells i.is-busy { background: var(--busy); } .bx.is-in .bx__cells i.is-down { background: var(--down); }
.bx__t--live .bx__num { font-size: clamp(3rem, 2rem + 2.2vw, 4.25rem); }
/* the charger: a small DC post with a lit screen, top right */
.post { position: absolute; top: 18px; right: 20px; width: 74px; height: auto; transition: transform .6s var(--ease-spring); }
.bx__t--live:hover .post { transform: translateY(-4px); }
.post__scr { animation: scr 2.6s var(--ease-ui) infinite; }
@keyframes scr { 50% { opacity: .75; } }

/* Lahore: night sky, Badshahi skyline, one glowing pin */
.bx__t--lhr { background: linear-gradient(180deg, #16294A 0%, var(--dusk) 55%, #2A4670 100%); }
.lhr-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lhr-moon { position: absolute; top: 96px; right: 30px; width: 30px; height: 30px; border-radius: 50%; box-shadow: -7px 5px 0 0 #F6E3B4; transform: rotate(-20deg); }
.lhr-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .55; }
.lhr-skyline { position: absolute; left: -30%; bottom: 0; z-index: 0; width: 160%; max-width: none; height: auto; }
svg.bx__obj { aspect-ratio: 100 / 128; overflow: visible; }
.lhr-pin { z-index: 2; left: 24%; bottom: 20px; height: 112px; transform: translateX(-50%); filter: drop-shadow(0 0 22px rgba(70, 220, 140, .35)) drop-shadow(0 0 1px rgba(200, 255, 225, .5)); }
.bx__t--lhr:hover .lhr-pin { transform: translateX(-50%) translateY(-6px); }
/* the pin's own light on the ground, and its contact shadow right under the tip */
.lhr-pool { position: absolute; z-index: 1; left: 24%; bottom: 4px; width: 210px; height: 56px; margin-left: -105px; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 200, 120, .32), rgba(60, 200, 120, .1) 55%, transparent); }
.lhr-shadow { position: absolute; z-index: 1; left: 24%; bottom: 16px; width: 64px; height: 14px; margin-left: -32px; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 10, 22, .75), rgba(4, 10, 22, .3) 60%, transparent); filter: blur(1.5px); transition: transform .7s var(--ease-spring), opacity .7s var(--ease-spring); }
.bx__t--lhr:hover .lhr-shadow { transform: scale(.8); opacity: .7; }

/* Islamabad: the sector grid, seen from above at an angle */
.isb-grid {
  position: absolute; z-index: 0; right: -50px; bottom: -70px; width: 270px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  transform: perspective(700px) rotateX(52deg) rotateZ(-32deg); transform-origin: 50% 50%;
}
.isb-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .5); }
.isb-grid span.on { background: rgba(255, 255, 255, .22); color: #fff; }
.isb-pin { z-index: 2; right: 66px; bottom: 54px; height: 104px; filter: drop-shadow(0 0 1px rgba(210, 255, 230, .45)) drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); }
.isb-shadow { position: absolute; z-index: 1; right: 84px; bottom: 46px; width: 46px; height: 13px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 18, 18, .7), rgba(0, 18, 18, .25) 60%, transparent); filter: blur(1.5px); transition: transform .7s var(--ease-spring), opacity .7s var(--ease-spring); }
.bx__t--isb:hover .isb-shadow { transform: scale(.8); opacity: .7; }
.bx__t--isb:hover .isb-pin { transform: translateY(-8px); }

/* Karachi: the car drives the M-9 */
.bx__t--khi .bx__h { max-width: 7em; }
.khi-road { position: absolute; z-index: 0; left: 0; right: 0; bottom: 34px; height: 76px; background: #2B2F2D; box-shadow: 0 -10px 0 rgba(13, 18, 16, .08); }
.khi-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, rgba(255, 255, 255, .7) 0 26px, transparent 26px) 0 0 / 52px 3px repeat-x; animation: lane 1.1s linear infinite; animation-play-state: paused; }
.bx.is-run .khi-road::before { animation-play-state: running; }
@keyframes lane { to { background-position: -52px 0; } }
.khi-road::after { content: ""; position: absolute; left: 0; right: 0; bottom: -34px; height: 34px; background: #F7B85A; }
.khi-car { left: 56%; bottom: calc(34px + 38px - 56px); height: 112px; transform: rotate(90deg); transform-origin: 50% 50%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .35)); }
.bx.is-run .khi-car { animation: drift 3.4s ease-in-out infinite; }
@keyframes drift { 50% { translate: 18px 0; } }
.khi-km { position: absolute; z-index: 2; left: 26px; bottom: 58px; padding: 4px 8px; border-radius: 6px; background: #fff; font-family: Overpass, var(--font); font-size: 12px; color: var(--ink); }

/* battery: one number + one object */
.bx__t--batt .bx__num { font-size: clamp(2.6rem, 1.8rem + 1.8vw, 3.5rem); margin-top: auto; }
.batt-obj { right: -18px; top: -6px; height: 150px; transform: rotate(12deg); }
.bx__t--batt:hover .batt-obj { transform: rotate(6deg) translateY(-6px); }

/* reveal */
.js .bx__t { opacity: 0; transform: translateY(28px); }
.bx.is-in .bx__t { opacity: 1; transform: none; transition: opacity .7s var(--ease-ui), transform 1s var(--ease-out); }
.bx.is-in .bx__t:nth-child(2) { transition-delay: .06s; } .bx.is-in .bx__t:nth-child(3) { transition-delay: .12s; }
.bx.is-in .bx__t:nth-child(4) { transition-delay: .18s; } .bx.is-in .bx__t:nth-child(5) { transition-delay: .24s; }
.bx.is-in .bx__t:nth-child(6) { transition-delay: .30s; } .bx.is-in .bx__t:nth-child(7) { transition-delay: .36s; }

@media (max-width: 1100px) {
  .bx { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 440px 250px 250px 250px 250px;
    grid-template-areas: "m2 m2" "plug live" "lhr isb" "lhr batt" "khi khi"; }
}
@media (max-width: 640px) {
  .bx { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 200px; grid-template-areas: none; gap: 10px; }
  .bx__t { grid-area: auto !important; padding: 18px; }
  .bx__t--m2 { grid-area: span 2 / span 2 !important; padding: 22px; }
  .bx__t--lhr { grid-area: span 2 / span 2 !important; }
  .bx__t--khi { grid-area: auto / span 2 !important; }
  .bx__h { font-size: 1.375rem; }
  .bx__t--m2 .bx__h { font-size: 2.5rem; }
  .bx__go { top: 14px; right: 14px; width: 34px; height: 34px; }
  .m2-road { height: 210px; left: -40px; bottom: -30px; }
  .m2-sign { height: 230px; right: 10px; }
  .m2-stops { display: none; }
  .plug-obj { height: 112px; right: -24px; bottom: 30px; }
  .bx__chips span { padding: 5px 8px; font-size: 11.5px; }
  .bx__num, .bx__t--live .bx__num { font-size: 2.75rem; }
  .post { width: 52px; top: 14px; right: 14px; }
  .bx__cells { grid-template-columns: repeat(10, minmax(0, 1fr)); } .bx__cells i:nth-child(n + 11) { display: none; } .bx__t--batt .bx__num { font-size: 2.25rem; }
  .bx__lbl { font-size: 12.5px; }
  .batt-obj { height: 104px; }
  .isb-grid { width: 190px; right: -50px; bottom: -50px; gap: 6px; } .isb-grid span { font-size: 10px; }
  .isb-pin { height: 72px; right: 40px; bottom: 34px; }
  .isb-shadow { right: 52px; bottom: 28px; width: 34px; height: 10px; }
  .bx__t--isb .bx__m, .bx__t--batt .bx__m { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .bx__t { opacity: 1; transform: none; }
  .pulse::after, .bx.is-run .khi-car, .khi-road::before { animation: none; }
}

/* ---------- reference-style tiles, in our light system: white tile, one quiet piece of real UI, a centred ink caption.
   Every Live Activity uses the same translucent glass as the benefit cards. ---------- */
.bento { --glass: linear-gradient(180deg, rgba(18,20,19,.62), rgba(8,9,9,.7)); }
.bq { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 22px 24px;
  border-radius: var(--r-frame); background: #fff; color: var(--ink); text-align: center; font-family: var(--font); }
.bx__t.bq { background: #fff !important; color: var(--ink); padding: 26px 22px 24px; }
.vn-cap { position: relative; z-index: 2; display: block; font-size: 16.5px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.lae { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -12px rgba(13,18,16,.45); color: #fff; }

/* a light lock screen (pale green, faint Islamabad streets), phone cropped and fading at the bottom */
.vn-phone { position: relative; flex: 1; width: 100%; max-width: 280px; min-height: 260px; margin-top: 4px; padding: 54px 12px 14px; border: 7px solid #0B0C0C; border-bottom: 0; border-radius: 46px 46px 0 0;
  background: linear-gradient(180deg, #EAF3EE 0%, #DCEBE2 60%, #CFE4D7 100%); box-shadow: 0 0 0 1px #2B2E2D, 0 20px 40px -20px rgba(13,18,16,.35);
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); display: flex; flex-direction: column; align-items: center; isolation: isolate; }
.vn-phone::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(assets/map-isb.webp) 40% 30% / 260% auto no-repeat; opacity: .16; }
.vn-island { position: absolute; top: 10px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 11px; background: #000; }
.vn-time { font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: rgba(13,18,16,.86); }
.vn-date { margin-top: 6px; font-size: 13px; font-weight: 500; color: rgba(13,18,16,.55); }
.vn-la { width: 100%; margin-top: auto; margin-bottom: 18px; padding: 12px; border-radius: 22px; text-align: left;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -12px rgba(13,18,16,.45); color: #fff; }
.vn-la__row { display: flex; align-items: center; gap: 10px; }
.vn-ring { position: relative; flex: none; width: 34px; height: 34px; color: var(--live); }
.vn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vn-ring circle { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 3.5; }
.vn-ring circle.v { stroke: #3BD67F; stroke-linecap: round; stroke-dasharray: var(--v) 1; }
.vn-ring i { position: absolute; inset: 0; display: grid; place-items: center; color: #3BD67F; } .vn-ring i svg { width: 14px; height: 14px; transform: none; }
.vn-la__t { display: grid; gap: 2px; } .vn-la__t b { font-size: 13.5px; font-weight: 600; } .vn-la__t small { font-size: 12px; color: rgba(255,255,255,.62); }
.vn-la__p { margin-left: auto; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #3BD67F; }
.vn-bar { display: block; height: 5px; margin-top: 10px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.vn-bar i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1E9E5A, #5BE39A); }

/* the Dynamic Island, expanded: a phone top seen close, with the charging Live Activity in the island */
.bq--isl { justify-content: space-between; padding-top: 22px; }
.vn-top { position: relative; width: 100%; max-width: 280px; height: 134px; padding: 12px 10px 0; border: 7px solid #0B0C0C; border-bottom: 0; border-radius: 42px 42px 0 0;
  background: linear-gradient(180deg, #EAF3EE, #DCEBE2); box-shadow: 0 0 0 1px #2B2E2D, 0 20px 40px -20px rgba(13,18,16,.3);
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); isolation: isolate; }
.vn-top::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(assets/map-isb.webp) 60% 20% / 300% auto no-repeat; opacity: .16; }
.vn-ila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 30px; text-align: left;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -12px rgba(13,18,16,.45); color: #fff; }
.vn-ring--sm { width: 34px; height: 34px; }
.vn-ila__c { display: grid; gap: 2px; justify-items: center; }
.vn-ila__c b { display: inline-flex; align-items: center; gap: 5px; font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vn-ila__c b i { display: grid; color: #3BD67F; } .vn-ila__c b i svg { width: 14px; height: 14px; }
.vn-ila__c small { font-size: 11.5px; color: rgba(255,255,255,.62); white-space: nowrap; }
.vn-ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2FBF6E; color: #fff; }
.vn-ok svg { width: 18px; height: 18px; }

/* ---------- option 2 grid ---------- */
.bn { max-width: calc(var(--max) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, 128px); gap: 12px;
  grid-template-areas: "la noti a a" "la noti a a" "la num a a" "la num b b" "rev off b b" "rev off b b"; }
.bn--la { grid-area: la; } .bn--noti { grid-area: noti; } .bn--plug { grid-area: plug; } .bn--num { grid-area: num; } .bn--pins { grid-area: pins; } .bn--rev { grid-area: rev; } .bn--off { grid-area: off; } .bn--bill { grid-area: bill; }
/* notifications, stacked, in the same glass */
.vn-stack { position: relative; flex: 1; display: grid; place-items: center; width: 100%; }
.vn-n { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 20px; text-align: left;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px -14px rgba(13,18,16,.5); color: #fff; }
.vn-n--mid, .vn-n--back { position: absolute; left: 50%; top: 50%; height: 56px; margin-top: 4px; padding: 0; transform: translate(-50%, 6px); width: 90%; z-index: 2; opacity: .45; }
.vn-n--back { width: 80%; transform: translate(-50%, 14px); z-index: 1; opacity: .22; }
.vn-app { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: linear-gradient(180deg, #2BB46B, #157244); }
.vn-app svg { width: 16px; height: 16px; }
.vn-n__t { display: grid; gap: 2px; min-width: 0; } .vn-n__t b { font-size: 13.5px; font-weight: 600; } .vn-n__t small { font-size: 12px; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vn-n__now { margin-left: auto; align-self: flex-start; font-size: 11px; color: rgba(255,255,255,.45); }
/* plugs: three soft sockets, the active one ringed in live green */
.vn-plugs { flex: 1; display: flex; align-items: center; gap: 14px; }
.vn-plugs span { display: grid; justify-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--graphite); }
.vn-plugs span.on { color: var(--ink); }
.vn-sock { position: relative; display: block; width: 84px; height: 84px; border-radius: 26px; background: linear-gradient(180deg, #FAFBFA, #ECEEEB); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13,18,16,.07), 0 8px 18px -10px rgba(13,18,16,.25); }
.vn-plugs .on .vn-sock { background: linear-gradient(180deg, #F1F9F4, #D6EDDF); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(30,158,90,.45), 0 12px 26px -10px rgba(30,158,90,.45); }
.vn-sock::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: radial-gradient(circle, #2B2F2D 0 3.5px, transparent 4px) 0 0 / 15px 15px, #E2E5E1; box-shadow: inset 0 0 0 2px rgba(13,18,16,.12); }
.vn-sock--ccs::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 9px; height: 10px; border-radius: 5px; background: #2B2F2D; }
/* big number */
.bn--num { justify-content: space-between; }
.vn-num { flex: 1; display: grid; place-content: center; gap: 10px; justify-items: center; }
.vn-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--graphite); }
.vn-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(30,158,90,.18); }
.vn-num b { font-size: clamp(3.4rem, 2.4rem + 2vw, 4.6rem); font-weight: 500; line-height: .9; letter-spacing: -.05em; }
/* price pins on a faint street map */
.vn-map { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; gap: 22px; border-radius: 18px; isolation: isolate; background: #F4F6F3; }
.vn-map::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(assets/map-isb.webp) 50% 40% / 180% auto no-repeat; opacity: .14; }
.vn-pin { display: flex; flex-direction: column; align-items: center; transform: translateY(var(--y, 0)); }
.vn-pin:nth-child(1) { --y: 14px; } .vn-pin:nth-child(3) { --y: 22px; }
.vn-pin__b { position: relative; display: flex; flex-direction: column; align-items: center; padding: 7px 13px; border-radius: 14px; line-height: 1.1; background: #fff; color: var(--ink); box-shadow: 0 0 0 .5px rgba(13,18,16,.06), 0 8px 20px -8px rgba(13,18,16,.28); }
.vn-pin__b::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.vn-pin__b b { position: relative; z-index: 1; font-size: 16px; font-weight: 600; } .vn-pin__b small { position: relative; z-index: 1; font-size: 12px; font-weight: 500; color: var(--mute); }
.vn-pin > i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 9px; border-radius: 50%; background: #fff; color: var(--live); box-shadow: 0 1px 4px rgba(13,18,16,.22); }
.vn-pin > i svg { width: 12px; height: 12px; }
.vn-pin.is-sel .vn-pin__b { background: var(--ink); color: #fff; transform: scale(1.1); } .vn-pin.is-sel small { color: rgba(255,255,255,.7); }
.vn-pin.is-busy small { color: var(--busy-fg); } .vn-pin.is-busy > i { color: var(--busy); }
/* a review */
.vn-rev { flex: 1; display: grid; align-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: 20px; text-align: left; background: var(--cement); align-self: center; max-height: 140px; }
.vn-rev__h { display: flex; align-items: center; gap: 10px; }
.vn-rev__h img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.vn-rev__h > span:nth-child(2) { display: grid; } .vn-rev__h b { font-size: 13.5px; font-weight: 600; } .vn-rev__h small { font-size: 11.5px; color: var(--mute); }
.vn-stars { display: flex; gap: 1px; margin-left: auto; color: #FFB81C; } .vn-stars svg { width: 12px; height: 12px; }
.vn-rev p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
/* the bill as an equation */
.vn-bill { flex: 1; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vn-chip { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: 26px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; background: var(--cement); color: var(--ink); }
.vn-chip small { font-size: 13px; font-weight: 500; color: var(--mute); }
.vn-chip i { display: grid; color: var(--live); } .vn-chip i svg { width: 16px; height: 16px; }
.vn-chip--go { background: var(--ink); color: #fff; }
.vn-x { font-size: 20px; color: var(--mute); }

/* option 2 reveal, same rhythm as option 1 */
.js .bn .bq { opacity: 0; transform: translateY(28px); }
.bn.is-in .bq { opacity: 1; transform: none; transition: opacity .7s var(--ease-ui), transform 1s var(--ease-out); }
.bn.is-in .bq:nth-child(2) { transition-delay: .06s; } .bn.is-in .bq:nth-child(3) { transition-delay: .12s; } .bn.is-in .bq:nth-child(4) { transition-delay: .18s; }
.bn.is-in .bq:nth-child(5) { transition-delay: .24s; } .bn.is-in .bq:nth-child(6) { transition-delay: .3s; } .bn.is-in .bq:nth-child(7) { transition-delay: .36s; } .bn.is-in .bq:nth-child(8) { transition-delay: .42s; }

@media (max-width: 1100px) {
  .bn { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 260px; grid-template-areas: "la noti" "la num" "plug plug" "pins pins" "rev off" "bill bill"; }
}
@media (max-width: 640px) {
  .bn { grid-template-areas: none; grid-auto-rows: auto; grid-template-columns: 1fr; gap: 10px; }
  .bn .bq { grid-area: auto !important; min-height: 230px; }
  .bn--la { min-height: 420px !important; }
  .vn-plugs { gap: 10px; } .vn-sock { width: 68px; height: 68px; border-radius: 20px; } .vn-sock::before { inset: 14px; }
  .vn-chip { height: 44px; padding: 0 14px; font-size: 16px; }
  .bx__t.bq--la { min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .js .bn .bq { opacity: 1; transform: none; } }

/* lock screen v2: motorway photo wallpaper, glassy clock, a live trip Live Activity (differs from the island tile) */
.vn-phone { background: #c98a4a url(assets/sc-m2-1536.webp) 50% 40% / cover; }
.vn-phone::before { background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0) 40%, rgba(0,0,0,.25)); opacity: 1; }
.vn-time { font-size: 60px; font-weight: 600; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.62)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 6px 16px rgba(0,0,0,.22)); }
.vn-date { color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.vn-app--sm { width: 30px; height: 30px; border-radius: 8px; } .vn-app--sm svg { width: 15px; height: 15px; }
.vn-la__p--w { color: #fff; display: inline-flex; align-items: baseline; gap: 2px; } .vn-la__p--w small { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.6); }
.vn-route { position: relative; display: block; height: 30px; margin-top: 12px; }
.vn-route::before { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); }
.vn-route__done { position: absolute; left: 4px; top: 8px; width: 38%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #1E9E5A, #5BE39A); }
.vn-route__car { position: absolute; left: 38%; top: 0; display: grid; place-items: center; width: 20px; height: 20px; margin-left: -8px; border-radius: 50%; background: #fff; color: #0D1210; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.vn-route__car svg { width: 13px; height: 13px; }
.vn-route__stop { position: absolute; left: 52%; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #3BD67F; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.vn-route__stop::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #3BD67F; opacity: .6; }
.vn-route__lbl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(255,255,255,.55); }
.vn-route__lbl span:nth-child(2) { position: absolute; left: 52%; transform: translateX(-50%); color: #3BD67F; }
.vn-la__t { min-width: 0; } .vn-la__t b, .vn-la__t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vn-la__p--w { font-size: 20px; }
.vn-la__row .vn-la__t small { font-size: 11.5px; }
/* trip Live Activity: app tile black with a green bolt; progress is one flat green, no gradients */
.vn-app--sm { background: #000; color: #3BD67F; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.vn-route__done { background: #3BD67F; }
.vn-bar i { background: #3BD67F; }

/* ---------- option 2, round 3 ---------- */
.bn--a { grid-area: a; } .bn--b { grid-area: b; }
/* placeholders until the content is decided */
.vn-ph { justify-content: center; gap: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(13,18,16,.08); }
.vn-ph span { font-size: 17px; font-weight: 500; color: var(--mute); } .vn-ph small { font-size: 13px; color: #B9BEBA; }

/* review deck: three cards stacked; hover (or focus) sends the front card to the back */
.vn-deck { position: relative; flex: 1; width: 100%; outline: none; cursor: pointer; }
.vn-rc { position: absolute; left: 0; right: 0; top: 8px; display: grid; gap: 10px; padding: 14px; border-radius: 20px; text-align: left; background: #fff;
  box-shadow: 0 0 0 1px rgba(13,18,16,.07), 0 10px 24px -14px rgba(13,18,16,.3);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .45s var(--e), filter .45s var(--e); }
.vn-rc[data-p="0"] { z-index: 3; transform: none; }
.vn-rc[data-p="1"] { z-index: 2; transform: translateY(14px) scale(.94); filter: brightness(.97); }
.vn-rc[data-p="2"] { z-index: 1; transform: translateY(27px) scale(.88); filter: brightness(.94); opacity: .9; }
.vn-rc.out { z-index: 4; transform: translateY(-34px) scale(.96) rotate(-2deg); opacity: 0; }
.vn-rc p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.bn--rev .vn-rev__h small { color: var(--mute); }

/* notification deck, iOS: the live notification on top, older ones as slivers stacked beneath */
.vn-ndeck { position: relative; flex: 1; display: grid; align-content: center; width: 100%; padding-bottom: 18px; }
.vn-ndeck .vn-n { z-index: 3; }
.vn-nb { position: absolute; left: 50%; bottom: calc(50% - 31px); height: 60px; border-radius: 20px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(18,20,19,.5), rgba(8,9,9,.56)); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.vn-nb--1 { z-index: 2; width: 93%; translate: 0 9px; opacity: .62; }
.vn-nb--2 { z-index: 1; width: 86%; translate: 0 17px; opacity: .34; }

/* 412 on the app map: the real map tiles with charger icons on them */
.bn--num { padding: 12px 12px 22px; }
.vn-amap { position: relative; flex: 1; width: 100%; border-radius: 18px; overflow: hidden; background: #E9ECE7 url(assets/app-map.webp) 50% 34% / 150% auto; }
.vn-ch { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: #fff; color: var(--live); box-shadow: 0 1px 4px rgba(13,18,16,.25); }
.vn-ch svg { width: 13px; height: 13px; }
.vn-ch.busy { color: var(--busy); } .vn-ch.down { color: #A9AFAB; }
.vn-ch.sel { width: 28px; height: 28px; margin: -14px; background: var(--ink); color: #3BD67F; box-shadow: 0 0 0 6px rgba(30,158,90,.18), 0 2px 6px rgba(13,18,16,.3); }
.vn-ch.sel svg { width: 15px; height: 15px; }
.vn-ch.sel::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--live); animation: chring 2.4s ease-out infinite; }
@keyframes chring { from { transform: scale(1); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }
.vn-amap__n { position: absolute; left: 10px; bottom: 10px; display: grid; gap: 2px; padding: 9px 12px 10px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: 0 0 0 1px rgba(13,18,16,.06), 0 8px 20px -10px rgba(13,18,16,.3); }
.vn-amap__n b { font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.vn-amap__n .vn-live { font-size: 11.5px; }

@media (max-width: 1100px) { .bn { grid-template-rows: none; grid-auto-rows: 260px; grid-template-areas: "la noti" "la num" "a a" "b b" "rev off"; } }
@media (prefers-reduced-motion: reduce) { .vn-rc { transition: none; } .vn-ch.sel::after { animation: none; } }
/* deck cards share one height, and cards behind hide their content so only clean slivers show */
.vn-rc { height: 118px; align-content: start; }
.vn-rc > * { transition: opacity .3s var(--e); }
.vn-rc[data-p="1"] > *, .vn-rc[data-p="2"] > * { opacity: 0; }
.vn-rc.out > * { opacity: 1; }

/* ---------- option 1 final (2026-11-03) ---------- */
.bento__sw { display: none; }   /* option 1 chosen; option 2 stays in the code, hidden */
/* M-2 stop chips: bolt instead of a dot */
.m2-stops i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: none; color: var(--live); }
.m2-stops i svg { width: 9px; height: 9px; }
/* route stop on the trip Live Activity: a green disc with the bolt */
.vn-route__stop { left: 52%; top: 3px; display: grid; place-items: center; width: 14px; height: 14px; margin-left: -7px; background: #3BD67F; color: #0D1210; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.vn-route__stop svg { width: 9px; height: 9px; }
.vn-route__stop::after { inset: -4px; }
/* review deck inside option 1's small tile */
.bx__t.bn--rev { justify-content: space-between; }
.bx__t.bn--rev .vn-deck { flex: 1; }
/* lock screen: phone runs to the tile's bottom edge; the caption sits on a progressive blur that dissolves the screen into white */
.bq:has(> .vn-phone) { justify-content: flex-start; padding-bottom: 0; }
.vn-phone { flex: 1; -webkit-mask-image: none; mask-image: none; }
.vn-phone .vn-la { margin-bottom: 104px; }
.vn-fog { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; }
.vn-fog i { position: absolute; inset: 0; }
.vn-fog i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent 0%, #000 30%); mask-image: linear-gradient(transparent 0%, #000 30%); }
.vn-fog i:nth-child(2) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(transparent 25%, #000 60%); mask-image: linear-gradient(transparent 25%, #000 60%); }
.vn-fog i:nth-child(3) { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); -webkit-mask-image: linear-gradient(transparent 50%, #000 85%); mask-image: linear-gradient(transparent 50%, #000 85%); }
.vn-fog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.94) 100%); }
.vn-cap--over { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 26px; }
.bx__t.bn--rev { grid-area: isb; }
@media (max-width: 640px) { .bx__t.bn--rev { grid-area: auto !important; min-height: 240px; } }
.vn-fog { height: 150px; }
.vn-phone .vn-la { margin-bottom: 126px; }
/* the fade reaches solid white just above the caption, so the text sits on clean white */
.vn-fog { height: 200px; }
.vn-fog::after { background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 28%, rgba(255,255,255,.9) 46%, #fff 58%); }
.vn-phone .vn-la { margin-bottom: 150px; }
/* blend starts lower: shorter fog, still solid white above the caption */
.vn-fog { height: 160px; }
.vn-fog::after { background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 24%, rgba(255,255,255,.88) 40%, #fff 52%); }
.vn-phone .vn-la { margin-bottom: 118px; }
.m2-stops i { width: 12px; height: 12px; background: none; color: #fff; } .m2-stops i svg { width: 12px; height: 12px; }
.m2-stops span { gap: 4px; padding: 6px 11px 6px 8px; }   /* icon side = icon top inset, text side +3 */
.bento .eb, .next .eb { background: #fff; }   /* pills on cement sections go white so they stay visible */

/* ---------- balance fixes (2026-11-03): three variants via data-fix, switcher in the header ---------- */
.bento__fx { display: inline-flex; gap: 3px; margin-top: 6px; padding: 4px; border-radius: 22px; background: rgba(13,18,16,.06); }
.bento__fx button { height: 34px; padding: 0 15px; border: 0; border-radius: 17px; background: none; font: 500 13.5px/1 var(--display); color: var(--graphite); cursor: pointer; }
.bento__fx button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(13,18,16,.12); }
.bento { --fog: 255, 255, 255; transition: background-color .5s var(--e); }
.vn-fog::after { background: linear-gradient(rgba(var(--fog),0) 0%, rgba(var(--fog),.45) 24%, rgba(var(--fog),.88) 40%, rgb(var(--fog)) 52%); }
.bx__t { transition: background-color .5s var(--e), color .5s var(--e); }

/* light helpers used by fixes 1 and 2 */
.bento:is([data-fix="1"], [data-fix="2"]) .bx__t--khi { background: #fff; color: var(--ink); }
.bento:is([data-fix="1"], [data-fix="2"]) .khi-road::after { background: transparent; }
.bento:is([data-fix="1"], [data-fix="2"]) .khi-road { bottom: 48px; box-shadow: none; }
.bento:is([data-fix="1"], [data-fix="2"]) .khi-car { bottom: calc(48px + 38px - 56px); }
.bento:is([data-fix="1"], [data-fix="2"]) .khi-km { bottom: 72px; }

/* Fix 1 · Balanced: green is the one hero colour (top-left), black moves to the opposite corner, the lock-screen photo
   balances the top-right, one soft green tint, Karachi turns white with its dark road */
@media (min-width: 1101px) { .bento[data-fix="1"] .bx { grid-template-areas: "m2 m2 live lhr" "m2 m2 batt lhr" "khi khi isb plug"; } }
.bento[data-fix="1"] .bx__t--live { background: #E6F2EA; }

/* Fix 2 · Calm: original layout, green is the only strong colour; plug goes white, Karachi on cement */
.bento[data-fix="2"] .bx__t--plug { background: #fff; color: var(--ink); }
.bento[data-fix="2"] .bx__t--plug .bx__chips span { background: var(--cement); }
.bento[data-fix="2"] .bx__t--khi { background: var(--cement); box-shadow: inset 0 0 0 1px rgba(13,18,16,.06); }
.bento[data-fix="2"] .bx__t--batt { background: #EEF6F1; }

/* Fix 3 · Dark: the section goes dark, green stays the single accent */
.bento[data-fix="3"] { --fog: 21, 25, 24; background: #0A0C0B; }
.bento[data-fix="3"] .bento__h { color: #fff; } .bento[data-fix="3"] .bento__h .dim { color: #69706C; }
.bento[data-fix="3"] .eb { background: #1A1F1D; color: rgba(255,255,255,.72); }
.bento[data-fix="3"] .bento__fx { background: rgba(255,255,255,.08); } .bento[data-fix="3"] .bento__fx button { color: rgba(255,255,255,.6); }
.bento[data-fix="3"] :is(.bx__t--live, .bx__t--batt, .bx__t--khi, .bx__t.bq, .bx__t--plug) { background: #151918 !important; color: #fff; box-shadow: none; }
.bento[data-fix="3"] .bx__t--m2 { background: #0E5A3C; }
.bento[data-fix="3"] :is(.bx__lbl, .bx__eyebrow) { color: rgba(255,255,255,.6); }
.bento[data-fix="3"] .bx__cells i { background: rgba(255,255,255,.1); }
.bento[data-fix="3"] .bx.is-in .bx__cells i.is-live { background: var(--live); } .bento[data-fix="3"] .bx.is-in .bx__cells i.is-busy { background: var(--busy); } .bento[data-fix="3"] .bx.is-in .bx__cells i.is-down { background: var(--down); }
.bento[data-fix="3"] .post { filter: drop-shadow(0 0 18px rgba(30,158,90,.35)); }
.bento[data-fix="3"] .vn-cap { color: #fff; }
.bento[data-fix="3"] .vn-rc { background: #1F2422; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -14px rgba(0,0,0,.6); }
.bento[data-fix="3"] .vn-rc p { color: rgba(255,255,255,.88); } .bento[data-fix="3"] .vn-rev__h small { color: rgba(255,255,255,.5); }
.bento[data-fix="3"] .khi-road { background: #2A2F2D; box-shadow: none; } .bento[data-fix="3"] .khi-road::after { background: transparent; }
.bento[data-fix="3"] .bx__t--khi .bx__go, .bento[data-fix="3"] .bx__t--live .bx__go { background: rgba(255,255,255,.12); }
.bento[data-fix="3"] .batt-obj { filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }

/* ---------- live tile: Apple Watch S11 (Apple's product bezel) with a charging Live Activity ---------- */
.bx__t--live { overflow: hidden; }
.aw { position: absolute; z-index: 0; right: 16px; top: 50%; width: 42%; max-width: 140px; translate: 0 -50%; container-type: inline-size; pointer-events: none; transition: transform .6s var(--ease-spring); }
.aw img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)); }
.aw__scr { position: absolute; left: 8.2%; top: 21%; width: 79.2%; height: 57.9%; border-radius: 17cqw; background: #000; color: #fff; padding: 11cqw 8cqw 0; display: flex; flex-direction: column; }
.aw__app { display: flex; align-items: center; gap: 4cqw; font-size: 7.4cqw; line-height: 1.2; color: #D9DEDB; }
.aw__app small { display: block; color: #7D8582; }
.aw__app i { display: grid; place-items: center; width: 14cqw; height: 14cqw; border-radius: 4.5cqw; background: #3BD67F; color: #0D1210; flex: none; }
.aw__app i svg { width: 8.5cqw; height: 8.5cqw; }
.aw__pct { margin-top: 6cqw; font-size: 23cqw; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.aw__pct small { font-size: .5em; letter-spacing: 0; }
.aw__bar { margin-top: 6cqw; height: 3.4cqw; border-radius: 2cqw; background: #262B29; overflow: hidden; }
.aw__bar i { display: block; width: 64%; height: 100%; border-radius: inherit; background: #3BD67F; }
.aw__eta { margin-top: 4.5cqw; font-size: 7.4cqw; color: #9AA19E; }
.bx__t--live:hover .aw { transform: translateY(-4px); }
.bx__t--live > div:not(.aw) { position: relative; z-index: 1; }
.bento .bx__t--live .bx__num { font-size: 2.75rem; letter-spacing: -.045em; }
.bx__t--live .bx__lbl { max-width: 7em; }
@media (max-width: 760px) {
  .aw { top: 12px; right: 12px; width: 37%; translate: none; }
  .bento .bx__t--live .bx__num { font-size: 2.25rem; }
}

/* lock-screen tile: Apple's iPhone 18 Pro bezel in Burgundy. The .vn-phone box is the screen opening;
   the frame image sits around it (screen = 1206×2622 inside 1350×2760; corner = 16.8% of the width, set by site.js) */
.vn-phone--18 { width: 88%; max-width: 250px; margin-top: 16px; border: 0; box-shadow: none; border-radius: var(--scr-r, 40px) var(--scr-r, 40px) 0 0; }
.vn-phone--18::before { border-radius: inherit; }
.vn-frame { position: absolute; z-index: 5; top: 0; left: -5.97%; width: 111.94%; max-width: none; height: auto; margin-top: -5.72%; pointer-events: none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }

/* ---------- M-2 tile, option D (2026-11-03): grey card, dark street map with the route, dissolving into the card at the bottom ---------- */
.bento[data-fix="3"] .bx__t--m2 { background: #151918; }
.bx__t--m2::before { display: none; }
.bx__t--m2 .bx__h, .bx__t--m2 .bx__m, .bx__t--m2 .bx__go { position: relative; z-index: 2; }
.bx__t--m2 .bx__go { position: absolute; }
.m2map { position: absolute; inset: 0; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 40%, #000 62%, transparent 94%); mask-image: linear-gradient(180deg, transparent 18%, #000 40%, #000 62%, transparent 94%); }
.m2map svg { display: block; width: 100%; height: 100%; font-family: var(--app); }
.m2fog { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 36%; pointer-events: none; }
.m2fog i { position: absolute; inset: 0; }
.m2fog i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.m2fog i:nth-child(2) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(transparent 30%, #000 70%); mask-image: linear-gradient(transparent 30%, #000 70%); }
.m2fog::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(21,25,24,0) 10%, rgba(21,25,24,.85) 70%, #151918); }
.m2foot { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 30px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--app); font-size: 14px; color: rgba(255,255,255,.6); }
.m2foot b { color: #fff; font-weight: 500; }
/* the route draws in once when the bento reveals */
.js .m2map__r { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bx.is-in .m2map__r { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .35s; }
@media (prefers-reduced-motion: reduce) { .js .m2map__r { stroke-dashoffset: 0; transition: none; } }
@media (max-width: 640px) { .m2foot { left: 22px; right: 22px; bottom: 20px; font-size: 12.5px; } .m2foot span + span { display: none; } }
.bx__t--m2 .bx__go, .bx__t--khi .bx__go { display: none; }   /* arrows removed (2026-11-03) */

/* phone bento (2026-11-05): rows grow with their content (no overlap); the review deck and the battery tile go full
   width so nothing sits alone at half width. Order: M-2 · plug|live · lock screen · reviews · Karachi · battery */
@media (max-width: 640px) {
  .bx { grid-auto-rows: minmax(200px, auto); }
  .bx__t.bn--rev, .bx__t--isb { grid-area: auto / span 2 !important; min-height: 230px; }
  .bx__t--batt { grid-area: auto / span 2 !important; }
  .bx__t--batt .batt-obj { height: 132px; right: 26px; top: 34px; }   /* parallax owns translate, so position with top */
}