/*
 * DiviTorque — Divi 5 roadmap.
 * Two plan cards with a progress ring + module chips, then a milestone timeline.
 * Monochrome UI; color lives only in the status dots / ready ring.
 */
.dt-rm { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 8vw, 96px); }

/* ─── Intro + weekly cadence ──────────────────────────────────────── */
.dt-rm-intro { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.dt-rm-intro__lead { font-size: var(--text-lg); line-height: var(--lh-body); color: var(--color-text-muted); text-wrap: balance; }
.dt-rm-cadence { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 18px;
	font-size: var(--text-sm); font-weight: var(--fw-med); color: var(--color-text);
	background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.dt-rm-cadence__pulse { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--mesh-grass, #34D08C); position: relative; }
.dt-rm-cadence__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
@media (prefers-reduced-motion: no-preference) { .dt-rm-cadence__pulse::after { animation: dt-rm-pulse 1.8s ease-out infinite; } }
@keyframes dt-rm-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3); opacity: 0; } }

/* ─── Plan cards ──────────────────────────────────────────────────── */
.dt-rm__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dt-rm-plan { display: flex; flex-direction: column; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 34px); }
.dt-rm-plan--progress { box-shadow: var(--shadow-md); border-color: var(--gray-300); }

.dt-rm-plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dt-rm-plan__name { font-size: var(--text-xl); font-weight: var(--fw-semi); letter-spacing: -.015em; }
.dt-rm-plan__tag { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 5px; }
.dt-rm-plan__status { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 12px; font-weight: var(--fw-semi); letter-spacing: .02em; padding: 5px 12px 5px 10px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; }
.dt-rm-plan__status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--color-text-faint); }
.dt-rm-plan--ready .dt-rm-plan__status-dot { background: var(--mesh-grass, #34D08C); }
.dt-rm-plan--progress .dt-rm-plan__status-dot { background: #F2A93B; }

/* gauge: ring + stat */
.dt-rm-plan__gauge { display: flex; align-items: center; gap: 20px; margin: 24px 0 4px; }
.dt-rm-ring { flex: 0 0 auto; transform: rotate(-90deg); transform-origin: 50% 50%; }
.dt-rm-ring__track { fill: none; stroke: var(--color-border); stroke-width: 3.5; }
.dt-rm-ring__fill { fill: none; stroke: var(--color-text); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray var(--dur-slow) var(--ease); }
.dt-rm-plan--ready .dt-rm-ring__fill { stroke: var(--mesh-grass, #34D08C); }
.dt-rm-ring__pct { transform: rotate(90deg); transform-origin: 50% 50%; font: var(--fw-semi) 9px/1 var(--font-sans); fill: var(--color-text); font-variant-numeric: tabular-nums; }
.dt-rm-plan__stat b { display: block; font-size: 30px; font-weight: var(--fw-semi); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dt-rm-plan__stat b span { font-size: 16px; color: var(--color-text-faint); font-weight: var(--fw-reg); }
.dt-rm-plan__stat-label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; }
.dt-rm-plan__eta { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: var(--fw-semi); color: var(--color-text); }

/* module chips */
.dt-rm-plan__mods { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.dt-rm-plan__mods-head { font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 14px; }
.dt-rm-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dt-rm-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--fw-med); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.dt-rm-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.dt-rm-chip--shipped { color: var(--color-text); }
.dt-rm-chip--shipped .dt-rm-chip__dot { background: var(--mesh-grass, #34D08C); }
.dt-rm-chip--building .dt-rm-chip__dot { background: #F2A93B; position: relative; }
.dt-rm-chip--building .dt-rm-chip__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
@media (prefers-reduced-motion: no-preference) { .dt-rm-chip--building .dt-rm-chip__dot::after { animation: dt-rm-pulse 1.8s ease-out infinite; } }
.dt-rm-chip--queued { color: var(--color-text-muted); border-style: dashed; }
.dt-rm-chip--queued .dt-rm-chip__dot { background: transparent; box-shadow: 0 0 0 1.5px var(--gray-300) inset; }

.dt-rm-plan__note { margin-top: 20px; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-body); }

/* ─── Blocks ──────────────────────────────────────────────────────── */
.dt-rm-block { margin-top: clamp(48px, 7vw, 80px); }
.dt-rm-block__title { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: var(--fw-semi); letter-spacing: -.02em; text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }

/* ─── Milestone timeline ──────────────────────────────────────────── */
.dt-rm-timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.dt-rm-timeline::before { content: ""; position: absolute; top: 6px; left: 16.6%; right: 16.6%; height: 2px; background: var(--color-border); }
.dt-rm-ms { position: relative; padding-top: 30px; text-align: center; }
.dt-rm-ms__node { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--color-surface-2); border: 2px solid var(--color-border); z-index: 1; }
.dt-rm-ms--now .dt-rm-ms__node { background: var(--color-action); border-color: var(--color-action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-action) 14%, transparent); }
.dt-rm-ms--final .dt-rm-ms__node { background: var(--mesh-grass, #34D08C); border-color: var(--mesh-grass, #34D08C); }
.dt-rm-ms__when { display: inline-block; font-size: 11px; font-weight: var(--fw-semi); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.dt-rm-ms--now .dt-rm-ms__when { color: var(--color-text); }
.dt-rm-ms__ver { display: block; font-size: var(--text-lg); font-weight: var(--fw-semi); letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dt-rm-ms__label { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-body); margin-top: 8px; max-width: 32ch; margin-inline: auto; }

/* ─── Good-to-know notes ──────────────────────────────────────────── */
.dt-rm-notes { list-style: none; padding: 0; margin: 0; max-width: 880px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.dt-rm-notes li { position: relative; padding-left: 26px; font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--lh-body); }
.dt-rm-notes li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-text); font-weight: var(--fw-semi); }

/* ─── Bottom line ─────────────────────────────────────────────────── */
.dt-rm-bottom { max-width: 820px; margin: clamp(44px, 6vw, 72px) auto 0; padding: clamp(22px, 3vw, 30px); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); font-size: var(--text-lg); line-height: var(--lh-body); color: var(--color-text); }
.dt-rm-bottom__label { display: block; font-size: var(--text-label); font-weight: var(--fw-semi); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 8px; }

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) { .dt-rm__cards { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
	.dt-rm-timeline { grid-template-columns: 1fr; gap: 28px; }
	.dt-rm-timeline::before { top: 0; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
	.dt-rm-ms { padding-top: 0; padding-left: 28px; text-align: left; }
	.dt-rm-ms__node { top: 4px; left: 0; transform: none; }
	.dt-rm-ms__label { margin-inline: 0; }
	.dt-rm-notes { grid-template-columns: 1fr; }
}

/* ═══ General product roadmap (board) ════════════════════════════════ */
.dt-grm { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 8vw, 96px); }
.dt-grm__intro { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 52px); text-align: center; font-size: var(--text-lg); line-height: var(--lh-body); color: var(--color-text-muted); text-wrap: balance; }
.dt-grm__board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.dt-grm-col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(16px, 2vw, 20px); }
.dt-grm-col__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 2px 4px; }
.dt-grm-col__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--color-text-faint); }
.dt-grm-col--backlog .dt-grm-col__dot { background: var(--color-text-faint); }
.dt-grm-col--progress .dt-grm-col__dot { background: #F2A93B; }
.dt-grm-col--done .dt-grm-col__dot { background: var(--mesh-grass, #34D08C); }
.dt-grm-col--done .dt-grm-item__title::before { content: "✓"; color: var(--mesh-grass, #34D08C); font-weight: var(--fw-semi); margin-right: 7px; }
.dt-grm-col__title { font-size: var(--text-base); font-weight: var(--fw-semi); letter-spacing: -.01em; }
.dt-grm-col__count { margin-left: auto; font-size: 12px; font-weight: var(--fw-semi); color: var(--color-text-faint); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 1px 9px; font-variant-numeric: tabular-nums; }
.dt-grm-col__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dt-grm-item { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.dt-grm-item:hover { border-color: var(--gray-300); transform: translateY(-2px); }
.dt-grm-item__tag { display: inline-block; font-size: 10px; font-weight: var(--fw-semi); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px 9px; }
.dt-grm-item__title { font-size: var(--text-base); font-weight: var(--fw-semi); letter-spacing: -.01em; margin: 10px 0 0; }
.dt-grm-item__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-body); margin-top: 5px; }
.dt-grm__feedback { margin: clamp(36px, 5vw, 52px) auto 0; max-width: 600px; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-body); }
.dt-grm__feedback a { font-weight: var(--fw-med); border-bottom: 1px solid var(--color-border); }
@media (max-width: 880px) { .dt-grm__board { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* item tag row + target version */
.dt-grm-item__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dt-grm-item__ver { font-size: 10px; font-weight: var(--fw-semi); letter-spacing: .03em; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px 8px; font-variant-numeric: tabular-nums; }

/* Request-a-feature form removed — requests now route to /support/ (see .dt-grm__feedback). */