/* -- Floating Action Button v2 (glow-pulse, 72/64px, badge) -- */
    /* Badge placeholder (hidden by default, for future AI-chat count) */
/* About page responsive — mobile only, desktop not touched */
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*# sourceURL=global-styles-inline-css */
    
/*# sourceURL=uaeprop-interactions-inline-css */
/* Contact page: ITI phone flag selector dark-mode override */
    /* input.is-invalid highlight */

    /* Contact page responsive — mobile only */
@font-face{ font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); }
@font-face{ font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }
/* ── Fonts ── */
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }
/* ── Reset / globals ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 18.07: the universal reset above zeroes `margin` on every element, including
   native <dialog>, which relies on the UA stylesheet's `dialog:modal { margin:
   auto }` to self-center — author CSS always wins over UA defaults regardless
   of specificity, so this reset silently pinned #uaeprop-lead-dialog to
   top:0/left:0 on every insight article page (this stylesheet is scoped to
   /insights/[slug]/ only, so nowhere else on the site was affected). */
#uaeprop-lead-dialog { margin: auto; }
.up-ins-page { background: var(--wp--preset--color--bg-light); min-height: 100vh; }
a { text-decoration: none; color: inherit; }

/* ── Breadcrumb ── */
.up-ins-crumb {
  background: var(--wp--preset--color--bg-light);
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 max(80px, calc((100% - 1280px) / 2));
}
.up-ins-crumb ol {
  list-style: none;
  display: flex;
  align-items: center;
}
.up-ins-crumb a {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: rgba(14,14,16,0.55);
}
.up-ins-crumb .sep {
  margin: 0 6px;
  color: rgba(14,14,16,0.35);
  font-size: 13px;
}
.up-ins-crumb .current {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: var(--wp--preset--color--ink);
}

/* ── Page header ── */
.up-ins-header {
  background: var(--wp--preset--color--bg-light);
  /* 07.09 Mikhail: subtitle→featured-image gap read as too big. Root cause —
     min-height:202px was a hard floor ~58px taller than the real h1+subtitle
     content (40 pad + 64 h1 + 16 margin + 24 subtitle ≈ 144px) with zero
     bottom padding, so the header box itself carried dead empty space before
     .up-ins-featured-section's own 40px top padding even started (98px total
     gap). Content-fit min-height + a real 24px bottom padding replaces the
     arbitrary floor — same visual floor for short/translated content, no
     forced excess for the current EN/RU/AR copy. */
  min-height: 168px;
  padding: 40px max(80px, calc((100% - 1280px) / 2)) 24px;
}
.up-ins-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: rgba(14,14,16,0.6);
  margin-bottom: 16px;
}
.up-ins-h1 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 56px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.0;
  max-width: 900px;
  margin-bottom: 16px;
}
/* 2026-08-17: was `.up-ins-subhead` — never matched the real markup class
   (`up-ins-subtitle`, used by EN/RU/AR index+pagination pages), so this rule
   was dead and the subtitle rendered fully unstyled on every locale. Renamed
   to actually apply, found while doing the mobile design pass below. */
.up-ins-subtitle {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px;
  color: rgba(14,14,16,0.7);
  max-width: 985px;
  line-height: 1.35;
}

