/* TelecomDesk UAE — mobile-first, zero-dependency design system */
:root{
  --bg:#0b1220; --card:#121c31; --card2:#0f1829; --ink:#eaf0fb; --muted:#9fb0cc;
  --brand:#90ee7e; --brand-ink:#06251b; --wa:#25D366; --wa-ink:#04231a; --line:#1f2c47;
  --warn:#ffcf6b; --maxw:1120px; --r:16px; --sh:0 10px 30px rgba(0,0,0,.35);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans Arabic",sans-serif;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fc; --card:#fff; --card2:#f2f6ff; --ink:#0c1526; --muted:#54627d;
         --line:#dde5f2; --sh:0 8px 26px rgba(12,21,38,.08); --brand:#0a7d4f; --brand-ink:#fff; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--sans);text-rendering:optimizeLegibility}
body[dir=rtl]{text-align:right}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
/* the skip link is positioned, not parked off-canvas: a -9999px left offset turns into
   ~10,000px of horizontal scroll the moment a page is RTL. See v-2026b for the live rule. */
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:14px;height:60px;max-width:var(--maxw);margin:0 auto;padding:0 16px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.2px;text-decoration:none}
.logo .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#38bdf8);display:grid;place-items:center;color:#04231a;font-size:13px;font-weight:900}
nav.links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
@media (min-width:901px){
  nav.links{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none}
  nav.links::-webkit-scrollbar{display:none}
  nav.links a{white-space:nowrap;flex:0 0 auto}
  .nav-in{gap:10px}
}
@media (min-width:901px) and (max-width:1180px){
  nav.links a{font-size:13px;padding:8px 8px}
}
nav.links a{text-decoration:none;font-size:14px;color:var(--muted);padding:8px 10px;border-radius:10px}
nav.links a:hover,nav.links a[aria-current=page]{color:var(--ink);background:var(--card2)}
.burger{display:none;margin-left:auto;background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 11px;font-size:16px;cursor:pointer}
@media (max-width:900px){
  nav.links{position:fixed;inset:60px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);
             flex-direction:column;padding:10px 16px 18px;display:none;gap:2px}
  nav.links.open{display:flex} nav.links a{padding:12px;font-size:16px}
  .burger{display:grid}
}
main{padding:22px 0 120px}
section{margin:26px 0}
h1{font-size:clamp(26px,5.2vw,44px);line-height:1.14;margin:.3em 0 .35em;letter-spacing:-.6px}
h2{font-size:clamp(20px,3.6vw,27px);line-height:1.25;margin:1.5em 0 .5em;letter-spacing:-.35px}
h3{font-size:clamp(17px,2.6vw,20px);margin:1.2em 0 .4em}
p{margin:.55em 0 1em}
.lead{font-size:clamp(16px,2.4vw,19px);color:var(--muted)}
.answer{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r);
        padding:16px 18px;margin:14px 0 20px;box-shadow:var(--sh)}
.answer b{color:var(--ink)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.badge{font-size:12.5px;font-weight:650;border:1px solid var(--line);background:var(--card2);color:var(--muted);
       padding:5px 10px;border-radius:999px;white-space:nowrap}
.badge.hot{color:var(--brand-ink);background:var(--brand);border-color:transparent}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.card h3{margin-top:0}
.card .meta{font-size:13px;color:var(--muted)}
.price{font-size:30px;font-weight:850;letter-spacing:-1px;margin:6px 0 2px}
.price small{font-size:13px;font-weight:600;color:var(--muted)}
table{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:15px}
th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
body[dir=rtl] th,body[dir=rtl] td{text-align:right}
th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tr:hover td{background:var(--card2)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);padding:2px 8px}
ul.steps{list-style:none;padding:0;counter-reset:s}
ul.steps li{counter-increment:s;position:relative;padding:10px 0 10px 44px;border-bottom:1px dashed var(--line)}
body[dir=rtl] ul.steps li{padding:10px 44px 10px 0}
ul.steps li::before{content:counter(s);position:absolute;left:0;top:9px;width:30px;height:30px;border-radius:9px;
  background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:14px}
