/*
 * Whichapp Navigation v2
 * Hook-based — works within GeneratePress structure
 *
 * Colours: #FCFCFD bg, #2563EB accent, #101828 text, #475467 secondary, #667085 muted
 * Type scale: 13/14/15/16/20px only
 */

:root {
  --wpt-content-width: 780px;
}

/* ============================================================
   GP INTEGRATION OVERRIDES
   Hide GP's default nav items and footer content.
   GP's header structure (#masthead, .inside-header) stays intact.
   ============================================================ */

/* Hide GeneratePress default nav, force our own to render on mobile.
   GP outputs three separate nav scaffolds and applies `!important`
   media-query rules from its inline `generate-navigation-branding-inline-css`
   that load AFTER wpnav.css. To beat that load order we bump specificity
   with `body` and re-state inside the same media query.
   - Hide GP's desktop, mobile-header, slideout overlay.
   - Force .site-header (our wpnav-bar lives inside it) visible on mobile,
     since GP's branding inline-css does `.site-header { display:none
     !important }` at <=992px which is otherwise the winning rule. */
#site-navigation,
.mobile-header-navigation,
#generate-slideout-menu,
.slideout-overlay { display: none !important; }
#mobile-menu-control-wrapper { display: none !important; }
body #mobile-header { display: none !important; }

@media (max-width: 992px) {
  body .site-header { display: block !important; opacity: 1 !important; }
  body #mobile-header { display: none !important; }
}

/* Compact the GP header — reduce excessive 60px padding */
.inside-header { padding: 16px 20px !important; }

/* Make the GP header sticky */
.site-header { position: sticky; top: 0; z-index: 100; background: #FFFFFF; border-bottom: 1px solid rgba(16, 24, 40, 0.08); }

/* GP's sticky-menu JS injects #sticky-placeholder to reserve space when it makes
   the nav position:fixed. Our header is already position:sticky (stays in flow),
   so the placeholder creates a duplicate gap. Kill it. */
#sticky-placeholder { display: none !important; }

/* Hide GP's default footer content */
.site-footer .footer-bar,
.site-footer .site-info,
.site-footer .footer-widgets-container { display: none !important; }
.site-footer { background: none !important; padding: 0 !important; border: none !important; }

/* ============================================================
   INLINE NAV (inside GP header flex container)
   ============================================================ */

.wpnav-inline-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto; /* push to the right of the logo */
  flex: 1;
  justify-content: flex-end;
}

.wpnav-nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.wpnav-nav__trigger,
.wpnav-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: #475467;
  background: none;
  border: none;
  cursor: pointer;
  padding: 14px 0;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s;
}

.wpnav-nav__trigger:hover,
.wpnav-nav__link:hover,
.wpnav-nav__trigger[aria-expanded="true"] {
  color: #2563EB;
}

.wpnav-nav__chevron {
  font-size: 10px;
  margin-left: 3px;
}

.wpnav-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

