/* /partner-program: the channel partner offer, generated by
   build-partner-program.py.

   The page is built from the homepage's components (hero tile, ui-card,
   section-head, dark textured band, two-card split, FAQ, closing banner).
   These are the rules for the parts that are new: the earnings calculator,
   the timeline under How it works, the terms panel, the portal card and the
   who-it's-for row. */

/* --- hero ---------------------------------------------------------------- */

.pp-hero { padding-bottom: 72px; }

.pp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}

.pp-hero-copy h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin-bottom: 18px;
  max-width: 13ch;
}

.pp-hero-sub {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 28px;
}

/* --- the calculator ------------------------------------------------------ */

.pp-calc { padding: 28px; }
.pp-calc-card { padding: 22px 24px 18px; }

.pp-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pp-field:first-of-type { padding-top: 4px; }

.pp-field-k { font-size: 0.88rem; color: var(--ink-soft); }
.pp-field-k em { font-style: normal; color: var(--ink-faint); }

.pp-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.pp-stepper button {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.pp-stepper button:hover:not(:disabled) { background: var(--bg-wash); }
.pp-stepper button:disabled { color: #b7c4cf; cursor: default; }
.pp-stepper button:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.pp-stepper output {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pp-range { display: flex; align-items: center; gap: 12px; flex: 0 1 230px; }
.pp-range b {
  flex: none;
  min-width: 58px;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* No browser fills a range track up to the thumb, so --fill is painted from
   the script and the track is a gradient (the same control as /referral). */
.pp-range input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(to right, var(--action) 0 var(--fill, 13%), var(--line) var(--fill, 13%) 100%);
  cursor: pointer;
}
.pp-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action);
  box-shadow: 0 2px 8px rgba(43, 69, 95, 0.22);
}
.pp-range input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action);
}
.pp-range input[type="range"]:focus-visible { outline: 3px solid rgba(46, 166, 245, 0.4); outline-offset: 4px; }