body[dir=rtl] ul.steps li::before{left:auto;right:0}
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.cta-in{display:flex;gap:10px;align-items:center;max-width:var(--maxw);margin:0 auto}
.cta-in .txt{font-size:13.5px;color:var(--muted);line-height:1.35;margin-right:auto}
body[dir=rtl] .cta-in .txt{margin:0 0 0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 16px;
  font-weight:750;text-decoration:none;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-size:15px;cursor:pointer;min-height:44px;transition:transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn.wa{background:var(--wa);color:var(--wa-ink);border-color:transparent}
.btn.pri{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 12px;font-size:14px;min-height:38px}
.hero{background:radial-gradient(1200px 420px at 15% -10%,rgba(144,238,126,.16),transparent),
              radial-gradient(900px 380px at 90% 0,rgba(56,189,248,.14),transparent);
        border:1px solid var(--line);border-radius:20px;padding:26px 20px;margin-bottom:8px}
.hero .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:16px}
.kpi{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kpi b{display:block;font-size:20px}
.kpi span{font-size:12.5px;color:var(--muted)}
details{border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--card);margin:8px 0}
details[open]{box-shadow:var(--sh)}
summary{cursor:pointer;padding:13px 0;font-weight:700;list-style:none;display:flex;gap:10px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted)}
body[dir=rtl] summary::after{margin:0 auto}
details[open] summary::after{content:"–"}
details>div{padding:0 0 14px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{font-size:13.5px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:7px 11px;text-decoration:none;color:var(--ink)}
.chip:hover{border-color:var(--brand)}
.chip b{color:var(--muted);font-weight:600;font-size:12px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:11px 12px;width:100%}
input:focus-visible,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
label{font-size:13.5px;color:var(--muted);display:block;margin:8px 0 5px}
.assist{display:flex;flex-direction:column;height:min(72vh,620px);background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh)}
.log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{max-width:86%;padding:11px 13px;border-radius:14px;font-size:15px;white-space:pre-wrap;line-height:1.55}
.msg.u{align-self:flex-end;background:var(--brand);color:var(--brand-ink);border-bottom-right-radius:4px}
body[dir=rtl] .msg.u{border-bottom-right-radius:14px;border-bottom-left-radius:4px}
.msg.a{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.a .src{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card2)}
.composer input{flex:1}
.suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 12px 12px}
.note{font-size:13px;color:var(--muted)}
.warn{border-left:4px solid var(--warn)}
footer.ft{border-top:1px solid var(--line);margin-top:36px;padding:22px 0 8px;color:var(--muted);font-size:14px}
.crumbs{font-size:13px;color:var(--muted);margin:4px 0 10px}
.crumbs a{text-decoration:none}
hr.sep{border:0;border-top:1px solid var(--line);margin:22px 0}
.mono{font-family:var(--mono);font-size:.94em}
.tag{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.right{margin-left:auto} body[dir=rtl] .right{margin:0 auto 0 0}
.live{color:var(--brand);font-weight:750}
@media (max-width:620px){
  .hero{padding:20px 15px} .cta-in .txt{display:none} .btn{flex:1}
  main{padding-bottom:88px}
}
@media print{ header.nav,.cta-bar,.assist{display:none} body{background:#fff;color:#000} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------------------------------------------------------------- images + conversion */
.pic{display:block;position:relative;overflow:hidden;border-radius:16px;background:var(--card2);line-height:0;
  border:1px solid var(--line)}
.pic img{width:100%;height:auto;display:block;object-fit:cover}
.hero.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.hero.split>.pic{align-self:stretch;max-height:520px}
.hero.split>.pic img{height:100%;max-height:520px}
.trust{font-size:12.5px;color:var(--muted);margin:10px 0 0;display:flex;gap:6px;align-items:center}
.trust::before{content:"\2713";color:var(--brand);font-weight:900}
.card.img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.img .pic{border:0;border-radius:0;aspect-ratio:16/10}
.card.img .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.card.img h3{padding:12px 14px 0}
.card.img p,.card.img .meta{padding:0 14px 14px}
.card.img p.note{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.img:hover{border-color:var(--brand)}
/* long-form guides */
.arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.art{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .08s ease,border-color .12s}
.art:hover{transform:translateY(-2px);border-color:var(--brand)}
.art .pic{border:0;border-radius:0;aspect-ratio:4/5}
.art .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.art-in{padding:12px 13px 14px;display:block}
.art b{display:block;font-size:15.5px;line-height:1.32;margin:7px 0 6px;letter-spacing:-.2px}
.art .meta{font-size:12px;color:var(--muted);display:block}
.card.rel{padding:13px 14px;text-decoration:none;color:inherit;display:block}
.card.rel b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:5px}
.card.rel:hover{border-color:var(--brand)}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:14px 0}
.toc b{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:8px}
.toc ol{margin:0;padding-inline-start:22px;columns:2;column-gap:22px;font-size:14.5px}
.toc li{margin:0 0 6px;break-inside:avoid}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--line)}
.toc a:hover{color:var(--brand)}
.quick{background:linear-gradient(180deg,var(--card2),transparent);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;margin:14px 0}
.quick .answer{margin-top:8px}
h2{letter-spacing:-.4px;scroll-margin-top:78px}
h3.sub{margin:16px 0 6px;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.faq-mini details{margin:6px 0}
.mid-cta{display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--card2);
  border:1px dashed var(--brand);border-radius:var(--r);padding:13px 15px;margin:16px 0}
.mid-cta b{display:block;font-size:15.5px}
.mid-cta span{font-size:12.5px;color:var(--muted)}
.mid-cta .btn{white-space:nowrap}
ol.steps,.steps{margin:8px 0 4px;padding-inline-start:24px;font-size:15px;line-height:1.55}
ol.steps li,.steps li{margin:0 0 8px}
.ladder li{border-left:3px solid var(--brand);padding-left:10px;list-style:none;margin:0 0 12px;font-size:14.8px}
.ladder{padding-inline-start:0;counter-reset:l}
.ladder li::before{counter-increment:l;content:counter(l);font-weight:900;color:var(--brand);
  display:inline-block;width:0;margin-inline-start:-14px}
.cross{margin:8px 0;padding:0;list-style:none}
.cross li{padding:9px 12px 9px 34px;position:relative;background:var(--card2);border:1px solid var(--line);
  border-radius:10px;margin:0 0 8px;font-size:14.6px}