.wpnav-header-cta {
  display: inline-block;
  background: #EFF6FF;
  color: #1D4ED8 !important;
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.wpnav-header-cta:hover { background: #DBEAFE; color: #1D4ED8 !important; }

.wpnav-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: #475467;
  transition: color 0.15s;
}

.wpnav-search-toggle:hover { color: #2563EB; }

/* Specificity-fortified — GP theme inline-css sets `button { color: var(--base-3) }`
   (resolves to white) at base specificity but somehow wins on inner pages despite
   `.wpnav-hamburger` (spec 10) > `button` (spec 1). Adding `body` prefix +
   :hover/:focus variants guarantees our colour wins everywhere. Same pattern
   used for .wpnav-mobile__close (white-on-white close icon fix).
   Search toggle (.wpnav-search-toggle) doesn't need the bump because it has
   no #id and is rendered black correctly. Hamburger has id="wpnav-hamburger"
   but the rule below is still class-based — we don't want to lift to #id
   here because the same class is used on other buttons elsewhere. */
body .wpnav-hamburger,
body .wpnav-hamburger:hover,
body .wpnav-hamburger:focus,
body .wpnav-hamburger:focus-visible { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: #101828; }

/* ============================================================
   FLYOUT PANELS
   ============================================================ */

.wpnav-panel {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  z-index: 99;
}

.wpnav-panel[hidden] { display: none; }

.wpnav-panel__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  gap: 40px;
}

.wpnav-panel__sidebar { flex: 0 0 180px; }

.wpnav-panel__tab {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #475467;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  margin-bottom: 3px;
  transition: background 0.1s, color 0.1s;
}

.wpnav-panel__tab:hover { background: #F6F8FB; }
.wpnav-panel__tab--active { font-weight: 600; color: #2563EB; background: #EFF6FF; }

.wpnav-panel__content { flex: 1; }
.wpnav-panel__links[hidden] { display: none; }

.wpnav-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 28px;
}

.wpnav-panel__grid a {
  font-size: 14px;
  color: #101828;
  text-decoration: none;
  padding: 7px 0;
  line-height: 1.5;
  transition: color 0.1s;
}

.wpnav-panel__grid a:hover { color: #2563EB; }

.wpnav-panel__more {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.wpnav-panel__more a {
  font-size: 14px;
  font-weight: 600;
  color: #2563EB;
  text-decoration: none;
}

.wpnav-panel__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 20px;
  font-size: 13px;
  color: #667085;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  padding-top: 14px;
}

.wpnav-panel__bottom a {
  font-weight: 600;
  color: #2563EB;
  text-decoration: none;
  margin-left: 8px;
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */

/* Mobile drawer — fortified against cascade contention on mobile browsers.
   Belt-and-braces because mobile Safari/Chrome have edge cases (URL bar
   collapse, parent stacking-context traps) that can hide a fixed overlay.
   - z-index 99999 beats anything reasonable
   - isolation + translateZ creates a guaranteed stacking context
   - 100vw/100vh + 100dvh fallback covers iOS dynamic viewport
   - explicit !important on display ensures nothing later can hide it */
.wpnav-mobile,
body .wpnav-mobile {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #FFFFFF !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  isolation: isolate;
  transform: translateZ(0);
}

.wpnav-mobile[hidden],
body .wpnav-mobile[hidden] { display: none !important; }
.wpnav-mobile:not([hidden]),
body .wpnav-mobile:not([hidden]) { display: block !important; }

.wpnav-mobile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.wpnav-mobile__title { font-size: 16px; font-weight: 700; color: #101828; }

/* :focus + :hover variants required — GP theme has an inline
   `button:focus { color: var(--base-3) }` (white) rule with specificity 11
   that beats our plain class (10) when JS focuses the close button on
   drawer open. Without these the X renders white-on-white. */
.wpnav-mobile__close,
.wpnav-mobile__close:hover,
.wpnav-mobile__close:focus,
.wpnav-mobile__close:focus-visible { background: none; border: none; cursor: pointer; padding: 6px; color: #101828; }

.wpnav-mobile__body { padding: 12px 20px; }

.wpnav-mobile__section { border-bottom: 1px solid rgba(16, 24, 40, 0.08); }

.wpnav-mobile__section summary {
  font-size: 15px;
  font-weight: 600;
  color: #101828;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
}

.wpnav-mobile__section summary::-webkit-details-marker { display: none; }

.wpnav-mobile__links { padding: 0 0 14px 0; }

.wpnav-mobile__links a {
  display: block;
  font-size: 14px;
  color: #101828;
  text-decoration: none;
  padding: 7px 0;
}

.wpnav-mobile__links a:hover { color: #2563EB; }

.wpnav-mobile__label {
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 6px 0;
}

.wpnav-mobile__label:first-child { margin-top: 0; }

.wpnav-mobile__viewall { font-weight: 600 !important; color: #2563EB !important; }

.wpnav-mobile__direct {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #101828;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.wpnav-search {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(16, 24, 40, 0.5);
  z-index: 1002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

.wpnav-search[hidden] { display: none; }

.wpnav-search__inner {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 20px 60px rgba(16, 24, 40, 0.15);
  position: relative;
}

.wpnav-search__inner form { display: flex; gap: 10px; }

.wpnav-search__input {
  flex: 1;
  font-size: 16px;
  color: #101828;
  border: 1px solid rgba(16, 24, 40, 0.15);
  border-radius: 8px;
  padding: 11px 14px;
  outline: none;
}

.wpnav-search__input:focus { border-color: #2563EB; }

.wpnav-search__submit {
  background: #2563EB;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.wpnav-search__submit:hover { background: #1D4ED8; }

.wpnav-search__close {
  position: absolute;
  top: -36px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  padding: 6px;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.wpnav-breadcrumb {
  max-width: 1200px;
  margin: 12px auto 28px;
  padding: 0 24px;
}

.wpnav-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.wpnav-breadcrumb__item { display: flex; align-items: center; }

.wpnav-breadcrumb__link {
  font-size: 13px;
  line-height: 18px;
  color: #98A2B3;
  text-decoration: none;
}

.wpnav-breadcrumb__link:hover { color: #2563EB; text-decoration: underline; }

.wpnav-breadcrumb__text { font-size: 13px; line-height: 18px; color: #98A2B3; }

.wpnav-breadcrumb__sep { font-size: 13px; line-height: 18px; color: #D0D5DD; margin: 0 6px; }

.wpnav-breadcrumb__current { font-size: 13px; line-height: 18px; color: #667085; font-weight: 400; }

/* ============================================================
   RELATED CONTENT CARDS
   ============================================================ */

.wpnav-related {
  max-width: var(--wpt-content-width);
  margin: 56px auto 0;
  padding: 0;
}

.wpnav-related__heading {
  font-size: 16px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 20px 0;
}

.wpnav-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.wpnav-related__card {
  display: block;
  background: #FFFFFF;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  transition: box-shadow 0.15s;
}

.wpnav-related__card:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06); }

.wpnav-related__type {
  display: block;
  font-size: 13px;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 6px 0;
}

.wpnav-related__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #101828;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.wpnav-related__excerpt {
  display: block;
  font-size: 14px;
  color: #475467;
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.wpnav-related__arrow { font-size: 14px; font-weight: 600; color: #2563EB; }

/* ============================================================
   TABLE OF CONTENTS (sidebar)
   ============================================================ */

/* Flex row wrapper: entry-content + TOC as proper siblings */
.wpnav-toc-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 152px;
}

.wpnav-toc-wrapper > .entry-content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 680px;
}

/* TOC uses sticky so the browser handles position — no JS offset needed.
   No max-height / overflow-y: hard rule [[feedback_toc_no_internal_scroll]] —
   sidebar TOC must never have its own scrollbar. Let the page scroll. */
.wpnav-toc {
  position: sticky;
  top: 100px;
  width: 220px;
  flex-shrink: 0;
  align-self: flex-start;
}

.wpnav-toc__label {
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 10px 0;
}

.wpnav-toc__list { list-style: none; margin: 0; padding: 0; }

.wpnav-toc__item {
  border-left: 2px solid transparent;
  padding: 5px 0 5px 10px;
  margin: 0 0 2px 0;
  transition: border-color 0.15s;
}

.wpnav-toc__item--active { border-left-color: #2563EB; }

.wpnav-toc__link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  color: #475467;
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.1s;
}

.wpnav-toc__link:hover { color: #2563EB; }

.wpnav-toc__item--active .wpnav-toc__link { font-weight: 600; color: #2563EB; }

/* ============================================================
   FAQ ACCORDION (.wp-faq-accordion)
   Card-style accordion used on country hubs, reviews, comparisons
   and best-of pages. Markup contract:
     <div class="wp-faq-accordion">
       <details class="wp-faq-accordion__item">
         <summary class="wp-faq-accordion__q">Question</summary>
         <div class="wp-faq-accordion__a"><p>Answer</p></div>
       </details>
       ...
     </div>
   ============================================================ */

.wp-faq-accordion {
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wp-faq-accordion__item {
  background: #ffffff;
  border: 1px solid #E4E7EC;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.wp-faq-accordion__item:hover {
  border-color: #CFD4DC;
}

.wp-faq-accordion__item[open] {
  border-color: #D1D9E6;
  box-shadow: 0 2px 8px rgba(15, 25, 35, 0.04), 0 1px 2px rgba(15, 25, 35, 0.04);
}

/* Question (summary) */
.wp-faq-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: #101828;
  cursor: pointer;
  list-style: none;        /* hide modern ::marker triangle */
  user-select: none;
  min-height: 44px;        /* tap target */
}

.wp-faq-accordion__q::-webkit-details-marker { display: none; }
.wp-faq-accordion__q::marker { content: ''; }

.wp-faq-accordion__q:hover { color: #2563EB; }
.wp-faq-accordion__q:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: -2px;
  border-radius: 12px;
}

/* Chevron indicator (replaces previous +/− text) */
.wp-faq-accordion__q::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: #F2F4F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.22s ease, background-color 0.18s ease;
}

.wp-faq-accordion__item[open] .wp-faq-accordion__q::after {
  transform: rotate(180deg);
  background-color: #E0E7FF;
}

/* Answer body */
.wp-faq-accordion__a {
  padding: 4px 22px 22px 22px;
  color: #344054;
  font-size: 16px;
  line-height: 1.65;
  border-top: 1px solid #F2F4F7;
  margin-top: 0;
}

.wp-faq-accordion__a > *:first-child { margin-top: 14px; }
.wp-faq-accordion__a > *:last-child  { margin-bottom: 0; }
.wp-faq-accordion__a p { margin: 0 0 12px 0; font-size: 16px; line-height: 1.65; color: #344054; }
.wp-faq-accordion__a p:last-child { margin-bottom: 0; }
.wp-faq-accordion__a ul,
.wp-faq-accordion__a ol { margin: 0 0 12px 0; padding-left: 22px; }
.wp-faq-accordion__a li { margin-bottom: 6px; line-height: 1.6; }
.wp-faq-accordion__a a { color: #2563EB; text-decoration: underline; text-underline-offset: 2px; }
.wp-faq-accordion__a a:hover { color: #1d4ed8; }

/* Mobile tuning */
@media (max-width: 600px) {
  .wp-faq-accordion { gap: 10px; margin: 22px 0; }
  .wp-faq-accordion__q {
    padding: 16px 16px;
    font-size: 16px;
    line-height: 1.4;
    gap: 12px;
  }
  .wp-faq-accordion__q::after { width: 26px; height: 26px; }
  .wp-faq-accordion__a { padding: 4px 16px 18px 16px; font-size: 15.5px; }
  .wp-faq-accordion__a p { font-size: 15.5px; line-height: 1.6; }
}

/* ----- Legacy fallback for bare <details> FAQ items (older pages
   that don't yet use the .wp-faq-accordion wrapper). Keeps the
   +/− indicator behaviour from the previous rule. ----- */
.entry-content details:not([class*="wp-"]) > summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 300;
  color: #667085;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.entry-content details:not([class*="wp-"])[open] > summary::after {
  content: '\2212';
}

.entry-content details:not([class*="wp-"]) > summary::-webkit-details-marker {
  display: none;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* Design tokens */
.wpft {
  --wpft-ink:      #0f1923;
  --wpft-ink-deep: #090e14;
  --wpft-teal:     #00b4d8;
  --wpft-teal-dim: #0096b4;
  --wpft-white:    #ffffff;
  --wpft-s100:     #e8ecf0;
  --wpft-s300:     #9aaab8;
  --wpft-s500:     #546070;
  --wpft-ease:     220ms cubic-bezier(.4,0,.2,1);
  /* Footer families resolve to the loaded token stacks (the retired
     Playfair/Sora load was removed in the font-cleanup pass). */
  --wpft-serif:    var(--font-display);
  --wpft-sans:     var(--font-sans);
}

.wpft {
  background-color: var(--wpft-ink);
  background-image:
    linear-gradient(0deg, var(--wpft-ink-deep) 0%, var(--wpft-ink) 100%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0v60M0 60h60' stroke='%23fff' stroke-width='.15' opacity='.04'/%3E%3C/svg%3E");
  background-size: auto, 60px 60px;
  position: relative;
  border-top: 1px solid rgba(0,180,216,.18);
  font-family: var(--wpft-sans);
}

.wpft::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--wpft-teal) 30%, var(--wpft-teal-dim) 70%, transparent 100%);
  pointer-events: none;
}

/* Container */
.wpft__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Mission band */
.wpft__mission {
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 40px 0;
}

.wpft__mission-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.wpft__wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  flex-shrink: 0;
}

.wpft__wordmark-w {
  font-family: var(--wpft-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--wpft-teal);
  letter-spacing: -.02em;
  line-height: 1;
}

.wpft__wordmark-rest {
  font-family: var(--wpft-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--wpft-s100);
  letter-spacing: -.01em;
  line-height: 1;
}

.wpft__tagline-wrap { flex: 1; min-width: 240px; }

.wpft__tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wpft-teal);
  margin: 0 0 8px 0;
}

.wpft__mission-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--wpft-s300);
  max-width: 560px;
  margin: 0;
}

.wpft__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0,180,216,.3);
  padding: 8px 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.wpft__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wpft-teal);
  animation: wpft-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes wpft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.75); }
}

.wpft__badge-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--wpft-teal);
  white-space: nowrap;
}

/* Nav grid */
.wpft__nav {
  padding: 56px 0 48px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.wpft__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 48px;
}

.wpft__col-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--wpft-teal);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,180,216,.2);
  position: relative;
}

.wpft__col-label::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--wpft-teal);
}

