/* --- full-width dropdown panel, matching the React nav's MegaPanel ---
   Everything here is inside the page's own 901px breakpoint, the one that swaps
   .nav-links for the burger. Both the panel and the white bar it brings with it are
   desktop-only, and .shell-light ties with .menu-open on specificity — so leaving it
   unscoped meant a resize with a panel open could strand a white bar behind the dark
   mobile menu. */
.mega{display:none}
.brand{gap:0}
.brand-d{display:none}
.mega-soon{display:inline-flex;align-items:center;white-space:nowrap;margin-left:8px;padding:3px 8px;border-radius:999px;background:#e7f6ee;box-shadow:inset 0 0 0 1px #c6e8d6;color:#0a6b3a;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* THE SHIMMER, to match the React nav's ComingSoonBadge.
   app/globals.css gives .coming-soon-badge a light sweep on a loop; this badge is the
   same thing in the generated shell and had no animation, so the same item shimmered on
   a React route and sat flat on a static page. position/overflow are what let the sweep
   be clipped to the pill. Honoured prefers-reduced-motion, as the React one is. */
.mega-soon{position:relative;overflow:hidden}
.mega-soon::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-130%);animation:mega-sheen 2.8s ease-in-out infinite}
@keyframes mega-sheen{to{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.mega-soon::after{animation:none}}
@media(min-width:901px){
.mega{display:block;position:absolute;left:0;right:0;top:64px;z-index:55;background:#fff;border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 18px 40px -32px rgba(4,60,28,.35);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.mega.open{opacity:1;visibility:visible}
/* The panel contents line up with the nav row above them: many columns under the row's
   first item, one column under its own trigger. The offset is a margin-left set from JS
   — see the alignment note in the script.
   width:max-content is load-bearing. A block-level grid is as wide as its container, so
   its offsetWidth would swallow the whole row and the script's clamp would compute a
   maximum shift of zero. */
.mega-pad{padding:40px 0}
.mega-grid{display:grid;grid-template-columns:repeat(2,max-content);width:max-content;gap:32px 48px}
.mega-grid.one{display:block}
.mega-cat{margin:0 0 16px;font-size:14px;font-weight:600;color:#0b1f16}
.mega-list{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mega-list a{color:#5b6b62;font-size:14px;transition:color .15s}
.mega-list a:hover{color:#0b1f16}
.mega-off{color:rgba(91,107,98,.55);font-size:14px;cursor:default}
}
@media(min-width:1024px){.mega-grid{grid-template-columns:repeat(4,max-content)}}
/* --- keep the nav row on ONE line ---
   .nav-links is absolutely positioned at left:50% to centre it in the bar. For an
   absolutely positioned box with `width:auto`, shrink-to-fit is capped at
   (containing block − left), i.e. HALF the bar — so once the labels needed more than
   that, flex shrank the items and the text wrapped inside them. "Kite Cards",
   "Products" and "Programs" broke to two lines first, the last two because a caret
   adds to their width.
   width:max-content opts out of shrink-to-fit entirely; nowrap is the belt-and-braces.
   The row measures 585px against 645px of clear space at the 901px breakpoint — the
   narrowest it ever renders — so the existing 26px gap is kept rather than tightened. */
@media(min-width:901px){
.nav-links{width:max-content;max-width:none;flex-wrap:nowrap}
.nav-links a{white-space:nowrap}
}
/* The bar becomes one white surface with the open panel, so everything coloured for a
   dark backdrop has to switch too — the other trigger, the logo and the burger all
   read white-on-white otherwise. Same reason as `lightBar` in components/layout/nav.tsx. */
@media(min-width:901px){
#site-header.shell-light{background:#fff;border-bottom:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
#site-header.shell-light .nav-links a{color:#5b6b62}
#site-header.shell-light .nav-links a:hover,#site-header.shell-light .nav-links a.mega-t[aria-expanded="true"]{color:#0b1f16}
#site-header.shell-light .brand{color:#0b1f16}
#site-header.shell-light .nav-burger{color:#0b1f16}
#site-header.shell-light .brand-w{display:none}
#site-header.shell-light .brand-d{display:block}
}
/* --- the country control beside the download CTA ---
   Countries left the nav row for this; see `countrySelector` in lib/content.ts.

   A SIBLING of .nav-cta, not a child of it. On the card country pages .nav-cta is
   display:none below 901px and opacity:0 until .past-hero — i.e. it fades in a screen
   into the page. This control is persistent, so it cannot inherit that.

   It carries the margin-left:auto that pushes the right-hand cluster over. .nav-cta
   keeps its own (harmless once this one has already taken up the slack) so nothing
   breaks on a page where this is display:none.

   Desktop only, on the same 901px breakpoint as .nav-links: below it the burger owns
   the right-hand side and the menu carries its own Countries row.

   Colours here are for a DARK bar, which is what the pages receiving only this
   stylesheet have. The grey/on-dark pair for pages that take the base stylesheet lives
   there — scoped one class deeper, because this file loads afterwards. */
#site-header .nav-geo{display:none}
@media(min-width:901px){
#site-header .nav-geo{display:inline-flex;align-items:center;gap:6px;margin-left:auto;height:36px;padding:0 10px;border-radius:999px;color:rgba(255,255,255,.72);font-size:14px;font-weight:500;line-height:1;text-decoration:none;transition:color .15s,background .15s}
#site-header .nav-geo:hover{color:#fff;background:rgba(255,255,255,.1)}
#site-header .nav-geo>svg{width:18px;height:18px;flex:none}
/* TWO auto margins in one flex row SPLIT the free space between them, they do not both
   push right — which is why this control landed in the middle of the bar, behind the
   centred nav links, on every page that also styles `.nav-cta{margin-left:auto}` (the
   /countries hub and the nine card country pages). The auto margin belongs to whichever
   element comes first, so .nav-cta gives its up whenever this one is present.
   (1,2,0) — it has to outrank both the pages' own `.nav-cta` rule and the base
   stylesheet's `#site-header .nav-cta`. */
#site-header .nav-geo~.nav-cta{margin-left:0}
/* Wins over the 18px above on specificity, not order: (1,2,0) against (1,1,1). */
#site-header .nav-geo .caret{width:12px;height:12px;margin-left:2px}
/* Icon-only in the narrow desktop band.
   .nav-links is absolutely centred, so it does not give way to the right-hand cluster —
   it just gets overlapped. The note above .nav-links{width:max-content} measured 585px of
   row against 645px of clear space at the 901px breakpoint, i.e. 60px of slack; taking
   Countries OUT of the row bought about 90px back, and putting it here as a labelled
   control spends roughly 150. That is a collision at the bottom of the range and nowhere
   near one on an actual desktop, so the WORD is what gives way, not the control. */
#site-header .nav-geo>span{display:none}
/* 1200, not 1080. The word "Countries" is about 78px, and switching it on at 1080 made
   the right-hand cluster grow by that much precisely inside the band where a six-item row
   is tightest. Measured: with the 20px gap above and this at 1200, nothing overlaps down
   to about 925px. */
@media(min-width:1200px){#site-header .nav-geo>span{display:inline}}
#site-header.shell-light .nav-geo{color:#5b6b62;background:none}
#site-header.shell-light .nav-geo:hover{color:#0b1f16;background:rgba(11,20,15,.05)}
}
/* The same link in the burger menu. Colour is inherited from each page's own
   `.mobile-menu a` rule — deliberately not set here, because that rule is white on the
   country pages and near-black on the base stylesheet. Only the icon layout is ours. */
.mobile-menu .mm-geo{display:flex;align-items:center;gap:8px}
.mobile-menu .mm-geo svg{width:18px;height:18px;flex:none}
/* --- mobile menu: product categories are one level deeper than the group label --- */
.mobile-menu .mm-cat{margin:0;padding:12px 0 4px 14px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.42);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mobile-menu a.mm-deep{padding-left:28px}
.mobile-menu .mm-sub.mm-off{display:block;padding:14px 0 14px 28px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.4);font-size:15px}
.mobile-menu .mega-soon{background:rgba(255,255,255,.12);box-shadow:none;color:rgba(255,255,255,.72)}
/* --- footer: Products is grouped into Store / Spend / Send --- */
.foot-col .foot-seclist{display:flex;flex-direction:column}
.foot-col .foot-seclist a{padding-left:12px}
/* GREY, NOT INK. These sub-headings were var(--ink) — near-black — which made them the
   loudest thing in the footer, heavier than the column titles above them and the links
   below. #63746b is the literal the column titles already use (a few rules down and in
   the full stylesheet), so every heading in the footer is now one grey and the hierarchy
   comes from size and weight. A literal rather than var(--dim): build-shell emits no
   --dim, and this block is a delta loaded over stylesheets that may not define one. */
.foot-col p.foot-sub{margin:8px 0 11px;color:#63746b;font-size:15px;font-weight:600}
/* --- SIX NAV ITEMS DO NOT FIT, and this block is why it has to be said twice ---
   The same two rules exist in BASE_CSS, which is what the travel planner gets. The nine
   card-country pages do NOT take BASE_CSS: they carry their own hand-written nav styles
   from before this generator existed, and all this file injects into them is the block
   you are reading. So the fix has to be repeated here or those nine pages keep the
   overlap. Found the hard way, after fixing the planner and seeing the card pages
   unchanged.
   #site-header prefixes give these an id's worth of specificity, so they beat the
   pages' own bare .nav-links and .nav-burger rules whatever the source order. */
#site-header .nav-links{gap:18px}
/* The card pages set .nav-links{position:absolute;left:50%} themselves; same reasoning
   as the note in BASE_CSS, so the same correction, with an id's worth of specificity. */
@media(min-width:901px){
#site-header .nav-links{position:static;left:auto;top:auto;transform:none}
/* SPACED LIKE THE REACT NAV, which is the thing that was actually being compared.
   components/layout/nav.tsx puts three children in a justify-between flex row: brand,
   the data-nav-row element, and one wrapper holding the globe and the CTA. That splits
   the leftover space into two EQUAL gaps, so the row sits a third of the way in — closer
   to the logo than to the middle, because the right-hand cluster is wider than the logo.
   This bar has four children and no wrapper, and it put margin-left:auto on .nav-geo,
   which dumps ALL the slack on one side and jams the row up against the brand.
   Auto margins on both sides of the row reproduce justify-between exactly: the slack is
   halved either side of it. .nav-geo therefore must NOT keep its own auto margin, or the
   two autos split the free space between them and the row drifts back. */
#site-header .nav-links{margin-left:auto;margin-right:auto}
#site-header .nav-geo{margin-left:0}
}
@media(min-width:901px) and (max-width:1039px){
#site-header .nav-links{display:none}
#site-header .nav-burger{display:flex}
#site-header .nav-geo{display:none}
#site-header .nav-cta{display:none}
}
/* ------------------------------------------------------- footer: one look everywhere
   .site-footer.site-footer, DOUBLED ON PURPOSE. This block is appended last on every
   page, which beat every page's own <style> -- but not planner.css, which the planner
   hub and its 61 generated pages pull in as a <link> AFTER it. Those pages were the last
   three still showing a 24px link leading and their own font stack. Repeating the class
   costs one specificity point and makes this block win on its own terms rather than on
   where it happens to sit, so a regenerated planner.css cannot quietly take the footer
   back.
   THE HOMEPAGE FOOTER IS THE REFERENCE and this makes every static page match it.
   Measured in a browser rather than read off the Tailwind classes, because three
   different footers had drifted apart and none looked wrong on its own:

     homepage (React)            title 12/500   group 11/500 UPPERCASE   link 14/80% ink
     compare, planner, rates,
       send-money                title 12/600   group 15/600 sentence    link 15/#3f5047
     the nine card countries     title 12/600   group 15/600 sentence    link 15/#31413a
                                 on #f6fbf8, with its own grey for the title again

   The group names carried most of it: 15px semibold sentence case against 11px uppercase
   at 45% opacity is a heading against a label, which is why the columns read as a
   different component depending on which page you landed on.

   THIS LIVES IN STYLE, NOT BASE_CSS, deliberately. STYLE is appended to every page
   whatever its baseCss flag, and it lands after both the shared stylesheet and the
   page's own <style>. So equal-specificity rules here win on source order and nothing
   needs !important. The card country pages style .foot-col themselves at (0,2,0); these
   are (0,3,0) and outrank them outright.

   #fafcfb IS NOT INVENTED. The React footer is bg-secondary/40 over a white body, which
   composites to exactly rgb(250,252,251). Every static page here has a white body too,
   so the flat colour and the translucent one land on the same pixel.

   FONT FAMILY IS LEFT ALONE. Some of these pages load InterV and some Inter; they are
   the same typeface, and naming one here would risk a fallback on pages that only ship
   the other. */
.site-footer.site-footer{background:#fafcfb}
.site-footer.site-footer .foot-col h4,
.site-footer.site-footer .foot-col p.foot-sub.foot-sub-h{margin:0 0 16px;font-family:Inter, InterV, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:12px;font-weight:700;line-height:16px;letter-spacing:.6px;text-transform:uppercase;color:#0b140f}
.site-footer.site-footer .foot-col p.foot-sub{margin:0 0 8px;font-family:Inter, InterV, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;font-size:11px;font-weight:500;
  line-height:16.5px;letter-spacing:.275px;text-transform:uppercase;color:rgba(11,20,15,.45)}
/* 12px between links, 16px before the next group name -- the homepage's space-y-3 and
   space-y-4. Zeroing the last link's margin is what keeps the second number exact
   instead of 12 plus 16. */
.site-footer.site-footer .foot-col a{display:block;margin:0 0 12px;font-family:Inter, InterV, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;font-weight:400;line-height:20px;letter-spacing:normal;color:rgba(11,20,15,.8)}
.site-footer.site-footer .foot-col .foot-seclist a:last-child{margin-bottom:0}
/* 3x2 of brand marks, sized to the row of text links they replaced. The marks inherit
   the link colour so hover is the one rule below rather than six fills. */
.site-footer.site-footer .foot-social{display:grid;grid-template-columns:repeat(3,max-content);gap:14px;margin:0}
.site-footer.site-footer .foot-social a{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin:0;color:rgba(11,20,15,.8)}
.site-footer.site-footer .foot-social .si{display:block;width:22px;height:22px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.site-footer.site-footer .foot-social .si-facebook{-webkit-mask-image:url(/social/facebook.png);mask-image:url(/social/facebook.png)}
.site-footer.site-footer .foot-social .si-linkedin{-webkit-mask-image:url(/social/linkedin.png);mask-image:url(/social/linkedin.png)}
.site-footer.site-footer .foot-social .si-telegram{-webkit-mask-image:url(/social/telegram.png);mask-image:url(/social/telegram.png)}
.site-footer.site-footer .foot-social .si-youtube{-webkit-mask-image:url(/social/youtube.png);mask-image:url(/social/youtube.png)}
.site-footer.site-footer .foot-social .si-instagram{-webkit-mask-image:url(/social/instagram.png);mask-image:url(/social/instagram.png)}
.site-footer.site-footer .foot-social .si-x{-webkit-mask-image:url(/social/x.png);mask-image:url(/social/x.png)}
.site-footer.site-footer .foot-social a:hover{color:#027a48}
.site-footer.site-footer .foot-col .foot-seclist + p.foot-sub{margin-top:16px}
/* No indent under a group name. BASE_CSS and the delta block both set padding-left:12px
   here; the homepage has never indented, and with the labels now uppercase and small the
   indent read as a second, competing level. */
.site-footer.site-footer .foot-col .foot-seclist a{padding-left:0}
.site-footer.site-footer .foot-col a:hover{color:#027a48}
/* ---- geometry, declared rather than inherited ----------------------------------
   The typography was already pinned; the LAYOUT was still each page family's own.
   Measured at a 1440px viewport, the same footer was coming out four different ways:

     React routes        container 1200/24  gap 48/40  brand 177  column 143  WRAPS
     travel planner      container 1200/24  gap 40/32  brand 187  column 148
     rate + send-money   container 1200/28  gap 40/32  brand 190  column 145
     compare + card      container 1140/24  gap 40/32  brand 190  column 135  WRAPS

   "Rewards and Benefits" fits on one line at 148px and wraps at 143, which is the
   difference that shows. The column width is a remainder -- container, minus padding,
   minus the brand, minus the row gap, minus four column gaps -- so every one of those
   had to be fixed, not just the gap.

   1200/24 and 40/32 are the values that leave ~148px per column, the one combination
   already proven not to wrap. The brand converges once the tagline does.

   THE TAGLINE IS THE DISPLAY FACE. Only the React footer was getting it: the static
   rule set weight and size but no family, so it inherited body Inter. Every page ships
   a Bricolage cut, under "Bricolage Grotesque" on the React routes and the planner and
   plain "Bricolage" on the rest, so naming both resolves everywhere. */
.site-footer.site-footer .wrap{max-width:1200px;padding:0 24px}
/* 48px stacked, 64px once the brand and the columns sit side by side -- the authored
   pair, not a flat 64. A single unconditional 64 here read as correct at 1440 and
   quietly added 16px above the columns on tablets. */
.site-footer.site-footer .foot-top{gap:48px}
@media(min-width:1024px){.site-footer.site-footer .foot-top{gap:64px}}
/* Four 150px columns at tablet width rather than three wide ones. This lived in
   BASE_CSS, which the nine card-country pages do not take, so they packed three
   213px columns while every other family packed four. */
@media(min-width:640px){.site-footer.site-footer .foot-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(min-width:1024px){.site-footer.site-footer .foot-cols{grid-template-columns:repeat(5,1fr);flex:1;min-width:0}}
.site-footer.site-footer .foot-cols{column-gap:40px;row-gap:32px}
/* ONE FILE, NOT ONE FAMILY NAME. Naming "Bricolage Grotesque" was not enough: the
   families resolve it to three different things. Measured, "Unlock Stable Finance"
   at 52px came out 542.2px on the React routes (next/font) and on the compare, card
   and rate pages (the local /countries/assets cut) -- but 513.8px on the planner and
   the conference page, which load Google's Bricolage+Grotesque:opsz,wght@12..96 and
   therefore get the OPTICAL-SIZE cut at opsz 52, a different set of glyph widths from
   the same typeface. Ten pixels of brand column, which the five link columns then
   absorb two pixels each.

   So the footer names a private family that only it uses, served from the one woff2
   the site already ships. Every page now renders the identical file here no matter
   what else it loads, and nothing outside the footer changes -- the planner keeps its
   optical cut for its own headings. Below the fold with font-display:swap, so the
   fetch on the families that did not already have this file costs nothing visible. */
@font-face{font-family:KiteFootDisplay;src:url(/countries/assets/bricolage-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:KiteFootDisplay;src:url(/countries/assets/bricolage-latinext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20BF}
.site-footer.site-footer .foot-tagline{font-family:KiteFootDisplay, Inter, InterV, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:clamp(34px,4.4vw,52px);line-height:1.02;letter-spacing:-.03em;margin:24px 0 0;
  /* #0b140f, not the card pages' own #0a1410. One unit of red and one of blue apart,
     invisible side by side but a real difference, and the footer is meant to be literally
     the same everywhere. Every other family already renders this value. */
  color:#0b140f}
/* ---- the bottom bar ----------------------------------------------------------
   Same story as the geometry above: the values existed, in BASE_CSS, and BASE_CSS
   does not reach every family and loses to the page stylesheet on the ones where it
   arrives as a linked shell.css rather than inline. Measured at 1440px, the border
   sat 28px above the copyright on the planner and the conference page, 32px on the
   React routes, and flush against it -- 0px -- on the ~840 compare, card, rate and
   send-money pages, which is the specificity accident, not the intent.

   28px is the authored value, so 28px it is, declared here where it outranks both.
   The copyright also inherited two different leadings, 16px on React against 19.2px
   everywhere else, so that is spelled out rather than left to inherit. */
.site-footer.site-footer .foot-bot{display:flex;flex-direction:column;gap:20px;border-top:1px solid #e2e9e6;margin-top:56px;padding-top:28px}
/* letter-spacing:normal, spelled out for the same reason the links carry it: the
   static pages tighten body copy to -.08px globally and the React routes do not, and
   at 320px that was worth a whole extra line in the legal block. */
.site-footer.site-footer .foot-copy{flex-shrink:0;max-width:200px;margin:0;font-size:12px;line-height:1.6;letter-spacing:normal;color:#63746b}
.site-footer.site-footer .foot-legal{display:flex;flex-direction:column;gap:12px;flex:1}
.site-footer.site-footer .foot-legal p{margin:0;font-size:12px;line-height:1.6;letter-spacing:normal;color:#63746b}
.site-footer.site-footer .foot-wordmark{display:block;width:100%;height:auto;margin-top:40px;opacity:.95;user-select:none}
@media(min-width:1024px){.site-footer.site-footer .foot-bot{flex-direction:row;gap:44px}}