.cross li::before{content:"\2715";position:absolute;left:13px;top:9px;color:#f87171;font-weight:900}
body[dir=rtl] .cross li{padding:9px 34px 9px 12px}
body[dir=rtl] .cross li::before{left:auto;right:13px}
.tbl-sm td,.tbl-sm th{padding:7px 8px;font-size:14px}
.author .note{font-size:13.5px}
.btn.wa{box-shadow:0 6px 20px rgba(37,211,102,.22)}
.btn:hover{filter:brightness(1.06)}
.btn.sm{font-size:13.5px}
@media(max-width:980px){
  .hero.split{grid-template-columns:1fr}
  .hero.split>.pic{max-height:none;order:-1;aspect-ratio:16/10}
  .hero.split>.pic img{max-height:340px}
  .toc ol{columns:1}
  .mid-cta{flex-direction:column;align-items:stretch;text-align:center}
}
@media(prefers-reduced-motion:reduce){.art:hover{transform:none}.btn:hover{filter:none}}

/* footer nav rows: every page is one hop from the footer */
.ft-nav{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:10px;font-size:13.5px}
.ft-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.ft-nav a:hover{color:var(--brand);border-color:var(--brand)}

/* ---------------------------------------------------------------------------
   v-2026b  phone audit pass
   Measured in Chromium at 320 / 390x844(dpr3) / 1440 across 7 page types.
   Fixes: art letterbox band, 4:5 art eating a whole viewport, sticky bar
   covering content, sub-44px tap targets, 320px overflow, RTL scroll overflow.
--------------------------------------------------------------------------- */
html{overflow-x:clip}
body{overflow-x:clip}
main{padding:18px 0 26px}
footer.ft{padding-block-end:calc(86px + env(safe-area-inset-bottom))}

/* skip link must not create scrollable overflow in RTL (it pushed /ar pages to 10k px) */
.skip{position:fixed;inset:0 auto auto 16px;transform:translateY(-180%);opacity:0;pointer-events:none;
  transition:transform .12s ease,opacity .12s ease;left:16px}
.skip:focus{transform:none;opacity:1;pointer-events:auto}
html[dir=rtl] .skip{left:auto;right:16px}

/* tap targets: 44px minimum everywhere a thumb lands, without inflating the layout */
.burger{min-width:44px;min-height:44px;padding:0;place-items:center;font-size:19px}
@media (min-width:901px){.burger{display:none!important}}
nav.links a{min-height:45px;display:inline-flex;align-items:center;padding:8px 11px}
.ft-nav a,.crumbs a,.related a{display:inline-block;padding:12px 6px;margin:-12px -6px;border-radius:8px}
.ft-nav a{min-height:44px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:9px 12px;line-height:1.25}
.btn{white-space:nowrap}
.btn.sm{min-height:44px;padding:10px 12px;font-size:14px}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:20px 0 4px}
.pager a{min-width:44px;justify-content:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;font-weight:700}
.pager a[aria-current=page]{background:var(--brand);color:var(--brand-ink);border-color:transparent}
input,select,textarea{min-height:44px}

/* long labels shrink instead of pushing the document wider than the screen */
.badge{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.badges{align-items:flex-start}
.lead,p{overflow-wrap:anywhere}
.crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 10px;font-size:12.5px}

/* hero: the copy and its buttons own the first screen; art is a real photo band */
.hero{padding:22px 18px}
.hero h1{margin-top:.1em}
.hero .eyebrow{margin-top:0}
@media (max-width:980px){
  .hero{padding:18px 15px 0;overflow:hidden;background-size:560px 220px,460px 180px}
  .hero.split{grid-template-columns:minmax(0,1fr);gap:0}
  .hero.split>.copy{padding-bottom:14px}
  .hero.split>.pic{order:0;align-self:auto;max-height:none;aspect-ratio:16/9;margin:0 -15px;
    border-radius:0;border-inline:0;border-block-end:0;background:transparent;border-bottom:1px solid var(--line)}
  .hero.split>.pic img{width:100%;height:100%;max-height:none;object-position:50% 28%}
  .hero .btns{margin-bottom:16px}
}
@media (max-width:620px){
  h1{font-size:clamp(25px,7.2vw,32px);letter-spacing:-.4px}
  .lead{font-size:16px;line-height:1.55}
  .hero{padding:16px 14px 0}
  .hero.split>.pic{aspect-ratio:4/3;max-height:236px;margin:0 -14px}
  .hero .btns{gap:8px}
  .hero .btns .btn{flex:1 1 100%;font-size:15px}
  footer.ft{padding-block-end:calc(78px + env(safe-area-inset-bottom))}
}

/* sticky conversion bar: one row, one line, never on top of the last paragraph */
.cta-in .btn{flex:0 1 auto;min-width:0}
.lbl-min{display:none}
@media (max-width:640px){
  .cta-bar{padding:8px 9px calc(8px + env(safe-area-inset-bottom))}
  .cta-in{gap:7px}
  .cta-in .lbl-full{display:none}
  .cta-in .lbl-min{display:inline}
  .cta-in .btn{flex:1 1 0;font-size:13.5px;padding:12px 6px;letter-spacing:-.2px}
}