.wpft__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpft__col-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--wpft-s300);
  text-decoration: none;
  line-height: 1.4;
  position: relative;
  transition: color var(--wpft-ease);
}

.wpft__col-list a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wpft-teal);
  transition: width var(--wpft-ease);
}

.wpft__col-list a:hover { color: var(--wpft-white); }
.wpft__col-list a:hover::after { width: 100%; }

.wpft__col-cta {
  color: var(--wpft-teal) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px;
}

.wpft__col-cta::after { background: var(--wpft-teal-dim) !important; }

.wpft__arrow {
  display: inline-block;
  transition: transform var(--wpft-ease);
  font-style: normal;
}

.wpft__col-cta:hover .wpft__arrow { transform: translateX(3px); }

/* Bottom bar */
.wpft__bottom { padding: 24px 0; }

.wpft__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wpft__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wpft__copyright {
  font-size: 12px;
  color: var(--wpft-s500);
  margin: 0;
}

.wpft__legal-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wpft__legal-nav a {
  font-size: 11.5px;
  color: var(--wpft-s500);
  text-decoration: none;
  padding: 2px 10px;
  border-right: 1px solid var(--wpft-s500);
  line-height: 1;
  white-space: nowrap;
  transition: color var(--wpft-ease);
}

.wpft__legal-nav a:first-child { padding-left: 0; }
.wpft__legal-nav a:last-child  { border-right: none; padding-right: 0; }
.wpft__legal-nav a:hover       { color: var(--wpft-white); }

.wpft__disclaimer {
  font-size: 11px;
  color: var(--wpft-s500);
  max-width: 520px;
  line-height: 1.5;
  margin: 0;
}

.wpft__back-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--wpft-s300);
  font-family: var(--wpft-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: color var(--wpft-ease), border-color var(--wpft-ease), background var(--wpft-ease);
  flex-shrink: 0;
  align-self: center;
}

.wpft__back-top:hover {
  color: var(--wpft-white);
  border-color: var(--wpft-teal);
  background: rgba(0,180,216,.06);
}

.wpft__back-arrow {
  font-size: 16px;
  line-height: 1;
  display: block;
  transition: transform var(--wpft-ease);
}

.wpft__back-top:hover .wpft__back-arrow { transform: translateY(-2px); }

/* ============================================================
   CATEGORY ARCHIVE PAGES
   ============================================================ */

.wpnav-archive { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }

.wpnav-archive__title { font-size: 20px; font-weight: 700; color: #101828; margin: 0 0 12px 0; }

.wpnav-archive__desc { font-size: 15px; color: #475467; line-height: 1.7; margin: 0 0 32px 0; }

.wpnav-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.wpnav-archive__card {
  display: block;
  padding: 16px 20px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 10px;
  text-decoration: none;
  transition: box-shadow 0.15s;
}

.wpnav-archive__card:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, 0.06); }

.wpnav-archive__card-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #101828;
  margin-bottom: 3px;
}

