/* drawn.html, 2026-09-20: the rest of the middle in the language of the two approved sections.
   Every section gets a shape: paper, a pale sky field, paper, a pale sand field. Ink lines wander a little,
   colour comes from the hero's palette as flat washes, and the red pen marks what changed or what a person checked. */
.dm-page { --dm-sky: #dcedf5; --dm-sand: #fdf0dc; --dm-road: #fbd3a2; }
.dm-page .dm-sheet-edge { border: 1.8px solid var(--rd-ink); border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px; background: var(--rd-sheet); }
/* the hero's top bar comes before the hero copy and both are positioned, so the copy lay over it and "Let's talk" could not
   be pressed (the same fix as page-directions.css) */
.dm-page .site-header { z-index: 3; }

/* ------------------------------------------------------------------ workflows: from the pile to one page */
.dm-page .dm-flows { background: var(--dm-sky); padding-block: clamp(84px, 9vw, 150px) clamp(80px, 8vw, 130px); }
.dm-page .dm-flows .rd-statement { font-size: clamp(34px, 4.4vw, 68px); max-width: 15em; }
.dm-page .dm-flow-tabs button[aria-pressed="false"] { color: #35524a; }
.dm-page .dm-flow-stage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 9vw, 150px); align-items: center; margin-top: clamp(44px, 5vw, 80px); }
.dm-page .dm-pile { display: grid; justify-items: start; }
.dm-page .dm-source { width: min(100%, 350px); padding: 16px 20px 18px; border: 1.8px solid var(--rd-ink); border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px; background: var(--rd-sheet); rotate: -2.2deg; }
.dm-page .dm-source:nth-child(2) { margin: -14px 0 0 clamp(20px, 5vw, 78px); rotate: 1.6deg; }
.dm-page .dm-source:nth-child(3) { margin: -12px 0 0 clamp(6px, 1.6vw, 26px); rotate: -.8deg; }
.dm-page .dm-source header { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--rd-quiet); }
.dm-page .dm-source header b { font-weight: 600; color: var(--rd-ink); }
.dm-page .dm-kind { padding: 2px 8px; border: 1.3px solid var(--rd-ink); border-radius: 3px 5px 4px 6px; background: var(--dm-road); color: var(--rd-ink); font-size: 11.5px; }
.dm-page .dm-source:nth-child(2) .dm-kind { background: #d9e68f; }
.dm-page .dm-source:nth-child(3) .dm-kind { background: #cbe6f3; }
.dm-page .dm-source p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #2c3d37; }
.dm-page .dm-source mark { position: relative; background: none; color: var(--rd-ink); font-weight: 600; white-space: nowrap; }
.dm-page .dm-underline { left: -2%; bottom: -7px; width: 104%; height: 10px; }
.dm-page .dm-underline path { stroke-width: 2.6px; }

.dm-page .dm-threads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dm-page .dm-threads path { fill: none; stroke: var(--rd-red); stroke-width: 1.5px; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.dm-page .dm-threads circle { fill: var(--rd-red); opacity: 0; }

.dm-page .dm-result { position: relative; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 42px) clamp(22px, 2.4vw, 32px); border: 1.8px solid var(--rd-ink); border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px; background: var(--rd-sheet); rotate: .7deg; }
.dm-page .dm-result-label { margin: 0; font-size: 12.5px; color: var(--rd-quiet); }
.dm-page .dm-result h3 { font-family: var(--rd-display); font-size: clamp(23px, 2.1vw, 30px); letter-spacing: -.035em; font-weight: 600; line-height: 1.12; margin: 4px 0 clamp(16px, 2vw, 26px); }
.dm-page .dm-result ol { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 20px); }
.dm-page .dm-result li { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.42; color: var(--rd-ink); opacity: 0; }
.dm-page .dm-result li small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--rd-quiet); }
.dm-page .dm-result footer { display: flex; align-items: center; gap: 12px; margin-top: clamp(20px, 2.4vw, 30px); padding-top: 14px; border-top: 1px solid #c9d1cb; font-size: 14px; color: var(--rd-ink); opacity: 0; }
.dm-page .dm-checked-tick { width: 34px; height: 29px; overflow: visible; }
.dm-page .dm-checked-tick path { fill: none; stroke: var(--rd-red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.dm-page .dm-flow-note { margin: clamp(30px, 3vw, 46px) 0 0; font-size: 13.5px; color: #35524a; }

/* one phrase at a time: underline, thread, line. Then the person's tick. */
.dm-page [data-play="true"] .dm-source .dm-underline { animation: rd-wipe .4s ease-out forwards; animation-delay: calc(.3s + var(--i) * .85s); }
.dm-page [data-play="true"] .dm-threads path { animation: dm-draw .5s ease-in-out forwards; animation-delay: calc(.6s + var(--i) * .85s); }
.dm-page [data-play="true"] .dm-threads circle { animation: dm-show .2s ease-out forwards; animation-delay: calc(1.05s + var(--i) * .85s); }
.dm-page [data-play="true"] .dm-result li { animation: dm-rise .35s ease-out forwards; animation-delay: calc(1s + var(--i) * .85s); }
.dm-page [data-play="true"] .dm-result footer { animation: dm-show .3s ease-out forwards; animation-delay: 3.5s; }
.dm-page [data-play="true"] .dm-checked-tick path { animation: dm-draw .34s cubic-bezier(.3, .7, .3, 1) forwards; animation-delay: 3.75s; }
@keyframes dm-draw { to { stroke-dashoffset: 0; } }
@keyframes dm-show { to { opacity: 1; } }
@keyframes dm-rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* ------------------------------------------------------------------ the route */
.dm-page .dm-route { padding-block: clamp(90px, 9vw, 150px) clamp(84px, 8vw, 130px); }
.dm-page .dm-route .rd-statement { font-size: clamp(30px, 3.5vw, 54px); max-width: 17em; margin-inline: auto; text-align: center; }
.dm-page .dm-line { display: block; width: 100%; height: 96px; margin-top: clamp(30px, 4vw, 60px); overflow: visible; }
.dm-page .dm-road-edge { fill: none; stroke: var(--rd-ink); stroke-width: 25px; stroke-linecap: round; }
.dm-page .dm-road-fill { fill: none; stroke: var(--dm-road); stroke-width: 21.5px; stroke-linecap: round; }
.dm-page .dm-stop-mark { fill: var(--rd-sheet); stroke: var(--rd-ink); stroke-width: 2px; transition: fill .3s ease; }
.dm-page .dm-stop-mark[data-passed="true"] { fill: var(--rd-ink); }
.dm-page .dm-dot { fill: var(--rd-red); stroke: var(--rd-sheet); stroke-width: 2.5px; }
.dm-page .dm-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 44px); margin-top: 10px; }
.dm-page .dm-stop { padding: 6px 0 0 14px; outline-offset: 8px; opacity: .16; translate: 0 8px; transition: opacity .45s ease, translate .45s ease; cursor: default; }
.dm-page .dm-stop[data-reached="true"] { opacity: 1; translate: 0 0; }
.dm-page .dm-stops[data-hover="true"] .dm-stop[data-active="false"] { opacity: .5; }
.dm-page .dm-stop h3 { font-family: var(--rd-display); font-size: clamp(21px, 1.75vw, 26px); letter-spacing: -.03em; font-weight: 600; margin: 0; line-height: 1.15; }
.dm-page .dm-price { font-family: var(--rd-display); font-size: clamp(21px, 1.75vw, 26px); letter-spacing: -.03em; font-weight: 600; line-height: 1.2; margin: 2px 0 0; color: var(--rd-quiet); font-variant-numeric: tabular-nums; }
.dm-page .dm-founding { font-family: var(--rd-hand); font-size: 27px; line-height: .95; color: var(--rd-red); margin: 8px 0 0; rotate: -2deg; transform-origin: left center; }
.dm-page .dm-facts { font-size: 14px; font-weight: 600; line-height: 1.45; margin: 16px 0 0; color: var(--rd-ink); }
.dm-page .dm-stop-text { font-size: 15.5px; line-height: 1.58; margin: 8px 0 0; color: var(--rd-quiet); }
.dm-page .dm-route-note { margin: clamp(36px, 4vw, 60px) 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--rd-quiet); max-width: 62em; }

/* ------------------------------------------------------------------ the person */
.dm-page .dm-founder { background: var(--dm-sand); padding-block: clamp(90px, 9vw, 150px); }
.dm-page .dm-founder-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 8vw, 130px); align-items: center; }
.dm-page .dm-founder .rd-portrait { margin: 0; }
.dm-page .dm-founder .rd-portrait-frame { max-width: 360px; }
.dm-page .dm-founder .rd-portrait-frame path { fill: #fffaf0; }
.dm-page .dm-founder .rd-heading { margin-bottom: 26px; }
.dm-page .dm-founder-text p { font-size: clamp(17.5px, 1.4vw, 20px); line-height: 1.62; margin: 0 0 20px; max-width: 33em; color: #22302b; }
.dm-page .dm-founder-text .primary-cta { margin-top: 10px; }
.dm-page .dm-founder-role { font-size: 14px !important; color: var(--rd-quiet) !important; margin-top: 22px !important; }

@media (max-width: 900px) {
  .dm-page .dm-flow-stage { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .dm-page .dm-source { width: min(92%, 350px); }
  .dm-page .dm-source:nth-child(2) { margin: -10px 0 0 8%; }
  .dm-page .dm-source:nth-child(3) { margin: -10px 0 0 3%; }
  .dm-page .dm-source mark { white-space: normal; }
  .dm-page .dm-result { rotate: none; }
  .dm-page .dm-threads { display: none; }
  .dm-page .dm-line { display: none; }
  .dm-page .dm-stops { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 40px; }
  .dm-page .dm-stop { position: relative; padding: 0 0 34px 34px; border-left: 2px solid var(--rd-ink); margin-left: 9px; }
  .dm-page .dm-stop:last-child { border-left-color: transparent; }
  .dm-page .dm-stop::before { content: ""; position: absolute; left: -11px; top: 2px; width: 16px; height: 16px; border: 2px solid var(--rd-ink); border-radius: 50%; background: var(--rd-red); }
  .dm-page .dm-founder-grid { grid-template-columns: minmax(0, 1fr); }
  .dm-page .dm-founder .rd-portrait-frame { max-width: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-page .dm-source .dm-underline { clip-path: none; animation: none !important; }
  .dm-page .dm-threads path, .dm-page .dm-checked-tick path { stroke-dashoffset: 0; animation: none !important; }
  .dm-page .dm-threads circle, .dm-page .dm-result li, .dm-page .dm-result footer { opacity: 1; animation: none !important; }
  .dm-page .dm-stop, .dm-page .dm-stop-mark { transition: none; }
}