/* guide/blog lists: portrait cover as a row thumbnail, not a viewport-eating slab */
@media (max-width:700px){
  .arts{grid-template-columns:minmax(0,1fr);gap:10px}
  .art{display:flex;align-items:stretch}
  .art .pic{flex:0 0 104px;width:104px;aspect-ratio:4/5;min-height:118px;border:0;border-radius:0;
    border-end-end-radius:0;border-start-start-radius:var(--r);border-end-start-radius:var(--r)}
  .art .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .art-in{flex:1;min-width:0;padding:9px 11px;display:flex;flex-direction:column;justify-content:center}
  .art b{font-size:15px;margin:2px 0 4px}
  .art .meta{font-size:11.5px}
  /* image-on-top card (Discover style): the 110px side-rail layout left a dead band
     under the photo whenever the title was short - full-bleed art reads faster and crops cleaner */
  .card.img{display:flex;flex-direction:column;padding:0}
  .card.img .pic{width:100%;aspect-ratio:16/10;min-height:0;border:0;border-radius:0}
  .card.img .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
  .card.img h3{padding:12px 15px 0;font-size:17.5px;line-height:1.25;margin:0}
  .card.img p{padding:7px 15px 0}
  .card.img p.note{font-size:14px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card.img .meta{padding:0 15px 13px;font-size:13px;margin-top:8px;margin-block-start:8px}
  .card.img .pill-row{margin:10px 15px 0}
  .card.img>.pill-row+.meta,.card.img>.mid-cta+.meta{margin-top:10px}
}
/* 2-up on large phones/tablets keeps the image but halves the scroll cost */
@media (min-width:430px) and (max-width:700px){
  .arts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arts .art{flex-direction:column}
  .arts .art .pic{width:100%;flex:0 0 auto;aspect-ratio:16/10;border-radius:0;min-height:0}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* wide plan tables: first column stays pinned while the rest scrolls, so a
   phone reader always sees which plan a number belongs to */
.tbl-wrap{overscroll-behavior-x:contain;scrollbar-width:thin}
@media (max-width:700px){
  .tbl-wrap table{font-size:13.5px}
  .tbl-wrap th,.tbl-wrap td{padding:8px 7px}
  .tbl-wrap caption{font-size:11px}
  .tbl-wrap th:first-child,.tbl-wrap td:first-child{position:sticky;inset-inline-start:0;z-index:2;
    background:var(--card);border-inline-end:1px solid var(--line);min-width:96px;max-width:150px}
  .tbl-wrap thead th:first-child{z-index:3}
}
.mid-cta .btn{white-space:normal}

/* RTL fixes driven from <html dir> too, not only <body dir> */
html[dir=rtl] .cta-in .txt{margin:0 0 0 auto}
html[dir=rtl] nav.links{margin-left:0;margin-right:auto}
html[dir=rtl] .burger{margin-left:0;margin-right:auto}
html[dir=rtl] .pic img{object-position:50% 30%}

/* language bar (client-side UI localisation; the page itself is the source of truth) */
.langbar{border-bottom:1px solid var(--line);background:var(--card2);padding:8px 16px;display:flex;gap:10px;
  align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13px}
.langbar .langbar-t{color:var(--muted);min-width:0}
.langbar b{color:var(--ink)}
.td-langs .tag{margin-inline-end:4px}

/* ---------------------------------------------------------------------------
   v-2026c — measured in Chromium 131 at 360/390/414/768/1440 against the
   *deployed* build: 19 of 19 pages still had text sitting under the sticky bar
   at the end of scroll, 65 runs of sub-13px copy, ~220 over-long text lines at
   >=768px, and inline links with 18-22px hit areas. Delta only, nothing here
   repeats v-2026b.
--------------------------------------------------------------------------- */
/* the only safe bottom clearance is the bar's real measured height (app.js owns --cta-h) */
footer.ft{padding-block-end:calc(var(--cta-h,104px) + 22px + env(safe-area-inset-bottom))}
html{scroll-padding-bottom:calc(var(--cta-h,104px) + 16px)}
@media (max-width:640px){ footer.ft{padding-block-end:calc(var(--cta-h,86px) + 16px + env(safe-area-inset-bottom))} }

/* readability floor: nothing a person has to read stays below ~13.5px */
.tag{font-size:12.5px}
.crumbs{font-size:13.5px}
.art .meta{font-size:13px}
.meta,.card .meta{font-size:13.5px}
.note{font-size:14px;line-height:1.6}
.trust{font-size:13.5px}
.badge{font-size:13px}
.kpi span{font-size:13.5px}
.tbl-wrap caption{font-size:12.5px}
.langbar-mt,.langbar-mt span{font-size:13px}

/* a comfortable measure: copy stops running the full 1120px on wide screens */
@media (min-width:760px){
  #main p,#main li,#main .lead,#main .answer,#main .quick>div{max-width:76ch}
  #main h1{max-width:24ch}
  #main h2{max-width:34ch}
  #main table,#main .tbl-wrap,#main .arts,#main .grid,#main .kpis,#main .mid-cta{max-width:none}
  #main td,#main th{max-width:none}
}
/* thumb-sized hit area for the small inline links inside tables and the contents list */
#main td a:not(.btn),#main .toc a:not(.btn),.crumbs a:not(.btn),.art .meta a:not(.btn){display:inline-flex;align-items:center;min-height:24px;padding-block:3px}

/* stage-2 (machine translation) status line, inside the language bar stage 1 owns */
.langbar-mt.busy{opacity:.75}
.langbar-mt{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--muted);min-width:0}
.langbar-mt .btn{min-height:34px;font-size:13px}
#td-langbar{align-items:center}

/* lists of cards: no dead band between a short title and its summary */
.card.img{grid-template-rows:auto auto 1fr}
.card.img .meta{margin-block-start:auto}
.art-in b,.art b{margin-block-end:2px}
.art .meta,.card.img .meta{margin-block-start:6px}
.tbl-hint{display:none;font-size:12.5px;color:var(--muted);margin:4px 2px 10px}
.tbl-wrap.is-scrollable+.tbl-hint{display:block}

/* tap response: no 300ms delay, no grey flash rectangle over the rounded buttons */
a,button,summary,input[type=submit],.btn,.chip,.art{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (hover:none){ .art:hover{transform:none} .btn:hover{filter:none} }

/* small caps labels and the "scrolls sideways" hint were the last text under 13.5px,
   and the hub/list links still had an 18-22px hit area */
.tag,.tbl-wrap caption{font-size:13px;letter-spacing:.04em}
.badge{font-size:13.5px}
.art .meta{font-size:13.5px}
.tbl-hint{font-size:13px}
/* scoped to :not(.btn) and away from .chips: a generic link rule that also matches
   .btn/.chip would override the 44px control sizes above it -- these only ever grow a
   hit area, never shrink one */
#main .sm-list a:not(.btn),.pill-row a:not(.btn){display:inline-flex;align-items:center;min-height:28px;padding-block:3px}
#main td a:not(.btn),#main .toc a:not(.btn){display:inline-flex;align-items:center;min-height:24px;padding-block:3px}
@media (max-width:640px){ .tag,.badge{font-size:13.5px} }

/* the sideways-table hint follows the page direction instead of showing both strings */
.hint-rtl{display:none}
html[dir=rtl] .hint-rtl{display:inline}
html[dir=rtl] .hint-ltr{display:none}

/* question search + master answer index (v-2026d) */
.qsearch{display:flex;gap:8px;margin:18px 0 6px;flex-wrap:wrap}
.qsearch input{flex:1 1 260px;min-height:50px;font-size:16px;padding:12px 15px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.qsearch input::placeholder{color:var(--muted);opacity:.9}
.qsearch input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
button.chip{cursor:pointer;font:inherit;color:inherit;line-height:1.25}
button.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
button.chip.on b{color:#fff}
#anscats{margin:6px 0 2px}
.qa{list-style:none;margin:0 0 14px;padding:0}
.qa li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 2px;border-bottom:1px dashed var(--line)}
.qa li a{font-size:15px;line-height:1.45;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.qa li a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.qa li i{font-style:normal;color:var(--muted);font-size:12.5px;white-space:nowrap}
.qa li.hand i{color:var(--wa)}
.qa li.hand a::before{content:'◦ ';color:var(--wa)}
[dir=rtl] .qa li.hand a::before{content:''}
[dir=rtl] .qa li.hand a::after{content:' ◦';color:var(--wa)}
@media (max-width:640px){.qa li{flex-direction:column;align-items:flex-start;gap:2px}.qa li i{font-size:12px}}

/* NOC / request-letter generator (v-2026e) */
.nocwrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.nocwrap{grid-template-columns:1fr}}
.nocform label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px}
.nocform input,.nocform select,.nocform textarea{width:100%;font-size:16px;min-height:46px;padding:10px 12px;
  border-radius:11px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-family:inherit}
.nocform textarea{min-height:96px;resize:vertical;line-height:1.5}
.nocform input:focus,.nocform select:focus,.nocform textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.segs{display:flex;gap:8px;margin-top:4px}
.segs button{flex:1;min-height:52px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);
  color:var(--ink);font-weight:700;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2;padding:8px}
.segs button small{font-weight:500;color:var(--muted)}
.segs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.segs button.on small{color:#e8f7ef}
.nocprev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.nocprev pre{white-space:pre-wrap;word-break:break-word;font:14px/1.65 ui-monospace,Menlo,Consolas,monospace;margin:0;color:var(--ink)}
.nocbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hint{font-size:13px;color:var(--muted);margin-top:10px}


/* wave-6 layout: wider canvas on big screens, denser tables on small ones */
@media (min-width:1360px){:root{--maxw:1260px}}
@media (max-width:620px){
  #main table{font-size:13.5px}
  #main td,#main th{padding:8px 7px}
  #main th{font-size:11.5px}
}

.art.notxt{padding:11px 13px}
.art.notxt b{margin:0}

/* ---------------------------------------------------------------------------
   v-ai-fix  2026-09-15 - AI assistant collapsed on phones (measured, then fixed)
   Cause, from real-browser geometry at 1440/1024/390/375/430:
     * .assist was a FIXED-height flex box (min(72vh,620px)) holding log + composer
       + the suggestion chips. .chip{min-height:44px} from the phone audit made the
       7 chips stack 7 rows = 368px on a 390px screen, and .log{flex:1} therefore
       measured 162px on iPhone 14 and 34.8px on iPhone SE - the conversation was
       invisible while the box showed dead space under the chips.
     * main has class="wrap", and .wrap{padding:0 16px} out-specifies main{padding:...},
       so every main{padding-bottom} rule (120px/88px/26px) was dead: computed
       padding-bottom was 0px, letting the fixed .cta-bar sit over the last row.
     * @media(max-width:620px){.btn{flex:1}} stretched the Ask button to ~240px -
       wider than the question field it belongs to.
   Fixes: suggestions live below the chat box (build.py) and become one swipeable
   row on phones; chat height is explicit and can never be squeezed; Ask stops
   stretching; main gets real cta-bar clearance.
--------------------------------------------------------------------------- */
.assist{height:auto;min-height:0}
.log{flex:none;height:clamp(300px,56vh,520px);min-height:240px;padding:14px 14px 10px;scroll-behavior:auto}
.msg{max-width:min(88%,560px)}
.composer{padding:10px 12px}
.composer input{flex:1 1 180px;min-width:0}
.composer .btn{flex:0 0 auto;min-width:104px}
.suggest{padding:10px 2px 2px;gap:7px;align-items:center}
main.wrap{padding-bottom:96px}
@media (max-width:900px){
  .log{height:clamp(240px,44vh,380px);min-height:200px}
  .suggest{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
           -webkit-overflow-scrolling:touch;gap:7px;padding:2px 0 10px}
  .suggest::-webkit-scrollbar{display:none}
  .suggest .chip{flex:0 0 auto;min-height:40px;font-size:13.5px;padding:8px 12px;white-space:nowrap}
}
@media (max-width:620px){
  .assist{border-radius:14px}
  .msg{font-size:14.5px;max-width:92%;padding:10px 12px}
  main.wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media print{.suggest{display:none}}

/* ============================================================================
   v-pro  2026-09-15 - catalogue-grade presentation pass (user: "website does
   not look professional", "get the idea from how du presents its catalog").
   Light surface by default (photography reads correctly on white, like the
   operator's own store), dark mode kept as an explicit preference; a real type
   and spacing scale; product cards, offer rows, spec tables and the intake form
   all get proper chrome instead of generic boxes.
============================================================================ */
:root{
  --bg:#f6f8fc; --card:#fff; --card2:#f1f5fb; --ink:#0a1424; --muted:#57677f;
  --line:#e2e9f4; --brand:#0a6b4f; --brand-ink:#fff; --offer:#d10024; --wa:#25d366;
  --wa-ink:#04231a; --warn:#a45b00; --r:18px;
  --sh:0 1px 2px rgba(10,20,36,.05),0 10px 26px rgba(10,20,36,.07);
  --sh-h:0 2px 4px rgba(10,20,36,.06),0 16px 38px rgba(10,20,36,.12);
  --sp:clamp(14px,2.1vw,26px);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1220; --card:#121c31; --card2:#0f1829; --ink:#eaf0fb; --muted:#9fb0cc;
         --line:#1f2c47; --brand:#7fe3b4; --brand-ink:#04241a; --offer:#ff6b7f; --warn:#ffcf6b;
         --sh:0 10px 30px rgba(0,0,0,.35); --sh-h:0 14px 40px rgba(0,0,0,.45); }
}
body{background:var(--bg);color:var(--ink);font:16.5px/1.62 var(--sans);-webkit-font-smoothing:antialiased}
h1{font-size:clamp(27px,4.3vw,42px);line-height:1.13;letter-spacing:-.9px;font-weight:800}
h2{font-size:clamp(20px,2.9vw,27px);line-height:1.22;letter-spacing:-.5px;font-weight:750;margin:1.5em 0 .55em}
h3{letter-spacing:-.3px;font-weight:700}
p,li{color:var(--ink)}
section{margin:clamp(24px,3.2vw,38px) 0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* nav: quiet bar, one accent, no floating burger */
header.nav{background:color-mix(in srgb,var(--card) 88%,transparent);border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(12px)}
.nav-in{height:64px}
nav.links a{font-size:14px;font-weight:600;color:var(--muted);border-radius:10px;padding:8px 11px}
nav.links a:hover{color:var(--ink);background:var(--card2)}
nav.links a[aria-current=page]{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.logo{font-size:17px;letter-spacing:-.4px}

/* hero: bordered product panel instead of a wash of colour */
.hero{border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:
  radial-gradient(120% 140% at 8% -30%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 62%),var(--card);
  padding:clamp(20px,3vw,34px) clamp(16px,2.6vw,30px);box-shadow:var(--sh)}
.hero .eyebrow,.hero .tag{color:var(--brand);font-weight:800;letter-spacing:.07em}
.hero .lead{font-size:clamp(15.5px,1.6vw,18px);color:var(--muted);max-width:78ch}
.hero .btns{margin-top:18px}

/* cards */
.card,.pcard,.cat,.route{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card{padding:clamp(14px,1.9vw,20px)}
.card:hover{box-shadow:var(--sh)}
.badge.hot{background:var(--offer);color:#fff;border-color:transparent}
.badge.ghost{background:transparent;color:var(--muted)}
.tag{color:var(--muted)}
.note{color:var(--muted)}

/* catalogue: category tiles + emirate switch */
.cats .grid{gap:12px}
.cat{display:block;text-decoration:none;color:inherit;padding:16px 16px 14px;position:relative;
  transition:transform .12s ease,box-shadow .12s ease}
.cat:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.cat .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--brand);
  color:var(--brand-ink);font-size:13px;font-weight:800;margin-bottom:9px}
.cat b{display:block;font-size:17px;letter-spacing:-.3px;margin-bottom:5px}
.cat p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.cat .go{display:inline-block;margin-top:10px;color:var(--brand);font-weight:700;font-size:14px}
.emu{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;
  border:1px solid var(--line);border-radius:14px;background:var(--card2)}
.emu .lbl{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.emu button{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:11px;
  padding:8px 13px;font:inherit;font-size:14px;font-weight:650;min-height:40px;cursor:pointer}
.emu button.on{background:var(--brand);border-color:transparent;color:var(--brand-ink)}
.emu .note{margin-left:auto;font-size:13px}

/* plan cards - the du-style product tile: price, offer line, inclusions, contract, CTA */
.plans{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));margin:6px 0 16px}
.pcard{display:flex;flex-direction:column;padding:0;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.pcard>header{padding:14px 16px 10px;border-bottom:1px solid var(--line);background:var(--card2)}
.pcard>header h3{margin:4px 0 0;font-size:19px;letter-spacing:-.4px}
.pcard .price{padding:14px 16px 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pcard .price b{font-size:clamp(26px,3vw,32px);letter-spacing:-1px;font-weight:800;font-variant-numeric:tabular-nums}
.pcard .price span{font-size:13.5px;color:var(--muted)}
.pcard ul{margin:0;padding:0;list-style:none}
.pcard .offers{padding:8px 16px 4px;display:grid;gap:6px}
.pcard .offers li{display:none;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card2)}
.pcard .offers li.on{display:block}
.pcard .offers em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--offer);margin-bottom:2px}
.pcard .offers span{font-size:14.5px;font-weight:650}
.pcard .inc{padding:10px 16px 6px;display:grid;gap:7px}
.pcard .inc li{position:relative;padding-left:21px;font-size:14px;line-height:1.45;color:var(--muted)}
.pcard .inc li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--brand);font-weight:800}
.pcard>footer{margin-top:auto;padding:12px 14px 14px;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap;background:var(--card)}
.pcard>footer .btn{margin-left:auto}
.pcard.pro{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.pcard.ultra,.pcard.top{border-color:color-mix(in srgb,var(--offer) 40%,var(--line))}
.pcard.ultra>header,.pcard.top>header{background:color-mix(in srgb,var(--offer) 8%,var(--card2))}
body[dir=rtl] .pcard .inc li{padding:0 21px 0 0}
body[dir=rtl] .pcard .inc li::before{left:auto;right:0}
body[dir=rtl] .pcard>footer .btn{margin:0 auto 0 0}

/* migration routes */
.routes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:12px 0}
.route{padding:16px;border-top:3px solid var(--brand)}
.route.alt{border-top-color:var(--offer)}
.route h3{margin:6px 0 6px;font-size:18px}
.route p{font-size:14.5px;color:var(--muted);margin:0 0 10px}
.route .kbd{display:inline-block;font-size:12.5px;font-weight:750;color:var(--ink);background:var(--card2);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px}

