/* THE SIGNUP OFFER STRIP
   ----------------------
   Shared by the marketing site (marketing.css) and the signup form (main.css),
   which is why it is its own file rather than a block in either: the promise is
   made in both places and must look the same in both. It uses only the four
   custom properties BOTH stylesheets define -- --ink, --muted, --line, --wine --
   so it inherits each page's own palette instead of carrying a second one.

   The visual brief was "classy", which here means the emphasis comes from
   rhythm and a burgundy tick rather than from size or a coloured badge: the
   three promises read as a considered line under the call to action, not as a
   sticker on top of it. Only the word that costs the reader nothing --
   "Free for N days" -- takes ink colour and weight; the other two stay muted,
   because three bold claims in a row is a shout and one is a point. */

.offer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
  margin: 1.05rem 0 0;
  padding: 0;
  list-style: none;
}

.offer li{
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin: 0;
  font-size: .92rem;
  line-height: 1.35;
  color: var(--muted);
}

/* The tick carries the brand colour; the text does not. Two burgundy things on
   one line is a pattern, three is decoration. */
.offer li .ic{ color: var(--wine); flex: none; }
.offer li b{ color: var(--ink); font-weight: 600; }

/* ON A DARK PANEL the light-page colours invert into invisibility -- --ink is
   near-black, which is the closing panel's own background, so the one promise
   that carries weight ("Free for N days") vanished completely the first time
   this was rendered there. The modifier is passed explicitly by the template
   rather than inferred from a page class, so offer.css needs to know nothing
   about which sections happen to be dark. The tick lightens to a rose because
   the burgundy that reads as brand on white reads as a smudge on near-black. */
.offer-dark li{ color: rgba(255,255,255,.74); }
.offer-dark li b{ color: #fff; }
.offer-dark li .ic{ color: #e3a9b8; }

/* Centred under a centred call to action (the closing panels, the signup card).
   The list wraps to as many rows as it needs -- at 360px the three promises
   stack, which is the intended shape rather than a fallback. */
.offer-center{ justify-content: center; }

/* On the form itself the promises sit between two hairlines: the signup card is
   already a bordered box, so a second box inside it would read as a warning
   rather than as reassurance. */
.offer-strip{
  margin: .95rem 0 .2rem;
  padding: .72rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.offer-strip .offer{
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
  width: max-content;
  max-width: 100%;
}