/* ============================================================
   imcomingg.com — design system
   Palette: forest ink + signal green (online) + amber (delivery)
   ============================================================ */

:root{
  --ink:#06120D;
  --forest:#0B3D2C;
  --green:#00A85A;          /* the online colour */
  --green-700:#0B5C3B;
  --green-100:#E3F4E9;
  --mint:#F1F8F3;
  --paper:#FBFDFB;
  --amber:#F2A007;          /* parcel / tiffin */
  --amber-100:#FFF3DC;
  --slate:#5C6E65;
  --line:rgba(11,61,44,.14);
  --line-soft:rgba(11,61,44,.08);
  --danger:#C8452F;
  --shadow-s:0 1px 2px rgba(6,18,13,.06), 0 4px 14px rgba(6,18,13,.05);
  --shadow-m:0 12px 40px rgba(6,18,13,.10);
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --wrap:1180px;
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  font-weight:450;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.hide{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .4em;letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.3rem,6vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1em}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-700);margin:0 0 14px;font-weight:600;
}
.lede{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--slate);max-width:56ch}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- brand wordmark: "im" thin + "Comingg" bold ---------- */
.brand{display:inline-flex;align-items:baseline;gap:1px;font-family:var(--font-display);
  letter-spacing:-.03em;line-height:1;color:var(--forest);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .b-im{font-weight:200}
.brand .b-comingg{font-weight:800}
.brand .b-dot{width:.34em;height:.34em;border-radius:50%;background:var(--green);
  display:inline-block;margin-left:.22em;transform:translateY(-.06em)}
.brand-lg{font-size:2.6rem}
.brand-sm{font-size:1.45rem}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(251,253,251,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.head-in{display:flex;align-items:center;gap:20px;height:70px}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{color:var(--forest);font-weight:600;font-size:.94rem;text-decoration:none}
.nav a:hover{color:var(--green)}
.nav a.active{color:var(--green)}
.head-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r-s);width:42px;height:42px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--forest);margin:3px auto;border-radius:2px}

@media (max-width:1080px){
  .nav{gap:18px}
  .nav a{font-size:.9rem}
}
@media (max-width:980px){
  .burger{display:block}
  .nav{position:fixed;inset:70px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 20px 20px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m);display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .head-cta{display:none}
  .nav .head-cta{display:flex;padding-top:14px;border:0}
  .nav .head-cta .btn{flex:1;justify-content:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);
  padding:12px 22px;font-weight:700;font-size:.94rem;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .12s ease,background .15s ease,box-shadow .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px rgba(0,168,90,.28)}
