/* ============================================================
   NOBL — WORK WITH US
   Page-scoped styles. Hero, forms, tagset, FAQ, CTA and section
   headers come from components.css.

   The reader here is deciding whether to trust a pay promise, so
   the page leads with the roles and gets to the numbers and the
   form fast.
   ============================================================ */


/* ------------------------------------------------------------
   1. THE PAY WEEK — hero callout

   Page-scoped deliberately. The For ISPs hero keeps .phero__proof
   (three matching rows of figures for an exec); this reader is a
   rep, and their three facts are answers to when / how much /
   where — two of which aren't even numbers. One card with an
   asymmetric interior is what stops the two heroes rhyming.

   The week runs Monday to Sunday and Friday is lit, so "payday,
   every week" is carried by the drawing rather than the caption.
   ------------------------------------------------------------ */

/* The hero grid is shared with For ISPs, whose split is already
   signed off, so the wider right column is scoped to this page only —
   including inside the collapse breakpoint, where a page-scoped
   selector would otherwise outrank the shared single-column rule and
   leave this hero in two columns on a phone. */
.phero--rep .phero__grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
@media (max-width: 1000px) {
  .phero--rep .phero__grid { grid-template-columns: 1fr; }
}

.payweek {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  overflow: hidden;
}

.payweek__top { padding: 22px 24px 24px; }
.payweek__label {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

/* Friday takes more track than the other six — it is the point of
   the strip, and "FRI" needs the room a single letter doesn't. */
.payweek__days {
  list-style: none;
  margin: 16px 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 1.6fr repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.payweek__days li {
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--faint);
  background: var(--s2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-button);
}
/* Gold, not the accent. This site reserves gold for money, and payday
   is the money moment — the one place on the page it belongs. Ink on
   gold measures 8.8:1, so the chip reads at 11px. */
.payweek__days .is-on {
  color: var(--text);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}

/* The week runs, then Friday lands. Days fade left to right and the
   payday chip arrives last, a beat behind the one before it. */
.payweek__days li {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.payweek[data-reveal="in"] .payweek__days li { opacity: 1; transform: none; }
.payweek__days li:nth-child(1) { transition-delay: .06s; }
.payweek__days li:nth-child(2) { transition-delay: .13s; }
.payweek__days li:nth-child(3) { transition-delay: .20s; }
.payweek__days li:nth-child(4) { transition-delay: .27s; }
.payweek__days li:nth-child(5) { transition-delay: .40s; }  /* Friday */
.payweek__days li:nth-child(6) { transition-delay: .52s; }
.payweek__days li:nth-child(7) { transition-delay: .59s; }
.payweek[data-reveal="in"] .payweek__days .is-on {
  animation: payLand .45s var(--ease-out) .40s both;
}
@keyframes payLand {
  from { transform: translateY(-7px) scale(.94); }
  60%  { transform: translateY(0) scale(1.03); }
  to   { transform: none; }
}

.payweek__note {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  margin: 0;
}

.payweek__pair {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* not 1fr/1fr: "Uncapped" is eight characters of a wide display
     face and the other cell holds two digits, so an even split
     starves the word that actually needs the room */
  grid-template-columns: 1.2fr 1fr;
  border-top: 1px solid var(--stroke);
  background: var(--s2);
}
.payweek__pair li { padding: 18px 24px 20px; min-width: 0; }
.payweek__pair li + li { border-left: 1px solid var(--stroke); }
.payweek__pair b {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  /* No overflow-wrap:anywhere here — it broke UNCAPPED across two
     lines and split the + off the 40. Size it to fit instead. */
  white-space: nowrap;
}
.payweek__pair b i { font-style: normal; color: var(--accent); }
/* Direct child only. A bare `.payweek__pair span` also matches the
   .stat-num the counter writes into — which is nested inside the <b>
   — and turned the digits into a block, so "40" and its "+" landed on
   separate lines however hard white-space:nowrap tried. */
.payweek__pair li > span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  margin-top: 9px;
}

@media (max-width: 480px) {
  .payweek__top { padding: 18px 16px 20px; }
  .payweek__days { gap: 4px; }
  .payweek__days li { height: 40px; font-size: 10px; }
  .payweek__pair li { padding: 15px 16px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .payweek__days li { opacity: 1; transform: none; transition: none; }
  .payweek[data-reveal="in"] .payweek__days .is-on { animation: none; }
}


/* ------------------------------------------------------------
   2. THREE ROLES
   ------------------------------------------------------------ */

.roles3 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}

.role3 {
  background: var(--bg-deep);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 34px 30px 32px;
  display: flex;
  flex-direction: column;
}
.role3__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 30px;
}
.role3__t {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: var(--tr-display);
  margin: 0 0 12px;
}
.role3__b {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0 0 auto;
  padding-bottom: 26px;
  text-wrap: pretty;
}
.role3 .tagset { margin: 0; }
/* Same accent treatment as the case-study period badges: soft fill,
   line border, accent ink. Scoped to the role cards — the .tagset
   chips on How It Works are signed off as they are. */
