/* =========================================================================
   GLOBAL 2026 — shared design tokens, nav, footer, responsive rules.
   Loaded by layout-new.blade.php for every page using the new design.
   Extracted from html_prototypes/css/styles.css (lines covering shared
   tokens, .nav-bar-wrap, .footer-wrap, and their responsive rules).
   ========================================================================= */

/* =========================================================================
   DESIGN TOKENS — synced from Figma file rP1q5erxNQKyUuxqPmPZBU.
   Variable names mirror Figma's local-variable names so the same vocabulary
   works in design and code. Edit Figma → re-sync here; do not invent new
   token names ad-hoc. Categories below mirror Figma's collections:
     1. Primitives  → color/* + Spacing + Border radius
     2. Color Tokens (semantic) → card_body_surface, primary_surface
     3. Typography  → Font Family/*, Font Size/* (Desktop default, Mobile @media)
     4. Legacy aliases (kept so existing page CSS keeps resolving)
   ========================================================================= */
:root {
  /* ---- 1. PRIMITIVES — color ---- */
  /* Neutrals */
  --color-neutral-0:    #ffffff;
  --color-neutral-100:  #f2f2f2;
  --color-neutral-200:  #dad9d9;
  --color-neutral-300:  #b5b3b3;
  --color-neutral-400:  #858080;
  --color-neutral-600:  #544d4d;
  --color-neutral-800:  #231b1b;
  --color-neutral-1000: #000000;
  /* Red */
  --color-red-100: #fce9e8;
  --color-red-200: #f9d3d2;
  --color-red-300: #ec6663;
  --color-red-400: #e42521;
  --color-red-500: #b61d1a;
  --color-red-600: #5b0e0d;
  --color-red-700: #440b09;
  /* Yellow */
  --color-yellow-100: #fef9e9;
  --color-yellow-200: #fdf3d3;
  --color-yellow-300: #fad567;
  --color-yellow-400: #f9c426;
  --color-yellow-500: #c79c1e;
  --color-yellow-600: #634e0f;
  --color-yellow-700: #4a3a0b;
  /* Blue */
  --color-blue-100: #e9e9fb;
  --color-blue-200: #d4d3f7;
  --color-blue-300: #6a66e4;
  --color-blue-400: #2b25d9;
  --color-blue-500: #221dad;
  --color-blue-600: #110e56;
  --color-blue-700: #0c0b41;
  /* Light blue */
  --color-light-blue-100: #f2f2f7;
  /* Status */
  --color-status-green-light: #74af36;
  --color-status-red-light:   #da4144;

  /* ---- 1. PRIMITIVES — spacing (Figma `Spacing` collection, step values in px) ---- */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* ---- 1. PRIMITIVES — border radius (Figma `Border radius` collection) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-xl: 64px;

  /* ---- 2. SEMANTIC color tokens (Figma `Color Tokens` collection) ---- */
  --color-card-body-surface: var(--color-light-blue-100);
  --color-primary-surface:   var(--color-neutral-0);

  /* Primary (black) button — Figma `general/primary`, `unofficial/primary hover`,
     `general/primary foreground`. Apply on EVERY black button in the site:
     default, :hover, :disabled. */
  --color-btn-primary-bg:       #171717;
  --color-btn-primary-bg-hover: #404040;
  --color-btn-primary-fg:       #fafafa;

  /* ---- 3. TYPOGRAPHY — font families (Figma `Typography` collection) ---- */
  --font-family-display:  'Poppins', sans-serif;
  --font-family-headline: 'Poppins', sans-serif;
  --font-family-title:    'Poppins', sans-serif;
  --font-family-body:     'Poppins', sans-serif;
  --font-family-label:    'Poppins', sans-serif;

  /* ---- 3. TYPOGRAPHY — font sizes (Desktop mode; Mobile overrides below) ---- */
  --fs-display-large:    148px;
  --fs-display-medium:   117px;
  --fs-display-small:    92px;
  --fs-headline-large:   65px;
  --fs-headline-medium:  45px;
  --fs-headline-small:   40px;
  --fs-title-large:      36px;
  --fs-title-medium:     32px;
  --fs-title-small:      28px;
  --fs-body-large:       22px;
  --fs-body-medium:      18px;
  --fs-body-small:       16px;
  --fs-body-extra-small: 14px;
  --fs-label-medium:     12px;
  --fs-h1-web-page:      22px;

  /* ---- 4. LEGACY ALIASES — kept so existing page CSS keeps resolving.
       Do NOT introduce new aliases; use the canonical names above instead. ---- */
  --color-neutral-darkest: #0b0202;             /* custom page-bg accent, not in Figma */
  --color-neutral-darker:  var(--color-neutral-800);
  --color-neutral:         var(--color-neutral-400);
  --color-neutral-lighter: var(--color-neutral-200);
  --mobupps-black:         #141414;             /* brand black used on some sections */
  --bg-secondary:          var(--color-light-blue-100);
  --radius-small:          var(--radius-sm);
  --radius-medium:         var(--radius-md);
}

