/* Arabic dialects guide (21 Oct 2026): the two levels of Arabic, the map of the six groups, same sound in two forms and
   the purpose chooser. Shared parts are in guidex.css.
   Group colours are data colours, one per dialect group, checked with the office data-viz palette check on the paper
   surface (lightness band, chroma, contrast 3:1 and above, colour-blind and normal-vision separation; worst all-pairs
   colour-blind pair Sudanese/Levantine 6.8, which never touch on the map and always carry their number). */
.gx-dl{--g-eg:#9c4b20;--g-gu:#ab841c;--g-le:#1f9d87;--g-iq:#a073d9;--g-ma:#1b6496;--g-su:#d86871;--gx-sea:#eef0ec;--gx-land:#dcdad2}
.gx-dl [data-g="eg"]{--g:var(--g-eg);--g-soft:rgba(156,75,32,.2)}
.gx-dl [data-g="gu"]{--g:var(--g-gu);--g-soft:rgba(171,132,28,.24)}
.gx-dl [data-g="le"]{--g:var(--g-le);--g-soft:rgba(31,157,135,.2)}
.gx-dl [data-g="iq"]{--g:var(--g-iq);--g-soft:rgba(160,115,217,.24)}
.gx-dl [data-g="ma"]{--g:var(--g-ma);--g-soft:rgba(27,100,150,.2)}
.gx-dl [data-g="su"]{--g:var(--g-su);--g-soft:rgba(216,104,113,.24)}
.gx-dsw{display:inline-block;flex:0 0 auto;width:14px;height:14px;border-radius:4px;background:var(--g)}

/* English text keeps Inter; the post's Arabic letters (ق, ج) fall through to Cairo */
.gx-dl .gx-article{font-family:Inter,Cairo,"Noto Sans",Arial,sans-serif}
.gx-dl .gx-article i{font-style:italic}

/* hero: the navy map sits whole inside the frame, whatever its shape */
.gx-dl .gx-hero-figure{background:#101d30}
.gx-dl .gx-hero-figure img{object-fit:contain}

/* 01 the two levels */
.gx-tiers{margin:34px 0 0}
.gx-tier{position:relative;border-radius:20px;padding:26px 28px}
.gx-tier.is-msa{background:var(--navy);overflow:hidden}
.gx-tier.is-msa::before{content:"";position:absolute;inset:0;background:url(/images/home-v2/watermark.svg) right center/auto 100% no-repeat;opacity:.1;pointer-events:none}
.gx-tier>*{position:relative}
.gx-tier-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin-bottom:12px}
.gx .gx-tier-kicker{display:flex;align-items:center;gap:10px;margin:0;font:600 12.5px/1.3 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--warm)}
.gx-tier-kicker b{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font:600 12px/1 Inter,sans-serif;letter-spacing:0}
.gx .gx-tier-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;width:100%;margin:2px 0 0;font:600 25px/1.25 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:#fff}
.gx .gx-tier-name .gx-ar{font-size:24px;line-height:1.4;color:var(--warm)}
.gx .gx-tier.is-msa>p{color:var(--on-dark)}
.gx .gx-tier.is-msa strong{color:#fff}
.gx-tier-uses{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.gx .gx-tier-uses li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);font-size:14.5px;line-height:1.3;color:#fff}
.gx-tier-uses .gx-i{width:16px;height:16px;color:var(--warm)}
.gx-tier-fan{height:58px}
.gx-tier-fan svg{display:block;width:100%;height:100%;overflow:visible}
.gx-tier-fan path{fill:none;stroke:var(--brass);stroke-width:1.4;stroke-dasharray:100;stroke-dashoffset:0}
.gx-tiers.gx-pre .gx-tier-fan path{stroke-dashoffset:100}
.gx-tiers.gx-in .gx-tier-fan path{transition:stroke-dashoffset .9s cubic-bezier(.3,.7,.3,1);transition-delay:calc(.25s + var(--gx-d) * .07s)}
.gx-tier.is-spoken{padding-top:0;border:1px solid var(--line-strong);background:var(--paper);overflow:hidden}
.gx-tier-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 -28px 22px;padding:0;list-style:none}
.gx .gx-tier-bar li{position:relative;padding:14px 4px 12px;border-top:7px solid var(--g);background:#fff;text-align:center;font:600 13.5px/1.25 Inter,sans-serif;color:var(--ink)}
.gx-tier-bar li+li{box-shadow:inset 1px 0 0 var(--line)}
[dir="rtl"] .gx-tier-bar li+li{box-shadow:inset -1px 0 0 var(--line)}
.gx .gx-tier.is-spoken .gx-tier-kicker{color:var(--orange)}
.gx .gx-tier.is-spoken .gx-tier-name{color:var(--navy)}
.gx .gx-tier.is-spoken .gx-tier-name .gx-ar{color:var(--orange)}
.gx-tiers figcaption{margin-top:12px;text-align:center}
@media(max-width:600px){
  .gx-tier{padding:22px 18px}
  .gx-tier-fan{height:24px}
  .gx-tier-fan svg{display:none}
  .gx-tier-fan::before{content:"";display:block;width:2px;height:100%;margin:0 auto;background:var(--brass)}
  .gx-tier-bar{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -18px 20px}
  .gx-tier-bar li:nth-child(4){box-shadow:none}
  .gx .gx-tier-name{font-size:22px}
}

/* navy closing note with the two ways to reach us */
.gx-final{position:relative;display:flex;gap:16px;align-items:flex-start;margin:40px 0 0;padding:26px 28px;border-radius:20px;background:var(--navy);overflow:hidden}
.gx-final::before{content:"";position:absolute;inset:0;background:url(/images/home-v2/watermark.svg) right center/auto 100% no-repeat;opacity:.1;pointer-events:none}
.gx-final>*{position:relative}
.gx-final>.gx-i{width:26px;height:26px;margin-top:3px;color:var(--warm)}
.gx .gx-final-title{margin:0 0 6px;font:600 20px/1.3 Poppins,"Poppins Fallback",sans-serif;color:#fff}
.gx .gx-final p:not(.gx-final-title){font-size:17px;line-height:1.7;color:var(--on-dark)}
.gx .gx-final p a:not(.sv2-btn),.gx .gx-callout.is-navy p a{color:var(--warm)}
.gx .gx-final-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.gx-final-actions .sv2-btn{min-height:50px}
@media(max-width:600px){.gx-final{flex-direction:column;padding:22px 18px}.gx-final-actions .sv2-btn{flex:1 1 100%}}

/* 02 the map of the six groups */
.gx-map-stage{position:relative;aspect-ratio:1000/445;border-radius:16px;background:var(--gx-sea);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.gx-map{display:block;width:100%;height:100%}
.gx-map-grat{fill:none;stroke:var(--brass);stroke-opacity:.35;stroke-width:.7;vector-effect:non-scaling-stroke}
.gx-map-land path{fill:var(--gx-land);stroke:#fff;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gx-map-g path{fill:var(--g);stroke:#fff;stroke-width:.9;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gx-map-g{transition:opacity .35s ease}
.gx-map-bh{fill:none;stroke:var(--navy);stroke-width:1.2;vector-effect:non-scaling-stroke}
.gx-dmap.is-live .gx-map-g{cursor:pointer}
.gx-dmap.is-live .gx-map-g:not(.is-on){opacity:.32}
@media(hover:hover){.gx-dmap.is-live .gx-map-g:not(.is-on):hover{opacity:.62}}
.gx-map-pins{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.gx-map-pins li{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-14px,-50%);white-space:nowrap}
.gx-map-pins li.is-l{flex-direction:row-reverse;transform:translate(calc(-100% + 14px),-50%)}
.gx-dmap.is-live .gx-map-pins li{pointer-events:auto;cursor:pointer}
.gx-map-pins b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font:600 13px/1 Inter,sans-serif;box-shadow:0 0 0 2.5px #fff,0 4px 10px rgba(16,29,48,.25);transition:background .25s,transform .25s}
.gx .gx-map-pins span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(16,29,48,.16);font:600 13px/1.2 Inter,sans-serif;color:var(--ink)}
.gx-map-pins li.is-on b{background:var(--orange);transform:scale(1.12)}
.gx .gx-map-src{margin:10px 2px 0;font-size:13px;line-height:1.45;color:var(--gx-soft)}
@media(max-width:700px){
  .gx-map-stage{border-radius:12px}
  .gx .gx-map-pins span{display:none}
  .gx-map-pins li,.gx-map-pins li.is-l{transform:translate(-50%,-50%)}
  .gx-map-pins b{width:22px;height:22px;font-size:11px;box-shadow:0 0 0 2px #fff,0 3px 8px rgba(16,29,48,.25)}
}

/* legend: links to the cards without script, the six tabs with it */
.gx-dlegend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.gx-dlegend a{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 14px;border:1.5px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.gx-dlegend a b{display:grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--paper);color:var(--navy);font:600 12.5px/1 Inter,sans-serif}
.gx .gx-dlegend-name{font:600 15.5px/1.25 Inter,sans-serif}
.gx-dlegend a:hover{border-color:var(--navy)}
.gx-dlegend a[aria-selected="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.gx-dlegend a[aria-selected="true"] b{background:var(--orange);color:#fff}
.gx-dlegend a[aria-selected="true"] .gx-dsw{box-shadow:0 0 0 2px #fff}
@media(max-width:600px){.gx-dlegend{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gx-dlegend a{gap:10px;min-height:50px;padding:6px 10px}.gx .gx-dlegend-name{font-size:14.5px}}

/* the six cards: the post's own sections */
.gx-dcards{margin-top:18px}
.gx-dcard{position:relative;padding:26px 26px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;scroll-margin-top:calc(var(--gx-top) + 8px);outline-offset:4px}
.gx-dcard::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:6px;border-radius:18px 18px 0 0;background:var(--g)}
.gx-dcard+.gx-dcard{margin-top:16px}
.gx-dmap.is-live .gx-dcard:not([hidden]){animation:gx-fade .32s ease both}
.gx-dcard-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-bottom:14px}
.gx .gx-dcard h3{display:flex;align-items:center;gap:12px;margin:0;font-size:22px;line-height:1.3}
.gx .gx-dcard h3 .gx-dnum{color:#fff}
.gx-dnum{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font:600 14px/1 Inter,sans-serif;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--g)}
.gx-dwhere{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gx .gx-dwhere p{display:inline-flex;align-items:center;gap:6px;margin:0;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-dwhere p .gx-i{width:16px;height:16px;color:var(--orange)}
.gx-dwhere ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.gx .gx-dwhere li{padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:13.5px;line-height:1.3;color:var(--ink)}
.gx-dcard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.gx-dbox{padding:18px 18px 16px;border-radius:14px;background:var(--paper)}
.gx-dbox>.gx-i{display:block;width:22px;height:22px;margin-bottom:8px;color:var(--orange)}
.gx .gx-dbox p{font-size:16px;line-height:1.65}
.gx-dcard-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.gx .gx-dmore{margin:0;font-size:16px;line-height:1.55}
.gx-dnext{display:none}
.gx-dmap.is-live .gx-dnext{display:inline-flex}
.gx-dnext span{font-weight:500;color:var(--gx-soft)}
@media(max-width:700px){.gx-dcard{padding:24px 18px 18px}.gx-dcard-grid{grid-template-columns:minmax(0,1fr)}.gx .gx-dcard h3{font-size:20px}.gx-dnext{width:100%}}

/* 03 same sound, two forms */
.gx-snd-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.gx-snd{display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"key about about" "key show seg";align-items:center;gap:6px 20px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff}
.gx-snd-key{grid-area:key;align-self:stretch;display:grid;place-content:center;justify-items:center;gap:2px;min-height:76px;border-radius:14px;background:var(--navy);box-shadow:inset 0 -5px 0 var(--g)}
.gx .gx-snd-letter{font-size:32px;line-height:1.25;color:#fff}
.gx-snd-sound{font:600 13px/1.2 Inter,sans-serif;color:var(--warm);text-align:center}
.gx-snd-key.is-latin .gx-snd-sound{font-size:22px;color:#fff}
.gx-snd-key.is-long .gx-snd-sound{max-width:64px;font-size:12px;line-height:1.25;color:#fff}
.gx-snd-about{grid-area:about}
.gx .gx-snd-group{display:flex;align-items:center;gap:8px;margin:0;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx .gx-snd-rule{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}
.gx-snd-show{grid-area:show;min-width:0}
.gx .gx-snd-gloss{margin:0;font-size:14px;line-height:1.4;color:var(--gx-soft)}
.gx-snd-stage{display:grid;gap:2px;margin-top:2px}
.gx .gx-snd-form{display:flex;align-items:baseline;gap:10px;margin:0;line-height:1.3}
.gx-snd-label{flex:0 0 auto;font:600 11.5px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gx-soft)}
.gx-snd-word{font:600 27px/1.25 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.01em;color:var(--navy);unicode-bidi:isolate}
.gx-snd-word mark{padding:0 2px;border-radius:4px;background:var(--g-soft);box-shadow:inset 0 -3px 0 var(--g);color:inherit}
.gx-seg{grid-area:seg;display:none}
.gx-snds.is-live .gx-seg{display:inline-grid;grid-auto-flow:column;gap:2px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.gx-seg button{min-height:42px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--gx-read);font:600 14.5px/1.2 Inter,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.gx-seg button:hover{color:var(--navy)}
.gx-seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.gx-snds.is-live .gx-snd-form{grid-area:1/1;transition:opacity .28s ease,transform .32s cubic-bezier(.3,.7,.3,1),visibility 0s}
.gx-snds.is-live .gx-snd[data-v="a"] .gx-snd-form[data-v="b"],.gx-snds.is-live .gx-snd[data-v="b"] .gx-snd-form[data-v="a"]{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.gx-snds.is-live .gx-snd[data-v="b"] .gx-snd-form[data-v="b"] mark{animation:gx-mark .55s cubic-bezier(.3,.7,.3,1.3) both}
@keyframes gx-mark{from{background:transparent;box-shadow:inset 0 0 0 var(--g)}}
.gx-snd-all{display:none}
.gx-snds.is-live .gx-snd-all{display:inline-flex}
.gx-snds .gx-tool-foot .gx-note{margin:0}
@media(max-width:700px){
  .gx-snd{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"key about" "show show" "seg seg";gap:12px 14px;padding:14px}
  .gx-snd-key{min-height:60px}
  .gx .gx-snd-letter{font-size:28px}
  .gx-snd-key.is-latin:not(.is-long) .gx-snd-sound{font-size:19px}
  .gx-snd-key.is-long .gx-snd-sound{max-width:54px;font-size:11.5px}
  .gx-snd-show{padding:10px 12px;border-radius:12px;background:var(--paper)}
  .gx-snds.is-live .gx-seg{grid-auto-columns:minmax(0,1fr)}
}

/* 04 the purpose chooser */
.gx-js .gx-ch-opts{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px!important;margin-bottom:22px!important}
.gx-ch-opts [role="tab"]{flex-direction:column;justify-content:center;gap:10px!important;min-height:100px;padding:12px 10px!important;border-radius:14px!important;text-align:center;white-space:normal;line-height:1.25!important}
.gx-ch-opts [role="tab"] .gx-i{width:24px!important;height:24px!important;color:var(--orange)}
.gx-ch-opts [role="tab"][aria-selected="true"] .gx-i{color:var(--warm)}
.gx-ch-answer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:18px 22px;border-radius:16px;background:var(--navy)}
.gx .gx-ch-kicker{width:100%;margin:0;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--warm)}
.gx .gx-ch-big{margin:-6px 0 0;font:600 24px/1.3 Poppins,"Poppins Fallback",sans-serif;letter-spacing:-.02em;color:#fff}
.gx-ch-lv{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.gx .gx-ch-lv li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font:600 13.5px/1.2 Inter,sans-serif}
.gx-ch-lv .gx-i{width:16px;height:16px}
.gx .gx-ch-lv li.is-on{background:#fff;color:var(--navy)}
.gx-ch-lv li.is-on .gx-i{color:var(--gx-ok)}
.gx .gx-ch-lv li.is-off{border:1px dashed rgba(255,255,255,.3);color:var(--on-dark-soft);opacity:.75}
.gx-ch-lv li.is-off .gx-i{width:14px;height:14px}
.gx .gx-ch-text{margin-top:18px}
.gx-ch-rows{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.gx .gx-ch-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr);align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:16px;line-height:1.45}
.gx-ch-rows li>.gx-i{width:18px;height:18px;color:var(--brass)}
.gx-ch-who{color:var(--gx-soft)}
.gx-ch-what{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--ink)}
.gx a.gx-ch-what{color:var(--orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gx a.gx-ch-what:hover{color:var(--orange-hover)}
.gx-ch-pin{width:16px!important;height:16px!important}
.gx .gx-ch-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media(max-width:700px){
  .gx-js .gx-ch-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gx-ch-opts [role="tab"]{flex-direction:row;justify-content:flex-start;min-height:60px;text-align:start}
  .gx-ch-opts [role="tab"]:last-child{grid-column:1/-1}
  .gx-ch-answer{padding:16px 18px}
  .gx .gx-ch-big{font-size:21px}
  .gx .gx-ch-rows li{grid-template-columns:minmax(0,1fr);gap:4px}
  .gx-ch-rows li>.gx-i{transform:rotate(90deg)}
  .gx-ch-actions .gx-btn{flex:1 1 100%}
}

/* Arabic: Cairo's own sizes, no capitals or tracking on labels */
[dir="rtl"] .gx :is(.gx-tier-kicker,.gx-dwhere p,.gx-snd-group,.gx-snd-label,.gx-ch-kicker){letter-spacing:0;text-transform:none}
[dir="rtl"] .gx .gx-tier-name{font-family:Cairo,Tahoma,sans-serif;line-height:1.5}
[dir="rtl"] .gx .gx-ch-big,[dir="rtl"] .gx .gx-final-title{line-height:1.5}
[dir="rtl"] .gx-seg button,[dir="rtl"] .gx-ch-opts [role="tab"],[dir="rtl"] .gx-dlegend a{font-family:Cairo,Tahoma,sans-serif}
[dir="rtl"] .gx-snd-label{font-size:13px}
[dir="rtl"] .gx-ch-rows li>.gx-i{transform:scaleX(-1)}
@media(max-width:700px){[dir="rtl"] .gx-ch-rows li>.gx-i{transform:rotate(90deg)}}

@media print{.gx-seg,.gx-snd-all,.gx-dnext{display:none!important}.gx-dcard[hidden]{display:block!important}}