/* ============================================================
   PULP FUNCTION — "Design on demand" offer page
   The flexible, time-based shot. Rides on offer.css + menu.css;
   only adds the three bespoke blocks this offer needs:
     · the three rate cards (hour / day / month)
     · the "rough times" price list
   The how-it-works flow reuses the shared .recipe / .steps.
   ============================================================ */

/* =================== THREE RATES =================== */
.rates { margin-top: clamp(10px,1.6vw,20px); display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(22px,3vw,46px); }
.rate { display: flex; flex-direction: column; min-height: 228px;
  padding-top: 20px; border-top: 2px solid var(--ink); }
.rate.feat { border-top-color: var(--accent); }
.rate .rlab { display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.rate .rlab .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 10px; }
.rate .rprice { margin-top: clamp(20px,2.4vw,30px); font-family: 'Inconsolata', ui-monospace, monospace;
  font-weight: 700; font-size: clamp(42px,4.6vw,62px); line-height: 0.92; letter-spacing: -0.012em; color: var(--ink); }
.rate .rprice .u { font-size: 0.4em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.rate .rprice.txt { font-size: clamp(24px,2.2vw,32px); font-style: italic; font-weight: 700; color: var(--muted); line-height: 1.05; }
.rate .rsave { margin-top: 12px; font-style: italic; font-weight: 700;
  font-size: clamp(15px,1.2vw,17px); color: var(--accent); }
.rate .rnote { margin: auto 0 0; padding-top: 18px;
  font-size: clamp(14.5px,1.15vw,16px); line-height: 1.45; color: var(--ink-2); max-width: 30ch; }

/* =================== ROUGH TIMES (price list) =================== */
.timelist { margin-top: clamp(28px,3.4vw,44px); border-top: 3px solid var(--ink); }
.trow { display: flex; align-items: baseline; gap: clamp(14px,2vw,26px); padding: clamp(18px,2vw,24px) 0;
  border-bottom: 1px solid var(--hair); }
.trow .tn { font-weight: 700; font-size: clamp(19px,1.8vw,25px); letter-spacing: -0.014em; flex: none; max-width: 60%; }
.trow .dots { flex: 1 1 auto; align-self: flex-end; transform: translateY(-6px);
  border-bottom: 2px dotted var(--line-2); min-width: 20px; }
.trow .tt { flex: none; font-family: 'Inconsolata', ui-monospace, monospace; font-weight: 700;
  font-size: clamp(17px,1.5vw,21px); letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; }
.trow.ph .tn, .trow.ph .tt { color: var(--muted); font-style: italic; font-weight: 400; }
.timelist + .tnote { margin-top: 18px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--muted); }

/* =================== HOW IT WORKS (reuses .recipe/.steps) =================== */
.howto.recipe { padding: clamp(64px,8vw,112px) 0; }
.howto .steps .step p { max-width: 26ch; }

/* =================== RESPONSIVE =================== */
@media (max-width: 760px) {
  .rates { grid-template-columns: 1fr; gap: 0; }
  .rate { min-height: 0; padding: 22px 0 26px; border-top: 1px solid var(--hair); }
  .rate:first-child { border-top: 2px solid var(--ink); }
  .rate.feat { border-top-color: var(--accent); }
  .rate .rnote { margin: 14px 0 0; }
  .trow .tn { max-width: none; }
}