/* "Ugh, do I need to book a demo?" on /pricing/ (Jaycee, Oct 29). Mobile first. Both cards wear the
   plan cards' sage rim; no yellow here (the yellow box was far too loud). */
.pdx { margin-top: clamp(56px, 9vw, 112px); }
.pdx-doors { display: grid; gap: 28px; padding: 0 8px; }
/* Both cards share one structure: the big line at the top, then the details; the link sits at the
   bottom. No faces or label rows (Allen, Oct 30). */
.pdx-door { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; border-radius: 20px; background: var(--theme-surface-raised); box-shadow: 0 0 0 8px var(--theme-surface-raised-strong); }
.pdx-door p { margin: 0; line-height: 1.55; color: var(--soft); }
.pdx-door .pdx-lead { margin: 0; font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.3 var(--font-heading); color: var(--ink); }
.pdx-door .pdx-a { font-size: 1.15rem; color: var(--ink); }
/* No underline: it broke around the arrow. Bold text and the sliding arrow mark it. */
.pdx-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; margin-left: -4px; padding: 0 4px; font-weight: 600; color: inherit; text-decoration: none; }
.pdx-link:hover { color: var(--theme-action-green); }
.pdx-link::after { content: "\2192"; margin-left: 8px; transition: translate 0.2s ease-out; }
.pdx-link:hover::after { translate: 4px 0; }
@media (min-width: 768px) {
  .pdx-doors { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; }
  .pdx-door { padding: 30px; }
}