/* ============================================================================
   niftimobility.com — /work-with-us  (Work With Us — paid offerings)
   ----------------------------------------------------------------------------
   A private, on-brand "products & services" module. Additive only: every value
   derives from tokens.css / the inherited palette, so this page reads as a
   native part of the site (mirrors /iq). Loaded per-page via the front-matter
   `css_extra: work.css`, never globally.

   Brand rule honoured throughout: ON ORANGE, TEXT IS INK — never white. The
   primary "Book / Pay" action is the ink-filled button; orange is used only as
   an accent (rules, the price figure, tags) on cream/paper where text is ink.
   ========================================================================== */

/* ---------------------------------------------------------------- masthead --- */

.wu-mast {
  padding-block: clamp(3rem, 1.8rem + 6vw, 7rem) var(--s-6);
  border-bottom: 1px solid var(--line-2);
}
.wu-mast__eyebrow { margin-bottom: var(--s-4); }
.wu-mast .h1 { max-width: 18ch; }
.wu-mast__lead {
  max-width: 58ch;
  margin-top: var(--s-5);
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Type-lockup that names the page without leaning on any other brand. */
.wu-lockup { display: inline-flex; align-items: baseline; gap: .4rem; }
.wu-lockup b { font-weight: 800; letter-spacing: var(--tr-tight); }
.wu-lockup span {
  font-family: var(--display);
  color: var(--orange-d);
  letter-spacing: .02em;
}

/* ------------------------------------------------------- offerings module --- */

.wu-offerings { padding-block: var(--section-y); }
.wu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s-6);
  margin-top: var(--s-6);
  align-items: start;
}

.wu-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-1);
}

.wu-card__tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--orange-d);
  margin-bottom: var(--s-4);
}
.wu-card__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.08;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}

/* Price line — orange figure on paper (ink context), never white-on-orange. */
.wu-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-2);
}
.wu-card__amount {
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--orange-d);
}
.wu-card__unit { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }

.wu-card__dek { margin-top: var(--s-5); color: var(--ink-3); line-height: var(--lh-body); }
.wu-card__dek + .wu-card__dek { margin-top: var(--s-4); }

.wu-card__list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.wu-card__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.wu-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--orange);
}

.wu-card__actions {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}
.wu-card__secure {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.wu-card__secure svg { width: 14px; height: 14px; flex: none; }

/* ------------------------------------------------------- signatory / trust --- */

.wu-note {
  margin-top: var(--s-7);
  max-width: 62ch;
  color: var(--ink-3);
  font-size: var(--fs-body);
}
.wu-note a { color: var(--orange-d); }

/* ------------------------------------------------------- thank-you state ---- */
/* Hidden by default; work.js reveals it (and hides the offerings) after a
   successful Stripe checkout returns to the page. With JS off, the offer shows
   normally and Stripe still handles its own hosted confirmation. */

.wu-thanks[hidden] { display: none; }
.wu-thanks {
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem);
}
.wu-thanks__box {
  max-width: 40rem;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--ink);
  color: #f4eee5;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}
.wu-thanks__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--orange);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.wu-thanks__box .h2 { color: #fff; margin-top: var(--s-4); }
.wu-thanks__box p { color: #cfcbc4; max-width: 48ch; margin-top: var(--s-4); }
.wu-thanks__box .wu-thanks__cta { margin-top: var(--s-6); }
/* Brand rule: on orange, text is INK — never white. Keep the accent button
   readable on the dark box while honouring that (the site default is white). */
.wu-thanks__box .btn--accent,
.wu-thanks__box .btn--accent:hover { color: var(--ink); }
.wu-thanks__badge svg { width: 15px; height: 15px; }

/* ============================================================================
   Value-ladder storefront additions (2026-08-27)
   Bands, band numbers, card states, refund chip, on-page subscribe. All
   token-derived; on orange, text stays ink (buy buttons are the ink-filled
   .btn--primary, never white-on-orange).
   ========================================================================== */

/* Masthead credential + delivery lines */
.wu-cred {
  margin-top: var(--s-5);
  max-width: 66ch;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--orange);
  padding-left: var(--s-4);
}
.wu-deliver {
  margin-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Band eyebrow number + section sub */
.wu-bandnum {
  color: var(--orange-d);
  font-weight: 800;
  margin-right: .5rem;
}
.wu-sec-sub {
  margin-top: var(--s-3);
  max-width: 66ch;
  color: var(--ink-3);
}

/* Grid: equal-height cards per row so buttons bottom-align */
.wu-grid { align-items: stretch; }
.wu-card__actions { margin-top: auto; }

/* Non-dollar amounts ("Coming soon", "On request", "Free", "Later") read
   smaller and muted so they do not shout like a price. */
.wu-card__amount--muted {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  color: var(--muted);
}

/* "Fully refundable" chip on the Hold card */
.wu-refund {
  align-self: flex-start;
  margin-top: var(--s-4);
  display: inline-block;
  background: var(--soft);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
}

/* Limited-room chip (ink fill, cream text) */
.wu-limited {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--s-6);
  background: var(--ink);
  color: #f4eee5;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .03em;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
}

/* On-page subscribe block */
.wu-subscribe { max-width: 46rem; }
.wu-subscribe > p { margin-top: var(--s-3); color: var(--ink-3); }
.wu-subscribe .footer-newsletter { margin-top: var(--s-5); }
.wu-subscribe .form-hint { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs-sm); }