/* ============================================================================
   The eyebrow pill - ONE shared component, every band, every page.

   Lucas asked for the chip the site already uses in a few places (the small
   capsule with an icon, e.g. "Pay Later") to become the standard treatment for
   the line of text above every heading, site-wide. Not just heroes: the
   Preferred Market band, the white bands, all of them.

   THE REFERENCE IS `.pl2-hero__badge` - the "Pay Later" chip, which was drawn
   in Figma and built to spec. Every value below is copied from
   atlas-pl2-hero.css rather than invented: radius 9 (not a 57 capsule),
   padding 2/8, gap 7, the teal-tinted 73.7deg fill, blur 16.7, the 8/10/24
   teal shadow, and the 163deg inside stroke. A first pass used a bigger
   57-radius capsule and it read as a different component next to the real one.

   61 eyebrow classes. Every band had rolled its own, and almost all of them
   rendered as plain unstyled text. Rather than rewrite the markup on 265
   pages, they are all named here. CSS only, so nothing measured against Figma
   moves except the eyebrow, and a band that later renames its eyebrow simply
   falls back to plain text rather than breaking.

   CHILD SPANS AND MODIFIERS ARE DELIBERATELY EXCLUDED (-ico, -txt, -dim,
   __eyebrowText, --dark and friends). They sit INSIDE these containers, and
   giving them the chip too would draw a capsule inside a capsule.

   The type inside is untouched: each band keeps whatever size, weight and
   colour it already set, so only the capsule is new.
   ========================================================================= */

.abh-eyebrow,
.afx404__eyebrow,
.afxpo__eyebrow,
.abp-eyebrow,
.abt-eyebrow,
.abtl-eyebrow,
.abwhy-eyebrow,
.aff2-eyebrow,
.afx-hero__eyebrow,
.afxac-eyebrow,
.afxah-eyebrow,
.afxam-eyebrow,
.afxas-eyebrow,
.afxat-eyebrow,
.afxax-eyebrow,
.afxc__eyebrow,
.afxch__eyebrow,
.afxf__eyebrow,
.afxfc__eyebrow,
.afxfh-eyebrow,
.afxfl-eyebrow,
.afxfl-kicker,
.afxfm-eyebrow,
.afxfq__eyebrow,
.afxfs-eyebrow,
.afxfth-eyebrow,
.afxfw-eyebrow,
.afxg__eyebrow,
.afxhw-calc__eyebrow,
.afxhw-final__eyebrow,
.afxhw-hero__eyebrow,
.afxhw-steps__eyebrow,
.afxif-hero__eyebrow,
.afxif-plat__eyebrow,
.afxif-specs__eyebrow,
.afxif-why__eyebrow,
.afxiz-hero__eyebrow,
.afxm__eyebrow,
.afxmo-eyebrow,
.afxmo-final__eyebrow,
.afxmo-hero__eyebrow,
.afxmo-pl__eyebrow,
.afxp-head__eyebrow,
.afxq__eyebrow,
.afxs-cta__eyebrow,
.afxs-eyebrow,
.afxs-grid__eyebrow,
.afxs-hero__eyebrow,
.afxs-spot__eyebrow,
.afxs__eyebrow,
.afxt__eyebrow,
.afxw-eyebrow,
.afxw__eyebrow,
.art-kicker,
.chero-eyebrow,
.pl2-final__eyebrow,
.pl2-steps__eyebrow,
.pl2-values__eyebrow,
.po2-close__eyebrow,
.po2-hero__eyebrow,
.po2-steps__eyebrow,
.po2-transp__eyebrow,
.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 2px 8px;
  border-radius: 9px;
  box-sizing: border-box;

  background: linear-gradient(73.7deg,
    rgba(124, 177, 172, .10) 0%,
    rgba(255, 255, 255, .10) 47.67%,
    rgba(124, 177, 172, .10) 100%);
  backdrop-filter: blur(16.7px);
  -webkit-backdrop-filter: blur(16.7px);
  box-shadow: 8px 10px 24px rgba(5, 63, 59, .13);

  /* `fit-content`, NOT `align-self: flex-start`. The chip has to hug its text
     inside flex columns that default to `align-items: stretch`, but plenty of
     these bands are CENTRED columns and flex-start dragged their eyebrows to
     the left edge. A cross-size of `fit-content` is not `auto`, so `stretch`
     cannot apply to it: the chip hugs everywhere, and a parent that centres
     or right-aligns still gets its way. */
  width: fit-content;
  max-width: 100%;
  position: relative;
  isolation: isolate;
}

