/* ============================================================
   NOBL — FOR ISPS
   Page-scoped styles. Hero, forms, FAQ, rail, CTA and section
   headers all come from components.css — nothing here leaks.

   This page argues to a different reader than the rest of the
   site: someone buying a channel, not joining one. So it leads
   with proof and ends on a request form rather than a pitch.
   ============================================================ */


/* ------------------------------------------------------------
   2. THE VALUE GRID

   Six claims, no cards. Hairline cells in a three-up grid read
   as a spec sheet, which is what a provider is actually
   scanning for — six rounded boxes would read as marketing.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   CASE STUDIES

   Continues the grey field the scorecard sits on rather than
   starting a third colour band — these three ARE the scorecard's
   evidence, and the section after them is white, which gives the
   break. Hence no top border and a shortened top pad.

   The three markets are not directly comparable: two ran 90 days
   and one ran 60. The period is a chip on every card, never a
   footnote on one, so no card is read against the wrong clock.
   ------------------------------------------------------------ */

.case-sec {
  border-top: 0;
  padding-top: clamp(52px, 5.5vw, 76px);
}

.cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}
.case {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 24px 26px 26px;
}

.case__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 26px;
}
.case__id {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent);
}
.case__days {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  /* The period is the one thing that differs card to card, so it
     carries the accent — the kit's designed trio: soft fill, line
     border, accent ink. */
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-button);
  padding: 5px 8px 4px;
  white-space: nowrap;
  flex: none;
}

.case__v {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.case__v i { font-style: normal; color: var(--accent); }
.case__l {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  margin: 12px 0 0;
}

/* Same figure-left / label-right band as the hero proof rows, with
   the halftone filling the gap between them. Pushed to the foot of
   the card so all three sit on one line whatever the headline
   figure does. */
.case__rate {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: auto 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--stroke);
}
.case__rate::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 22px; bottom: 0;
  background-image: radial-gradient(var(--rule) 1px, transparent 1.2px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent 24%, #000 52%, transparent 84%);
          mask-image: linear-gradient(90deg, transparent 24%, #000 52%, transparent 84%);
  opacity: .5;
  pointer-events: none;
}
.case__rate b {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  padding-right: 10px;
}
.case__rate b i { font-style: normal; color: var(--accent); }
.case__rate span {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--body);
  text-align: right;
  background: var(--bg);
  padding-left: 10px;
}

@media (max-width: 900px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cases { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   OUTCOMES — the provider scorecard

   One document rather than four cards plus a strip: the scorecard
   NOBL issues a provider. Dark, because it is a product surface on
   a light page — the same rule the OS mock and the market scorecard
   follow.

   --pct on a row is the only per-metric input; the bar fills off the
   reveal the page already performs, staggered per row, so there is no
   observer and no JS for any of this.

   The header and the footer are scoped SEPARATELY on purpose: the
   four rows are company-wide, the case study is one market in one
   quarter. One shared label would mislabel every figure here.
   ------------------------------------------------------------ */

.scard {
  color: var(--on-dark-list);
  background: var(--smoke);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 44px 70px -40px rgba(11,13,15,0.6),
              0 4px 10px -4px rgba(11,13,15,0.18);
}

.scard__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bw-08);
  background: rgba(255,255,255,0.03);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--on-dark-mono);
}
.scard__bar i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-fill);
  flex: none;
}
.scard__bar span { color: var(--on-dark-list); }
.scard__bar em { font-style: normal; margin-left: auto; text-align: right; }

.scard__rows { list-style: none; margin: 0; padding: 0; }

.scard__row {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr) 108px;
  align-items: center;
  gap: 30px;
  padding: 24px 24px 26px;
}
.scard__row + .scard__row { border-top: 1px solid var(--bw-08); }

.scard__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  margin: 0 0 7px;
}
.scard__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-dark-body);
  margin: 0;
  text-wrap: pretty;
}
/* Three of these rise with performance and one falls. Annotating the
   odd one out is the difference between a short bar reading as a good
   number and reading as a failure. */
.scard__goal {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--on-dark-mono);
  margin: 8px 0 0;
}
.scard__goal i { font-style: normal; color: var(--accent-fill); }