/* ── Featured article hero ── */
.up-ins-featured-section {
  background: var(--wp--preset--color--bg-light);
  padding: 40px max(80px, calc((100% - 1280px) / 2));
  min-height: 492px;
}
.up-ins-featured-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: rgba(14,14,16,0.6);
  margin-bottom: 24px;
}
.up-ins-featured-card {
  display: flex;
  align-items: flex-start;
  gap: 60px;   /* 440-380=60 approx gap from spec */
  width: 1280px;
  max-width: 100%;
  min-height: 380px;
}
.up-ins-featured-img {
  flex-shrink: 0;
  width: 380px;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--wp--preset--color--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-ins-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.up-ins-featured-img-placeholder {
  color: rgba(255,255,255,0.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.up-ins-featured-content {
  flex: 1;
  max-width: none;
  padding-top: 32px;
}
.up-ins-feat-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: rgba(14,14,16,0.5);
  margin-bottom: 16px;
}
.up-ins-feat-title {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 36px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: normal;
  margin-bottom: 24px;
}
.up-ins-feat-excerpt {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  color: rgba(14,14,16,0.7);
  line-height: 1.5;
  max-width: none;
  margin-bottom: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.up-ins-feat-cta {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  text-decoration: underline;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.up-ins-feat-cta:hover { opacity: 0.8; }

/* ── Category filter tabs ──
   25.08: matched to /communities/'s .up-comm-filters/.up-comm-pill design
   language — beige bar (was white #FFFFFF), white
   pill cards (was transparent-on-white), active/hover = accent bg + CREAM
   text (was accent bg + dark ink text). Sizing/shape aligned too: 140px
   min-width (was 120px), 18px horizontal pad (was 20px), 999px pill radius
   (was 20px, a rounded-rect not a true pill). Breakpoint STRUCTURE below
   (1439/768/480px tiers) intentionally left as-is, not copied from
   communities' own breakpoint numbers — only the colors/sizes changed. */
.up-ins-cats {
  background: var(--wp--preset--color--bg-light);
  padding: 20px max(80px, calc((100% - 1280px) / 2));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 12px;
  /* 07.09 Mikhail: on the wide desktop tier the 10 category pills (140px
     min-width × 10 + 12px gaps × 9 ≈ 1508px) never actually fit inside the
     1280px content rail — the previous overflow-x:auto scroll escape hatch
     (26.08) was real and correct for the narrower tablet tiers below (which
     redeclare it), but combined with `scrollbar-width:none` here it meant the
     wide tier's trailing pills silently required an invisible, undiscoverable
     horizontal scroll and visually read as "spilling past the rail edge" —
     exactly the bug reported. flex-wrap lets the row become 2 lines instead,
     which keeps every pill inside the rail with no hidden/scrollable content
     at any width, and is also more robust against longer future RU/AR labels
     than a fixed-height single row ever was. */
}
.up-ins-cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  /* 26.08 fix (Task 2): explicit min-width is a hard floor for flex-shrink, not a
     min-content guarantee — if a label's natural width ever exceeds that floor,
     flex-shrink's browser default (1) still compresses the pill and nowrap text spills
     past its own rounded background. flex-shrink:0 removes shrinking at every tier, so
     .up-ins-cats's overflow-x:auto (above) handles any excess width instead. */
  flex-shrink: 0;
}
.up-ins-cat-pill:hover,
.up-ins-cat-pill.active {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--cream);
}

/* ── Article grid ── */
.up-ins-grid-section {
  background: var(--wp--preset--color--bg-light);
  padding: 40px max(80px, calc((100% - 1280px) / 2));
}
.up-ins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1280px;
  box-sizing: content-box;
  margin: 0 auto;
}

/* ── Article card (fluid) ── */
.up-ins-card {
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.15s;
  border-radius: 12px;
  overflow: hidden;
}
.up-ins-card:hover { opacity: 0.88; }
.up-ins-card:hover .up-ins-card-img img {
  transform: scale(1.02);
}

/* Card image slot: fluid */
.up-ins-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--bg-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-ins-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.up-ins-card-img-ph {
  color: rgba(255,255,255,0.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Card meta kicker */
.up-ins-card-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(14,14,16,0.5);
  margin-bottom: 10px;
  line-height: 1.6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Card title — fluid height, adequate line-height prevents overlap with excerpt */
.up-ins-card-title {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 20px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  line-height: 1.25;
  /* removed fixed height:50px — was clipping multi-line titles into excerpt */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 16px; /* increased from 12px for breathing room under title */
}

/* Card excerpt */
.up-ins-card-excerpt {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.45;
  /* removed fixed height:40px — allowed title overflow to push into excerpt */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Empty state ── */
.up-ins-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: rgba(14,14,16,0.4);
}

/* ── Pagination ── */
.up-ins-pagination {
  background: var(--wp--preset--color--bg-light);
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 max(80px, calc((100% - 1280px) / 2));
}
.up-ins-page-nav {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: rgba(14,14,16,0.55);
  display: inline-block;
  padding: 4px 8px;
}
.up-ins-page-nav:hover { color: var(--wp--preset--color--ink); }
.up-ins-page-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  color: rgba(14,14,16,0.7);
  white-space: nowrap;
}

/* ── Newsletter CTA — pre-footer copper canon
   (wiki/decisions/2026-07-27_uaeprop_pre_footer_block_copper_canon.md —
   was dark navy bg/cream heading, corrected to copper bg + ink heading +
   inverted navy/white CTA button, matching .up-final-cta on the homepage) ── */
.up-ins-newsletter {
  background: var(--wp--preset--color--accent);
  min-height: 0;
  border-top: none;
  /* rail-fix: padding moved to .t2-section-inner so audit picks 1280px container */
}
/* rail-fix: inner wrapper at 1280px rail so unify_audit passes */
.up-ins-newsletter .t2-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 80px;
  box-sizing: border-box;
}
.up-ins-nl-h2 {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: 32px;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  width: 597px;
  line-height: 1.1;
  margin-bottom: 40px;
}
.up-ins-nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 48px;
  background: var(--wp--preset--color--bg-dark);
  border-radius: 999px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  color: var(--wp--preset--color--white);
  font-weight: 500;
  transition: opacity 0.15s;
}
.up-ins-nl-btn:hover { opacity: 0.88; }
/* one-line newsletter: text + button inline (desktop/tablet-landscape only).
   769px (not 768) so this doesn't collide with the ≤768 mobile/tablet-portrait
   stack rules below — at exactly 768 both queries used to match and the later
   source-order rule silently won, forcing a full-width h2 inside what should've
   been a one-line flex row. 2026-08-17 mobile design pass.
   W4_documented: audit_mobile_spacing.mjs flags this min-width query as
   NON_MAXWIDTH_QUERY — false positive for mobile-canon purposes. The
   specific flagged row, `.up-ins-nl-h2` below, declares no PADDING at all
   (only width/margin:0/white-space — margin, not padding; its 2 sibling
   rules in this block, `.t2-section-inner` and `.up-ins-nl-btn`, have their
   own unrelated flex/gap/flex-shrink properties, not padding either) and
   the script's side-padding comparison never even runs for a min-width
   query anyway (evaluateDeviation() short-circuits to NON_MAXWIDTH_QUERY
   before reaching the pad check). It's the deliberate
   complement to the ≤768 stack rule below, not a rail boundary. Live-
   verified 19.08: 768px -> stacked block layout (no overlap), 800px ->
   inline flex row (h2+button, no overlap) — boundary works cleanly both sides. */
