/* Localization AI (redesign): one campaign travelling from Pune to the UAE, in a zig-zag of three versions at full
   size. The ribbon weaves between them like a route. Every version is written in English. */
.lo-hero{padding-bottom:var(--s9)}
.lo-route{margin-top:var(--s8);display:grid;gap:var(--s8)}
.lo-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.lo-row.lo-ae{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.lo-row.lo-ae .lo-ad{order:2}
.lo-ae .lo-ad img{object-position:50% 30%}.lo-us .lo-ad img{object-position:60% 50%}
.lo-ad{position:relative;margin:0;border-radius:var(--r-stage);overflow:hidden;background:#fff;box-shadow:var(--sh-lift);aspect-ratio:16/9;container-type:inline-size}
.lo-ad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lo-copy{position:absolute;top:4cqi;bottom:4cqi;inset-inline-start:4cqi;width:46%;display:grid;align-content:center;gap:1.6cqi;padding:4cqi;border-radius:2.4cqi;background:#fff}
.lo-brand{font-size:max(13px,2cqi);font-weight:800;color:#8F5E00}
.lo-h{font-size:max(20px,4.2cqi);line-height:1.15;letter-spacing:-.02em;font-weight:800;color:#0B2A66}
.lo-p{font-size:max(14px,2.1cqi);line-height:1.5;color:var(--text)}
.lo-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1cqi 2cqi}
.lo-cta span{padding:1.4cqi 2.6cqi;border-radius:1.4cqi;background:#FFC65A;color:#0B2A66;font-size:max(13px,2cqi);font-weight:800}
.lo-cta small{font-size:max(12.5px,1.8cqi);color:var(--text)}
.bt{display:none;margin-top:.6cqi;font-size:max(13px,1.8cqi);line-height:1.4;font-weight:600;letter-spacing:0;color:var(--deep);font-style:italic}
.lo-ad.show-bt .bt{display:block}
.lo-notes{display:grid;gap:12px;align-content:center}
.lo-mk{font-size:clamp(24px,2.2vw,30px);font-weight:800;letter-spacing:-.018em;color:var(--ink)}
.lo-st{justify-self:start;padding:6px 12px;border-radius:6px;font-size:15px;font-weight:700}
.lo-st.ok{background:#E3F7F4;color:var(--t-teal)}.lo-st.draft{background:#FFF0F2;color:var(--t-coral);border-radius:12px;line-height:1.4}
.lo-notes ul{display:grid;gap:8px}
.lo-notes li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.5;color:var(--text)}
.lo-notes li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.lo-bt{display:flex;align-items:center;gap:12px;margin-top:6px;font-size:15.5px;font-weight:700;color:var(--ink);cursor:pointer}

/* the adaptation sheet */
.lo-sh-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s5) var(--s9);align-items:end}
.lo-scroll{margin-top:var(--s7);overflow-x:auto}
.lo-tab{width:100%;min-width:760px;border-collapse:collapse}
.lo-tab th,.lo-tab td{padding:16px 20px;text-align:left;border-top:1px solid var(--line);font-size:16px;line-height:1.5;vertical-align:top;color:var(--ink)}
.lo-tab thead th{border-top:0;font-size:15px;color:var(--deep)}
.lo-tab tbody th{font-weight:800}

.lo-src{margin-top:var(--s5);font-size:15px;color:var(--text)}.lo-src a{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){.lo-row,.lo-row.lo-ae{grid-template-columns:1fr}.lo-row.lo-ae .lo-ad{order:0}.lo-sh-head{grid-template-columns:1fr}}
@media (max-width:760px){
  .lo-route{gap:var(--s7)}
  .lo-ad{aspect-ratio:auto;display:grid}.lo-ad img{position:static;aspect-ratio:16/9}
  .lo-copy{position:static;width:auto;border-radius:0;padding:18px;gap:10px}
  .lo-h{font-size:22px}.lo-p{font-size:15px}.lo-cta span{padding:9px 14px;border-radius:9px;font-size:14px}
}

/* highlight what adapts: the chosen part is outlined in all three versions at once */
.lo-hl{margin-top:var(--s8);display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.lo-hl-b{display:flex;flex-wrap:wrap;gap:8px}
.lo-hl-b button{height:44px;padding:0 16px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:15.5px;font-weight:700;color:var(--ink);transition:background-color .25s ease,color .25s ease}
.lo-hl-b [aria-pressed=true]{background:var(--cobalt);color:#fff;box-shadow:none}
.lo-hl-st{font-size:15.5px;font-weight:600;color:var(--text)}
.lo-hl+.lo-route{margin-top:var(--s5)}
[data-a]{border-radius:6px;outline:3px solid transparent;outline-offset:4px;transition:outline-color .35s ease}
.lo-route[data-hl=head] [data-a=head],.lo-route[data-hl=currency] [data-a=currency],.lo-route[data-hl=contact] [data-a=contact],.lo-route[data-hl=promise] [data-a=promise]{outline-color:var(--cobalt)}