.pp-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 16px;
}
.pp-total-k { display: block; font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 4px; }
.pp-total-v {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pp-total-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.pp-month {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pp-cap {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--action-deep);
  background: #eaf4fb;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pp-cap.is-capped { color: #1c6b70; background: #e2f5f5; }

/* Twelve months in four quarter groups: the quarters are when money arrives,
   so the grouping carries information rather than decorating it. Each bar's
   track is the cap; the fill is what was earned under it. */
.pp-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pp-q-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  height: 72px;
}
.pp-bar {
  position: relative;
  display: block;
  border-radius: 6px;
  background: #edf3f8;
  overflow: hidden;
}
.pp-bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  border-radius: 6px;
  background: linear-gradient(180deg, #4fbdf2, var(--action));
}
.pp-q-label {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.pp-q-label b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.pp-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.pp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pp-legend .is-earned { background: var(--action); }
.pp-legend .is-room { background: #edf3f8; border: 1px solid var(--line); }

.pp-calc-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* --- how it works -------------------------------------------------------- */

.pp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pp-step {
  padding: 28px 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.pp-step h3 { font-size: 1.2rem; margin: 18px 0 8px; }
.pp-step p { font-size: 0.97rem; }
.pp-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1ec3d9, #2fa2f8);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}

/* The timeline: each dot is an event, each line the longest it can take,
   labelled above. The earning stretch is twelve month blocks in quarter
   groups, because the quarter is when money arrives. */
.pp-track {
  margin-top: 28px;
  padding: 26px 30px 24px;
  background: var(--bg-wash);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.pp-track-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 18px;
}
.pp-segs { display: grid; grid-template-columns: 1fr 1.25fr 2.6fr; }
.pp-seg { min-width: 0; }
.pp-seg-dur { font-size: 0.8rem; color: var(--ink-faint); margin: 0 0 10px 22px; white-space: nowrap; }
.pp-rail { position: relative; display: flex; align-items: center; height: 14px; }
.pp-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--action);
}
.pp-seg.is-earning .pp-dot { background: var(--action); }
.pp-line {
  flex: 1;
  height: 2px;
  margin: 0 6px;
  background: var(--action);
  transform-origin: left center;
}
.pp-line.is-dashed { background: repeating-linear-gradient(90deg, var(--action) 0 6px, transparent 6px 11px); }
.pp-seg-ev {
  margin-top: 12px;
  padding-right: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}

.pp-months { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-left: 8px; }
.pp-tq { position: relative; display: block; }
.pp-tq-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; height: 14px; }
.pp-tm { display: block; border-radius: 3px; background: var(--action); transform-origin: left center; }
.pp-tq small {
  position: absolute;
  top: 20px;
  left: 0;
  font-size: 0.72rem;
  color: var(--ink-faint);
}
/* The quarter labels hang under the blocks, so the event name moves right
   of the dot instead of under it, clear of them. */
.pp-seg.is-earning .pp-seg-ev { margin-top: 30px; }

.pp-track-pay {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* --- terms --------------------------------------------------------------- */

.pp-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 56px -32px rgba(9, 17, 26, 0.6);
}
.pp-term { padding: 32px 28px 30px; }
.pp-term + .pp-term { border-left: 1px solid var(--line); }
.pp-term b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.pp-term span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.pp-term p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* --- portal -------------------------------------------------------------- */

.pp-portal {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.pp-portal-copy h2 { margin-bottom: 4px; }
.pp-points { grid-template-columns: 1fr; margin: 24px 0 30px; gap: 12px; }

.pp-portal-visual { padding: 32px; }
.pp-portal-card { padding: 20px 22px; }
.pp-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-portal-head .ui-card-label { margin: 0; }
.pp-portal-eg {
  font-size: 0.72rem;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.pp-portal-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 6px;
}
.pp-portal-sum > div { background: var(--bg-wash); border-radius: 10px; padding: 12px 14px; }
.pp-portal-sum small { display: block; font-size: 0.74rem; color: var(--ink-faint); }
.pp-portal-sum b {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
}

.pp-rows { list-style: none; }
.pp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pp-row-co b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.pp-row-co small { font-size: 0.76rem; color: var(--ink-faint); }
.pp-row-amt { text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.pp-pill {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
}
.pp-pill.is-earning { color: #1c6b70; background: #e2f5f5; }
.pp-pill.is-confirmed { color: var(--action-deep); background: #eaf4fb; }
.pp-pill.is-review { color: var(--ink-soft); background: #eef2f5; }

.pp-capbar { padding-top: 14px; }
.pp-capbar-k { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 8px; }
.pp-capbar-k b { color: var(--ink); font-weight: 600; }
.pp-capbar-track { display: block; height: 8px; border-radius: 999px; background: #edf3f8; overflow: hidden; }
.pp-capbar-track i { display: block; height: 100%; border-radius: 999px; background: var(--action); }

/* --- who it's for -------------------------------------------------------- */

.pp-who {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.pp-who-item { padding: 26px 22px 28px; }
.pp-who-item + .pp-who-item { border-left: 1px solid var(--line); }
.pp-who-item b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 8px; }
.pp-who-item p { font-size: 0.9rem; line-height: 1.55; }

.pp-faq-mail { margin-top: 18px; font-size: 0.9rem; color: var(--ink-faint); }

/* --- tablet -------------------------------------------------------------- */

@media (max-width: 1023px) {
  .pp-hero-grid, .pp-portal { grid-template-columns: minmax(0, 1fr); }
  .pp-hero-copy h1 { max-width: 16ch; }
  .pp-calc, .pp-portal-visual { max-width: 560px; }
  .pp-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-term:nth-child(3) { border-left: 0; }
  .pp-term:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .pp-seg-dur { white-space: normal; padding-right: 12px; }
  .pp-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-who-item + .pp-who-item { border-left: 0; }
  .pp-who-item { border-top: 1px solid var(--line); }
  .pp-who-item:nth-child(even) { border-left: 1px solid var(--line); }
  .pp-who-item:first-child { border-top: 0; }
  .pp-who-item:nth-child(2) { border-top: 0; }
  .pp-who-item:last-child { grid-column: 1 / -1; border-left: 0; }
}

/* --- phone: the steps and the timeline stack, the timeline vertically ---- */

@media (max-width: 767px) {
  .pp-hero { padding-bottom: 48px; }
  .pp-calc, .pp-portal-visual { padding: 16px; }
  .pp-calc-card { padding: 18px 16px 14px; }
  .pp-field { flex-wrap: wrap; }
  .pp-range { flex: 1 1 100%; }
  .pp-chart { gap: 8px; }
  .pp-q-label { flex-direction: column; gap: 0; }

  .pp-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .pp-track { padding: 22px 20px; }
  .pp-segs { grid-template-columns: minmax(0, 1fr); }
  .pp-seg { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; }
  .pp-seg-dur { grid-column: 2; grid-row: 2; margin: 2px 0 18px; white-space: normal; }
  .pp-rail { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; height: auto; align-items: center; }
  .pp-line { width: 2px; height: auto; flex: 1; margin: 4px 0; transform-origin: center top; }
  .pp-line.is-dashed { background: repeating-linear-gradient(180deg, var(--action) 0 6px, transparent 6px 11px); }
  .pp-seg-ev, .pp-seg.is-earning .pp-seg-ev { grid-column: 2; grid-row: 1; margin: 0; }
  .pp-seg.is-earning { grid-template-rows: auto auto auto; }
  /* The month blocks live inside the rail on desktop; here the rail is a
     14px column, so it dissolves and the blocks take the text column. */
  .pp-seg.is-earning .pp-rail { display: contents; }
  .pp-seg.is-earning .pp-dot { grid-column: 1; grid-row: 1; margin-top: 2px; }
  .pp-seg.is-earning .pp-seg-dur { margin-bottom: 8px; }
  .pp-months { grid-column: 2; grid-row: 3; margin: 0 0 22px; }

  .pp-terms { grid-template-columns: minmax(0, 1fr); }
  .pp-term + .pp-term { border-left: 0; border-top: 1px solid var(--line); }
  .pp-term { padding: 24px 22px; }

  .pp-who { grid-template-columns: minmax(0, 1fr); }
  .pp-who-item, .pp-who-item:nth-child(even) { border-left: 0; border-top: 1px solid var(--line); }
  .pp-who-item:nth-child(2) { border-top: 1px solid var(--line); }
  .pp-who-item { padding: 20px; }

  .pp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-row-amt { display: none; }
}