@media (min-width: 769px) {
  .up-ins-newsletter .t2-section-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .up-ins-nl-h2 { width: auto; margin: 0; white-space: nowrap; }
  .up-ins-nl-btn { flex-shrink: 0; }
}

/* ── Responsive ── */
/* .up-ins-grid is already fluid (minmax/1fr) at all desktop widths */
@media (max-width: 1340px) {
  .up-ins-featured-card { width: 100%; }
}
@media (max-width: 1024px) {
  .up-ins-featured-card { flex-direction: column; gap: 24px; }
  .up-ins-featured-img { width: 100%; height: 300px; }
}
/* 961-1439px tablet tier (25.08 sweep — Class B, missing-tablet-tier bug pattern per
   wiki/synthesis/2026-08-25_uaeprop_tablet_padding_bug_patterns.md): live-verified at
   1024px .up-ins-header was still 80px — the 1340/1024px tiers above only adjust the
   featured-card layout, not the section rail's own padding, and this file's next rail
   tier was <=768px with nothing above it. 48px matches the sitewide tablet-padding canon. */
@media (min-width:961px) and (max-width:1439px) {
  .up-ins-header, .up-ins-featured-section,
  .up-ins-grid-section { padding-left: 48px; padding-right: 48px; }
  .up-ins-crumb { padding-left: 48px; padding-right: 48px; }
  /* overflow-x:auto here too (25.08, code review): 6 pills at their
     140px min-width + 12px gaps need ~900px of row width. At the low end of
     THIS tier (961px, 48px rails), content box is only ~865px — the same
     off-screen/unreachable-pill bug the 769-960px block below already fixes
     recurs here from ~961-995px without the same scroll escape hatch. */
  .up-ins-cats {
    padding-left: 48px; padding-right: 48px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .up-ins-cats::-webkit-scrollbar { display: none; }
  /* Added after independent code review caught these 2 missing from the first pass —
     same fluid-formula rail, same gap, just lower on the page than the sections above. */
  .up-ins-pagination { padding-left: 48px; padding-right: 48px; }
  .up-ins-newsletter .t2-section-inner { padding-left: 48px; padding-right: 48px; }
}
/* 769-960px gap tier (25.08, live-measured at 850px — a real 56px left-edge
   misalignment): the 961-1439px tier immediately above only covers >=961px,
   and the <=768px tablet tier below only kicks in at <=768px — leaving
   769-960px stuck on the desktop max(80px, ...) rail while nav.t2-crumb (global.css,
   !important) is already pinned to 24px across this whole 481-960px range. 24px here matches
   nav.t2-crumb's own value for this range exactly — not a new number, chosen to close the gap
   rather than invent one. */
@media (min-width: 769px) and (max-width: 960px) {
  .up-ins-header, .up-ins-featured-section,
  .up-ins-grid-section { padding-left: 24px; padding-right: 24px; }
  .up-ins-crumb { padding-left: 24px; padding-right: 24px; }
  /* Code-review catch (25.08): 6 pills at their desktop 140px
     min-width + 12px gaps need ~900px of row width, but this tier's content
     box is only viewport-48px (e.g. 802px at 850px wide) — without a scroll
     escape hatch the trailing pills silently overflow past the visible edge
     (flex nowrap + default overflow:visible) and become unreachable. Reuse
     the SAME horizontal-scroll mechanism the <=768px tier already has below,
     instead of shrinking pill size — keeps this tier's pills visually
     desktop-sized like the rest of the 961-1439px band, just scrollable. */
  .up-ins-cats {
    padding-left: 24px; padding-right: 24px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .up-ins-cats::-webkit-scrollbar { display: none; }
  .up-ins-pagination { padding-left: 24px; padding-right: 24px; }
  .up-ins-newsletter .t2-section-inner { padding-left: 24px; padding-right: 24px; }
}
/* Tablet tier (601-768px, distinct from phone per MOBILE_DESIGN_CANON):
   24px rail, hero heights hug content instead of the desktop fixed
   min-heights (202/492px — those existed to reserve room for a wide-format
   desktop hero and just became dead whitespace once the layout stacks),
   2-col article grid, 44px cat-pill touch targets. */
@media (max-width: 768px) {
  .up-ins-header, .up-ins-featured-section,
  .up-ins-grid-section { padding-left: 24px; padding-right: 24px; }
  .up-ins-header { min-height: 0; padding-top: 32px; padding-bottom: 24px; }
  .up-ins-featured-section { min-height: 0; padding-top: 24px; padding-bottom: 24px; }
  .up-ins-newsletter .t2-section-inner { padding-left: 24px; padding-right: 24px; padding-top: 32px; padding-bottom: 32px; }
  .up-ins-crumb { padding: 0 24px; }
  .up-ins-cats {
    padding-left: 24px; padding-right: 24px; padding-top: 14px; padding-bottom: 14px;
    height: auto; gap: 10px;
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .up-ins-cats::-webkit-scrollbar { display: none; }
  /* min-width:0 here only relaxes the desktop 140px floor for mobile sizing —
     flex-shrink:0 (base rule above) already stops text from spilling past the pill. */
  .up-ins-cat-pill { height: 44px; min-width: 0; padding: 0 18px; }
  .up-ins-h1 { font-size: 40px; width: 100%; }
  .up-ins-subtitle { font-size: 16px; }
  .up-ins-feat-title { font-size: 28px; }
  .up-ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .up-ins-nl-h2 { width: 100%; font-size: 28px; margin-bottom: 24px; }
  /* Prev/1-of-N/Next row: wrap instead of clipping + real touch targets
     (was 4px 8px padding on the nav links — well under the 44px minimum) */
  .up-ins-pagination { height: auto; flex-wrap: wrap; gap: 12px 16px; padding: 20px 24px; }
  /* W2_intracard: .up-ins-page-nav's own 10px/14px is a small button's tap-
     target padding, not a rail — the 24px side-pad already lives one level up,
     on the parent `.up-ins-pagination` rule immediately preceding this one.
     Live-verified 19.08 at 390px: nav button sits well inside the padded row,
     no edge-touching. */
  .up-ins-page-nav { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* Phone tier (≤600px): a fixed-width shared ArticleCard (296px, built for the
   sitewide horizontal carousels) doesn't fit a 2-col grid track at phone
   widths without overflowing — and even if it did, ~170px-wide tiles read as
   cramped for an editorial "From Our Desk" feed. Real decision: single-column
   full-width stacked cards (image+kicker+title+excerpt get room to breathe),
   matching how the featured card above already reads. Grid override is scoped
   to `.up-ins-grid` only — doesn't touch ArticleCard's carousel usage
   elsewhere (see specs/MOBILE_SHARED_COMPONENT_REQUESTS_20260817.md note).
   🔴 Found live 18.08: this override was silently losing — a shared, unscoped
   `.up-desk__card { width: 220px !important; max-width: 220px !important; }`
   also fires at ≤768px (wp-inline.css, sized for the carousel), and CSS
   resolves !important vs non-important BEFORE specificity, so the shared
   !important rule won regardless of this rule's extra `.up-ins-grid` scope —
   cards were stuck at 220px inside a 350px single-column track instead of
   going full-width. Added !important here too so this scoped, grid-only
   override actually wins (still doesn't touch the shared carousel rule). */
@media (max-width: 600px) {
  .up-ins-grid { grid-template-columns: 1fr; }
  .up-ins-grid .up-desk__card { width: 100% !important; max-width: 100% !important; }
}

/* Phone tier (≤480px) — 390/430 primary QA targets: 20px rail per canon
   spacing scale, hero further compacted so real content (category pills +
   first articles) starts sooner. */
@media (max-width: 480px) {
  .up-ins-header, .up-ins-featured-section,
  .up-ins-grid-section { padding-left: 20px; padding-right: 20px; }
  .up-ins-newsletter .t2-section-inner { padding-left: 20px; padding-right: 20px; padding-top: 32px; padding-bottom: 32px; }
  .up-ins-crumb { padding: 0 20px; }
  .up-ins-cats { padding-left: 20px; padding-right: 20px; }
  .up-ins-h1 { font-size: 34px; }
  .up-ins-featured-img { height: 240px; }
  .up-ins-feat-title { font-size: 24px; margin-bottom: 16px; }
  .up-ins-feat-excerpt { margin-bottom: 24px; }
  .up-ins-nl-h2 { font-size: 24px; }
  .up-ins-nl-btn { width: 100%; } /* stronger full-width CTA affordance at the narrowest tier */
}
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Outer shell ── */

/* ── Logo (left) ── */

/* ── Nav wrapper — centered via flex grow trick ── */

/* ── Nav item gap: 28px between items (half each side = 14px) ── */

/* ── Top-level links / buttons ── */

/* chevron icon */

/* ── Dropdown panel ── */

/* ── Emirates flyout arrow ── */

/* ── Emirates sub-dropdown (flies right) ── */

/* ── Right side: lang switcher + CTA ── */

/* Language switcher */

/* CTA pill — edits4: enlarged to match removed float-btn (h:56px, 16px, 500) */

/* ── Mobile hamburger ── */

/* ── Mobile menu panel ── */

/* ── Responsive breakpoint ── */
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Top row: brand left + columns right ── */

/* ── Brand block (left ~44%) ── */

/* ── 5 columns (right ~56%) — Wave-G: right-align cols block to rail edge ── */
/* Wave-G: gap handles spacing, no margin-left needed */

/* ── Bottom bar ── */

/* Lang switcher in footer bottom bar */

/* ── Responsive ── */