.btn-primary:hover{background:#009450;color:#fff}
.btn-dark{background:var(--forest);color:#fff}
.btn-dark:hover{background:#0a3325;color:#fff}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-amber{background:var(--amber);color:#3B2600}
.btn-sm{padding:8px 15px;font-size:.85rem}
.btn-block{width:100%;justify-content:center}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- status dot (the signature) ---------- */
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;
  position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2px solid var(--green);opacity:.6;animation:ping 1.9s cubic-bezier(0,0,.2,1) infinite}
.dot.off{background:#9AA8A1}
.dot.off::after{display:none}
@keyframes ping{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .dot::after{animation:none}
  *{scroll-behavior:auto !important}
}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,7vw,86px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-220px;right:-160px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(0,168,90,.16),transparent 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative}
.hero h1 span.thin{font-weight:200}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.tag{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 14px;font-size:.84rem;font-weight:650;color:var(--forest)}
.tag.amber{background:var(--amber-100);border-color:rgba(242,160,7,.35)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:20px;font-size:.86rem;color:var(--slate)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}

/* ---------- dispatch board (hero panel) ---------- */
.board{background:var(--forest);color:#EAF5EE;border-radius:var(--r-l);padding:22px;
  box-shadow:var(--shadow-m);position:relative}
.board-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px}
.board-head .label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#9FD9BA}
.board-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.board-row:last-child{border-bottom:0}
.board-row .who{font-weight:700;font-size:.96rem}
.board-row .meta{font-size:.78rem;color:#9FD9BA;font-family:var(--font-mono)}
.board-row .eta{font-family:var(--font-mono);font-size:.95rem;font-weight:600;text-align:right}
.board-row .eta small{display:block;font-size:.64rem;color:#9FD9BA;letter-spacing:.1em}
.board-foot{margin-top:16px;display:flex;gap:10px}

/* ---------- sections ---------- */
.sect{padding:clamp(48px,7vw,88px) 0}
.sect-mint{background:var(--mint);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sect-head{max-width:640px;margin-bottom:38px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media (max-width:900px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:24px;
  box-shadow:var(--shadow-s);transition:border-color .15s ease,transform .15s ease}
.card:hover{border-color:rgba(0,168,90,.45);transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.card p{color:var(--slate);font-size:.95rem;margin:0}
.card .icon{width:42px;height:42px;border-radius:12px;background:var(--green-100);
  display:grid;place-items:center;font-size:1.25rem;margin-bottom:16px}
.card .icon.amber{background:var(--amber-100)}

/* service picker cards */
.svc{cursor:pointer;position:relative}
.svc input{position:absolute;opacity:0;pointer-events:none}
.svc-box{border:1.5px solid var(--line);border-radius:var(--r-m);padding:16px;background:#fff;
  display:flex;gap:12px;align-items:flex-start;transition:.15s}
.svc input:checked + .svc-box{border-color:var(--green);background:var(--green-100);
  box-shadow:0 0 0 3px rgba(0,168,90,.13)}
.svc-box strong{display:block;font-size:.95rem}
.svc-box span{font-size:.8rem;color:var(--slate)}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{border-top:2px solid var(--green);padding-top:16px}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-mono);
  font-size:.75rem;color:var(--green);letter-spacing:.1em;display:block;margin-bottom:8px}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{color:var(--slate);font-size:.9rem;margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px;color:var(--forest)}
.field .hint{font-size:.78rem;color:var(--slate);font-weight:500;margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=time],select,textarea,input[type=file]{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-s);
  background:#fff;font-size:.95rem;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;
  box-shadow:0 0 0 3px rgba(0,168,90,.14)}
textarea{min-height:96px;resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row-2{grid-template-columns:1fr}}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-s)}
.panel + .panel{margin-top:20px}

.tabs{display:flex;gap:6px;background:var(--green-100);padding:5px;border-radius:var(--r-pill);
  margin-bottom:24px;width:fit-content;max-width:100%;overflow:auto}
.tabs button{border:0;background:transparent;padding:9px 20px;border-radius:var(--r-pill);
  font-weight:700;font-size:.9rem;cursor:pointer;color:var(--green-700);white-space:nowrap}
.tabs button.active{background:#fff;color:var(--forest);box-shadow:var(--shadow-s)}

.alert{padding:12px 16px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:16px;border:1px solid}
.alert-ok{background:var(--green-100);border-color:rgba(0,168,90,.35);color:var(--green-700)}
.alert-warn{background:var(--amber-100);border-color:rgba(242,160,7,.4);color:#7A5200}
.alert-bad{background:#FDECE8;border-color:rgba(200,69,47,.3);color:var(--danger)}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  padding:4px 11px;border-radius:var(--r-pill);font-family:var(--font-mono);letter-spacing:.04em;
  text-transform:uppercase}
.badge-ok{background:var(--green-100);color:var(--green-700)}
.badge-wait{background:var(--amber-100);color:#7A5200}
.badge-bad{background:#FDECE8;color:var(--danger)}
.badge-grey{background:#EDF1EE;color:var(--slate)}

/* driver / booking list rows */
.list{display:flex;flex-direction:column;gap:12px}
.lrow{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.lrow .av{width:44px;height:44px;border-radius:50%;background:var(--green-100);display:grid;
  place-items:center;font-weight:800;color:var(--green-700);font-family:var(--font-display)}
.lrow .t1{font-weight:700}
.lrow .t2{font-size:.82rem;color:var(--slate);font-family:var(--font-mono)}
.lrow .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:620px){
  .lrow{grid-template-columns:auto 1fr}
  .lrow .actions{grid-column:1/-1;justify-content:flex-start}
}
.empty{text-align:center;padding:38px 20px;border:1.5px dashed var(--line);border-radius:var(--r-m);
  color:var(--slate);background:#fff}
.empty strong{display:block;color:var(--forest);font-family:var(--font-display);font-size:1.05rem;margin-bottom:4px}

/* ---------- chat ---------- */
.chat{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;background:#fff;min-height:460px}
.chat-side{border-right:1px solid var(--line);background:var(--mint);overflow:auto;max-height:560px}
.thread-item{padding:14px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;display:flex;gap:10px;align-items:center}
.thread-item:hover{background:#fff}
.thread-item.active{background:#fff;border-left:3px solid var(--green)}
.thread-item .t1{font-weight:700;font-size:.9rem}
.thread-item .t2{font-size:.76rem;color:var(--slate)}
.chat-main{display:flex;flex-direction:column;max-height:560px}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.chat-body{flex:1;overflow:auto;padding:18px;background:linear-gradient(180deg,var(--mint),#fff);
  display:flex;flex-direction:column;gap:10px}
.msg{max-width:76%;padding:10px 14px;border-radius:14px;font-size:.92rem;line-height:1.45}
.msg .ts{display:block;font-size:.66rem;opacity:.6;margin-top:4px;font-family:var(--font-mono)}
.msg.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:4px}
.msg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.sys{align-self:center;background:var(--amber-100);color:#7A5200;font-size:.8rem;border-radius:var(--r-pill)}
.chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:#fff}
.chat-form input{flex:1}
.quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 12px;background:#fff}
.quick button{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:6px 12px;font-size:.78rem;cursor:pointer;color:var(--forest)}
.quick button:hover{border-color:var(--green);color:var(--green)}
@media (max-width:820px){
  .chat{grid-template-columns:1fr}
  .chat-side{max-height:190px;border-right:0;border-bottom:1px solid var(--line)}
}

/* ---------- AI assistant widget ---------- */
.ai-fab{position:fixed;right:18px;bottom:18px;z-index:80;background:var(--forest);color:#fff;
  border:0;border-radius:var(--r-pill);padding:13px 20px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow-m);display:flex;align-items:center;gap:9px}
.ai-fab:hover{background:var(--green)}
.ai-panel{position:fixed;right:18px;bottom:80px;z-index:81;width:min(380px,calc(100vw - 36px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-m);
  display:none;flex-direction:column;overflow:hidden;max-height:min(560px,calc(100vh - 120px))}
.ai-panel.open{display:flex}
.ai-head{background:var(--forest);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:10px}
.ai-head .t{font-weight:800;font-family:var(--font-display)}
.ai-head .s{font-size:.74rem;color:#9FD9BA;font-family:var(--font-mono)}
.ai-head button{margin-left:auto;background:none;border:0;color:#fff;font-size:1.2rem;cursor:pointer}
.ai-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--mint)}
.ai-msg{max-width:88%;padding:10px 13px;border-radius:13px;font-size:.9rem;line-height:1.5}
.ai-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start}
.ai-msg.you{background:var(--green);color:#fff;align-self:flex-end}
.ai-msg ul{margin:6px 0 0;padding-left:18px}
.ai-msg li{margin-bottom:3px}
.ai-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.ai-form input{flex:1}

/* ---------- blog ---------- */
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-m);overflow:hidden;transition:.15s}
.post-card:hover{border-color:var(--green);transform:translateY(-2px)}
.post-card .thumb{height:130px;background:linear-gradient(130deg,var(--forest),var(--green));
  display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em}
.post-card .body{padding:20px}
.post-card h3{font-size:1.08rem;margin-bottom:8px}
.post-card p{color:var(--slate);font-size:.9rem;margin:0 0 12px}
.post-card .meta{font-family:var(--font-mono);font-size:.72rem;color:var(--slate)}
.article{max-width:720px;margin:0 auto;padding:clamp(34px,6vw,64px) 0}
.article h2{margin-top:1.8em;font-size:1.6rem}
.article h3{margin-top:1.5em}
.article p,.article li{color:#22332C;font-size:1.03rem;line-height:1.75}
.article ul,.article ol{padding-left:22px;margin-bottom:1.2em}
.article li{margin-bottom:.5em}
.article blockquote{margin:1.6em 0;padding:16px 20px;background:var(--green-100);
  border-left:3px solid var(--green);border-radius:0 var(--r-s) var(--r-s) 0;font-size:1rem}
.article table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.93rem}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article th{background:var(--mint);font-weight:700}
.post-head{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:8px}
.post-head .meta{font-family:var(--font-mono);font-size:.76rem;color:var(--slate);letter-spacing:.06em}

/* ---------- footer ---------- */
.site-foot{background:var(--forest);color:#CFE6D8;padding:56px 0 28px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.site-foot .brand{color:#fff}
.site-foot h4{color:#fff;font-family:var(--font-display);font-size:.85rem;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:14px}
.site-foot a{color:#CFE6D8;font-size:.92rem;display:block;margin-bottom:9px;text-decoration:none}
.site-foot a:hover{color:#fff}
.foot-bar{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.82rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- misc ---------- */
.strip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--font-mono);
  font-size:.76rem;color:var(--slate);letter-spacing:.08em;text-transform:uppercase}
.strip span{display:inline-flex;align-items:center;gap:7px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.kv:last-child{border:0}
.kv span:first-child{color:var(--slate)}
.kv span:last-child{font-weight:700;font-family:var(--font-mono)}
.fare{background:var(--forest);color:#fff;border-radius:var(--r-m);padding:18px;margin-top:8px}
.fare .big{font-family:var(--font-mono);font-size:1.7rem;font-weight:700}
.fare .sub{font-size:.78rem;color:#9FD9BA}
.page-head{padding:clamp(30px,5vw,54px) 0 10px}
.auth-wrap{max-width:460px;margin:0 auto}
.link-row{margin-top:14px;font-size:.88rem;text-align:center;color:var(--slate)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--forest);
  color:#fff;padding:12px 20px;border-radius:var(--r-pill);z-index:200;font-size:.9rem;
  box-shadow:var(--shadow-m);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ============================================================
   PART 2 — icons, profiles, tracking, reviews, emergency, promo
   ============================================================ */

/* ---------- icons ----------
   Size is pinned to BOTH the .ico class (added by JS) and the raw
   [data-ico] attribute (present in the HTML from first paint), so an
   icon is never full-size for even one frame while the script loads.
   This matters on slow mobile connections where CSS and JS arrive
   at different times. */
.ico,[data-ico]{display:inline-flex;align-items:center;justify-content:center;
  width:1.15em;height:1.15em;max-width:1.15em;max-height:1.15em;
  vertical-align:-.2em;color:inherit;flex:none;overflow:hidden;line-height:1}
.ico svg,[data-ico] svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block;flex:none}
.field label .ico,.field label [data-ico]{color:var(--green);margin-right:6px;
  width:1.05em;height:1.05em;max-width:1.05em;max-height:1.05em}
.ico-lg{width:1.6em;height:1.6em;max-width:1.6em;max-height:1.6em}
.ico-danger{color:var(--danger)}
.tag .ico,.tag [data-ico]{color:var(--green)}
.card .icon .ico,.card .icon [data-ico]{width:1.35em;height:1.35em;max-width:1.35em;max-height:1.35em;color:var(--green-700)}
.card .icon.amber .ico,.card .icon.amber [data-ico]{color:#9A6600}

/* ambient + hover motion */
@keyframes ico-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ico-roll{0%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}100%{transform:translateX(-1.5px)}}
@keyframes ico-steam{0%{opacity:0;transform:translateY(2px)}35%{opacity:.9}100%{opacity:0;transform:translateY(-4px)}}
@keyframes ico-wave{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ico-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.9)}}
@keyframes ico-tick{0%{stroke-dasharray:0 30}100%{stroke-dasharray:30 0}}

.ico-pin svg{animation:ico-bob 2.6s ease-in-out infinite}
.ico-car:hover svg,.ico-moto:hover svg,.ico-bike:hover svg{animation:ico-roll 1s ease-in-out infinite}
.ico-tiffin .steam{animation:ico-steam 2.4s ease-in-out infinite;transform-origin:center}
.ico-tiffin .steam2{animation-delay:.8s}
.ico-radar .w1{animation:ico-wave 1.8s ease-in-out infinite}
.ico-radar .w2{animation:ico-wave 1.8s ease-in-out .35s infinite}
.ico-sparkle svg{animation:ico-twinkle 2.8s ease-in-out infinite}
.ico-heart:hover svg{animation:ico-bob 1s ease-in-out infinite}
.svc-box:hover .ico svg,.vh-box:hover .ico svg{transform:scale(1.08);transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){
  .ico svg,.ico *{animation:none !important}
}

/* ---------- field with leading icon ---------- */
.field-ico{position:relative}
.field-ico > .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--slate);
  width:1.15em;height:1.15em;pointer-events:none}
.field-ico input,.field-ico select,.field-ico textarea{padding-left:40px}
.field-ico textarea ~ .ico{top:22px;transform:none}
.field-ico:focus-within > .ico{color:var(--green)}

/* ---------- vehicle picker ---------- */
.vh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 6px}
.vh{position:relative;cursor:pointer;display:block;height:100%}
.vh input{position:absolute;opacity:0;pointer-events:none}
/* .vh-box is a <span> holding block-level children, so it MUST be given a
   block-ish display. As a plain inline element the browser fragments it and
   the border renders as two curved slivers with the text spilling out. */
.vh-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  border:1.5px solid var(--line);border-radius:var(--r-m);padding:14px 12px;background:#fff;
  text-align:center;transition:.15s;height:100%;box-sizing:border-box}
.vh-box .ico,.vh-box [data-ico]{width:1.9em;height:1.9em;max-width:1.9em;max-height:1.9em;color:var(--forest);margin-bottom:6px}
.vh-box strong{display:block;font-size:.9rem}
/* the caption span only — never the icon span, which sizes itself */
.vh-box span:not(.ico):not([data-ico]){font-size:.72rem;color:var(--slate);line-height:1.35;display:block;margin-top:3px}
.vh input:checked + .vh-box{border-color:var(--green);background:var(--green-100);
  box-shadow:0 0 0 3px rgba(0,168,90,.13)}
.vh input:checked + .vh-box .ico{color:var(--green-700)}
.vh input:disabled + .vh-box{opacity:.4;cursor:not-allowed}
@media (max-width:520px){.vh-row{grid-template-columns:1fr}}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(6,18,13,.55);backdrop-filter:blur(3px);
  z-index:120;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;
  overflow:auto;opacity:0;transition:opacity .18s ease}
.modal-back.show{opacity:1}
.modal{background:#fff;border-radius:var(--r-l);max-width:640px;width:100%;padding:clamp(20px,3vw,30px);
  position:relative;box-shadow:var(--shadow-m);margin:auto;transform:translateY(8px);transition:transform .2s ease}
.modal-back.show .modal{transform:none}
.modal-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.6rem;
  line-height:1;cursor:pointer;color:var(--slate)}
.modal-x:hover{color:var(--ink)}
.modal .t2{font-size:.84rem;color:var(--slate)}

/* ---------- driver profile ---------- */
.profile-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:18px;
  border-bottom:1px solid var(--line);margin-bottom:18px}
.av-lg{width:64px;height:64px;border-radius:50%;background:var(--green-100);display:grid;place-items:center;
  font-weight:800;color:var(--green-700);font-family:var(--font-display);font-size:1.3rem;flex:none}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.stat{background:var(--mint);border-radius:var(--r-s);padding:13px}
.stat .ico,.stat [data-ico]{color:var(--green-700);margin-bottom:6px;width:1.35em;height:1.35em;max-width:1.35em;max-height:1.35em}
.stat strong{display:block;font-size:.95rem}
.stat .t2{font-size:.75rem;color:var(--slate)}
@media (max-width:560px){.profile-grid{grid-template-columns:1fr 1fr}}
.prof-h{font-family:var(--font-display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-700);margin:24px 0 10px}
.profile-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

/* ---------- stars + reviews ---------- */
.stars{display:inline-flex;gap:2px;vertical-align:-.15em}
.stars .star{width:1.05em;height:1.05em;max-width:1.05em;max-height:1.05em;color:#D5DED8;display:inline-flex;overflow:hidden;flex:none}
.stars .star svg{width:100%;height:100%;max-width:100%;max-height:100%}
.stars .star.on{color:#F2A007}
.stars .star.on svg{fill:#F2A007}
.stars-sm .star{width:.85em;height:.85em}
.stars-pick .star{width:2rem;height:2rem;background:none;border:0;cursor:pointer;padding:0;
  transition:transform .12s ease}
.stars-pick .star:hover{transform:scale(1.15)}
.review{padding:13px 0;border-bottom:1px solid var(--line-soft)}
.review:last-child{border:0}
.review-top{display:flex;align-items:center;gap:10px;margin-bottom:5px;flex-wrap:wrap}
.review p{margin:0;font-size:.92rem;color:#243330}

/* ---------- tracking timeline ---------- */
.track-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,3vw,26px)}
.track-code{font-family:var(--font-mono);font-size:1.15rem;font-weight:600;letter-spacing:.08em;
  background:var(--forest);color:#fff;padding:8px 14px;border-radius:var(--r-pill);display:inline-block}
.track-bar{height:6px;background:var(--green-100);border-radius:var(--r-pill);overflow:hidden;margin:20px 0 4px}
.track-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-700),var(--green));
  border-radius:var(--r-pill);transition:width .6s cubic-bezier(.4,0,.2,1)}
.timeline{list-style:none;padding:0;margin:22px 0 0}
.timeline li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding-bottom:22px;position:relative}
.timeline li::before{content:"";position:absolute;left:16px;top:32px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.timeline .node{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--line);color:var(--slate);z-index:1}
.timeline li.done .node{background:var(--green-100);border-color:var(--green);color:var(--green-700)}
.timeline li.now .node{background:var(--green);border-color:var(--green);color:#fff;
  box-shadow:0 0 0 5px rgba(0,168,90,.18)}
.timeline li.now .node::after{content:"";position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:50%;border:2px solid var(--green);animation:ping 1.9s cubic-bezier(0,0,.2,1) infinite}
.timeline .tl-t{font-weight:700;font-size:.96rem}
.timeline .tl-s{font-size:.84rem;color:var(--slate)}
.timeline li.todo .tl-t{color:var(--slate);font-weight:600}
.track-log{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.track-log div{font-family:var(--font-mono);font-size:.78rem;color:var(--slate);padding:3px 0}

/* ---------- emergency ---------- */
.sos-fab{position:fixed;left:18px;bottom:18px;z-index:80;background:#fff;color:var(--danger);
  border:1.5px solid rgba(200,69,47,.35);border-radius:var(--r-pill);padding:11px 16px;font-weight:800;
  cursor:pointer;box-shadow:var(--shadow-s);display:flex;align-items:center;gap:8px;font-size:.88rem}
.sos-fab:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.sos-fab .ico{width:1.25em;height:1.25em}
@media (max-width:520px){.sos-fab .sos-t{display:none}.sos-fab{padding:12px}}
.em-num{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r-m);margin-bottom:10px;text-decoration:none;color:var(--ink);background:#fff}
.em-num:hover{border-color:var(--danger);text-decoration:none}
.em-num .ico{color:var(--danger);width:1.4em;height:1.4em}
.em-num strong{font-family:var(--font-mono);font-size:1.25rem;display:block}
.em-num .t2{font-size:.78rem;color:var(--slate)}
.em-call{margin-left:auto;background:var(--danger);color:#fff;border-radius:var(--r-pill);
  padding:7px 16px;font-size:.84rem;font-weight:700}

/* ---------- promo banner ---------- */
.promo{background:linear-gradient(100deg,var(--forest),#0d5138 55%,var(--green-700));color:#fff;
  padding:11px 0;font-size:.93rem}
.promo .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;text-align:center}
.promo .ico{color:#FFD37A;width:1.3em;height:1.3em}
.promo strong{font-weight:800}
.promo a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* ---------- tiffin promo band ---------- */
.tiffin-band{background:linear-gradient(115deg,#0B3D2C,#0f5a3d);color:#EAF5EE;border-radius:var(--r-l);
  padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;
  position:relative;overflow:hidden}
.tiffin-band::after{content:"";position:absolute;right:-90px;bottom:-120px;width:340px;height:340px;
  background:radial-gradient(circle,rgba(242,160,7,.28),transparent 65%);z-index:0;pointer-events:none}
.tiffin-band > *{position:relative;z-index:1}
.tiffin-band h2{color:#fff;position:relative}
.tiffin-band p{color:#BFE0CE;position:relative}
.tiffin-band .ico,.tiffin-band [data-ico]{color:#FFD37A}
.tiffin-band .big-ico,.tiffin-band [data-ico].big-ico,.big-ico{width:4.4em;height:4.4em;max-width:4.4em;max-height:4.4em;color:#FFD37A}
.big-ico svg,[data-ico].big-ico svg{width:100%;height:100%;max-width:100%;max-height:100%}
@media (max-width:820px){.tiffin-band{grid-template-columns:1fr}}

/* ---------- monthly plan ---------- */
.plan-box{border:1.5px solid var(--green);background:var(--green-100);border-radius:var(--r-m);padding:18px;margin-top:14px}
.plan-box .save{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--green-700)}
.daypick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.daypick label{cursor:pointer}
.daypick input{position:absolute;opacity:0;pointer-events:none}
.daypick span{display:inline-grid;place-items:center;width:44px;height:38px;border:1.5px solid var(--line);
  border-radius:var(--r-s);font-size:.82rem;font-weight:700;background:#fff;transition:.14s}
.daypick input:checked + span{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- AI upgrades ---------- */
.ai-fab .ico{width:1.2em;height:1.2em}
.ai-suggest{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ai-card{border:1px solid var(--line);border-radius:var(--r-s);padding:12px;background:#fff;font-size:.86rem}
.ai-card strong{display:block;margin-bottom:4px}
.ai-parse{background:var(--green-100);border:1px solid rgba(0,168,90,.35);border-radius:var(--r-s);
  padding:12px;font-size:.86rem;margin-top:8px}
.ai-parse .kv{padding:5px 0;font-size:.84rem}
.ai-strip{display:flex;align-items:center;gap:12px;background:var(--forest);color:#EAF5EE;
  border-radius:var(--r-m);padding:14px 18px;margin-bottom:20px;flex-wrap:wrap}
.ai-strip .ico{color:#9FD9BA;width:1.4em;height:1.4em}
.ai-strip input{flex:1;min-width:220px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);
  color:#fff}
.ai-strip input::placeholder{color:#8FBFA6}
.ai-strip input:focus{border-color:var(--green);box-shadow:none}

/* ---------- test console ---------- */
.term{background:#06120D;color:#B6E7CC;border-radius:var(--r-m);padding:18px;font-family:var(--font-mono);
  font-size:.82rem;line-height:1.7;max-height:520px;overflow:auto}
.term .ok{color:#5BE59A}
.term .warn{color:#FFD37A}
.term .bad{color:#FF9C86}
.term .dim{color:#6E8C7C}
.term .step{color:#fff;font-weight:600}

/* ---------- misc part 2 ---------- */
.t2{font-size:.84rem;color:var(--slate)}
.hstack{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.legal{max-width:760px;margin:0 auto;padding:clamp(30px,5vw,56px) 0}
.legal h2{margin-top:1.8em;font-size:1.45rem}
.legal p,.legal li{color:#22332C;font-size:1rem;line-height:1.75}
.legal ul{padding-left:22px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}

/* ============================================================
   PART 3 — handover PIN, return legs, coverage, care circle
   ============================================================ */

/* ---------- handover PIN ---------- */
.pin-chip{display:inline-flex;align-items:center;gap:7px;background:var(--green-100);
  border:1px solid rgba(0,168,90,.3);border-radius:var(--r-pill);padding:5px 12px;
  font-size:.82rem;margin-top:6px}
.pin-chip strong{font-family:var(--font-mono);font-size:1rem;letter-spacing:.14em;color:var(--green-700)}
.pin-big{font-family:var(--font-mono);font-size:2.4rem;font-weight:600;letter-spacing:.34em;
  color:var(--green-700);background:var(--green-100);border:1.5px dashed var(--green);
  border-radius:var(--r-m);padding:16px 10px 16px 24px;text-align:center;margin:14px 0 6px}
.proof-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-soft)}
.proof-row .ico{color:var(--green-700)}

/* ---------- return legs ---------- */
.leg-row{border-left:3px solid var(--amber)}
.badge-amber{background:#FDF0D5;color:#7A5200;border:1px solid rgba(242,160,7,.35)}
.leg-row s{color:var(--slate);opacity:.75}
.leg-hero{background:linear-gradient(115deg,#1B1305,#3A2A08 60%,#5C4109);color:#FFF3DC;
  border-radius:var(--r-l);padding:clamp(26px,4vw,44px);position:relative;overflow:hidden}
.leg-hero::after{content:"";position:absolute;right:-70px;top:-90px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(242,160,7,.3),transparent 65%);z-index:0;pointer-events:none}
.leg-hero > *{position:relative;z-index:1}
.leg-hero h2{color:#fff;position:relative}
.leg-hero p{color:#EFE0C2;position:relative}
.leg-hero .eyebrow{color:#FFD37A}
.leg-hero .btn-ghost{color:#FFF3DC;border-color:rgba(255,211,122,.45)}
.leg-hero .btn-ghost:hover{color:#fff;border-color:#FFD37A;background:rgba(255,211,122,.12)}
.leg-hero .tag{color:#FFF3DC}
.leg-hero .ico{color:#FFD37A}

/* ---------- coverage ---------- */
.cover-box{background:var(--mint);border:1px dashed var(--green);border-radius:var(--r-m);
  padding:18px;margin-top:14px}
.cover-box h4{margin:0 0 8px;font-size:1rem;display:flex;align-items:center;gap:9px}
.cover-box .ico{color:var(--green-700)}
.cover-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cover-city{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:10px 14px;font-size:.9rem}
.cover-city .n{margin-left:auto;font-family:var(--font-mono);font-weight:600;color:var(--green-700)}

/* ---------- care circle ---------- */
.care-box{background:var(--mint);border:1px solid var(--line);border-radius:var(--r-m);
  padding:18px;margin-top:6px}
.care-box h4{margin:0 0 6px;font-size:1rem;display:flex;align-items:center;gap:9px}
.care-box .ico{color:var(--amber-700,#9A6600)}

/* ---------- receiver view on the tracking page ---------- */
.recv-card{background:var(--forest);color:#EAF5EE;border-radius:var(--r-l);
  padding:clamp(20px,3vw,30px);margin-bottom:20px}
.recv-card h3{color:#fff;margin:0 0 6px}
.recv-card p{color:#BFE0CE;margin:0}
.recv-card .pin-big{background:rgba(255,255,255,.09);border-color:rgba(159,217,186,.5);color:#fff}

/* ============================================================
   PART 4 — shared journeys board
   ============================================================ */

.safety-band{background:#FFF7F5;border:1.5px solid rgba(200,69,47,.28);border-left:5px solid var(--danger);
  border-radius:var(--r-m);padding:clamp(18px,3vw,26px)}
.safety-band h2{display:flex;align-items:center;gap:10px;color:var(--danger)}
.safety-band .ico{color:var(--danger)}
.safety-band p{color:#3A2420;font-size:.97rem;line-height:1.7}

.jfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.jfilters .field,.jfilters .field-ico{margin:0}

.jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.jcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:20px;
  display:flex;flex-direction:column;gap:2px;position:relative;transition:.16s}
.jcard:hover{border-color:var(--green);box-shadow:var(--shadow-s)}
.jcard-offer{border-top:3px solid var(--green)}
.jcard-seeking{border-top:3px solid #3E7CB1}
.jcard-tour{border-top:3px solid var(--amber)}
.jcard-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.jkind{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--green-700)}
.jcard-seeking .jkind{color:#2A5D87}
.jcard-tour .jkind{color:#8A5E00}
.jcode{margin-left:auto;font-size:.72rem;color:var(--slate);letter-spacing:.06em}
.jroute{font-size:1.08rem;margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.35}
.jroute .ico{color:var(--green);flex:none}
.jarrow{color:var(--slate);font-weight:400}
.jmeta{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 6px}
.jm{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--slate)}
.jm .ico{color:var(--green-700)}
.jnote{font-size:.9rem;color:#2A3B34;background:var(--mint);border-radius:var(--r-s);
  padding:10px 12px;margin:10px 0 0}
.tag-pref{background:#EAF3FF;border-color:#B9D5F2;color:#1F4E79}
.tag-pref .ico{color:#2A5D87}
.jperson{display:flex;align-items:center;gap:11px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.jperson .av{width:38px;height:38px;font-size:.8rem}
.jperson .ico{color:var(--green-700)}
.jactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn-flag{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--slate);
  padding:6px;border-radius:var(--r-s);line-height:0}
.btn-flag:hover{color:var(--danger);background:#FFF1EE}
.btn-flag .ico{width:1.05em;height:1.05em}

.jmine{border:1px solid var(--line);border-radius:var(--r-m);padding:16px;margin-bottom:12px}
.jmine-joined{border-left:3px solid var(--green)}
.jreq{background:var(--mint);border-radius:var(--r-s);padding:12px;margin:10px 0}
.jreq-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.jreq-row .av{width:34px;height:34px;font-size:.74rem}
.jreq-row .actions{margin-left:auto;display:flex;gap:6px}
.jwatch{background:var(--mint);border-radius:var(--r-s);padding:14px;margin-top:12px}

.agree{display:flex;gap:11px;align-items:flex-start;background:var(--mint);
  border:1px solid var(--line);border-radius:var(--r-s);padding:14px;font-size:.87rem;
  line-height:1.6;cursor:pointer;margin-top:14px}
.agree input{width:auto;flex:none;margin-top:3px;accent-color:#00A85A;transform:scale(1.15)}

@media (max-width:560px){
  .jgrid{grid-template-columns:1fr}
  .jfilters .field,.jfilters .field-ico{flex:1;min-width:130px}
}

/* ============================================================
   PART 5 — identity verification, sharing
   ============================================================ */

/* ---------- verified identity card ---------- */
.idcard{background:var(--mint);border:1.5px solid var(--green);border-radius:var(--r-m);
  padding:18px;margin:16px 0}
.idcard h4{margin:0 0 12px;font-size:1rem;display:flex;align-items:center;gap:9px;color:var(--green-700)}
.idcard h4 .ico,.idcard h4 [data-ico]{color:var(--green-700)}
.idrow{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid rgba(0,168,90,.16);font-size:.9rem}
.idrow:last-of-type{border-bottom:0}
.idrow span{color:var(--slate)}
.idrow strong{text-align:right}
.idnote{font-size:.8rem;color:#2A3B34;margin:12px 0 0;line-height:1.6;
  background:rgba(255,255,255,.6);border-radius:var(--r-s);padding:10px 12px}
.idcard-no{background:#FFF7F5;border-color:rgba(200,69,47,.4)}
.idcard-no h4,.idcard-no h4 .ico{color:var(--danger)}

.scamguard{background:#FFF9EC;border:1px solid rgba(242,160,7,.4);border-radius:var(--r-m);
  padding:16px;margin-top:16px}
.scamguard h4{margin:0 0 10px;font-size:.95rem;display:flex;align-items:center;gap:9px;color:#7A5200}
.scamguard h4 .ico,.scamguard h4 [data-ico]{color:var(--amber)}
.scamguard ol{margin:0;padding-left:20px;font-size:.88rem;line-height:1.75;color:#3B2E10}

/* ---------- share sheet ---------- */
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.share-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 16px;
  border-radius:var(--r-m);font-weight:700;font-size:.92rem;cursor:pointer;border:1.5px solid var(--line);
  background:#fff;color:var(--forest);text-decoration:none;transition:.15s;text-align:center}
.share-btn:hover{text-decoration:none;transform:translateY(-1px);border-color:var(--green)}
.share-btn .ico{width:1.2em;height:1.2em}
.share-wa{background:#25D366;border-color:#25D366;color:#fff}
.share-wa:hover{background:#1FB855;border-color:#1FB855;color:#fff}
.wa-mark{width:1.3em;height:1.3em;flex:none;background:currentColor;
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.53.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.15.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.24-.85.83-.85 2.03s.87 2.35.99 2.51c.12.16 1.71 2.61 4.15 3.66.58.25 1.03.4 1.39.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.82c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.53.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.12-.15.16-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.24-.85.83-.85 2.03s.87 2.35.99 2.51c.12.16 1.71 2.61 4.15 3.66.58.25 1.03.4 1.39.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.15-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E")}
@media (max-width:520px){.share-row{grid-template-columns:1fr}}

/* ---------- admin verification queue ---------- */
.qtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.idpreview{background:var(--forest);border-radius:var(--r-m);padding:16px;margin-bottom:18px}
.idpreview img{max-width:100%;border-radius:var(--r-s);display:block;margin:12px 0}
.idpreview .t2{color:#BFE0CE}

/* ---------- ID asked for at the point of commitment ---------- */
.whyid{background:var(--mint);border:1px solid var(--green);border-radius:var(--r-m);
  padding:16px;margin:14px 0}
.whyid h4{margin:0 0 8px;font-size:.98rem;display:flex;align-items:center;gap:9px;color:var(--green-700)}
.whyid h4 .ico,.whyid h4 [data-ico]{color:var(--green-700)}
.whyid p{margin:0 0 8px;font-size:.9rem;line-height:1.65;color:#22332C}
.whyid p:last-child{margin-bottom:0}
.whyid-small{font-size:.83rem !important;color:var(--slate) !important}
.idinline{border:1px solid var(--line);border-radius:var(--r-m);padding:16px;margin:14px 0}
.idinline .field{margin-bottom:12px}
.idinline .field:last-child{margin-bottom:0}
.jreq-row .badge{font-size:.72rem}

/* ============================================================
   PART 6 — vision / mission, and the premium tier
   ============================================================ */

/* ---------- vision ---------- */
.vision-hero{background:linear-gradient(160deg,var(--forest) 0%,#0d5138 55%,var(--green-700) 100%);
  color:#EAF5EE;padding:clamp(50px,9vw,96px) 0;position:relative;overflow:hidden}
.vision-hero::after{content:"";position:absolute;right:-140px;top:-140px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,168,90,.4),transparent 62%);z-index:0;pointer-events:none}
.vision-hero > *{position:relative;z-index:1}
.vision-hero .eyebrow{color:#9FD9BA}
.vision-hero h1{color:#fff;font-size:clamp(2.1rem,5.4vw,3.7rem);line-height:1.06;margin:10px 0 18px}
.vision-hero .lede{color:#CBE7D8;max-width:62ch}
.vision-hero .btn-ghost{color:#EAF5EE;border-color:rgba(159,217,186,.45)}
.vision-hero .btn-ghost:hover{color:#fff;border-color:#9FD9BA;background:rgba(159,217,186,.12)}

.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.mission-grid{grid-template-columns:1fr}}
.mission-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--green);
  border-radius:var(--r-l);padding:26px}
.mission-card .ico{width:2em;height:2em;color:var(--green);margin-bottom:12px}
.mission-card h2{font-size:1.25rem;margin:0 0 10px}
.mission-card p{margin:0;color:#22332C;line-height:1.7}

.start-card{border-top:3px solid var(--green)}
.start-card p{color:#22332C}

/* ---------- premium tier ---------- */
:root{
  --lux-ink:#0A0E0C;
  --lux-panel:#121814;
  --lux-gold:#C9A961;
  --lux-gold-soft:#E4CE9B;
  --lux-cream:#F5EFE3;
  --lux-line:rgba(201,169,97,.28);
}

.promo-lux{background:linear-gradient(100deg,var(--lux-ink),#1c241d 55%,#2a3327)}
.promo-lux .ico{color:var(--lux-gold)}
.promo-lux a{color:var(--lux-gold-soft)}

.lux-hero{background:radial-gradient(ellipse at 50% -20%,#1d2620 0%,var(--lux-ink) 62%);
  color:var(--lux-cream);padding:clamp(56px,10vw,110px) 0;text-align:center;position:relative;overflow:hidden}
.lux-hero::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(760px,90%);height:2px;background:linear-gradient(90deg,transparent,var(--lux-gold),transparent);
  opacity:.7;z-index:0;pointer-events:none}
.lux-hero > *{position:relative;z-index:1}
.lux-eyebrow{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--lux-gold);margin:0 0 16px}
.lux-hero h1{font-size:clamp(2.2rem,6vw,4.1rem);line-height:1.02;color:#fff;margin:0 0 18px;
  font-weight:300;letter-spacing:-.02em}
.lux-slogan{font-family:var(--font-display);font-size:clamp(1rem,2.2vw,1.35rem);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lux-gold);margin:0 0 22px}
.lux-lede{max-width:62ch;margin:0 auto;color:#BFC7C0;font-size:1.06rem;line-height:1.75}

.btn-lux{background:linear-gradient(135deg,var(--lux-gold),#B8923F);color:#14100A;
  border-color:transparent;font-weight:800;letter-spacing:.02em}
.btn-lux:hover{background:linear-gradient(135deg,#D9BC76,#C9A961);color:#14100A}
.btn-lux-ghost{background:transparent;color:var(--lux-cream);border-color:var(--lux-line)}
.btn-lux-ghost:hover{color:#fff;border-color:var(--lux-gold);background:rgba(201,169,97,.1)}

.lux-band{background:var(--lux-ink);color:var(--lux-cream)}
.lux-band h2,.lux-band h3{color:#fff}
.lux-band .lede,.lux-band p{color:#B4BDB6}
.lux-band .eyebrow{color:var(--lux-gold)}
.lux-band .panel{background:var(--lux-panel);border-color:var(--lux-line);color:var(--lux-cream)}
.lux-band .panel h3{color:#fff}
.lux-band .panel label{color:var(--lux-cream)}
.lux-band .panel .hint{color:#8E978F}
.lux-band .panel input,.lux-band .panel select,.lux-band .panel textarea{
  background:#0E1310;border-color:var(--lux-line);color:var(--lux-cream)}
.lux-band .panel input::placeholder,.lux-band .panel textarea::placeholder{color:#6E776F}
.lux-band .panel input:focus,.lux-band .panel select:focus,.lux-band .panel textarea:focus{
  border-color:var(--lux-gold);box-shadow:0 0 0 3px rgba(201,169,97,.18)}
.lux-band .field label .ico,.lux-band .field-ico > .ico{color:var(--lux-gold)}
.lux-band .tag{background:rgba(201,169,97,.1);border-color:var(--lux-line);color:var(--lux-cream)}
.lux-band .kv{border-color:var(--lux-line)}
.lux-band .empty{background:var(--lux-panel);border-color:var(--lux-line);color:#8E978F}
.lux-band .empty strong{color:#fff}
.lux-band .lrow{border-color:var(--lux-line)}
.lux-band .btn-ghost{color:var(--lux-cream);border-color:var(--lux-line)}
.lux-band .btn-ghost:hover{color:#fff;border-color:var(--lux-gold)}

.lux-point{text-align:center;padding:10px}
.lux-point .ico{width:2.1em;height:2.1em;color:var(--lux-gold);margin-bottom:12px}
.lux-point h3{font-size:1.05rem;margin:0 0 8px}
.lux-point p{font-size:.9rem;margin:0;color:#9AA39C}

.lxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:22px}
.lxcard{background:#fff;border:1px solid var(--line);border-top:3px solid var(--lux-gold);
  border-radius:var(--r-l);padding:22px;transition:.16s}
.lxcard:hover{box-shadow:var(--shadow-m);transform:translateY(-2px)}
.lxcard-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lxclass{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#8A6D22}
.lxclass .ico{color:#8A6D22}
.lxcode{margin-left:auto;font-size:.7rem;color:var(--slate)}
.lxname{font-size:1.25rem;margin:0 0 4px;font-weight:700}
.lxyear{font-weight:400;color:var(--slate);font-size:.95rem}
.lxmeta{font-size:.86rem;color:var(--slate);margin:0 0 14px}
.lxrates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.lxrate{background:#FBF7EE;border:1px solid rgba(201,169,97,.3);border-radius:var(--r-s);
  padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.lxrate span{font-size:.72rem;color:#8A6D22;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.lxrate strong{font-family:var(--font-mono);font-size:.95rem}
.tag-lux{background:#FBF7EE;border-color:rgba(201,169,97,.35);color:#6B5518}
.lxnote{font-size:.88rem;color:#2A3B34;background:var(--mint);border-radius:var(--r-s);
  padding:10px 12px;margin:0 0 14px}
.lxowner{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line-soft)}
.av-lux{background:#FBF7EE;color:#8A6D22}
.lxowner .ico{color:var(--green-700)}
.lxactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.lxquote{background:#FBF7EE;border:1px solid rgba(201,169,97,.35);border-radius:var(--r-m);
  padding:14px;margin-top:16px}
.lxtotal{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;color:#8A6D22}
.lux-tip{background:var(--lux-panel);border:1px solid var(--lux-line);border-radius:var(--r-m);
  padding:18px;margin-top:20px}
.lux-tip h4{margin:0 0 10px;font-size:.96rem;display:flex;align-items:center;gap:9px;color:var(--lux-gold)}
.lux-tip h4 .ico{color:var(--lux-gold)}
.lux-tip ul{margin:0;padding-left:20px;font-size:.88rem;line-height:1.8;color:#B4BDB6}
.lux-tip strong{color:var(--lux-cream)}

/* premium strip on the standard homepage */
.lux-strip{background:radial-gradient(ellipse at 20% 0%,#1d2620 0%,var(--lux-ink) 70%);
  color:var(--lux-cream);border-radius:var(--r-l);padding:clamp(28px,4.5vw,50px);
  position:relative;overflow:hidden}
.lux-strip::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--lux-gold),transparent);z-index:0;pointer-events:none}
.lux-strip > *{position:relative;z-index:1}
.lux-strip h2{color:#fff}
.lux-strip p{color:#B4BDB6}
.lux-strip .eyebrow{color:var(--lux-gold)}
.lux-strip .ico{color:var(--lux-gold)}

/* ---------- homepage vision strip ---------- */
.vision-strip{background:linear-gradient(140deg,var(--forest),#0d5138 60%,var(--green-700));
  color:#EAF5EE;border-radius:var(--r-l);padding:clamp(28px,4.5vw,50px);
  display:grid;grid-template-columns:1.35fr .65fr;gap:32px;align-items:center;
  position:relative;overflow:hidden}
.vision-strip::after{content:"";position:absolute;right:-120px;bottom:-140px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,168,90,.35),transparent 62%);
  z-index:0;pointer-events:none}
.vision-strip > *{position:relative;z-index:1}
.vision-strip h2{color:#fff;font-size:clamp(1.7rem,3.8vw,2.6rem);margin-bottom:14px}
.vision-strip p{color:#CBE7D8}
.vision-side{text-align:center}
.vision-side .ico{width:3.4em;height:3.4em;color:#9FD9BA;margin-bottom:14px}
.vs-quote{font-family:var(--font-display);font-size:1.02rem;line-height:1.6;color:#DCEFE4 !important;
  font-style:italic}
@media (max-width:900px){.vision-strip{grid-template-columns:1fr}}

.lux-mini{display:flex;flex-direction:column;gap:8px}
.lux-mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(201,169,97,.08);border:1px solid var(--lux-line);border-radius:var(--r-s);
  padding:11px 14px;font-size:.9rem}
.lux-mini-row span{display:flex;align-items:center;gap:9px;color:var(--lux-cream)}
.lux-mini-row .ico{color:var(--lux-gold)}
.lux-mini-row strong{font-family:var(--font-mono);font-size:.8rem;color:var(--lux-gold);
  text-transform:uppercase;letter-spacing:.08em}

/* ---------- self-drive + premium fee ---------- */
.lxdrive{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tag-self{background:#EAF3FF;border-color:#B9D5F2;color:#1F4E79}
.tag-self .ico,.tag-self [data-ico]{color:#2A5D87}
.lxself{display:flex;align-items:flex-start;gap:9px;background:#F3F8FF;border:1px solid #D6E6F7;
  border-radius:var(--r-s);padding:10px 12px;margin-bottom:12px;font-size:.83rem;color:#1F4E79}
.lxself .ico{color:#2A5D87;flex:none;margin-top:1px}
.lxtotal-row{border-top:1px solid rgba(201,169,97,.4);margin-top:6px;padding-top:10px}
.lxtotal-row span:first-child{font-weight:700;color:var(--ink)}
.lux-fee-note{max-width:60ch;margin:16px auto 0;font-size:.9rem;color:#8E978F;
  border-top:1px solid rgba(201,169,97,.25);padding-top:14px}
.lux-warn{background:rgba(201,169,97,.1);border:1px solid var(--lux-line);border-radius:var(--r-s);
  padding:12px 14px;font-size:.88rem;color:#D9CBAA !important;margin:16px 0}
.lux-warn .ico{color:var(--lux-gold)}
.selfbox{background:rgba(62,124,177,.07);border:1px solid rgba(62,124,177,.3);
  border-radius:var(--r-m);padding:18px;margin:16px 0}
.selfbox h4{margin:0 0 6px;font-size:.98rem;display:flex;align-items:center;gap:9px}
.lux-band .selfbox{background:rgba(120,170,220,.08);border-color:rgba(120,170,220,.28)}
.lux-band .selfbox h4{color:#9FC6E8}
.lux-band .selfbox h4 .ico{color:#9FC6E8}
.feebox{background:rgba(201,169,97,.1);border:1px solid var(--lux-line);border-radius:var(--r-m);
  padding:16px;margin:18px 0}
.feebox h4{margin:0 0 8px;font-size:.96rem;display:flex;align-items:center;gap:9px;color:var(--lux-gold)}
.feebox h4 .ico{color:var(--lux-gold)}
.feebox p{font-size:.88rem;line-height:1.65;margin:0 0 8px}
.feebox p:last-child{margin-bottom:0}
.feebox strong{color:var(--lux-cream)}

/* ---------- how we make money ---------- */
.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
@media (max-width:760px){.money-grid{grid-template-columns:1fr}}
.money-card{border-radius:var(--r-l);padding:24px;border:1px solid var(--line)}
.money-card .ico{width:2em;height:2em;margin-bottom:12px}
.money-card h3{font-size:1.1rem;margin:0 0 10px}
.money-card p{font-size:.93rem;line-height:1.7;margin:0 0 10px;color:#22332C}
.money-card p:last-child{margin-bottom:0}
.money-free{background:var(--mint);border-top:4px solid var(--green)}
.money-free .ico{color:var(--green)}
.money-paid{background:#FBF7EE;border-top:4px solid var(--lux-gold)}
.money-paid .ico{color:#8A6D22}

/* ---------- test account rows ---------- */
.acct-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.acct-row:last-child{border-bottom:0}
.acct-row .av{width:40px;height:40px;font-size:.82rem;flex:none}
.acct-row .actions{margin-left:auto;display:flex;gap:8px}
.acct-row .t1{font-weight:700}
.acct-row code{background:var(--mint);padding:2px 7px;border-radius:5px;font-size:.9em}
@media (max-width:560px){.acct-row .actions{margin-left:0;width:100%}}

/* ---------- login-screen testing hint ---------- */
.testcreds{background:var(--mint);border:1px dashed var(--green);border-radius:var(--r-s);
  padding:12px 14px;font-size:.85rem;line-height:1.65;margin:14px 0 4px;color:#22332C}
.testcreds .mono{background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 6px}

/* ---------- guided walkthrough (test page) ---------- */
.keybox{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:680px;margin:0 auto}
@media (max-width:600px){.keybox{grid-template-columns:1fr}}
.keyitem{background:var(--forest);color:#EAF5EE;border-radius:var(--r-m);padding:18px 20px;text-align:center}
.klabel{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#9FD9BA;margin-bottom:8px}
.kvalue{display:block;font-size:1.25rem;font-weight:600;color:#fff;letter-spacing:.04em;word-break:break-all}

.walk{list-style:none;padding:0;margin:0;counter-reset:none}
.wstep{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--line);align-items:start}
.wstep:last-child{border-bottom:0}
.wnum{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.15rem;flex:none}
.wbody h3{font-size:1.15rem;margin:2px 0 8px}
.wbody p{color:#22332C;font-size:.95rem;line-height:1.7;margin:0 0 10px}
.wtip{background:var(--mint);border-left:3px solid var(--green);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:9px 13px;font-size:.88rem !important;color:#2A3B34 !important}
.wbody .btn{margin-top:6px}
@media (max-width:560px){.wstep{grid-template-columns:38px 1fr;gap:12px}.wnum{width:36px;height:36px;font-size:1rem}}

.advbox{border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px;background:#fff}
.advbox summary{cursor:pointer;font-size:.98rem;color:var(--ink);list-style:revert}
.advbox summary:hover{color:var(--green-700)}
.advbox[open] summary{margin-bottom:4px}

/* ============================================================
   PART 7 — live map
   ============================================================ */
.livewrap{margin-bottom:18px}
.livehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.livestate{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700}
.livestate .dot{width:9px;height:9px}
.liveeta{margin-left:auto;font-size:.85rem;color:var(--slate);font-family:var(--font-mono)}

.mapbox{height:290px;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);
  background:var(--mint);position:relative;z-index:0}
.mapbox-idle{display:grid;place-items:center}
@media (max-width:560px){.mapbox{height:230px}}

.map-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;height:100%;text-align:center;padding:24px;color:var(--slate);font-size:.88rem}
.map-fallback .ico{width:1.9em;height:1.9em;color:var(--green);margin-bottom:4px}
.map-fallback strong{color:var(--ink);font-size:.98rem}
.map-fallback span{max-width:34ch;line-height:1.5}

/* the moving marker */
.mapdot{display:block;width:18px;height:18px;border-radius:50%;background:var(--dot,#00A85A);
  border:3px solid #fff;box-shadow:0 1px 6px rgba(6,18,13,.35)}
.mapdot-pulse{position:relative}
.mapdot-pulse::after{content:"";position:absolute;left:-3px;top:-3px;width:18px;height:18px;
  border-radius:50%;border:3px solid var(--dot,#00A85A);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){.mapdot-pulse::after{animation:none}}

/* leaflet needs to sit under our own overlays */
.leaflet-container{font:inherit}
.leaflet-pane{z-index:1}
.leaflet-top,.leaflet-bottom{z-index:2}

/* driver-side sharing control */
.livebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;
  background:var(--mint);border:1px solid var(--line);border-radius:var(--r-s);padding:9px 12px;
  font-size:.84rem;color:var(--slate)}
.livebar .ico{color:var(--slate);flex:none}
.livebar .btn{margin-left:auto}
.livebar.on{background:var(--green-100);border-color:var(--green);color:var(--green-700)}
.livebar.on .ico{color:var(--green-700)}

/* ============================================================
   PART 8 — languages and right-to-left
   ============================================================ */
.lang-select{width:auto;padding:8px 10px;font-size:.85rem;min-width:96px}

/* Arabic and Urdu read right to left. Flip the flow, then put back the
   handful of things that are directional by meaning rather than by
   language — progress bars, timelines and the latin-script code chips. */
body.rtl{direction:rtl;text-align:right}
body.rtl .head-in,body.rtl .foot-grid,body.rtl .hstack{direction:rtl}
body.rtl .nav{flex-direction:row-reverse}
body.rtl .head-cta{flex-direction:row-reverse}
body.rtl .sos-fab{left:auto;right:18px}
body.rtl .ai-fab{right:auto;left:18px}
body.rtl .ai-panel{right:auto;left:18px}
body.rtl .field-ico > .ico{left:auto;right:13px}
body.rtl .field-ico input,body.rtl .field-ico select,body.rtl .field-ico textarea{
  padding-left:14px;padding-right:40px}
body.rtl .modal-x{right:auto;left:14px}
body.rtl .actions,body.rtl .livebar .btn,body.rtl .lxcode,body.rtl .liveeta,
body.rtl .jcode,body.rtl .acct-row .actions{margin-left:0;margin-right:auto}
body.rtl ul,body.rtl ol{padding-left:0;padding-right:22px}
body.rtl blockquote{border-left:0;border-right:3px solid var(--green);padding-left:0;padding-right:18px}
body.rtl .wtip{border-left:0;border-right:3px solid var(--green);border-radius:var(--r-s) 0 0 var(--r-s)}
body.rtl .timeline li::before{left:auto;right:16px}
body.rtl .panel[style*="border-left"]{border-left:1px solid var(--line) !important;
  border-right:4px solid var(--green)}

/* keep these left-to-right whatever the page language: they are codes,
   numbers and progress, not prose */
body.rtl .mono,body.rtl .track-code,body.rtl .jcode,body.rtl .lxcode,
body.rtl .pin-big,body.rtl .kvalue,body.rtl input[type="email"],
body.rtl input[type="tel"],body.rtl input[type="number"],body.rtl .term{
  direction:ltr;text-align:left}
body.rtl .track-bar,body.rtl .timeline,body.rtl .mapbox{direction:ltr}
body.rtl .track-bar i{float:right}

@media (max-width:980px){
  .lang-select{width:100%;min-width:0}
}

/* ---------- AEO: answer box and FAQ ---------- */
.answer-box{background:var(--mint);border:1px solid var(--green);border-left:4px solid var(--green);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:18px 22px;margin:0 0 28px}
.answer-label{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);margin-bottom:8px}
.answer-box p{margin:0;font-size:1.02rem;line-height:1.7;color:#1B2B24}
body.rtl .answer-box{border-left:1px solid var(--green);border-right:4px solid var(--green);
  border-radius:var(--r-m) 0 0 var(--r-m)}

.faq-list{margin:14px 0 0}
.faq-item{border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:10px;background:#fff}
.faq-item summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:1rem;
  list-style:revert;color:var(--ink)}
.faq-item summary:hover{color:var(--green-700)}
.faq-item[open] summary{border-bottom:1px solid var(--line-soft)}
.faq-item p{margin:0;padding:14px 18px;color:#22332C;line-height:1.75;font-size:.96rem}

/* ---------- wide tables on small screens ---------- */
/* A comparison table with four columns cannot shrink below its content.
   Rather than let it push the whole page sideways, let the table itself
   scroll while the article stays put. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em 0;
  max-width:100%;border-radius:var(--r-s)}
.table-scroll table{margin:0;min-width:520px}
@media (max-width:620px){
  .table-scroll table{font-size:.86rem}
}