/* The route with prices on drawn.html: look A1, picked 2026-09-23 (pricing-looks.html has the looks it was picked from).
   His rules: fits one laptop screen (1366 x 700), every price and line on its own station, no vehicles, nothing under
   18 px. The road is painted in the upgrade scene's watercolour, without its grass (that scene sits right above);
   the red dot follows the pointer. */
.dm-page .pr-route { position: relative; overflow: clip; padding-block: clamp(40px, 4vw, 60px) clamp(34px, 3.4vw, 50px); }
/* on screens taller than a laptop the room above and below grows, to about what the founder and questions sections have,
   so the road's grass and the founder's sand fall away while the prices are read (his note, 2026-09-25). It still fits
   1366 x 700. On a phone, where the stops stand in a column, the prices are long already. */
@media (min-width: 901px) { .dm-page .pr-route { padding-block: clamp(40px, calc((100svh - 620px) * .5), 140px) clamp(34px, calc((100svh - 620px) * .45), 130px); } }
.dm-page .pr-route > .rd-width { position: relative; z-index: 1; }
.dm-page .pr-route .pr-heading { max-width: none; margin: 0; text-align: left; font-size: clamp(27px, 2.9vw, 42px); line-height: 1.06; }
.dm-page .pr-road { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dm-page .pr-paint-road { fill: none; stroke: var(--dm-road); stroke-width: 54; }          /* laid wider than the road, masked to its exact width */
.dm-page .pr-paint-edge { fill: none; stroke: var(--rd-ink); stroke-width: 1.9; stroke-linecap: round; }
.dm-page .pr-over { z-index: 2; }
.dm-page .pr-dot-fill { fill: var(--rd-red); stroke: var(--rd-paper); stroke-width: 3; }

/* the stops share one grid: every station on one line, the names on one line above them */
.dm-page .pr-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 76px auto; column-gap: clamp(18px, 2.2vw, 36px); margin-top: clamp(24px, 2.8vw, 40px); }
.dm-page .pr-stop { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; min-width: 0; }      /* its one column is the stop's own width: a long line must not widen it and push the station off the middle */
.dm-page .pr-top { align-self: start; padding-bottom: 16px; }
.dm-page .pr-station { align-self: center; width: 56px; height: 56px; box-sizing: border-box; border: 6px solid var(--rd-ink); border-radius: 50%; background: var(--rd-sheet); }
.dm-page .pr-text { padding-top: 18px; }
.dm-page .pr-stop h3 { width: fit-content; margin: 0 auto; padding-bottom: 7px; font-family: var(--rd-display); font-weight: 600; font-size: clamp(21px, 2.05vw, 30px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance;
  background: left bottom / 0 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C22 2 38 8 60 4 S98 3 118 5' fill='none' stroke='%23d8382f' stroke-width='2.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transition: background-size .25s ease; }
.dm-page .pr-stop[data-active="true"] h3 { background-size: 100% 9px; }     /* the stop under the red dot, underlined in the same red pen */
.dm-page .pr-price { margin: 3px 0 0; font-family: var(--rd-display); font-weight: 700; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.12; letter-spacing: -.035em; color: var(--rd-ink); font-variant-numeric: tabular-nums; text-wrap: balance; }
.dm-page .pr-stop:first-child .pr-price { color: var(--rd-red); }
.dm-page .pr-founding { margin: 6px 0 0; font-family: var(--rd-hand); font-size: 26px; line-height: 1; color: var(--rd-red); rotate: -2deg; text-wrap: balance; -webkit-text-stroke: .6px var(--rd-red); }      /* one line on a laptop; two on narrower screens */
.dm-page .pr-founding-price { font-size: 36px; }
.dm-page .pr-say { max-width: 13.5em; margin: 0; font-size: clamp(19px, 1.55vw, 22px); line-height: 1.34; color: #22302b; text-wrap: balance; }
.dm-page .pr-route .pb-guarantee { margin: clamp(26px, 2.8vw, 40px) 0 0; }   /* the guarantee and the one action, in a row under the route */
.dm-page .pr-route .primary-cta { font-size: 18px; padding: 16px 30px; min-height: 56px; cursor: pointer; }

/* phone: the road turned on its side, the stops under each other */
@media (max-width: 900px) {
  .dm-page .pr-road { display: none; }
  .dm-page .pr-stops { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dm-page .pr-stop { grid-row: auto; grid-template-rows: none; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; justify-items: start; align-content: start; text-align: left; position: relative; padding-bottom: 34px; }
  .dm-page .pr-stop::before { content: ""; position: absolute; left: 8px; top: 23px; bottom: -23px; width: 30px; background: linear-gradient(90deg, var(--rd-ink) 0 4px, var(--dm-road) 4px 26px, var(--rd-ink) 26px); }
  .dm-page .pr-stop:last-child::before { bottom: 0; }
  .dm-page .pr-stop > .pr-station { grid-column: 1; grid-row: 1; align-self: start; position: relative; z-index: 1; width: 46px; height: 46px; border-width: 5px; }
  .dm-page .pr-stop:first-child > .pr-station { background: var(--rd-red); }
  .dm-page .pr-stop > :not(.pr-station) { grid-column: 2; }
  .dm-page .pr-text { padding-top: 10px; }
  .dm-page .pr-stop h3 { margin-left: 0; }
  .dm-page .pr-say { max-width: none; }
  .dm-page .pr-founding { transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) { .dm-page .pr-stop h3 { transition: none; } }