/* 1px inside hairline. A gradient cannot go on border-color, so it is a masked
   pseudo-element, the same technique the navbar and the lime buttons use. */
.abh-eyebrow::before,
.afx404__eyebrow::before,
.afxpo__eyebrow::before,
.abp-eyebrow::before,
.abt-eyebrow::before,
.abtl-eyebrow::before,
.abwhy-eyebrow::before,
.aff2-eyebrow::before,
.afx-hero__eyebrow::before,
.afxac-eyebrow::before,
.afxah-eyebrow::before,
.afxam-eyebrow::before,
.afxas-eyebrow::before,
.afxat-eyebrow::before,
.afxax-eyebrow::before,
.afxc__eyebrow::before,
.afxch__eyebrow::before,
.afxf__eyebrow::before,
.afxfc__eyebrow::before,
.afxfh-eyebrow::before,
.afxfl-eyebrow::before,
.afxfl-kicker::before,
.afxfm-eyebrow::before,
.afxfq__eyebrow::before,
.afxfs-eyebrow::before,
.afxfth-eyebrow::before,
.afxfw-eyebrow::before,
.afxg__eyebrow::before,
.afxhw-calc__eyebrow::before,
.afxhw-final__eyebrow::before,
.afxhw-hero__eyebrow::before,
.afxhw-steps__eyebrow::before,
.afxif-hero__eyebrow::before,
.afxif-plat__eyebrow::before,
.afxif-specs__eyebrow::before,
.afxif-why__eyebrow::before,
.afxiz-hero__eyebrow::before,
.afxm__eyebrow::before,
.afxmo-eyebrow::before,
.afxmo-final__eyebrow::before,
.afxmo-hero__eyebrow::before,
.afxmo-pl__eyebrow::before,
.afxp-head__eyebrow::before,
.afxq__eyebrow::before,
.afxs-cta__eyebrow::before,
.afxs-eyebrow::before,
.afxs-grid__eyebrow::before,
.afxs-hero__eyebrow::before,
.afxs-spot__eyebrow::before,
.afxs__eyebrow::before,
.afxt__eyebrow::before,
.afxw-eyebrow::before,
.afxw__eyebrow::before,
.art-kicker::before,
.chero-eyebrow::before,
.pl2-final__eyebrow::before,
.pl2-steps__eyebrow::before,
.pl2-values__eyebrow::before,
.po2-close__eyebrow::before,
.po2-hero__eyebrow::before,
.po2-steps__eyebrow::before,
.po2-transp__eyebrow::before,
.s-eyebrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(163deg,
    rgba(255, 255, 255, .41) 0%, rgba(255, 255, 255, .06) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* an icon is optional; where a band supplies one it sits at the chip's 16px */
.abh-eyebrow img,
.afx404__eyebrow img,
.afxpo__eyebrow img,
.abp-eyebrow img,
.abt-eyebrow img,
.abtl-eyebrow img,
.abwhy-eyebrow img,
.aff2-eyebrow img,
.afx-hero__eyebrow img,
.afxac-eyebrow img,
.afxah-eyebrow img,
.afxam-eyebrow img,
.afxas-eyebrow img,
.afxat-eyebrow img,
.afxax-eyebrow img,
.afxc__eyebrow img,
.afxch__eyebrow img,
.afxf__eyebrow img,
.afxfc__eyebrow img,
.afxfh-eyebrow img,
.afxfl-eyebrow img,
.afxfl-kicker img,
.afxfm-eyebrow img,
.afxfq__eyebrow img,
.afxfs-eyebrow img,
.afxfth-eyebrow img,
.afxfw-eyebrow img,
.afxg__eyebrow img,
.afxhw-calc__eyebrow img,
.afxhw-final__eyebrow img,
.afxhw-hero__eyebrow img,
.afxhw-steps__eyebrow img,
.afxif-hero__eyebrow img,
.afxif-plat__eyebrow img,
.afxif-specs__eyebrow img,
.afxif-why__eyebrow img,
.afxiz-hero__eyebrow img,
.afxm__eyebrow img,
.afxmo-eyebrow img,
.afxmo-final__eyebrow img,
.afxmo-hero__eyebrow img,
.afxmo-pl__eyebrow img,
.afxp-head__eyebrow img,
.afxq__eyebrow img,
.afxs-cta__eyebrow img,
.afxs-eyebrow img,
.afxs-grid__eyebrow img,
.afxs-hero__eyebrow img,
.afxs-spot__eyebrow img,
.afxs__eyebrow img,
.afxt__eyebrow img,
.afxw-eyebrow img,
.afxw__eyebrow img,
.art-kicker img,
.chero-eyebrow img,
.pl2-final__eyebrow img,
.pl2-steps__eyebrow img,
.pl2-values__eyebrow img,
.po2-close__eyebrow img,
.po2-hero__eyebrow img,
.po2-steps__eyebrow img,
.po2-transp__eyebrow img,
.s-eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* ---- LIGHT BANDS -------------------------------------------------------
   A white-on-white capsule is invisible, so bands that sit on a light
   background get the same chip in dark ink. Which bands those are is NOT
   guessed: the list below is generated by measuring the eyebrow's own
   computed text colour in the browser. A band that styles its eyebrow dark is
   by definition on a light background. See tools/eyebrow-audit note.
   ========================================================================= */
/* AUDIT-LIGHT-START
   These 21 were found by loading 19 pages and reading each eyebrow's OWN
   computed text colour: a band that sets its eyebrow to dark ink is, by
   definition, sitting on a light background. Measured, not guessed, because
   several of them (the how-it-works calculator, the payouts transparency band,
   the free-trial kicker) are not obvious from the markup.
   Same chip, dark ink, and a much softer shadow: the teal drop shadow reads as
   dirt on white. */
.aff2-eyebrow,
.afxac-eyebrow,
.afxam-eyebrow,
.afxas-eyebrow,
.afxfl-eyebrow,
.afxfl-kicker,
.afxfq__eyebrow,
.afxhw-calc__eyebrow,
.afxhw-steps__eyebrow,
.afxif-specs__eyebrow,
.afxif-why__eyebrow,
.afxmo-pl__eyebrow,
.afxq__eyebrow,
.afxs-eyebrow,
.afxs-spot__eyebrow,
.afxt__eyebrow,
.afxw-eyebrow,
.art-kicker,
.pl2-steps__eyebrow,
.po2-steps__eyebrow,
.po2-transp__eyebrow {
  background: linear-gradient(73.7deg,
    rgba(5, 63, 59, .10) 0%,
    rgba(5, 63, 59, .05) 47.67%,
    rgba(5, 63, 59, .10) 100%);
  box-shadow: 0 2px 10px rgba(5, 63, 59, .06);
}
.aff2-eyebrow::before,
.afxac-eyebrow::before,
.afxam-eyebrow::before,
.afxas-eyebrow::before,
.afxfl-eyebrow::before,
.afxfl-kicker::before,
.afxfq__eyebrow::before,
.afxhw-calc__eyebrow::before,
.afxhw-steps__eyebrow::before,
.afxif-specs__eyebrow::before,
.afxif-why__eyebrow::before,
.afxmo-pl__eyebrow::before,
.afxq__eyebrow::before,
.afxs-eyebrow::before,
.afxs-spot__eyebrow::before,
.afxt__eyebrow::before,
.afxw-eyebrow::before,
.art-kicker::before,
.pl2-steps__eyebrow::before,
.po2-steps__eyebrow::before,
.po2-transp__eyebrow::before {
  background: linear-gradient(163deg,
    rgba(5, 63, 59, .20) 0%, rgba(5, 63, 59, .04) 100%);
}
/* AUDIT-LIGHT-END */