.scard__track {
  display: block;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--bw-10);
  overflow: hidden;
}
.scard__track i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent-fill);
  transition: width 1.15s var(--ease-out);
}
.scard[data-reveal="in"] .scard__track i { width: calc(var(--pct) * 1%); }
.scard__row:nth-child(1) .scard__track i { transition-delay: .25s; }
.scard__row:nth-child(2) .scard__track i { transition-delay: .38s; }
.scard__row:nth-child(3) .scard__track i { transition-delay: .51s; }
.scard__row:nth-child(4) .scard__track i { transition-delay: .64s; }
/* A 1% bar is a sliver; give it a visible minimum so the row reads as
   measured rather than as a bar that failed to render. The number
   beside it carries the actual value. */
.scard__row[data-goal="low"] .scard__track i { min-width: 6px; }

.scard__val {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--on-dark-heading);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: 0;
  white-space: nowrap;
}
.scard__val em { font-style: normal; color: var(--accent-fill); }

@media (max-width: 900px) {
  .scard__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px;
    padding: 20px 18px 22px;
  }
  .scard__id { grid-column: 1; }
  .scard__val { grid-column: 2; grid-row: 1; align-self: start; font-size: 30px; }
  .scard__track { grid-column: 1 / 3; }
  .scard__bar { padding-left: 18px; padding-right: 18px; }
  .scard__bar em { font-size: 8.5px; }
}


/* ------------------------------------------------------------
   5. LAUNCH PLAN + PARTNER REQUEST

   The plan and the way to start it, side by side: reading the
   four weeks and asking for them shouldn't be two scroll events.
   ------------------------------------------------------------ */

.launch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--gap-col-lg);
  align-items: start;
}
.launch .sec-head { margin-bottom: 44px; }

/* --- the launch plan -----------------------------------------

   The week marker was a grid child in a stretch row, so a 26px chip
   rendered as tall as whatever copy sat beside it — a 130px box
   containing the words "Wk 2". That was the wonk. It now sits in a
   fixed-height gutter with the copy in a card beside it, which is
   the same node/stem/card shape the How It Works steps use.
   ------------------------------------------------------------ */

.weeks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.week {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;      /* NOT stretch — this is the fix */
}

/* the spine, drawn per segment so it grows with the staggered reveal */
.week:not(.week--last)::before {
  content: "";
  position: absolute;
  left: 24px;              /* the chip's centre */
  top: 27px;
  bottom: -14px;
  width: 1px;
  background: var(--stroke);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease-out) .15s;
}
.week[data-reveal="in"]:not(.week--last)::before { transform: scaleY(1); }

.week__n {
  /* a chip, so it must size to its own content and nothing else */
  justify-self: start;
  align-self: start;
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--t-chip);
  font-weight: 500;
  letter-spacing: var(--tr-chip);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-button);
  padding: 7px 9px 6px;
  text-align: center;
  margin: 0;
}
/* stem from the chip into the card it belongs to */
.week__n::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  /* gutter (58) minus the chip (48). Not a percentage: a percentage
     here resolves against the chip's PADDING box, which is 2px short
     of its border box, and the stem ran into the card. */
  width: 10px;
  height: 1px;
  background: var(--stroke);
}
/* Week 4 is the arrival. Dark, not gold — gold is money on this site
   and boots down is not a payout. */
.week--last .week__n {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}
.week--last .week__n::after { background: var(--stroke-strong); }

.week__card {
  background: var(--s2);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 18px 22px 20px;
}
.week--last .week__card { border-color: var(--stroke-strong); }

.week__t {
  font-size: var(--t-card-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
/* No max-width here: the CARD is the measure now. Capping the text
   instead left a full-width box with its copy stopping halfway once
   the grid collapsed to one column. */
.week__b {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .week:not(.week--last)::before { transition: none; transform: scaleY(1); }
}

@media (max-width: 1000px) {
  .launch__grid { grid-template-columns: 1fr; gap: 48px; }
  /* one column means a ~935px card; hold it to a readable measure */
  .weeks { max-width: 600px; }
}


/* ------------------------------------------------------------
   6. BRAND SAFETY
   ------------------------------------------------------------ */

.safety {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-card);
}
.safety__item {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: var(--pad-card-sm);
}
.safety__mark {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(62,107,135,0.10);
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.safety__mark i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.safety__t {
  font-size: var(--t-card-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 9px;
}
.safety__b {
  font-size: var(--t-card);
  line-height: var(--lh-body);
  color: var(--body);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 1000px) { .safety { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .safety { grid-template-columns: 1fr; } }