/* MKR Features — Virtual Trade-In (live guided inspection → OTP)
                   Interactive national delivery map
   Loaded after mkr-elite.css. Additive only. */

/* ============================================================
   VIRTUAL TRADE-IN
   ============================================================ */
.vti{padding:96px 0;background:linear-gradient(180deg,#0A1626,#0C1D33);color:#fff;position:relative;overflow:hidden;}
.vti::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px circle at 82% 12%,rgba(11,91,215,.28),transparent 62%),
             radial-gradient(520px circle at 8% 88%,rgba(200,162,75,.14),transparent 60%);}
.vti .wrap{position:relative;z-index:1;}
.vti-head{max-width:730px;}
.vti-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light,#E2C46F);}
.vti-eyebrow i{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:mkrPulse 1.8s ease-in-out infinite;}
.vti h2{font-family:Fraunces,Georgia,serif;font-size:clamp(30px,4.4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:16px 0 0;}
.vti h2 em{font-style:italic;color:var(--blue-bright,#4D8DFF);}
.vti-lede{margin-top:16px;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.68);max-width:650px;}

.vti-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:46px;}
@media (max-width:980px){.vti-grid{grid-template-columns:1fr;gap:34px;}}

/* --- live inspection simulator --- */
.vti-stage{border-radius:22px;overflow:hidden;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -50px rgba(0,0,0,.9);}
.vti-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(6,17,35,.5);}
.vti-live{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:100px;background:rgba(220,38,38,.9);font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;}
.vti-live i{width:6px;height:6px;border-radius:50%;background:#fff;animation:mkrPulse 1.4s ease-in-out infinite;}
.vti-bar .who{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.vti-bar .clock{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:rgba(255,255,255,.75);}
.vti-rail{display:flex;gap:3px;padding:12px 16px 0;}
.vti-rail .seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .35s;}
.vti-rail .seg.done{background:rgba(77,141,255,.55);}
.vti-rail .seg.cur{background:var(--blue-bright,#4D8DFF);box-shadow:0 0 12px rgba(77,141,255,.7);}
.vti-body{padding:18px 20px 22px;}
.vti-idx{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.45);}
.vti-sec{font-size:19px;font-weight:800;margin:7px 0 4px;letter-spacing:-.01em;}
.vti-instr{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.6);min-height:44px;}
.vti-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;}
.vti-checks li{display:flex;align-items:flex-start;gap:10px;font-size:12.8px;color:rgba(255,255,255,.82);opacity:0;transform:translateY(5px);animation:vtiIn .45s cubic-bezier(.22,1,.36,1) forwards;}
.vti-checks li:nth-child(2){animation-delay:.07s;}
.vti-checks li:nth-child(3){animation-delay:.14s;}
.vti-checks li:nth-child(4){animation-delay:.21s;}
@keyframes vtiIn{to{opacity:1;transform:none;}}
.vti-checks svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;fill:none;stroke:#22C55E;stroke-width:2.6;}
.vti-nav{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);}
.vti-nav button{padding:9px 15px;border-radius:100px;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.05em;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;transition:background .25s,border-color .25s;}
.vti-nav button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);}
.vti-nav .auto{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);}

