/* SUITE brand typography — self-hosted Poppins.
   No third-party font CDN is used, so the existing CSP `font-src 'self'`
   remains valid unchanged. Loaded on the public marketing site only; the
   SUITE application's own typography is deliberately untouched. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-600.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/poppins-700.woff2') format('woff2');}

/* The corporate attribution lockup renders as live text (exactly as the
   approved kit itself does), so it must use the real brand face. */
.nav-attr,.suite-brand-attr{font-family:'Poppins',system-ui,-apple-system,sans-serif;}

/* ⚠ A GRID ITEM DOES NOT SHRINK BELOW ITS CONTENT BY DEFAULT. .feature-split's
   children inherit min-width:auto, so on a narrow viewport the column is sized by
   the longest unbreakable run of text rather than by the screen. English fits and
   Spanish does not -- the same page overflowed 10px at 390px in Spanish while its
   English twin was clean, which is exactly the shape this bug takes: it surfaces
   only in whichever language happens to be wordier.
   Measured across all 20 paired product pages at 390px: pages overflowing 1 -> 0,
   and geometry byte-identical on the other 19, so this only ever releases a column
   that was already too wide. */
.feature-split > * { min-width: 0; }

/* ── Footer utility controls: Region and Language ─────────────────────────────
   Moved out of the primary header (Header & Navigation UX refinement, Sep 2026).
   In the bar they were 141px of controls sitting between the navigation and the
   two conversion actions, and at 1024px the nav list overflowed into them.

   ⚠ THIS LIVES IN brand.css, NOT IN site.js, ON PURPOSE. There are two footers:
   site.js injects one at runtime on 50 pages, while index.html and its Spanish
   twin carry their own inline footer and never load site.js. Putting the styling
   in site.js would have meant a second copy for the homepage -- the same split
   that let a link survive only on the homepage in D-001. All 52 pages already
   load this file, so one rule set serves both.

   ⚠ AND BOTH FOOTERS RENDER LIGHT, WHICH THE SOURCE DOES NOT TELL YOU. The
   homepage footer carries an inline style="background:#080f1a" -- but the site's
   own legacy-hex override repaints it, and it COMPUTES to rgb(244,246,248). A
   dark variant built from reading that inline style put near-white text on a
   near-white ground at a measured contrast of 1.00: completely invisible, and
   only a rendered screenshot showed it. There is one ground, so there is one
   component and no dark modifier. Measure the computed background, never the
   declared one. */
.suite-futil{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;
  --fu-label:var(--suite-on-light-muted,rgba(23,56,79,.78));
  --fu-text:var(--suite-on-light-muted,rgba(23,56,79,.78));
  --fu-rule:var(--suite-rule-light,rgba(77,127,158,.28));
  --fu-face:#fff;
  --fu-on-bg:var(--suite-navy,#17384F);
  --fu-on-text:var(--suite-cloud,#F2F7FA);
  --fu-hover:var(--suite-cloud,#F2F7FA);
}
.suite-futil-group{display:flex;align-items:center;gap:10px}
.suite-futil-label{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fu-label);white-space:nowrap;
}
.suite-futil-seg{display:inline-flex;border:1px solid var(--fu-rule);border-radius:8px;
  overflow:hidden;background:var(--fu-face)}
.suite-futil-seg button{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
  padding:9px 14px;border:0;background:transparent;color:var(--fu-text);cursor:pointer;
  transition:background .15s,color .15s;
}
.suite-futil-seg button+button{border-left:1px solid var(--fu-rule)}
.suite-futil-seg button:hover{background:var(--fu-hover);color:var(--fu-on-bg)}
/* applyRegion() marks .region-active; lang_offer.js marks .lang-active. Both are
   set by the engines that already own that state -- this file only paints it. */
.suite-futil-seg button.region-active,
.suite-futil-seg button.lang-active{background:var(--fu-on-bg);color:var(--fu-on-text)}
.suite-futil-seg button.region-active:hover,
.suite-futil-seg button.lang-active:hover{background:var(--fu-on-bg);color:var(--fu-on-text)}
.suite-futil :focus-visible{outline:2px solid var(--suite-blue,#5FABD6);outline-offset:2px;border-radius:6px}
/* A control with nowhere to go is hidden by js/lang_offer.js, which sets [hidden]
   on the whole group so the "Language" label never outlives its buttons. */
.suite-futil-group[hidden]{display:none}
/* 44px touch targets once the row is likely to be tapped rather than clicked. */
@media (max-width:640px){
  .suite-futil{gap:12px 18px}
  .suite-futil-seg button{padding:0 14px;min-height:44px;display:inline-flex;align-items:center}
}