/* Page plan of 2026-09-21: the proof strip under the hero, the route at reading size with its guarantee, and the
   questions. Nothing under 18 px. Red is still only the pen. */

/* ------------------------------------------------------------------ the proof strip: who is behind this, in one breath */
.dm-page .pb-strip { padding-block: clamp(46px, 5vw, 78px); scroll-margin-top: 0; }
.dm-page .pb-strip-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(30px, 6vw, 100px); align-items: center; }
.dm-page .pb-line { margin: 0; font-family: var(--rd-display); font-weight: 600; font-size: clamp(25px, 2.55vw, 38px); line-height: 1.14; letter-spacing: -.035em; color: var(--rd-ink); max-width: 19em; text-wrap: balance; }
.dm-page .pb-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, .9vw, 14px); }
.dm-page .pb-facts li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.3; color: var(--rd-ink); }
.dm-page .pb-tick { width: 30px; height: 26px; overflow: visible; }
.dm-page .pb-tick path { fill: none; stroke: var(--rd-red); stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ the route: fewer words, so they can be read */
.dm-page .dm-route .dm-facts { font-size: clamp(18px, 1.3vw, 19px); line-height: 1.4; margin-top: 14px; }
.dm-page .dm-route .dm-stop-text { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; }
.dm-page .pb-guarantee { margin: clamp(40px, 4.6vw, 70px) 0 0 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 60px); align-items: center; }
.dm-page .pb-guarantee-line { margin: 0; font-family: var(--rd-display); font-weight: 600; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.1; letter-spacing: -.04em; color: var(--rd-ink);
  width: fit-content; padding-bottom: 14px; background: left bottom / 100% 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 11' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C50 2 96 9 150 5 S250 3 298 6' fill='none' stroke='%23d8382f' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.dm-page .pb-terms { grid-column: 1 / -1; margin: 0; font-size: 18px; line-height: 1.5; color: var(--rd-quiet); max-width: 46em; }

/* the stops open: the chosen one gets the red line under its name, and what is included shows under the path */
.dm-page .dm-route .dm-stop[role="button"] { cursor: pointer; }
.dm-page .dm-route .dm-stop h3 { width: fit-content; padding-bottom: 9px; background: left bottom / 100% 9px no-repeat; }
.dm-page .dm-route .dm-stop[data-chosen="true"] h3 { background-image: 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 .dm-route .dm-open { margin: 12px 0 0; font-size: 18px; font-weight: 600; color: var(--rd-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.dm-page .dm-route .dm-stop[data-chosen="true"] .dm-open { visibility: hidden; }
.dm-page .dm-pack-inline { display: none; }
.dm-page .dm-pack-panel { position: relative; display: grid; margin: clamp(26px, 3vw, 44px) 0 0 14px; padding-top: 22px; }
.dm-page .dm-pack-notch { position: absolute; left: 0; top: 0; width: 100%; height: 22px; overflow: visible; }
.dm-page .dm-pack-notch path { fill: none; stroke: var(--rd-ink); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dm-page .dm-pack { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 90px); padding-top: clamp(22px, 2.4vw, 36px); visibility: hidden; opacity: 0; }
.dm-page .dm-pack[data-shown="true"] { visibility: visible; opacity: 1; transition: opacity .22s ease; }
.dm-page .dm-pack-block h4 { margin: 0; font-family: var(--rd-display); font-weight: 600; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.03em; line-height: 1.15; color: var(--rd-ink); }
.dm-page .dm-pack-block ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.dm-page .dm-pack-block li { position: relative; padding-left: 28px; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; color: #22302b; }
.dm-page .dm-pack-block li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 14px; height: 3px; border-radius: 2px; background: var(--rd-red); rotate: -8deg; }
.dm-page .dm-pack-note { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--rd-quiet); }

/* ------------------------------------------------------------------ the founder, shorter */
.dm-page .dm-founder-text p { font-size: clamp(19px, 1.6vw, 23px); }      /* a step up (2026-09-25) */
.dm-page .dm-founder-role { font-size: 18px !important; margin-top: 8px !important; }

/* ------------------------------------------------------------------ the questions as tiles, like the company graph; one answer beside them */
.dm-page .pb-questions-section { padding-block: clamp(70px, 7vw, 120px); }
.dm-page .qt-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.dm-page .qt-grid .rd-statement { margin: 0; }
.dm-page .qt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 1.8vw, 26px) clamp(12px, 1.3vw, 20px); margin-top: clamp(24px, 2.6vw, 40px); }
.dm-page .qt-tile { display: grid; justify-items: center; align-content: start; gap: 12px; border: 0; background: none; padding: 0; font: 600 18px/1.2 var(--rd-display); letter-spacing: -.01em; color: var(--rd-ink); cursor: pointer; }
.dm-page .qt-icon { width: 100%; max-width: 112px; aspect-ratio: 1; padding: 22%; box-sizing: border-box; border-radius: 24px; background: var(--qt-color); outline: 4px solid transparent; outline-offset: 3px; overflow: visible; transition: scale .2s cubic-bezier(.3, 1.4, .5, 1), outline-color .15s ease; }
.dm-page .qt-tile:hover .qt-icon, .dm-page .qt-tile[aria-pressed="true"] .qt-icon { scale: 1.06; }
.dm-page .qt-tile[aria-pressed="true"] .qt-icon { outline-color: var(--rd-red); }
.dm-page .qt-tile:focus-visible { outline: none; }
.dm-page .qt-tile:focus-visible .qt-icon { outline-color: var(--rd-ink); }
.dm-page .qt-icon-fill { fill: #fffdf6; }
.dm-page .qt-icon-line { fill: none; stroke: var(--rd-ink); stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; }
.dm-page .qt-tile[data-dark="true"] .qt-icon-line { stroke: #fffdf6; }
.dm-page .qt-panel { display: grid; }
.dm-page .qt-cell { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.dm-page .qt-cell[data-shown="true"] { visibility: visible; opacity: 1; transition: opacity .2s ease; }
.dm-page .qt-question { margin: 0; font-family: var(--rd-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.04em; color: var(--rd-ink); text-wrap: balance; }
.dm-page .qt-answer { margin: clamp(12px, 1.4vw, 20px) 0 0; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.42; color: #22302b; max-width: 27em; text-wrap: pretty; }
.dm-page .pb-draft { margin: 14px 0 0; font-family: var(--rd-hand); font-size: 25px; line-height: 1; color: var(--rd-red); rotate: -1.5deg; transform-origin: left center; }

/* ------------------------------------------------------------------ the booking box: what the conversation is, before anything else */

/* the one action, at reading size in the blocks between the hero and the coast (the hero's own button is approved as it is) */
.dm-page .dm-route .primary-cta, .dm-page .dm-founder .primary-cta { font-size: 18px; padding: 16px 30px; min-height: 56px; cursor: pointer; }

/* the quiet booking link under the routines */
.dm-page .ft-book { margin: clamp(18px, 2vw, 28px) 0 0; padding: 6px 0 12px; border: 0; background: left bottom / 100% 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");
  font: inherit; font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; color: var(--rd-ink); cursor: pointer; min-height: 44px; }
.dm-page .ft-book:focus-visible { outline: 3px solid var(--rd-ink); outline-offset: 4px; }

@media (max-width: 900px) {
  /* a phone has no room beside the path: what is included opens inside the stop itself */
  .dm-page .dm-pack-panel { display: none; }
  .dm-page .dm-stop[data-chosen="true"] .dm-pack-inline { display: grid; gap: 22px; margin-top: 18px; }
  .dm-page .dm-stop[data-chosen="true"] .dm-open { display: none; }
  .dm-page .pb-strip-grid, .dm-page .qt-grid { grid-template-columns: minmax(0, 1fr); }      /* a phone: the tiles, then the answer under them */
  .dm-page .pb-guarantee { grid-template-columns: minmax(0, 1fr); margin-left: 0; justify-items: start; }
}