/* --- steps + OTP + starter form --- */
.vti-steps{display:grid;gap:12px;}
.vti-step{display:flex;gap:14px;padding:16px 17px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);}
.vti-step .n{width:30px;height:30px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:900;background:linear-gradient(145deg,var(--blue-bright,#4D8DFF),var(--blue,#0B5BD7));}
.vti-step b{display:block;font-size:14px;font-weight:800;}
.vti-step p{margin:4px 0 0;font-size:12.8px;line-height:1.6;color:rgba(255,255,255,.6);}
.vti-otp{margin-top:14px;padding:20px;border-radius:18px;background:linear-gradient(150deg,rgba(200,162,75,.16),rgba(200,162,75,.04));border:1px solid rgba(226,196,111,.32);}
.vti-otp .lab{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light,#E2C46F);}
.vti-otp b{display:block;margin-top:8px;font-size:15.5px;font-weight:800;}
.vti-otp p{margin:6px 0 0;font-size:12.8px;line-height:1.65;color:rgba(255,255,255,.62);}
.vti-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;}
.vti-form label{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:5px;}
.vti-form input{width:100%;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-family:inherit;font-size:13.5px;}
.vti-form input::placeholder{color:rgba(255,255,255,.32);}
.vti-form input:focus{outline:none;border-color:var(--blue-bright,#4D8DFF);background:rgba(255,255,255,.09);}
.vti-form .full{grid-column:1/-1;}
.vti-form .btn{width:100%;justify-content:center;}
.vti-fine{margin-top:11px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.42);}

/* ============================================================
   DELIVERY MAP
   ============================================================ */
.deliv{padding:96px 0;background:var(--bone,#FAF8F5);position:relative;overflow:hidden;}
.deliv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
@media (max-width:980px){.deliv-grid{grid-template-columns:1fr;gap:40px;}}
.map-stage{position:relative;background:#fff;border:1px solid var(--line,rgba(10,22,38,.07));border-radius:22px;padding:36px 30px;box-shadow:0 30px 70px -40px rgba(10,22,38,.35);}
.map-stage svg{width:100%;height:auto;display:block;overflow:visible;}
.map-tag{position:absolute;top:20px;left:24px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey,#7A8494);}
.map-origin-tag{position:absolute;bottom:20px;right:24px;display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#0A1626);font-weight:600;}
.map-origin-tag i{width:8px;height:8px;border-radius:50%;background:var(--blue,#0B5BD7);animation:mkrPulse 2s infinite;}
.route{stroke:var(--blue,#0B5BD7);stroke-width:1.5;fill:none;stroke-dasharray:5 6;opacity:.26;transition:opacity .35s,stroke-width .35s;}
.route.on{opacity:1;stroke-width:2.4;animation:routeFlow 1.1s linear infinite;}
@keyframes routeFlow{to{stroke-dashoffset:-22;}}
.mkr-city{cursor:pointer;}
.mkr-city .dot{fill:var(--ink,#0A1626);transition:fill .3s;}
.mkr-city .halo{fill:var(--blue,#0B5BD7);opacity:0;transition:opacity .3s;}
.mkr-city .lab{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--grey-dark,#3D4658);letter-spacing:.05em;transition:fill .3s;}
.mkr-city:hover .dot,.mkr-city.on .dot{fill:var(--blue,#0B5BD7);}
.mkr-city.on .halo{opacity:.16;}
.mkr-city:hover .lab,.mkr-city.on .lab{fill:var(--ink,#0A1626);font-weight:700;}
.mkr-city:focus-visible{outline:none;}
.mkr-city:focus-visible .halo{opacity:.3;}
.origin-ring{fill:none;stroke:var(--blue,#0B5BD7);stroke-width:1.4;opacity:.5;}

.deliv-read{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.deliv-read div{background:#fff;border:1px solid var(--line,rgba(10,22,38,.07));border-radius:13px;padding:14px 15px;text-align:center;}
.deliv-read .k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey,#7A8494);}
.deliv-read .v{font-family:Fraunces,Georgia,serif;font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink,#0A1626);margin-top:5px;}
.deliv-read .v em{font-style:normal;color:var(--blue,#0B5BD7);}
.deliv-pick{font-size:12.5px;font-weight:700;color:var(--grey,#7A8494);margin-top:16px;}
.deliv-pick b{color:var(--ink,#0A1626);}
@media (max-width:560px){.deliv-read{grid-template-columns:1fr;}}

@media (prefers-reduced-motion:reduce){
  .route.on,.vti-live i,.vti-eyebrow i,.map-origin-tag i{animation:none!important;}
  .vti-checks li{animation:none!important;opacity:1;transform:none;}
}