/* spec tables: right-aligned figures, quiet header, row hover */
.tbl-wrap{border-radius:var(--r);background:var(--card);padding:0;border:1px solid var(--line);box-shadow:var(--sh)}
table{font-size:14.5px;margin:0}
thead th{background:var(--card2);color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
tbody td{padding:11px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--card2) 42%,transparent)}
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.tbl-wrap td:nth-child(n+2),.tbl-wrap th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap td:first-child,.tbl-wrap th:first-child{text-align:left}
body[dir=rtl] .tbl-wrap td:nth-child(n+2),body[dir=rtl] .tbl-wrap th:nth-child(n+2){text-align:left}
body[dir=rtl] .tbl-wrap td:first-child,body[dir=rtl] .tbl-wrap th:first-child{text-align:start}

/* buttons */
.btn{border-radius:12px;padding:12px 17px;font-weight:700;letter-spacing:-.15px;border:1px solid var(--line);
  background:var(--card);box-shadow:0 1px 2px rgba(10,20,36,.04)}
.btn.pri{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.btn.wa{background:var(--wa);color:var(--wa-ink);border-color:transparent;box-shadow:0 6px 18px rgba(37,211,102,.2)}
.btn.ghost{background:transparent}
.btn:hover{filter:none;border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  box-shadow:0 4px 14px rgba(10,20,36,.1)}
.btn.is-off{opacity:.62}
.btn.sm{min-height:40px;padding:9px 13px;font-size:13.5px}
@media (max-width:620px){.btn.sm{min-height:44px}}

/* library cards: cover art is the product photo, not a grey box */
.arts{gap:12px}
.art{border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--sh);
  transition:transform .12s ease,box-shadow .12s ease}