.role3 .tagset li {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

@media (max-width: 900px) { .roles3 { grid-template-columns: 1fr; } }


/* ------------------------------------------------------------
   3. DO THE MATH ON A REAL WEEK

   LAUNCH BLOCKER. Every figure is pending: it has to come off a
   real rep's check with that rep's consent. Nothing is invented,
   so the stub ships with its line items and no amounts, and says
   so on its face. The copy doc also says this visual will be
   replaced by a client-produced image — so this is a slot, kept
   deliberately plain, not a showpiece.
   ------------------------------------------------------------ */

.week-math__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--gap-col-lg);
  align-items: center;
}
.week-math .sec-head { margin-bottom: 0; }

/* The stub stays dark on a light page — it is a product surface,
   the way Stripe keeps a code block dark in a white section. */
/* A dark surface owns its own text colour. These panels used to sit
   inside .section--dark and inherit a light colour from it; now that
   the sections around them are light, anything inside without an
   explicit colour falls through to near-black ink on near-black. */
.stub {
  color: var(--on-dark-list);
  border: 1px solid var(--smoke);
  border-radius: var(--r-card);
  background: var(--smoke);
  overflow: hidden;
  box-shadow: var(--sh-mock);
}
.stub__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 13px 20px;
  border-bottom: 1px solid var(--bw-08);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.stub__head em {
  font-style: normal;
  color: var(--gold);
  border: 1px solid rgba(212,168,90,0.4);
  border-radius: var(--r-button);
  padding: 4px 9px 3px;
}

.stub__lines { margin: 0; padding: 6px 20px 8px; }
.stub__lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--bw-08);
}
.stub__lines dt {
  font-size: var(--t-body);
  color: var(--on-dark-list);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stub__lines dt i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.stub__lines dd {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  color: var(--on-dark-mono);
  font-variant-numeric: tabular-nums;
}
/* The net keeps its top rule — that is the total line. The row above
   it drops its bottom rule, or the two stack 4px apart and read as a
   double line. */
.stub__lines > div:nth-last-child(2) { border-bottom: 0; }
.stub__net { border-bottom: 0 !important; border-top: 1px solid var(--bw-18); margin-top: 4px; padding-top: 20px !important; }
.stub__net dt { color: var(--bg); font-weight: 600; }
.stub__net dd { color: var(--gold); font-size: 26px; }

.stub__foot {
  margin: 0;
  padding: 13px 20px 15px;
  border-top: 1px solid var(--bw-08);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  line-height: 1.7;
}

@media (max-width: 1000px) {
  .week-math__grid { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .week-math .sec-head { margin-bottom: 0; }
}


/* ------------------------------------------------------------
   4. WHO WE HIRE
   ------------------------------------------------------------ */

/* Four boxes, not one bordered table with dividers — the same card
   the role cards and the case studies use. The index keeps its own
   line above a hairline, which is what stops a four-up of pure text
   reading as a spreadsheet. */
.traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
}
.trait {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 28px 26px 30px;
}
.trait__n {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  color: var(--accent);
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--stroke);
}
/* 20px, not 24: at four-up the card is a fixed 261px and
   "COACHABILITY" needs 239px of the 207px inside it. The card cannot
   grow (the container caps at 1180) and the word cannot wrap, so the
   type is what gives. */