/* Mobile typography mode — mirrors Figma Typography collection's "Mobile" mode.
   Display sizes are intentionally unset in Figma for mobile (value 0); they
   inherit Desktop values here. */
@media (max-width: 767px) {
  :root {
    --fs-headline-large:   48px;
    --fs-headline-medium:  40px;
    --fs-headline-small:   32px;
    --fs-title-large:      32px;
    --fs-title-medium:     28px;
    --fs-title-small:      25px;
    --fs-body-large:       18px;
    --fs-body-medium:      16px;
    --fs-body-small:       14px;
    --fs-body-extra-small: 12px;
    --fs-h1-web-page:      16px;
  }
}

/* ===========================================================
   FIXED MAIN NAV (2026 design)
   =========================================================== */
.nav-bar-wrap {
  position: fixed;
  top: 30px;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.main-nav {
  pointer-events: auto;
  width: 856px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgba(232, 232, 232, 0.49);
  backdrop-filter: blur(7.3px);
  -webkit-backdrop-filter: blur(7.3px);
  border-radius: 8px;
  box-shadow: 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
}
.main-nav__logo { display: inline-flex; align-items: center; }
.main-nav__logo img { width: 122px; height: 31px; display: block; }
.main-nav__links { display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.main-nav__links li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
}
.main-nav__links a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  white-space: nowrap;
  text-decoration: none;
}
.main-nav__links li.has-caret { gap: 2px; padding-left: 8px; padding-right: 0; position: relative; }
.main-nav__links li.has-caret .caret { width: 16px; height: 16px; }
.nav-products-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  white-space: nowrap;
}
.nav-products-toggle .caret { transition: transform 0.2s ease; }
.nav-products-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top center;
  background: rgba(255, 255, 255, 0.71);
  backdrop-filter: blur(14.6px);
  -webkit-backdrop-filter: blur(14.6px);
  border-radius: 8px;
  box-shadow: 0 25px 37.6px -12px rgba(17, 12, 25, 0.21);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 101;
}
.nav-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.nav-dropdown a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  text-align: left;
  white-space: nowrap;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
  text-decoration: none;
}
.nav-dropdown a:hover { color: #b5b3b3; }
.main-nav__cta {
  background: var(--color-neutral-darkest) !important;
  color: #fff !important;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
/* Hover — keep white text (overrides layout.min.css's `body a:hover` cascade
   to #303030) and shift the background to the design system's primary-hover
   token. !important matches the base rule above. */
.main-nav__cta:hover {
  background: var(--color-btn-primary-bg-hover) !important;
  color: #fff !important;
}
.main-nav__cta:disabled,
.main-nav__cta[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Hamburger button — hidden on desktop */
.main-nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  border: 0;
}
.main-nav__burger span {
  width: 32px;
  height: 4px;
  background: var(--color-neutral-darker);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.main-nav__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.main-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.main-nav__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 90px;
  left: 16px;
  right: 16px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.71);
  backdrop-filter: blur(14.6px);
  -webkit-backdrop-filter: blur(14.6px);
  border-radius: 8px;
  box-shadow: 0 25px 37.6px -12px rgba(17, 12, 25, 0.21);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.18s ease-out, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.mobile-nav ul { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
.mobile-nav a,
.mobile-nav__products-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 4px 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  background: transparent;
  border: 0;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
  text-decoration: none;
}
.mobile-nav a:hover,
.mobile-nav__products-toggle:hover { color: #b5b3b3; }
.mobile-nav a[aria-current="page"] { color: #b5b3b3; }
.mobile-nav__products { position: relative; }
.mobile-nav__products-toggle .caret { transition: transform 0.2s ease; }
.mobile-nav__products.is-open .mobile-nav__products-toggle .caret { transform: rotate(180deg); }
.mobile-nav__dropdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  margin-top: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}
.mobile-nav__products.is-open .mobile-nav__dropdown {
  max-height: 240px;
  opacity: 1;
}
body.nav-locked { overflow: hidden; }

/* ===========================================================
   PAGE EYEBROW — shared "you-are-here" label (the page's
   contextual H1 kicker). ONE global class used by EVERY 2026
   page (careers, contact-us, about-us, and every future page);
   never fork a per-page .*-eyebrow rule. Canonical values taken
   from the contact-us design. Letter-spacing is in `em` so it
   scales with the font size. Vertical position is set separately
   by each page's main wrapper padding-top (132 / 116 / 96).
   =========================================================== */
.page-eyebrow {
  margin: 0 0 24px;
  font-family: var(--font-family-headline);
  font-weight: 400;
  font-size: var(--fs-body-large);     /* 22px */
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--color-neutral-300);
  text-transform: uppercase;
}
@media (max-width: 1023px) {
  .page-eyebrow { font-size: var(--fs-body-medium); }   /* 18px */
}
@media (max-width: 767px) {
  .page-eyebrow {
    font-size: var(--fs-body-extra-small);              /* 12px */
    letter-spacing: 0.1em;
    margin-bottom: 12px;
  }
}

/* ===========================================================
   HEADLINE SMALL — shared block/section title. ONE global class
   used by EVERY block title on every page (section headings AND
   the 40px page heroes that share this exact spec). Mirrors the
   Figma "Headline / Small" text style. Carries TYPOGRAPHY ONLY —
   each page keeps its own margin/width/order as layout rules, so
   spacing differs by context while the type stays identical.
   Responsive size is driven by the --fs-headline-small token
   (40px desktop → 32px ≤767). Never fork a per-page title class
   for this; add `headline-small` alongside the page class.
   =========================================================== */
.headline-small {
  font-family: var(--font-family-headline);   /* Poppins */
  font-weight: 400;
  font-size: var(--fs-headline-small);         /* 40px → 32px (≤767) */
  line-height: 1.2;
  color: var(--color-neutral-1000);            /* #000 */
}

/* ===========================================================
   ARROW LINK — shared "Home →" / "Read more →" text link with a
   trailing arrow that slides right on hover. ONE global class used
   by EVERY 2026 page (404 today, any future page); never fork a
   per-page variant. Resting tone is per-use via `--arrow-link-color`
   (default neutral-400); on hover the WHOLE link — text + arrow —
   resolves to neutral-1000 and the arrow nudges 4px right. The arrow
   is an inline SVG using `stroke: currentColor`, so it tracks the
   link colour through the hover transition (an <img> can't).
   Markup: <a class="arrow-link"> Label <svg class="arrow-link__icon" …/></a>.
   =========================================================== */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-large);
  line-height: normal;
  transition: color 0.2s ease;
}
.arrow-link__icon {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
/* Colour via the doubled-class idiom (0,3,0) so it beats a page's
   anti-cascade `.page-<slug> a:link {color: inherit}` reset (0,2,1).
   Resting tone overridable per page via the variable. */
.arrow-link.arrow-link:link,
.arrow-link.arrow-link:visited,
.arrow-link.arrow-link:active { color: var(--arrow-link-color, var(--color-neutral-400)); }
.arrow-link.arrow-link:hover,
.arrow-link.arrow-link:focus-visible { color: var(--color-neutral-1000); }
.arrow-link:hover .arrow-link__icon,
.arrow-link:focus-visible .arrow-link__icon { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .arrow-link__icon { transition: none; }
}

/* ===========================================================
   FOOTER (2026 design)
   =========================================================== */
/* Match prototype's `html, body { overflow-x: clip }` + desktop min-width
   1320 so:
     - 1296-wide content (footer card) fits inside the 1320 page width
     - The blob anchor reaches past the card's right edge, like in the proto
     - Narrow viewports clip cleanly (no horizontal scrollbar)
   Min-width only applies at desktop (≥1024); below that the responsive
   tablet/mobile rules take over and need body = viewport width. */
html, body { overflow-x: clip; }
@media (min-width: 1024px) {
  body { min-width: 1320px; }
}

/* .footer-2026 spans the full body width so the blob anchor inside it
   reaches the viewport's right edge — matching the prototype where the
   anchor was a body-width sibling of the centered footer card. */
.footer-2026 {
  width: 100%;
  margin: 128px 0 24px;
  position: relative;
  display: block;
}
.footer-2026 .footer-blob-anchor {
  position: relative;
  height: 0;
  overflow: visible;
}
.footer-2026 .footer-blob {
  position: absolute;
  right: 0;
  bottom: -30px; /* extends 30px below the dark footer card (matches prototype's .page-contact .footer-wrap { margin-bottom: 30px }) */
  width: 1000px;
  height: 511px;
  pointer-events: none;
  z-index: 0;
  max-width: none;
}
.footer-2026 .footer {
  width: 1296px;
  margin: 0 auto;
  background: var(--color-neutral-darker);
  border-radius: 16px;
  padding: 64px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.footer-2026 .footer__col { display: flex; flex-direction: column; gap: 4px; }
.footer-2026 .footer__col--terms { gap: 32px; }
.footer-2026 .footer__col--badges { flex: 1 0 0; align-self: stretch; align-items: center; justify-content: center; display: flex; }
.footer-2026 .footer__heading {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: var(--fs-body-extra-small);
  line-height: 1.7;
  color: var(--color-neutral);
  white-space: nowrap;
}
.footer-2026 .footer__links { list-style: none; padding: 0; margin: 0; }
/* Lock font-size, line-height, and font-weight on li so it matches the
   prototype (16px / normal / 400) — layout.min.css sets body font-size 20px,
   line-height 30px, and font-weight 300, all of which inherit into <li>. */
.footer-2026 .footer__links li {
  font-size: var(--fs-body-small);
  line-height: normal;
  font-weight: 400;
}
.footer-2026 .footer__links li a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: var(--fs-body-extra-small);
  line-height: 1.5;
  color: var(--color-neutral-lighter);
  white-space: pre-wrap;
  transition: color 0.15s ease;
  text-decoration: none;
}
.footer-2026 .footer__links li a:hover { color: #ffffff; }
.footer-2026 .footer__sub { display: flex; flex-direction: column; gap: 12px; }
.footer-2026 .footer__socials {
  width: 111px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-2026 .footer__socials a img { width: 29px; height: 29px; display: block; }
.footer-2026 .footer__email {
  width: 303px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #404040;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 4px 8px 4px 12px;
  gap: 8px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
.footer-2026 .footer__email input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-label-medium);
  line-height: 20px;
  color: #f5f5f5;
}
.footer-2026 .footer__email input::placeholder { color: #737373; }
/* Invalid state — red pill border + the inline .field__error below (shared
   site-wide validation standard, raised by handleSubscribe in global-2026.js). */
.footer-2026 .footer__email.is-invalid { border-color: var(--color-red-400); }
.footer-2026 .footer__sub .field__error { margin-top: 6px; }
.footer-2026 .footer__email button {
  background: #f5f5f5;
  color: #0a0a0a;
  font-family: 'Poppins', sans-serif;
  font-size: var(--fs-label-medium);
  line-height: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
}
.footer-2026 .footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 24px;
  column-gap: 40px;
}
.footer-2026 .footer__badges-gptw {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-2026 .footer__badge { width: 67px; height: 114px; }
.footer-2026 .footer__mga   { width: 89px; height: 86px; }
.footer-2026 .footer__iab   { width: 109px; height: 89px; }
.footer-2026 .footer__reddit { width: 122px; height: 118px; }

/* Badge display order. Desktop: GPTW group → MGA → IAB → Reddit (last).
   Tablet/mobile flip Reddit to the front via the `order` override below. */
.footer-2026 .footer__badges-gptw { order: 1; }
.footer-2026 .footer__mga         { order: 2; }
.footer-2026 .footer__iab         { order: 3; }
.footer-2026 .footer__reddit      { order: 4; }

/* =========================================================================
   RESPONSIVE — tablet + mobile (covers nav + footer)
   ========================================================================= */
@media (max-width: 1023px) {
  .nav-bar-wrap { top: 20px; padding: 0 32px; }
  .main-nav { width: 100%; max-width: 770px; }

  /* Tablet — below ~849px the .main-nav drops under its 770px cap and the full
     horizontal link row stops fitting, so the Contact-us CTA used to overflow /
     clip past the right edge near the bottom of the tablet range. Tighten ONLY
     the link spacing across the whole tablet range — inter-link gap 8→4px and
     per-item horizontal padding 8→4px — so the row always fits (no overflow, no
     wrapping) while justify-content:space-between still keeps a ≥16px gap between
     the logo and the links (≈22px at 768px, the tightest point). Logo untouched. */
  .main-nav__links { gap: 4px; }
  .main-nav__links li { padding-left: 4px; padding-right: 4px; }
  .main-nav__links li.has-caret { padding-left: 4px; }
  .main-nav__cta { padding-left: 6px; padding-right: 6px; }

  /* Keep .footer-2026 body-width with NO side padding so the blob anchor
     reaches the body's right edge (matches prototype). The 32px breathing
     room moves onto the inner .footer card as side margins. */
  .footer-2026 {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .footer-2026 .footer {
    width: auto;
    margin: 0 32px;
    padding: 40px;
    gap: 40px;
    align-items: flex-start;
  }
  .footer-2026 .footer__col--menu  { flex: 0 0 auto; }
  .footer-2026 .footer__col--terms { flex: 0 0 auto; max-width: 320px; }
  .footer-2026 .footer__col--badges {
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
  }
  .footer-2026 .footer__email { width: 100%; max-width: 303px; }
  .footer-2026 .footer__badges {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 28px;
    column-gap: 28px;
    max-width: 200px;
  }
  .footer-2026 .footer__badges-gptw { gap: 8px; }
  .footer-2026 .footer__badge { width: 48px; height: 82px; }
  .footer-2026 .footer__mga   { width: 58px; height: 56px; }
  .footer-2026 .footer__iab   { width: 73px; height: 60px; }
  /* Reddit badge — 75×73 on tablet AND mobile (this block matches both).
     order:0 floats it to the top of the badge stack; desktop keeps it last. */
  .footer-2026 .footer__reddit { width: 75px; height: 73px; order: 0; }
  .footer-2026 .footer-blob { width: 700px; height: 358px; }
}

@media (max-width: 767px) {
  .nav-bar-wrap { top: 12px; padding: 0 16px; }
  .main-nav {
    width: 100%;
    max-width: 100%;
    padding: 8px 8px 8px 12px;
  }
  .main-nav__logo img { width: 100px; height: auto; }
  .main-nav__links { display: none; }
  .main-nav__burger { display: flex; }

  /* See tablet rule: .footer-2026 stays body-width so the blob anchor
     reaches body's right edge; spacing lives on the inner .footer card. */
  .footer-2026 {
    padding-left: 0;
    padding-right: 0;
  }
  .footer-2026 .footer {
    width: auto;
    margin: 0 16px;
    flex-direction: column;
    padding: 24px;
    gap: 40px;
    border-radius: 16px;
    align-items: stretch;
  }
  .footer-2026 .footer__col--menu,
  .footer-2026 .footer__col--terms,
  .footer-2026 .footer__col--badges { flex: 1 1 100%; width: 100%; }
  .footer-2026 .footer__col--badges { align-items: stretch; justify-content: flex-start; }

  .footer-2026 .footer__socials {
    width: 111px;
    gap: 16px;
    justify-content: space-between;
  }
  .footer-2026 .footer__email {
    width: 100%;
    max-width: 100%;
    height: 36px;
  }
  .footer-2026 .footer__email input { min-width: 0; }

  /* Mobile badges — left-aligned with a fixed 24px gap so wrapped rows pack
     to the left (space-between left an oversized gap on sparse rows). */
  .footer-2026 .footer__badges {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 24px;
    column-gap: 24px;
  }
  .footer-2026 .footer__badges-gptw { gap: 8px; }
  .footer-2026 .footer__badge { width: 44px; height: 75px; }
  .footer-2026 .footer__mga   { width: 58px; height: 56px; }
  .footer-2026 .footer__iab   { width: 71px; height: 58px; }

  .footer-2026 .footer-blob {
    width: 460px;
    height: 235px;
  }
}

/* =========================================================================
   FORM CARD TITLE — site-wide STANDARD heading INSIDE a form card ("Get in
   touch with us to know more"). ONE class for every 2026 form so the heading
   reads the same everywhere; pages used to fork it per page
   (.irtb-contact__form-title / .mafo-contact__form-title / `.form-card h3`),
   which drifted apart (22px on MAFO+iRTB, 20px on Echo AI).

   Usage: first child inside the <form>, `<h3 class="ui-form__title">…</h3>`.
   Margin is 0 on purpose — the vertical rhythm comes from the form's own
   flex `gap` (the shared `.ui-form` block), never from this heading.
   ========================================================================= */
.ui-form__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);   /* 22 Medium → 18 at ≤768 via the token */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}

/* =========================================================================
   FIELD ERROR — site-wide STANDARD inline validation message for every 2026
   form. ONE look so validation reads the same on every page (mirrors the Echo
   AI form). Place a `.field__error` as the LAST child of a `.field` (right
   after the control, or after a wrapped `.checkbox`); it is hidden until the
   shared forms-2026.js adds `.is-visible` on an invalid submit, and is cleared
   the moment the user fixes the field. The red invalid border comes from the
   control's `.is-invalid` (shared form library); this is the message text.
   ========================================================================= */
.field__error {
  display: none;                 /* hidden until invalid */
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-extra-small);   /* 14px — matches the field label */
  line-height: 1.3;
  color: var(--color-red-400);
}
.field__error.is-visible { display: block; }

/* =========================================================================
   FORM SUCCESS MESSAGE — site-wide STANDARD component for every 2026 form.
   (Added for the 2026 redesign; mirror to other forms as they adopt it.)

   Usage: place a `.form-success-msg` as the LAST child INSIDE a <form>; it is
   hidden until submit. On a successful submit the form's JS adds `.is-success`
   to the <form> — the other form children fade out and this card reveals in
   their place, inside the same form card. Works on ANY <form> regardless of
   its own classes (contact-us `.contact-form-card`, careers `.ui-form`, …).
   A legacy/standalone trigger `.form-success-msg.visible` is also supported
   for markup where the message sits OUTSIDE the form.

   Pick the colour variant by the FORM CARD background:
     • default                     → white slot — for a COLOURED/grey card
     • .form-success-msg--on-white → grey  slot — for a WHITE card

   Markup:
     <form ... >                     ← JS adds `.is-success` on success
       … fields … <button>…</button>
       <div class="form-success-msg" role="status" aria-live="polite">
         <div class="form-success-msg__head">
           <img class="form-success-msg__icon" src="/images-new/common/circle-check-green.svg" …>
           <p class="form-success-msg__title">Thank you</p>
         </div>
         <div class="form-success-msg__slot">
           <p class="form-success-msg__text">Our team will get back to you shortly.</p>
         </div>
       </div>
     </form>
   ========================================================================= */
.form-success-msg {
  display: none;                 /* hidden by default */
  flex-direction: column;
  gap: 12px;
}
form.is-success > :not(.form-success-msg) {
  pointer-events: none;
  animation: form-fields-out 0.25s ease forwards;
}
@keyframes form-fields-out {
  to { opacity: 0; display: none; }
}
form.is-success .form-success-msg,
.form-success-msg.visible {
  display: flex;
  animation: form-success-in 0.3s ease 0.18s both;
}
@keyframes form-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  form.is-success > :not(.form-success-msg) { animation: none; display: none; }
  form.is-success .form-success-msg,
  .form-success-msg.visible { animation: none; }
}
.form-success-msg__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 0;   /* no left padding — head/icon aligns flush with the card's left edge (both variants) */
  border-radius: 9px;
}
.form-success-msg__icon { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 4px; }
.form-success-msg__title {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: var(--fs-body-large);    /* 22 */
  line-height: 1.5;
  color: var(--color-neutral-800);
}
.form-success-msg__slot {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-0);             /* white slot (coloured/grey form card) */
}
.form-success-msg--on-white .form-success-msg__slot {
  background: var(--color-neutral-100);           /* grey slot (white form card) */
}
.form-success-msg__text {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);   /* 18 */
  line-height: 1.5;
  color: var(--color-neutral-1000);
}
/* Dark-section variant — white text for a subscribe form on the DARK footer.
   The green check icon is reused as-is (it reads fine on dark). */
.form-success-msg--on-dark .form-success-msg__title,
.form-success-msg--on-dark .form-success-msg__text { color: #ffffff; }
.form-success-msg--on-dark .form-success-msg__slot  { background: rgba(255, 255, 255, 0.10); }
/* Compact size — for the small inline subscribe pills (footer + blog share bar),
   where the full 22/18 sizing would overpower the tight column. */
.form-success-msg--compact { gap: 8px; }
.form-success-msg--compact .form-success-msg__head  { padding: 0; gap: 8px; }
.form-success-msg--compact .form-success-msg__icon  { flex-basis: 20px; width: 20px; height: 20px; margin-top: 2px; }
.form-success-msg--compact .form-success-msg__title { font-size: var(--fs-body-medium); }   /* 18 */
.form-success-msg--compact .form-success-msg__slot  { padding: 8px 12px; }
.form-success-msg--compact .form-success-msg__text  { font-size: var(--fs-body-small); }     /* 16 */