.art:hover{transform:translateY(-2px);box-shadow:var(--sh-h)}
.art .pic{background:var(--card2)}
.art b{font-size:16.5px;letter-spacing:-.35px;line-height:1.32}
.art .meta{color:var(--muted);font-size:13px}
.art .tag{color:var(--brand)}

/* form + intake chrome */
input,select,textarea{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  font-size:15.5px;color:var(--ink);box-shadow:inset 0 1px 1px rgba(10,20,36,.03)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
input.bad,select.bad,textarea.bad{border-color:var(--offer);box-shadow:0 0 0 3px color-mix(in srgb,var(--offer) 14%,transparent)}
.fld{position:relative;display:block}
.fld>.clrfld{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:0;
  border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--muted);font-size:15px;
  line-height:1;cursor:pointer;display:none}
.fld:focus-within>.clrfld,.fld:hover>.clrfld{display:block}
body[dir=rtl] .fld>.clrfld{right:auto;left:7px}
.intake{border-top:2px solid var(--brand)}
.intake .grid{margin:12px 0 8px}
.intake .err{display:block;min-height:16px;color:var(--offer);font-size:12.5px;font-weight:650;margin-top:4px}
.intake .chk{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);margin:4px 0}
.intake .chk input{width:auto;min-height:0;padding:0}
.intake .btns{margin-top:10px}
.hint{font-size:13px;color:var(--muted);margin:6px 0 0}