.wpnav-archive__card-excerpt {
  display: block;
  font-size: 14px;
  color: #475467;
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE: Tablet (< 1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .wpnav-toc { display: none; }
  .wpnav-toc-wrapper { display: block; }

  .wpnav-related__grid { grid-template-columns: repeat(2, 1fr); }

  .wpft__grid { grid-template-columns: repeat(2, 1fr); }

  .wpnav-archive__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE: Mobile (< 768px)
   ============================================================ */

@media (max-width: 768px) {
  .wpnav-nav { display: none; }
  .wpnav-hamburger { display: block; }
  .wpnav-bar__cta { display: none; }
  .wpnav-panel { display: none !important; }

  .wpnav-related__grid { grid-template-columns: 1fr; }

  .wpft__grid { grid-template-columns: 1fr; gap: 28px; }
  .wpft__bottom-inner { flex-direction: column; align-items: flex-start; }
  .wpft__back-top { align-self: flex-start; }
  .wpft__badge { display: none; }
  .wpft__container { padding: 0 20px; }

  .wpnav-search { padding: 80px 16px 0; }
  .wpnav-search__inner form { flex-direction: column; }
}

/* ============================================================
   UTILITY
   ============================================================ */

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}

/* ============================================================
   TOP PICKS COMPARISON BLOCK v5 (wp-tpcb) — compact decision table
   Content column ~516px. Grid: 72px pick | 120px provider | 1fr reason | 88px action
   Padding 16px sides, gap 12px → 168px available for reason column.
   ============================================================ */

/* Container */
.wp-tpcb { background: #fff; border: 1px solid #e5eaf0; border-radius: 20px; overflow: hidden; margin: 48px 0 52px; max-width: 800px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 36px rgba(15,23,42,.05); }

/* Header — plain white, 2-line */
.wp-tpcb__hd { padding: 20px 16px 16px; background: #fff; border-bottom: 1px solid #e8edf3; }
.wp-tpcb__hd-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.wp-tpcb__title { margin: 0 !important; font-size: 17px !important; font-weight: 700; color: #111827; line-height: 1.3; letter-spacing: -0.01em; }
.wp-tpcb__all { font-size: 13px !important; font-weight: 600; color: #2563EB; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.wp-tpcb__all:hover { text-decoration: underline; }
.wp-tpcb__meta { margin: 8px 0 0 !important; padding: 0; background: none; font-size: 13px !important; line-height: 1.35; color: #64748b; }
.wp-tpcb__summary { display: none; }
.wp-tpcb__cats { display: none; }

/* Table column header */
.wp-tpcb__col-hd { display: grid; grid-template-columns: 200px minmax(0,1fr) 88px; column-gap: 12px; padding: 9px 16px; background: #f8fafc; border-bottom: 1px solid #e8edf3; font-size: var(--fs-micro, 11px); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #8a94a6; }

/* Rows — 3-col with pill banner spanning full width */
.wp-tpcb__row,
.wp-tpcb__row--top { display: grid; grid-template-columns: 200px minmax(0,1fr) 88px; column-gap: 12px; align-items: center; padding: 0 16px 14px; background: #fff; border-bottom: 1px solid #edf0f4; }
.wp-tpcb__row:last-child,
.wp-tpcb__row--top:last-child { border-bottom: none; }
.wp-tpcb__row:hover { background: #fbfcfe; }
.wp-tpcb__row--top { background: #f7fbff; }
.wp-tpcb__row--top:hover { background: #f0f6ff; }

/* Pill banner — spans full row width above content */
.wp-tpcb__banner { grid-column: 1 / -1; padding: 10px 0 8px; }
.wp-tpcb__banner-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-micro, 11px); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.wp-tpcb__row .wp-tpcb__banner-pill { background: #f1f3f6; color: #6b7280; }
.wp-tpcb__row--top .wp-tpcb__banner-pill { background: #2563eb; color: #fff; }

/* Col 1: provider cell — logo + name */
.wp-tpcb__rank { display: none; }
.wp-tpcb__badge { display: none; }
.wp-tpcb__label { display: none; }
.wp-tpcb__provider-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wp-tpcb__tile { width: 52px; height: 42px; flex: 0 0 52px; background: #fff; border: 1px solid #e6ebf1; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wp-tpcb__logo { display: block; max-height: 28px; max-width: 44px; width: auto; height: auto; filter: brightness(0); opacity: .82; }
.wp-tpcb__provider-info { min-width: 0; }
.wp-tpcb__name { font-size: 15px !important; font-weight: 700; color: #111827; margin: 0 !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Legacy aliases */
.wp-tpcb__mc { display: contents; }
.wp-tpcb__pc { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 2px; }
.wp-tpcb__eyebrow { display: none; }

/* Col 2: reason */
.wp-tpcb__desc { margin: 0 !important; font-size: 13px !important; line-height: 1.45; color: #334155; }

/* Col 3: CTA */
.wp-tpcb__cc { display: flex; justify-content: flex-end; }
.wp-tpcb__btn { width: 80px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff !important; font-size: var(--fs-meta, 13px); font-weight: 700; border-radius: 8px; text-decoration: none !important; white-space: nowrap; box-sizing: border-box; }
.wp-tpcb__btn:hover { background: #1d4ed8; }
.wp-tpcb__why { display: none; }

/* Per-provider optical logo scale */
.wp-tpcb__logo--papaya-global { max-height: 13px; max-width: 20px; }
.wp-tpcb__logo--multiplier { max-height: 13px; max-width: 20px; }
.wp-tpcb__logo--safeguard-global { max-height: 12px; max-width: 20px; }
.wp-tpcb__logo--omnipresent { max-height: 13px; max-width: 20px; }
.wp-tpcb__logo--adp-globalview { max-height: 12px; max-width: 20px; }
/* PNG logos — don't invert to black */
.wp-tpcb__logo--globalization-partners { filter: none; opacity: 1; max-height: 30px; max-width: 48px; }

/* CTA variant — compact secondary block */
.wp-tpcb--cta { max-width: 680px; margin: 32px 0 40px; }
.wp-tpcb--cta .wp-tpcb__title { font-size: 15px; }
.wp-tpcb--cta .wp-tpcb__meta { margin: 4px 0 0 0; padding: 0 22px 12px; font-size: var(--fs-micro, 11px); color: #667085; }

@media (max-width: 640px) {
  .wp-tpcb { border-radius: 16px; }
  .wp-tpcb__hd { padding: 16px 14px 14px; }
  .wp-tpcb__title { font-size: var(--fs-body, 15px); }
  .wp-tpcb__col-hd { display: none; }
  .wp-tpcb__row,
  .wp-tpcb__row--top { grid-template-columns: minmax(0,1fr) 76px; grid-template-areas: "banner banner" "provider action" "reason reason"; gap: 6px 8px; padding: 0 14px 14px; }
  .wp-tpcb__banner { grid-area: banner; }
  .wp-tpcb__provider-cell { grid-area: provider; }
  .wp-tpcb__desc { grid-area: reason; }
  .wp-tpcb__cc { grid-area: action; align-self: start; padding-top: 2px; }
  .wp-tpcb__btn { width: 72px; height: 32px; font-size: var(--fs-micro, 11px); }
  .wp-tpcb__row--top { background: #f7fbff; }
}

/* --cta variant mobile override (chat3 design language, scoped to --cta).
   Markup here is __tile/__pc/__cc — the base mobile grid above maps only
   __provider-cell/__desc, so on mobile this variant would auto-place into
   the wrong cells (logo wide, text 76px, one word per line). Stack it.
   2026-05-26 — fixes country-page CTA mobile bug reported on /united-kingdom/. */
@media (max-width: 640px) {
  .wp-tpcb--cta { margin: 24px 0 32px; border-radius: 14px; }
  .wp-tpcb--cta .wp-tpcb__hd { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px 6px; }
  .wp-tpcb--cta .wp-tpcb__title { font-size: var(--fs-read, 17px) !important; line-height: 1.3; }
  .wp-tpcb--cta .wp-tpcb__meta { padding: 0 16px 12px; }
  .wp-tpcb--cta .wp-tpcb__row,
  .wp-tpcb--cta .wp-tpcb__row--top {
    display: block;
    grid-template-columns: none;
    grid-template-areas: none;
    padding: 14px 16px 18px;
    background: #fff;
    border-bottom: 1px solid #F2F4F7;
  }
  .wp-tpcb--cta .wp-tpcb__row:last-child,
  .wp-tpcb--cta .wp-tpcb__row--top:last-child { border-bottom: none; }
  .wp-tpcb--cta .wp-tpcb__tile { display: none; }
  .wp-tpcb--cta .wp-tpcb__pc { display: block; min-width: 0; }
  .wp-tpcb--cta .wp-tpcb__name {
    font-size: 16px !important;
    font-weight: 700;
    color: #101828;
    margin: 0 0 6px 0 !important;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
  }
  .wp-tpcb--cta .wp-tpcb__desc {
    font-size: 15px !important;
    line-height: 1.55;
    color: #344054;
    margin: 0 0 12px 0 !important;
  }
  .wp-tpcb--cta .wp-tpcb__cc {
    display: block;
    justify-content: initial;
    padding-top: 0;
  }
  .wp-tpcb--cta .wp-tpcb__btn {
    display: flex;
    width: 100%;
    max-width: 320px;
    height: 44px;
    margin: 0 auto;
    font-size: 14px;
    border-radius: 10px;
  }
}

/* ============================================================
   TOP PICKS COMPARISON BLOCK v6 (wp-tpcb--list) — wpcs design language
   Adopts the wp-country-cta.html (wpcs-) visual pattern for best-of pages.
   Scoped under .wp-tpcb--list so v5 markup on other pages stays unchanged.
   Ladder-locked: 15 title/name/hook, 14 btn, 13 rev, 12 disc, 11 chip.
   ============================================================ */

.wp-tpcb.wp-tpcb--list {
  background: #F6F8FB;
  border: 1px solid #E4E7EC;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  margin: 28px 0;
  overflow: hidden;
  color: #101828;
  max-width: 800px;
}

.wp-tpcb--list .wp-tpcb__hd {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px 14px;
  background: #FFFFFF;
  border-bottom: 1px solid #E4E7EC;
}
.wp-tpcb--list .wp-tpcb__title {
  font-size: var(--fs-body, 15px) !important;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: #101828;
  margin: 0 !important;
  line-height: 1.3;
}
.wp-tpcb--list .wp-tpcb__disc {
  font-size: var(--fs-micro, 11px);
  color: #667085;
  font-weight: 500;
  white-space: nowrap;
}

.wp-tpcb--list .wp-tpcb__row,
.wp-tpcb--list .wp-tpcb__row--top {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr) 200px;
  align-items: center;
  column-gap: 22px;
  padding: 18px 22px;
  background: transparent;
  border-bottom: 1px solid #E4E7EC;
}
.wp-tpcb--list .wp-tpcb__row:last-child,
.wp-tpcb--list .wp-tpcb__row--top:last-child { border-bottom: none; }
.wp-tpcb--list .wp-tpcb__row--top { background: #F7FBFF; }

.wp-tpcb--list .wp-tpcb__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 32px;
  background: none;
  border: none;
  width: auto;
  max-width: 108px;
  max-height: none;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: visible;
  filter: none;
  opacity: 1;
}
/* Logo IMG: explicit per-provider dims via CSS (theme has global img{height:auto}
   which would override HTML height attr). object-fit: contain handles any
   aspect mismatch between forced box and natural SVG. */
.wp-tpcb--list .wp-tpcb__logo-img {
  display: block;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
  opacity: 1 !important;
  object-fit: contain;
  object-position: left center;
  height: 22px !important;
  width: 72px !important;
}
.wp-tpcb--list .wp-tpcb__logo--remote                { width: 72px !important; height: 22px !important; }
.wp-tpcb--list .wp-tpcb__logo--deel                  { width: 64px !important; height: 22px !important; }
.wp-tpcb--list .wp-tpcb__logo--multiplier            { width: 80px !important; height: 22px !important; }
.wp-tpcb--list .wp-tpcb__logo--oyster                { width: 80px !important; height: 22px !important; }
.wp-tpcb--list .wp-tpcb__logo--papaya-global         { width: 24px !important; height: 24px !important; }
.wp-tpcb--list .wp-tpcb__logo--rippling              { width: 28px !important; height: 24px !important; }
.wp-tpcb--list .wp-tpcb__logo--velocity-global       { width: 64px !important; height: 22px !important; }
.wp-tpcb--list .wp-tpcb__logo--globalization-partners{ width: 88px !important; height: 24px !important; }
.wp-tpcb--list .wp-tpcb__logo--safeguard-global      { width: 96px !important; height: 18px !important; }
.wp-tpcb--list .wp-tpcb__logo--atlas                 { width: 80px !important; height: 22px !important; }
.wp-tpcb--list .wp-tpcb__logo--lano                  { width: 80px !important; height: 22px !important; }

.wp-tpcb--list .wp-tpcb__body { min-width: 0; }
.wp-tpcb--list .wp-tpcb__line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 5px;
}
.wp-tpcb--list .wp-tpcb__name {
  font-size: var(--fs-body, 15px) !important;
  font-weight: 700;
  color: #101828;
  letter-spacing: -0.1px;
  margin: 0 !important;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.wp-tpcb--list .wp-tpcb__chip {
  font-size: var(--fs-micro, 11px);
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #DBEAFE;
  letter-spacing: 0.1px;
  white-space: nowrap;
  text-transform: none;
  height: auto;
}
.wp-tpcb--list .wp-tpcb__chip--pick {
  background: #2563EB;
  color: #fff;
  border-color: #2563EB;
}
.wp-tpcb--list .wp-tpcb__hook {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.45;
  color: #302e2c;
  margin: 0 !important;
}

.wp-tpcb--list .wp-tpcb__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
}
.wp-tpcb--list .wp-tpcb__btn {
  font-size: var(--fs-body, 15px) !important;
  font-weight: 600;
  letter-spacing: -0.1px;
  background: #2563EB;
  color: #fff !important;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1px solid #2563EB;
  text-decoration: none !important;
  text-align: center;
  display: inline-block;
  line-height: 1.1;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  white-space: normal;
}
.wp-tpcb--list .wp-tpcb__btn:hover,
.wp-tpcb--list .wp-tpcb__btn:focus {
  background: #1D4ED8;
  border-color: #1D4ED8;
  color: #fff !important;
}
.wp-tpcb--list .wp-tpcb__rev {
  font-size: var(--fs-meta, 13px);
  font-weight: 500;
  color: #2563EB;
  text-decoration: none;
  text-align: center;
  padding: 2px 0;
  display: block;
}
.wp-tpcb--list .wp-tpcb__rev:hover { text-decoration: underline; }

@media (max-width: 720px) {
  /* Container: white card (drop grey tray on mobile), 14px radius */
  .wp-tpcb.wp-tpcb--list {
    background: #FFFFFF;
    border-radius: 14px;
  }
  /* Header: stacked title above disclosure */
  .wp-tpcb--list .wp-tpcb__hd {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 20px 14px;
  }
  .wp-tpcb--list .wp-tpcb__title {
    font-size: 17px !important;
    letter-spacing: -0.2px;
    line-height: 1.25;
  }
  .wp-tpcb--list .wp-tpcb__disc {
    font-size: var(--fs-micro, 11px);
    white-space: normal;
  }
  /* Row layout: single column, no grid areas, lighter divider */
  .wp-tpcb--list .wp-tpcb__row,
  .wp-tpcb--list .wp-tpcb__row--top {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    padding: 24px 22px !important;
    border-bottom-color: #F2F4F7 !important;
    background: transparent !important;
  }
  .wp-tpcb--list .wp-tpcb__row:last-child,
  .wp-tpcb--list .wp-tpcb__row--top:last-child {
    padding-bottom: 28px !important;
  }
  /* Drop logo + review link + top-pick tint */
  .wp-tpcb--list .wp-tpcb__logo { display: none !important; }
  .wp-tpcb--list .wp-tpcb__rev { display: none !important; }
  /* Hide the arrow on mobile buttons (wrapped in .wp-tpcb__btn-arr) */
  .wp-tpcb--list .wp-tpcb__btn-arr { display: none !important; }
  /* Rank counter prefix "1. ", "2. ", … */
  .wp-tpcb--list { counter-reset: provider; }
  .wp-tpcb--list .wp-tpcb__row,
  .wp-tpcb--list .wp-tpcb__row--top { counter-increment: provider; }
  .wp-tpcb--list .wp-tpcb__name::before {
    content: counter(provider) ". ";
    color: #98A2B3;
    font-weight: 700;
    margin-right: 4px;
    font-variant-numeric: tabular-nums;
  }
  /* Name + chip line: name left, chip right */
  .wp-tpcb--list .wp-tpcb__line {
    justify-content: space-between;
    margin: 0 0 8px !important;
    flex-wrap: nowrap;
    gap: 12px;
  }
  body .entry-content .wp-tpcb--list .wp-tpcb__name,
  .wp-tpcb--list .wp-tpcb__name {
    font-size: 17px !important;
    letter-spacing: -0.2px;
    line-height: 1.2 !important;
  }
  .wp-tpcb--list .wp-tpcb__chip {
    transform: translateY(2px);
    padding: 5px 9px;
    background: #F2F4F7;
    color: #475467;
    border-color: #EAECF0;
  }
  .wp-tpcb--list .wp-tpcb__chip--pick {
    background: #2563EB;
    color: #fff;
    border-color: #2563EB;
  }
  /* Hook: 15px / 1.45 / muted slate, 16px gap to button */
  body .entry-content .wp-tpcb--list .wp-tpcb__hook,
  .wp-tpcb--list p.wp-tpcb__hook {
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #475467 !important;
    margin: 0 0 16px !important;
  }
  /* Button: 42px tall × max-width 320, centred, no arrow */
  .wp-tpcb--list .wp-tpcb__actions {
    width: 100%;
    align-items: stretch;
  }
  .wp-tpcb--list .wp-tpcb__btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}

/* ============================================================
   FEATURED IMAGE — hide on singular pages (show only in archive thumbnails)
   GP outputs .featured-image inside .inside-article on single posts/pages.
   ============================================================ */
.wp-singular .featured-image { display: none !important; }

/* ============================================================
   WPTC SUB-PAGE LINKS — inherits page defaults to match Related guides
   ============================================================ */
.wptc-subpage-links { margin: 32px 0; }

/* ============================================================
   WORDPRESS EMOJI IMG — restore size constraint
   SiteGround's "Emojis_Removal" optimiser strips the
   `wp-emoji-styles-inline-css` <style> from <head>, but does NOT stop
   WP from converting characters like ℹ into <img class="emoji"> when
   disclosure HTML passes through wptexturize() / the_content filters.
   Without WP's inline rule the emoji <img> has no width/height attrs,
   so `.entry-content img { max-width:100%; height:auto }` blows it up
   to fill the content column (~640px square). Re-add the constraint
   here so it survives any future caching/optimiser change.
   ============================================================ */
img.emoji,
img.wp-smiley {
    display: inline !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.1em !important;
    margin: 0 0.07em !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   COMMERCIAL DISCLOSURE — compact icon + hover/focus tooltip
   wpnav_commercial_disclosure injects p.wpnav-disclosure as the first
   child of .entry-content with a small info button and verified-data
   stamp. Full disclosure text reveals on hover/focus of the button.
   ============================================================ */
.entry-content > p.wpnav-disclosure {
    margin: 24px 0 28px !important;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 13px;
    color: #667085;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1.4;
}
.entry-content > p.wpnav-disclosure + div {
    margin-bottom: 40px !important;
}
.wpnav-disclosure__tip {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.wpnav-disclosure__btn {
    background: transparent;
    border: 0;
    padding: 2px;
    margin: 0;
    cursor: help;
    color: #667085;
    line-height: 0;
    border-radius: 999px;
    transition: color 0.15s;
}
.wpnav-disclosure__btn:hover,
.wpnav-disclosure__btn:focus-visible {
    color: #2563EB;
    outline: 2px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}
.wpnav-disclosure__info {
    display: block;
}
.wpnav-disclosure__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: -4px;
    width: min(320px, 80vw);
    background: #fff;
    color: #1F2937;
    border: 1px solid #E4E7EC;
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
    font-size: 13px;
    line-height: 1.55;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
    pointer-events: none;
}
.wpnav-disclosure__panel::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 10px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-top: 1px solid #E4E7EC;
    border-left: 1px solid #E4E7EC;
    transform: rotate(45deg);
}
.wpnav-disclosure__tip:hover .wpnav-disclosure__panel,
.wpnav-disclosure__tip:focus-within .wpnav-disclosure__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
    pointer-events: auto;
}
.wpnav-disclosure__link {
    color: #2563EB;
    font-weight: 600;
    text-decoration: none;
}
.wpnav-disclosure__link:hover {
    text-decoration: underline;
}
.wpnav-disclosure__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.wpnav-disclosure__check {
    color: #16A34A;
    flex-shrink: 0;
}

/* TOC sidebar alignment is handled dynamically in sidebar-toc.js
   (the JS measures the first non-disclosure paragraph and sets
   inline margin-top, which avoids hard-coding offsets and handles
   per-page variation in title/disclosure heights). No CSS rule here. */


/* ============================================================
   RELATED COMMERCIAL CTA — injected at foot of informational pages
   Links informational content to commercial shortlisting pages.
   (Additive block from origin/main; does not conflict with the
   tooltip-disclosure component above — different class prefix.)
   ============================================================ */
.wpnav-related-cta {
  background: #f0f6ff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 40px 0 24px;
}
.wpnav-related-cta h3 {
  font-size: 16px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 10px;
}
.wpnav-related-cta p {
  font-size: 14px;
  color: #475467;
  margin: 0;
  line-height: 1.6;
}
.wpnav-related-cta a { color: #2563EB; text-decoration: none; font-weight: 500; }
.wpnav-related-cta a:hover { text-decoration: underline; }

/* ============================================================
   COMMERCIAL DISCLOSURE BANNER — origin/main version DROPPED.
   The button-tooltip implementation above (HEAD) supersedes the
   banner-style .wpnav-disclosure rules from origin/main; the matching
   PHP in inc/schema-extras.php builds the tooltip markup, not the
   banner markup. Keeping the banner styles would clash with the
   tooltip styling and break the live disclosure component.
   ============================================================ */

/* ============================================================
   CLS PREVENTION — reserve layout space before assets load
   Prevents Cumulative Layout Shift on Core Web Vitals.
   (Additive block from origin/main.)
   ============================================================ */

/* Vendor logo tiles: container is already fixed-size (52×42); add containment
   so the browser knows not to resize the tile when the image loads. */
.wp-tpcb__tile { contain: size layout; }
.wp-tpcb__logo { aspect-ratio: 44 / 28; }

/* Article body images: always take their natural aspect ratio once loaded,
   never overflow the column, never cause height recalculation. */
.entry-content img,
.inside-article img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Verdict card and comparison table logos */
.wptc-verdict__logo,
.wptc-logo,
.wp-scpb__logo { aspect-ratio: 3 / 2; height: auto; }

/* ============================================================
   STARTUP COMPARISON PICKS BLOCK (wp-scpb) — global styles
   Mirrors scripts/build_scpb.py SCPB_CSS so pages render correctly
   even if the inline <style> block was stripped during a rewrite.
   ============================================================ */
.wp-scpb { background: #fff; border: 1px solid #e5eaf0; border-radius: 20px; overflow: hidden; margin: 48px 0 52px; max-width: 800px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 36px rgba(15,23,42,.05); }
.wp-scpb-hd { padding: 20px 16px 16px; background: #fff; border-bottom: 1px solid #e8edf3; }
.wp-scpb-hd-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.wp-scpb-title { font-size: 17px !important; font-weight: 700; color: #111827; margin: 0 !important; line-height: 1.3; letter-spacing: -0.01em; }
.wp-scpb-all { font-size: 13px !important; font-weight: 600; color: #2563EB; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.wp-scpb-all:hover { text-decoration: underline; }
.wp-scpb-meta { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.35; color: #64748b; }
.wp-scpb-col-hd { display: grid; grid-template-columns: 200px minmax(0,1fr) 88px; column-gap: 12px; padding: 9px 16px; background: #f8fafc; border-bottom: 1px solid #e8edf3; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #8a94a6; }
.wp-scpb-row { display: grid; grid-template-columns: 200px minmax(0,1fr) 88px; column-gap: 12px; align-items: center; padding: 0 16px 14px; background: #fff; border-bottom: 1px solid #edf0f4; }
.wp-scpb-row--top { background: #f7fbff; }
.wp-scpb-row:last-of-type { border-bottom: none; }
.wp-scpb-banner { grid-column: 1 / -1; padding: 10px 0 8px; }
.wp-scpb-banner-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; background: #f1f3f6; color: #6b7280; }
.wp-scpb-row--top .wp-scpb-banner-pill { background: #2563eb; color: #fff; }
.wp-scpb-provider { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wp-scpb-logo-box { width: 52px; height: 42px; flex: 0 0 52px; border: 1px solid #e6ebf1; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; }
.wp-scpb-logo-box img { max-width: 44px !important; max-height: 28px !important; width: auto !important; height: auto !important; object-fit: contain; filter: brightness(0); opacity: .82; }
.wp-scpb-pinfo { min-width: 0; }
.wp-scpb-name { margin: 0 !important; font-size: 15px !important; font-weight: 700; color: #111827; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-scpb-reason { margin: 0 !important; font-size: 13px !important; color: #334155; line-height: 1.45; }
.wp-scpb-action { display: flex; justify-content: flex-end; }
.wp-scpb-btn { width: 80px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: #2563eb; color: #fff !important; font-size: 12px; font-weight: 700; border-radius: 8px; text-decoration: none !important; white-space: nowrap; box-sizing: border-box; }
.wp-scpb-btn:hover { background: #1d4ed8; color: #fff !important; }
@media (max-width: 640px) {
  .wp-scpb { border-radius: 16px; }
  .wp-scpb-col-hd { display: none; }
  .wp-scpb-row { grid-template-columns: minmax(0,1fr) 76px; grid-template-areas: "banner banner" "provider action" "reason reason"; gap: 6px 8px; padding: 0 14px 14px; }
  .wp-scpb-banner { grid-area: banner; }
  .wp-scpb-provider { grid-area: provider; }
  .wp-scpb-reason { grid-area: reason; }
  .wp-scpb-action { grid-area: action; align-self: start; padding-top: 2px; }
  .wp-scpb-btn { width: 72px; height: 32px; font-size: 11px; }
}

/* Score / rating badges: reserve minimum height so badge load doesn't
   shift surrounding text. */
.wptc-score,
.wptc-rating,
[class*="rating-badge"] { min-height: 20px; display: inline-flex; align-items: center; }


/* ============================================================
   AUTHOR BIO CARD — visible E-E-A-T signal under the article body
   Renders inside .inside-article via generate_after_content hook.
   (Additive block from origin/main.)
   ============================================================ */
.wpnav-author-bio {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 56px 0 32px;
  padding: 22px 24px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.wpnav-author-bio__avatar-wrap {
  flex: 0 0 80px;
}
.wpnav-author-bio__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.wpnav-author-bio__body {
  flex: 1 1 auto;
  min-width: 0;
}
.wpnav-author-bio__kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.wpnav-author-bio__name {
  font-size: 18px;
  font-weight: 700;
  color: #101828;
  margin: 0 0 2px;
  line-height: 1.3;
}
.wpnav-author-bio__name a {
  color: inherit;
  text-decoration: none;
}
.wpnav-author-bio__name a:hover {
  color: #2563EB;
  text-decoration: underline;
}
.wpnav-author-bio__title {
  font-size: 13px;
  color: #2563EB;
  font-weight: 600;
  margin: 0 0 10px;
}
.wpnav-author-bio__desc {
  font-size: 14px;
  color: #475467;
  line-height: 1.6;
  margin: 0 0 12px;
}
.wpnav-author-bio__meta {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wpnav-author-bio__profile-link {
  color: #2563EB;
  text-decoration: none;
  font-weight: 500;
}
.wpnav-author-bio__profile-link:hover {
  text-decoration: underline;
}
.wpnav-author-bio__sep {
  color: #d1d5db;
}
.wpnav-author-bio__reviewed {
  color: #6b7280;
}

@media (max-width: 640px) {
  .wpnav-author-bio {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    margin: 40px 0 24px;
  }
  .wpnav-author-bio__avatar-wrap { flex: 0 0 auto; }
  .wpnav-author-bio__avatar { width: 64px; height: 64px; }
  .wpnav-author-bio__name { font-size: 17px; }
  .wpnav-author-bio__desc { font-size: 13px; }
}

/* Horizontal scroll for any in-content table that exceeds the column
   width once the sidebar TOC is present (narrower content column). */
.wpnav-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
}

.wpnav-table-scroll > table { margin: 0; }

/* ============================================================
   MOBILE READABILITY PASS (2026-05-26, v3.5.8)
   Three reader-reported issues on /united-kingdom/ and siblings:
   1. Side padding too generous — 20px each side ate 40px of a 390px
      screen, leaving 310px and ~36-43 chars per line (sub-optimal,
      target 45-65).
   2. Body type at 17px feels small at thumb distance; ratio against
      32px H2 is also off when the column is so narrow.
   3. The desktop "no more than 2-3 lines without a break" rule
      produces 7-9-line walls on mobile (one third the desktop width).
      We can't shorten paragraphs from CSS, but we can make the
      paragraph BREAK clearly visible by widening the bottom margin
      so the rhythm reads as a rhythm instead of one continuous block.
   Scoped to <=640px so desktop layout is unchanged.
   ============================================================ */
@media (max-width: 640px) {
  /* 1. Tighten side gutter — gain ~12px of content width per row */
  body.generatepress .inside-article,
  body .inside-article { padding-left: 14px !important; padding-right: 14px !important; }

  /* 2. Body type up one notch + heavier paragraph spacing for rhythm.
        GP customizer ships inline CSS that wins on plain specificity,
        so these rules carry !important to override at <=640px only. */
  /* body:not(.wp-redesigned) — the 2026 redesign blocks (#wp-rev etc.) own
     their full type scale; only the OLD content design wants these bumps. */
  body:not(.wp-redesigned) .entry-content,
  body:not(.wp-redesigned) .inside-article .entry-content { font-size: 20px !important; }
  body:not(.wp-redesigned) .entry-content p,
  body:not(.wp-redesigned) .inside-article .entry-content p {
    font-size: 20px !important;
    line-height: 1.65 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 22px !important;
  }
  /* Lists inherit the same body-type bump */
  body:not(.wp-redesigned) .entry-content ul li,
  body:not(.wp-redesigned) .entry-content ol li { font-size: 20px !important; line-height: 1.65 !important; letter-spacing: 0.01em !important; }

  /* 3. H2 scaled to match new 19px body — 26px keeps clear hierarchy
        without dominating a 360-414px screen. H3 follows. */
  body:not(.wp-redesigned) .entry-content h2 { font-size: 26px !important; line-height: 1.25; margin-top: 32px; margin-bottom: 14px; }
  body:not(.wp-redesigned) .entry-content h3 { font-size: 20px !important; line-height: 1.3; margin-top: 24px; margin-bottom: 10px; }

  /* Verdict cards, at-a-glance spec rows, "Whichapp view" notes,
     and worked-example boxes hard-code their text inline at 14-16px,
     which reads as tiny next to the 20px reading body on a phone.
     Inline styles beat plain stylesheet rules, so an earlier non-
     important attempt never took effect. Target the small inline sizes
     directly and lift them to 18px (a clean step below the 20px body)
     WITH !important so it actually wins. Intentional micro-labels and
     pills are sized via component classes, not these inline 14-16px
     values, so they stay untouched. */
  body:not(.wp-redesigned) .entry-content [style*="font-size: 14px"],
  body:not(.wp-redesigned) .entry-content [style*="font-size:14px"],
  body:not(.wp-redesigned) .entry-content [style*="font-size: 15px"],
  body:not(.wp-redesigned) .entry-content [style*="font-size:15px"],
  body:not(.wp-redesigned) .entry-content [style*="font-size: 16px"],
  body:not(.wp-redesigned) .entry-content [style*="font-size:16px"] { font-size: 18px !important; }

  /* Class-based panels with no inline size — same readability floor. */
  body:not(.wp-redesigned) .entry-content ul.wp-checklist li { font-size: 18px !important; line-height: 1.55; }

  /* Call-out / note boxes hard-code desktop padding (20-28px) inline,
     which on a phone insets the text into a narrow central column with
     wide empty borders. Trim horizontal padding to 16px and vertical to
     16px so the text reclaims width. !important beats the inline value. */
  body .entry-content div[style*="background"],
  body .entry-content div[style*="border-left"],
  body .entry-content div[style*="border-radius"] { padding: 16px !important; }

  /* Boxes that lead with a stacked label/value row floated their first
     label ~20px down (box top padding + row padding). Trim the box top
     inset so the label sits near the top. Scoped with :has() so prose
     note-boxes (which lead with a paragraph) keep their 16px top. */
  body .entry-content div[style*="background"]:has(span[style*="flex: 0 0"]),
  body .entry-content div[style*="border-radius"]:has(span[style*="flex: 0 0"]) {
    padding-top: 8px !important;
  }

/* ============================================================
   /tools/* MOBILE LAYOUT FIXES (2026-05-27, v3.5.10)
   Audit pass at 390x844 found four issues affecting all 13 Alpine
   tools (cite_publish_tool*.py output):
   1. Inline `padding:40px` on the wrapper div around every Alpine
      [x-data] root eats 80px of horizontal space — form renders at
      226px on a 390px viewport. "Mixed" button squashes to 35px.
   2. Result cards use `grid-template-columns: repeat(4,1fr)` and
      `1fr 1fr 1fr` rows that never collapse — 47px-per-cell on mobile.
   3. SSR reference table (build_reference_section) sits inside
      <details> which can balloon past 390px when long content forces
      table to grow beyond width:100%.
   4. Country <select> at 37-40px tall — under Apple HIG 44px.
   Scope is .wpt-tool-shell so only tool pages are touched.
   ============================================================ */
@media (max-width: 720px) {
  /* 1. Clamp the inline padding:40px wrapper around the calculator card.
        Inline styles win on specificity unless we use !important. */
  .wpt-tool-shell > div[style*="padding:40px"],
  .wpt-tool-shell > div[style*="padding: 40px"] {
    padding: 16px !important;
  }

  /* 2. Collapse every multi-column inline grid inside the tool card.
        Each tool emits its result tiles via inline `grid-template-columns`;
        force single column on mobile so 22px result numbers can breathe.
        Includes the bottom "Related tools" 3-card grid which is outside
        the calculator card but still inside .wpt-tool-shell. */
  .wpt-tool-shell [style*="grid-template-columns: repeat(4"],
  .wpt-tool-shell [style*="grid-template-columns:repeat(4"],
  .wpt-tool-shell [style*="grid-template-columns: repeat(3"],
  .wpt-tool-shell [style*="grid-template-columns:repeat(3"],
  .wpt-tool-shell [style*="grid-template-columns: repeat(2"],
  .wpt-tool-shell [style*="grid-template-columns:repeat(2"],
  .wpt-tool-shell [style*="grid-template-columns: 1fr 1fr 1fr"],
  .wpt-tool-shell [style*="grid-template-columns:1fr 1fr 1fr"],
  .wpt-tool-shell [style*="grid-template-columns: 1fr 1fr"],
  .wpt-tool-shell [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 3. Make sure the SSR reference table's <details> never overflows the
        viewport. The inner div has overflow-x:auto but <details> itself
        can grow past viewport when table content is unbreakable. */
  .wpt-tool-shell details.wpt-ref-table,
  details.wpt-ref-table {
    max-width: 100% !important;
    overflow-x: hidden;
  }
  details.wpt-ref-table > div { max-width: 100% !important; overflow-x: auto !important; }

  /* 4. Tap target: country selects must clear 44px. */
  .wpt-tool-shell select,
  .wpt-tool-shell input[type="number"] {
    min-height: 44px !important;
  }

  /* 5. Stop button rows in the question pattern (tool2) from squashing
        below readable width. Force them to wrap onto their own row. */
  .wpt-tool-shell [style*="grid-template-columns: 1fr 80px"],
  .wpt-tool-shell [style*="grid-template-columns:1fr 80px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Responsive in-content images.
   ============================================================
   scripts/images/content_injector.py emits every editorial image with
   inline `style="max-width:640px;height:auto;display:block;margin:0 auto"`
   plus `width="640"` HTML attribute. On a 360px viewport the 640px
   max-width pushes the image past the content gutter (measured 11px
   overshoot 2026-05-27 across most /compare/* pages). Force every image
   inside .entry-content to clamp to its container — classic responsive
   pattern. The !important is needed to override the inline max-width.

   Scoped to non-home pages because the homepage wraps custom blocks
   (hp-hero-visual etc.) inside .entry-content and its 22px/96px logo
   override can't beat an unscoped !important. See commit 1e0fdd79
   for the same scoping in style.css. */
body:not(.home) .entry-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================================
   Label/value flex rows — stack on mobile.
   ============================================================
   Two flavors of this row pattern ship across the site:

   1. scripts/cite_render_callout.py — citation callouts:
        <div data-cite-type=...> ... <div style="display: flex; gap: 16px;">
          <span style="flex: 0 0 210px;">Label</span>
          <span style="flex: 1;">Value</span>
        ...

   2. scripts/apply_*_qrg.py and country/verdict-card publishers:
        <div style="background:#F6F8FB; ...">
          <div style="display: flex; gap: 20px; padding: 13px 0;">
            <span style="flex: 0 0 132px;">Label</span>
            <span style="flex: 1; line-height: 1.5;">Value</span>

   Both patterns overflow on 360px viewport when the fixed-width label
   plus unbreakable value content exceeds the content gutter. Measured
   2026-05-27: 7px on /best-eor-uk, 11px on /compare/* pages, hundreds
   of px on country verdict cards rendering raw JSON dicts. Stack
   label-over-value on mobile so the value column gets full width.

   :has() is supported by Chrome 105+, Safari 15.4+, Firefox 121+. */
@media (max-width: 720px) {
  /* Stack any label/value flex row. Not scoped to .entry-content because
     some callouts get duplicated outside .entry-content (mobile TOC
     wrapper, sidebar callout zones) and still need the same fix. */
  div[style*="display: flex"]:has(> span[style*="flex: 0 0"]),
  div[style*="display:flex"]:has(> span[style*="flex: 0 0"]) {
    flex-direction: column !important;
    gap: 6px !important;           /* was 4px: clearer space under the label */
    padding-top: 0 !important;      /* was inline 10px: label hugs the box top */
    padding-bottom: 4px !important;
  }
  /* Make the label fill the line + bold so it reads as label. */
  span[style*="flex: 0 0"][style*="px"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    font-weight: 600;
  }
  /* Force unbreakable values (e.g. corrupted dict-dump content on some
     country callouts) to wrap rather than push the page out. */
  span[style*="flex: 1"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0;
  }
  /* 3-column inline grids inside an <article> always collapse on mobile.
     The /tools/* related-tools grids get re-parented out of .entry-content
     during WP wpautop/filter passes, so the existing .wpt-tool-shell scope
     misses them. Scoping to `article` keeps the rule from leaking into nav. */
  article [style*="grid-template-columns:1fr 1fr 1fr"],
  article [style*="grid-template-columns: 1fr 1fr 1fr"],
  article [style*="grid-template-columns:repeat(3"],
  article [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* 2-column inline grids: allow columns to shrink below min-content via
     minmax(0, 1fr). Without this, cards with longish titles push the grid
     past its parent on 360px viewports (measured 22px overshoot on /tools/
     hub 2026-05-27). `:not()` keeps the rule from also matching the 3-col
     selector above. */
  article [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  article [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  article [style*="grid-template-columns:repeat(2"]:not([style*="repeat(3"]),
  article [style*="grid-template-columns: repeat(2"]:not([style*="repeat(3"]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  /* /tools/contractor-vs-employee/ — inline <style> hard-codes panel at
     minmax(320px,.85fr) minmax(480px,1.45fr), needing 800px+ to render.
     Collapse to single column and tighten input padding on mobile. */
  #cve .panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #cve .inputs {
    padding: 16px !important;
    border-right: none !important;
    min-width: 0 !important;
  }
  #cve .inputs > * {
    min-width: 0;
  }
  #cve [id$="-seg"] {
    flex-wrap: wrap;
  }
  #cve [id$="-seg"] button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
}

/* ============================================================
   /uk/ hub topic-card grid — collapse to single column on mobile.
   ============================================================
   update_uk_hub.py emits 9 sections of `<div style="display:grid;
   grid-template-columns:1fr 1fr;gap:16px;...">` inside `.entry-content`.
   Each card is `<div style="...padding:20px 24px;">` with a multi-word
   title — min-content is wider than what `1fr` can provide at 360px
   viewport, so the grid bleeds past its parent (~25px overshoot at
   360x800 measured 2026-05-27 by audit_mobile_crawler.py).

   Scope to `body.page-id-23136` so we don't disturb any other 2-col
   inline grids on the site. PAGE_ID matches the constant in
   scripts/update_uk_hub.py. */
@media (max-width: 720px) {
  body.page-id-23136 .entry-content [style*="grid-template-columns:1fr 1fr"],
  body.page-id-23136 .entry-content [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}