.trait__t {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  margin: 0 0 11px;
}
.trait__b {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  text-wrap: pretty;
}

/* Four up needs a 261px card to fit "COACHABILITY" at 20px. That
   only happens once the container is at its 1180 cap, so the split
   to two-up has to come here, not at 900 — between the two the
   title was running out of its box. */
@media (max-width: 1180px) {
  .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .traits { grid-template-columns: 1fr; }
  .trait { padding: 24px 22px 26px; }
  .trait__n { margin-bottom: 16px; padding-bottom: 14px; }
}


/* ------------------------------------------------------------
   5. YOUR FIRST 30 DAYS

   Four beats across, connected — the same journey grammar as the
   How It Works spine, turned on its side because this one is
   short enough to take in at a glance.
   ------------------------------------------------------------ */

/* Same shape as the home page's stepper: nodes on a rail above, a
   hairline stem dropping into each card, the copy in boxes. Here
   every body stays visible — the home one is a disclosure because
   four columns of running text was a wall; these four are two lines
   each and hiding three of them would cost more than it buys.
   ------------------------------------------------------------ */

.first30 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
}

.d30 {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* The rail is drawn per item and reaches the next item's node, so
   nothing has to be measured at runtime. The last item draws none —
   the journey ends at its node rather than overhanging past it. */
.d30::before {
  content: "";
  position: absolute;
  left: 0; right: calc(-1 * var(--gap-card));
  top: 10px;
  height: 1px;
  background: var(--stroke);
}
.d30:last-child::before { display: none; }

.d30__node {
  position: relative;
  z-index: 1;
  width: 21px; height: 21px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--stroke-strong);
  background: var(--bg);
  display: grid;
  place-items: center;
}
.d30__node i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
/* stem from the node into the card it belongs to */
.d30__node::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 19px;
  background: var(--stroke);
}
.d30--paid .d30__node { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,168,90,0.14); }
.d30--paid .d30__node i { background: var(--gold); }
.d30--paid .d30__node::after { background: var(--gold-line); }

.d30__card {
  flex: 1;
  margin-top: 19px;
  padding: 22px 22px 24px;
  background: var(--s2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
}
.d30--paid .d30__card { border-color: var(--gold-line); }

.d30__when {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  margin: 0 0 14px;
}
.d30__t {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: var(--tr-display);
  margin: 0 0 10px;
}
.d30__b {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* stacked: the node takes its own column and the spine runs the
     full height of each card beside it */
  .first30 { grid-template-columns: 1fr; gap: var(--gap-card); }
  .d30 {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr);
    column-gap: 17px;
  }
  .d30::before {
    left: 10px; right: auto;
    top: 21px; bottom: calc(-1 * var(--gap-card));
    width: 1px; height: auto;
  }
  .d30__node::after { display: none; }
  .d30__card { margin-top: 0; }
  .d30__when { margin-bottom: 10px; }
}


/* ------------------------------------------------------------
   6. APPLICATION
   ------------------------------------------------------------ */

.apply {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: var(--gap-col-lg);
  align-items: start;
}
.apply__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.apply__title { font-size: var(--t-h2-minor); margin-bottom: 20px; }
.apply__sub { max-width: 36ch; }
.apply__markets { margin: 28px 0 0; }

/* Role select. Radios, styled as pills — a real radio group, so
   it works with a keyboard and reports a value. */
.pills { border: 0; padding: 0; margin: 4px 0 0; }
.pills legend {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  padding: 0;
  margin-bottom: 10px;
}
.pills__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills label {
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  font-weight: 500;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--body);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-button);
  padding: 10px 16px 9px;
  cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
}
.pills label:hover { border-color: var(--text); color: var(--text); }
.pills input:checked + label {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.pills input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1000px) {
  .apply { grid-template-columns: 1fr; gap: 40px; }
  .apply__aside { position: static; }
  .apply__sub { max-width: 52ch; }
}