/* per-page freshness line + compact pager */
.crumbs{display:flex;align-items:center;gap:10px}
.fresh{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
body[dir=rtl] .fresh{margin:0 auto 0 0}
.pager{gap:6px}
.pager a{min-width:42px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;background:var(--card);
  font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;
  justify-content:center}
.pager a[aria-current=page]{background:var(--brand);border-color:transparent;color:var(--brand-ink)}
.pager .pgap{padding:0 3px;color:var(--muted);align-self:center}
@media (max-width:620px){.pager a{min-width:44px;min-height:44px}}

/* assistant polish */
.assist{background:var(--card);border:1px solid var(--line)}
.msg{border-radius:14px}
.msg.a{background:var(--card2)}
.log{scrollbar-width:thin}
.suggest .chip{background:var(--card);border-color:var(--line)}
.suggest .chip:hover{border-color:var(--brand);color:var(--brand)}

/* v-pro: homepage demand block, revised-this-week rail, verify boxes */
.live .ask{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;padding:13px 14px}
.live .ask b{font-size:16px;letter-spacing:-.3px;line-height:1.35}
.live .ask .meta,.art .meta{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.live .ask:hover{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));box-shadow:var(--sh-h)}
.rail{margin:6px 0 20px}
.rail .grid{gap:12px}
.verify{border-left:3px solid var(--brand)}
.verify .steps{margin:8px 0 6px;padding-left:22px}
.verify .steps li{margin:6px 0;font-size:14.5px}
body[dir=rtl] .verify{border-left:1px solid var(--line);border-right:3px solid var(--brand)}
body[dir=rtl] .verify .steps{padding:0 22px 0 0}

