/* Opening a stop on the route (price-route-open.mjs). The red dot grows into a circle that fills the section with one
   stop in full, and shrinks back into the dot when closed. Two fills: red (paper text) and sand (ink text, red pen).
   Nothing under 18 px; the open stop fits inside the section, so nothing on the page moves. */
.dm-page .pr-route[data-openable="true"] .pr-stop { cursor: pointer; }
.dm-page .pr-route[data-openable="true"] .pr-station { transition: scale .2s cubic-bezier(.3, 1.4, .5, 1); }
.dm-page .pr-route[data-openable="true"] .pr-stop:hover .pr-station, .dm-page .pr-route[data-openable="true"] .pr-station:focus-visible { scale: 1.12; }
.dm-page .pr-station:focus-visible { outline: 3px solid var(--rd-red); outline-offset: 5px; }
/* the cue that a stop opens, on the red dot itself: a plus, or a ring that draws itself while the pointer rests */
.dm-page .pr-dot-plus { fill: none; stroke: var(--rd-paper); stroke-width: 3.2; stroke-linecap: round; }
.dm-page .pr-dot-hold { fill: none; stroke: var(--rd-red); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dm-page .pr-route[data-holding] .pr-dot-hold { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
/* the open stop's sand is a shade lighter and yellower than the road's: the same colour across a whole section read too red (2026-09-23) */
.dm-page { --pr-open-sand: #f8dfb4; }

.dm-page .pr-open { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; background: var(--rd-red); color: var(--rd-paper);
  transition: clip-path .62s cubic-bezier(.22, .8, .2, 1), background-color .62s ease; }
.dm-page .pr-open[hidden] { display: none; }
.dm-page .pr-open[data-fill="sand"][data-state="open"] { background: var(--pr-open-sand); color: var(--rd-ink); }     /* the red dot opens into the road */
.dm-page .pr-open-inner { opacity: 0; transition: opacity .16s ease; }
.dm-page .pr-open[data-state="open"] .pr-open-inner { opacity: 1; transition: opacity .3s ease .3s; }

.dm-page .pr-open-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.dm-page .pr-open-stops { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.dm-page .pr-open-tab { border: 0; background: none; padding: 6px 0 10px; font: 600 20px/1.2 var(--rd-display); letter-spacing: -.02em; color: inherit; opacity: .72; cursor: pointer; }
.dm-page .pr-open-tab:hover, .dm-page .pr-open-tab[aria-pressed="true"] { opacity: 1; }
.dm-page .pr-open-tab[aria-pressed="true"] { background: left bottom / 100% 9px no-repeat var(--pr-scribble); }
.dm-page .pr-open-close { border: 2px solid currentColor; border-radius: 999px; background: none; padding: 11px 22px; min-height: 48px; font: 600 18px/1 var(--rd-display); color: inherit; cursor: pointer; }
.dm-page .pr-open-close::before { content: "\2190\00a0"; }

.dm-page .pr-open-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 90px); margin-top: clamp(24px, 3vw, 44px); align-items: start; }
.dm-page .pr-open h3, .dm-page .pr-open h4, .dm-page .pr-open p, .dm-page .pr-open ul { margin: 0; }
.dm-page .pr-open-name { font: 600 clamp(40px, 4.4vw, 64px)/1 var(--rd-display); letter-spacing: -.045em; outline: none; }
.dm-page .pr-open-price { margin-top: 14px !important; font: 700 clamp(28px, 2.8vw, 40px)/1.1 var(--rd-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.dm-page .pr-open-founding { margin-top: 10px !important; font-family: var(--rd-hand); font-size: 30px; line-height: 1; rotate: -2deg; transform-origin: left center; -webkit-text-stroke: .6px currentColor; }
.dm-page .pr-open-founding-price { font-size: 42px; }
.dm-page .pr-open-fact { margin-top: 18px !important; max-width: 19em; font-size: clamp(19px, 1.6vw, 22px); font-weight: 600; line-height: 1.35; }
.dm-page .pr-open-list h4 { font: 600 clamp(20px, 1.7vw, 24px)/1.2 var(--rd-display); letter-spacing: -.02em; }
.dm-page .pr-open-list ul { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; }
.dm-page .pr-open-list li { position: relative; padding-left: 26px; font-size: clamp(19px, 1.5vw, 21px); line-height: 1.38; color: inherit; }
.dm-page .pr-open-list li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 14px; height: 3px; border-radius: 2px; background: var(--pr-accent); rotate: -8deg; }
.dm-page .pr-open-list + .pr-open-list { margin-top: 20px; }
/* the partnership's two tiers, side by side (v6, 2026-09-25) */
.dm-page .pr-open-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(22px, 3vw, 44px); }
.dm-page .pr-open-tiers .pr-open-tier { margin-top: 0; }
.dm-page .pr-open-tier-price { margin-top: 2px !important; font: 700 clamp(20px, 1.7vw, 24px)/1.2 var(--rd-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dm-page .pr-open-note { margin-top: 16px !important; font-size: 19px; line-height: 1.4; }
.dm-page .pr-open-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }
.dm-page .pr-open-guarantee { padding-bottom: 10px; font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--rd-display); letter-spacing: -.02em; background: left bottom / 100% 9px no-repeat var(--pr-scribble); }
.dm-page .pr-open .primary-cta { font-size: 18px; padding: 16px 30px; min-height: 56px; cursor: pointer; }

/* the two fills: the accent (dashes, underlines, red pen) is paper on red and red on sand */
.dm-page .pr-open[data-fill="red"] { --pr-accent: var(--rd-paper);
  --pr-scribble: 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='%23fffdf6' stroke-width='2.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.dm-page .pr-open[data-fill="red"] .primary-cta { background: var(--rd-paper); border-color: var(--rd-paper); color: var(--rd-red); }
.dm-page .pr-open[data-fill="sand"] { --pr-accent: var(--rd-red);
  --pr-scribble: 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"); }
.dm-page .pr-open[data-fill="sand"] .pr-open-founding { color: var(--rd-red); }
.dm-page .pr-open[data-fill="sand"] .primary-cta { background: var(--rd-ink); border-color: var(--rd-ink); color: var(--rd-paper); }

@media (max-width: 900px) {
  .dm-page .pr-open { align-items: flex-start; padding-top: 36px; }
  .dm-page .pr-open-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) { .dm-page .pr-open-tiers { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dm-page .pr-open, .dm-page .pr-open-inner, .dm-page .pr-station { transition: none !important; } }