/* Roadmap pages (29 Oct 2026): a full-size copy of Ben's real roadmap PDF page (cream paper, Workvolve mark top left,
   "<client> roadmap" in gold capitals top right, serif headings, the "Where things stand" table with its rating dots, the
   numbered "What I'd do, in order" table, solution pages with What's broken / How it works / What I do / What I need from
   you / What you get / How we'll know it worked, and the ABN footer). Same look as the homepage's miniature (.pg in
   home-v2.css), scaled up for the case studies. Rows reveal with the case study timeline (data-at adds .on). */
.rp-wrap{position:relative;display:grid;place-items:center;padding:clamp(18px,3vw,34px) clamp(14px,2.4vw,28px)}
.rp-stack{position:relative;width:min(100%,430px)}
.rp{position:relative;width:100%;aspect-ratio:210/297;display:flex;flex-direction:column;padding:6.2% 6.6% 3.8%;border-radius:4px;background:linear-gradient(180deg,#f2eee7,#ede8df);color:#2a2824;font-family:var(--font);box-shadow:0 0 0 1px rgba(60,44,12,.07),0 1px 2px rgba(60,44,12,.08),0 26px 50px -26px rgba(60,44,12,.5);overflow:hidden}
.rp-back{position:absolute;inset:0;transform:translate(5%,-3.2%) rotate(2.2deg);z-index:0;opacity:.96}
.rp-front{z-index:1;transform:rotate(-1deg)}
.rp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rp-brand{display:inline-flex;align-items:center;gap:8px;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:14px;color:#3a3731}
.rp-brand img{width:20px;height:20px}
.rp-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.3}
.rp-meta b{font-size:8.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a8843c}
.rp-meta span{font-size:9.4px;color:#8a8478}
.rp-hd{margin-top:7%;font-family:Georgia,"Times New Roman",serif;font-size:clamp(19px,2vw,24px);line-height:1.18;font-weight:400;letter-spacing:-.01em;color:#1f1d1a}
.rp-hd .rp-n{color:#a8843c;margin-right:6px}
.rp-hd-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rp-in{margin-top:6px;font-size:11.4px;line-height:1.45;color:#6b665c}
.rp-p{margin-top:9px;font-size:11.2px;line-height:1.5;color:#3d3a34}
.rp-f{margin-top:auto;display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid rgba(60,44,12,.13);font-size:7.6px;line-height:1.4;color:#8a8478;white-space:nowrap;overflow:hidden}
/* cover */
.rp-cv{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:14%}
.rp-ring{width:62px;height:62px}
.rp-title{margin-top:12%;max-width:82%;font-family:Georgia,"Times New Roman",serif;font-size:clamp(21px,2.3vw,27px);line-height:1.15;color:#1f1d1a}
.rp-subt{margin-top:10px;font-size:11px;line-height:1.45;color:#6b665c}
.rp-prep{margin-top:auto;margin-bottom:6%;font-size:9.6px;line-height:1.7;color:#6b665c}
.rp-prep b{font-weight:600;color:#3a3731}
/* tables: where things stand, and what I'd do in order */
.rp-tb{width:100%;margin-top:11px;border-collapse:collapse;table-layout:fixed;font-size:10.6px;line-height:1.38}
.rp-tb th{padding:0 8px 7px 0;text-align:left;font-size:9.4px;font-weight:600;color:#6b665c;border-bottom:1px solid rgba(60,44,12,.24)}
.rp-tb td{padding:8px 8px 8px 0;vertical-align:top;border-bottom:1px solid rgba(60,44,12,.11);color:#3a3731}
.rp-tb td:first-child{font-weight:600;color:#1f1d1a}
.rp-stand th:nth-child(1){width:30%}.rp-stand th:nth-child(2){width:27%}
.rp-order th:nth-child(1){width:7%}.rp-order th:nth-child(2){width:38%}
.rp-order td:first-child{color:#a8843c;font-weight:500}
.rp-order td:nth-child(2){font-weight:600;color:#1f1d1a}
.rp .rt{display:inline-flex;align-items:baseline;gap:6px;font-weight:600;color:#1f1d1a}
.rp .rt::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;transform:translateY(-1px);box-shadow:inset 0 0 0 1.3px #b8913f}
.rp .rt-high::before{background:#c39d4c;box-shadow:none}
.rp .rt-mid::before{background:linear-gradient(90deg,#c39d4c 50%,transparent 50%)}
.rp-note{margin-top:12px;padding:10px 12px;border-radius:6px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(60,44,12,.1);font-size:10px;line-height:1.45;color:#4b4840}
.rp-note b{font-weight:600;color:#1f1d1a}
/* summary: the numbered three things */
.rp-ol{margin-top:10px;display:flex;flex-direction:column;gap:9px;counter-reset:rp}
.rp-ol li{position:relative;padding-left:22px;font-size:10.8px;line-height:1.45;color:#3d3a34;counter-increment:rp}
.rp-ol li::before{content:counter(rp);position:absolute;left:0;top:0;font-size:11px;font-weight:500;color:#a8843c}
.rp-ol b{font-weight:600;color:#1f1d1a}
/* a solution page */
.rp-blk{margin-top:11px}
.rp-blk>b{display:block;font-size:9.8px;font-weight:600;color:#1f1d1a}
.rp-blk ul{margin-top:4px;display:flex;flex-direction:column;gap:3px}
.rp-blk li{position:relative;padding-left:11px;font-size:10px;line-height:1.42;color:#3d3a34}
.rp-blk li::before{content:"";position:absolute;left:1px;top:.6em;width:4px;height:4px;border-radius:50%;background:#c39d4c}
.rp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* reveal with the timeline */
.js .cx-demo .rp [data-at]{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .cx-demo .rp [data-at]:not(.on){opacity:0;transform:translateY(5px)}
.cx-feat .cx-stage.rp-stage,.cx-hero .cx-stage.rp-stage{display:grid;align-content:center}
.rp-stage .cx-top{position:absolute;top:14px;right:14px;left:14px;z-index:3}
@media (max-width:600px){
  .rp{padding:6% 6.4% 4%}
  .rp-tb{font-size:9.6px}.rp-tb th{font-size:8.6px}
  .rp-blk li,.rp-ol li,.rp-p{font-size:9.6px}
  .rp-f{font-size:6.6px}
  .rp-meta b{font-size:7.6px}
}
.rp-sm{width:min(100%,340px)}
/* table fixes: ratings stay on one line, left aligned like the PDF, rows tighter so the page never overflows */
.rp-tb th,.rp-tb td{text-align:left}
.rp .rt{white-space:nowrap}
.rp-stand th:nth-child(1){width:27%}.rp-stand th:nth-child(2){width:32%}
.rp-tb td{padding:6px 8px 6px 0}
.rp .rt{padding:0;margin:0;width:auto;min-height:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:inherit;line-height:inherit}
@media (max-width:600px){.rp .rt{white-space:normal;align-items:flex-start}.rp .rt::before{transform:translateY(3px)}.rp-stand th:nth-child(1){width:25%}.rp-stand th:nth-child(2){width:31%}}
/* a page grows taller instead of cutting its last lines off (phones) */
.rp{overflow:visible}