/* content.css - long form patterns used on the inner pages:
   prose blocks, spec tables, numbered timeline, two column lists,
   pull quote, icon rows and the compare table. */

.prose {
  max-width: 74ch;
  margin: 0 auto;
}

.prose > p + p { margin-top: 16px; }
.prose h3 { margin-top: 34px; }

.lede {
  /* One paragraph size sitewide, so the opening paragraph earns its role
     through colour and measure rather than by being bigger. */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 62ch;
  color: var(--ink);
}

/* Spec table used for the fleet pages */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin-top: 22px;
  font-size: var(--fs-small);
}

.spec th,
.spec td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.spec th {
  width: 34%;
  font-family: var(--font-display);
  font-weight: var(--w-ui);
  letter-spacing: .01em;
  color: var(--blue);
}

.spec tr:last-child th,
.spec tr:last-child td { border-bottom: 0; }

/* Rate table on the rates page */
.ratetable {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.ratetable caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  color: var(--muted);
  font-size: var(--fs-small);
}

.ratetable th,
.ratetable td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.ratetable thead th {
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-display);
  letter-spacing: .01em;
  font-size: var(--fs-small);
}

.ratetable tbody tr:nth-child(even) { background: var(--band); }
.ratetable tbody tr:last-child th,
.ratetable tbody tr:last-child td { border-bottom: 0; }
.ratetable .is-price {
  font-family: var(--font-display);
  font-size: var(--fs-num-md);
  font-weight: var(--w-ui);
  color: var(--green-dark);
  white-space: nowrap;
}

/* Numbered timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 78ch;
  margin-inline: auto;
}

.timeline li {
  position: relative;
  padding: 0 0 30px 62px;
  border-left: 2px solid var(--line);
  margin-left: 20px;
}

.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }

.timeline__step {
  position: absolute;
  left: -21px;
  top: -4px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--w-h1);
  font-size: var(--fs-h5);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--w-ui);
  color: var(--blue);
  margin: 0 0 6px;
}

/* Two column definition list */
.pairs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 34px;
  margin: 0;
}

.pairs__k {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--blue);
  margin: 0 0 4px;
}

.pairs__v { margin: 0; color: var(--ink); font-size: var(--fs-body); }

/* Do and do not columns */
.dodont {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}

.dodont__col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-card);
  box-shadow: var(--shadow);
}

.dodont__col--do { border-top: 5px solid var(--green); }
.dodont__col--dont { border-top: 5px solid var(--blue); }

.dodont h3 { margin-bottom: 16px; }

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

.dodont li {
  position: relative;
  padding: 9px 0 9px 32px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}

.dodont li:last-child { border-bottom: 0; }

.dodont li::before {
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--font-display);
  font-weight: var(--w-ui);
}

.dodont__col--do li::before { content: "Do"; color: var(--green-dark); font-size: var(--fs-micro); }
.dodont__col--dont li::before { content: "No"; color: var(--blue); font-size: var(--fs-micro); }

/* Pull quote */
.pullquote {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.4;
  color: var(--blue);
}

.pullquote__by {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--muted);
  letter-spacing: .01em;
}

/* Feature rows */
.featurerow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}

.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-sm);
  padding: 24px 26px;
}

.feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  color: var(--blue);
  margin: 0 0 8px;
}

.feature p { margin: 0; font-size: var(--fs-body); color: var(--ink); }

/* Compact fact strip */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
  text-align: center;
}

.fact {
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 26px 18px;
}

.fact__v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-num-lg);
  font-weight: var(--w-h1);
  color: var(--blue);
  line-height: 1.1;
}

.fact__l { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------------------------------------------
   The rental agreement
   Long form legal text. Narrower measure than the rest of the site
   because it has to be read carefully rather than skimmed.
------------------------------------------------------------------- */

.terms { max-width: 74ch; }
.terms h2 { margin: 0 0 14px; }
.terms h3 { margin: 34px 0 12px; }
.terms p { margin: 0 0 16px; }

.terms__list {
  margin: 0 0 16px;
  padding-left: 22px;
}

.terms__list li { margin-bottom: 10px; }

.terms__confirm {
  margin: 30px 0 0;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--green);
  background: var(--green-soft);
  font-weight: var(--w-ui);
  color: var(--green-dark);
}

.terms__aside {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* The parts of the agreement the client wants noticed. Weight rather than
   colour, so it still reads as the same document. */
.terms__strong {
  font-weight: var(--w-ui);
  color: var(--ink);
}





.pairs--bordered {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 700px) {
  .pairs--bordered {
    grid-template-columns: 1fr;
  }
}

.pairs__item {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 20px 24px;
  
}