/* trevware.com/power-up/: Power-Up, its privacy policy and the
   after-checkout page. Built on the Oriko page's layout (oriko.css); these
   rules add the plugin cards' marks and lines, the one price card, and a
   reading column for the policy. */
.brand img { width: 22px; height: 22px; }
.card .mark { width: 22px; height: 22px; flex: none; }
/* modern.css sets every .name inline-block for the home list; a card's name
   lines up its mark and words. */
:root[data-mode='modern'] .card .name { display: flex; align-items: center; gap: 8px; }
.card .lede { font-size: 15px; color: var(--dim); }
.card .lede b { color: var(--ink); font-weight: 600; }
#price { padding-top: 48px; }
.single { max-width: 460px; margin: 0 auto; }

/* The privacy policy: one column of plain reading. */
.policy { max-width: 700px; margin: 0 auto; padding-top: 56px; padding-bottom: 72px; }
.policy h1 { font-size: clamp(34px, 5vw, 48px); font-weight: 700; line-height: 1.05; }
.policy .dateline { margin-top: 10px; color: var(--dim); font-size: 15px; }
.policy h2 { font-size: 22px; font-weight: 700; margin-top: 40px; }
.policy h3 { font-size: 17px; font-weight: 650; margin-top: 24px; }
.policy p, .policy li { margin-top: 12px; color: var(--ink); }
.policy ul { padding-left: 22px; margin: 0; }
.policy .note { border-left: 3px solid var(--accent); padding-left: 14px; }

/* The after-checkout page: a heading per plugin over its steps. */
.done .step-title { font-size: 20px; font-weight: 700; margin-top: 40px; }
.done .step-title + .steps { margin-top: 14px; }
.done .step-title + .after { margin-top: 12px; }

/* Side by side, the plugin cards need room for a name and its mark on one
   line; narrower than that, they stack. */
@media (max-width: 880px) { #included .pair { grid-template-columns: 1fr; max-width: 460px; } }
/* Side by side, the two cards share their rows, so each pitch, list and
   button starts level with the other card's even when a name wraps. */
@media (min-width: 881px) {
  #included .pair { grid-template-rows: repeat(4, auto); }
  #included .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  #included .card ul { align-content: start; }
  #included .card .btn { justify-self: start; }
}