/* v-pro: mined-citation box, PAA details, table and lead polish */
.srcs .links{margin:6px 0 4px;padding-left:20px}
.srcs .links li{margin:5px 0;font-size:14.5px;color:var(--ink)}
.faq-mini details{border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin:7px 0;background:var(--card2)}
.faq-mini summary{font-weight:700;font-size:14.5px;cursor:pointer;letter-spacing:-.2px}
.faq-mini details[open]{background:var(--card)}
.faq-mini details>div{margin-top:7px;font-size:14.5px;color:var(--muted);line-height:1.55}
.lead,.answer{font-size:16.5px}
.answer b{letter-spacing:-.3px}
section>.grid.g3{gap:12px}
@media (max-width:620px){.pcard .price b{font-size:27px}.plans{grid-template-columns:1fr}.emu .note{width:100%;margin:0}}

/* ================================================================= operator shelf (catalogue cards)
   The complaint was precise: operators present packages as priced product cards with the allowance
   and the activation instruction on the face of the card, and put everything else behind a details
   element. Tables stay - but underneath, as the reference layer, never as the first thing a visitor
   has to decode. */
.pcard{position:relative}
.pcard .flag{position:absolute;top:10px;inset-inline-end:10px;background:var(--brand);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.pcard.best .flag{background:#0f172a;color:#fff}
.pcard .spec div b,.pcard .price b{font-variant-numeric:tabular-nums}
.pcard>header{padding:13px 15px 9px}
.pcard .price{padding:13px 15px 2px}
.pcard .spec{padding:8px 15px 2px}
.pcard .offers{padding:6px 15px 2px}
.pcard .inc{padding:8px 15px 4px}
.pcard .spec{padding:10px 16px 2px;display:grid;gap:0}
.pcard .spec div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px dashed var(--line)}
.pcard .spec div:last-child{border-bottom:0}
.pcard .spec i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.pcard .spec b{font-size:14.5px;font-weight:680;text-align:end;letter-spacing:-.2px}
.pcard .unit{padding:0 16px 8px;font-size:12.5px;color:var(--muted)}
.pcard .unit b{color:var(--ink);font-variant-numeric:tabular-nums}
.pcard>footer .btn.sm{padding:9px 13px;font-size:13.5px}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 4px}
.shelf>*{min-width:0}
@media (min-width:1560px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.shelf{grid-template-columns:minmax(0,1fr)}}
.shelf-lead{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}
.shelf-lead h2{margin:0 0 2px}
.shelf-lead p{margin:0;font-size:13.5px;color:var(--muted);max-width:60ch}
.shelf-note{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.shelf-note span{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--card2)}
details.fineprint{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:12px 0}
details.fineprint>summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:14.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px}
details.fineprint>summary::-webkit-details-marker{display:none}
details.fineprint>summary::after{content:"+";font-weight:800;color:var(--muted);font-size:17px;line-height:1}
details.fineprint[open]>summary::after{content:"\2212"}
details.fineprint>.pad{padding:0 14px 12px}
details.fineprint>.pad>p:first-child{margin-top:0}
.leadbar{position:sticky;bottom:10px;z-index:22;display:flex;gap:12px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding:11px 14px;margin:18px 0 0;
  background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh-h);backdrop-filter:blur(8px)}
.leadbar p{margin:0;font-size:14px;color:var(--muted);max-width:52ch}
.leadbar p b{color:var(--ink)}
@media (max-width:640px){
  .shelf{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
  .pcard .spec div{padding:7px 0}
  .pcard .spec b{font-size:13.5px}
  .leadbar{bottom:6px;border-radius:13px;padding:10px}
  .leadbar .btn{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}.pcard:hover{transform:none}}

/* reference tables under a shelf: they are the check-my-figures layer, so they stay quiet and never
   break a price or a short code across two lines */
.tbl-ref th:nth-child(3),.tbl-ref td:nth-child(3),.tbl-ref th:last-child,.tbl-ref td:last-child{white-space:nowrap}
.tbl-ref td:first-child,.tbl-ref th:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl-ref{font-size:14px;table-layout:fixed}
.tbl-ref th:nth-child(1),.tbl-ref td:nth-child(1){width:17%}
.tbl-ref th:nth-child(2),.tbl-ref td:nth-child(2){width:45%}
.tbl-ref th:nth-child(3),.tbl-ref td:nth-child(3){width:16%}
.tbl-ref th:nth-child(4),.tbl-ref td:nth-child(4){width:22%}
.tbl-ref td,.tbl-ref th{text-align:start}
.tbl-ref td:last-child,.tbl-ref th:last-child{text-align:end}
.tbl-ref td{padding:9px 10px}
.tbl-ref td{padding:9px 8px}

/* pilot w10b: fixed CTA bar must never cover content; quote cells stay on one line */
.nb{white-space:nowrap}
body:has(.cta-bar){padding-bottom:88px}
@media (max-width:620px){body:has(.cta-bar){padding-bottom:104px}}

/* w11: table column discipline - action columns hug their button, figures never wrap */
.tbl-wrap th:last-child:has(.btn),.tbl-wrap td:last-child:has(.btn){width:1%;white-space:nowrap;text-align:right}
.tbl-wrap td:first-child{min-width:170px}
#main .tbl-wrap{max-width:1020px;margin-left:auto;margin-right:auto}
td.price,th.price{white-space:nowrap}
table{font-variant-numeric:tabular-nums}
.plantabs{margin:8px 0 2px}
.plantab-panel[hidden]{display:none}
.flist{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px;padding:0;list-style:none}
.flist li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 11px;max-width:100%}
.flist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flist button{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);padding:0 2px}
.flist button:hover{color:var(--ink)}
.fhint{font-weight:400;color:var(--muted);font-size:13px}