/* Product pages, given room to breathe (loaded after site.css).
   One section per row. Each section is a comfortable column of text (36rem) on the page's left edge with its drawing in the
   right column, the same grammar as the homepage. Nothing runs side by side: no strips of narrow columns, no sections in pairs. */

.page { --sec: 128px; }
@media (max-width: 1100px) { .page { --sec: 96px; } }
@media (max-width: 600px) { .page { --sec: 68px; } }

/* sections that were paired or tripled: one under the other again, at full size */
.page main .pgrid.pgrid { display: block; padding: 0; }
.page main .pgrid.pgrid > section { padding: 0 0 var(--sec) !important; }
.page main .pgrid.pgrid > section > h2 { font: 500 clamp(24px, 2.4vw, 30px)/1.2 var(--display) !important; margin: 0 0 16px !important; text-wrap: balance; }
.page main .pgrid.pgrid > section > p, .page main .pgrid.pgrid > section li, .page main .pgrid.pgrid > section dd, .page main .pgrid.pgrid > section dt { font-size: inherit; }
.page main .pgrid.pgrid > section > .artfig img, .page main .pgrid.pgrid > section > .artfig .art canvas:not(.agent) { height: auto !important; max-height: 240px !important; width: auto !important; max-width: 100%; }
.page main .pgrid.pgrid > figure.shot { margin: 0 0 var(--sec); }

/* steps and facts: a list down the text column, one full line of reading each, never a strip of narrow columns */
.page main section.flow > .flow-head > h2 { margin-bottom: 16px !important; }
.page main section.flow > .row { margin: 20px 0 0 !important; padding: 0; list-style: none; }
.page main section.flow > .row > li { padding: 16px 0 !important; border-top: 0 !important; border-bottom: var(--hair) !important; box-shadow: none !important; font-size: 17px; line-height: 1.6; }
.page main section.flow > .row > li:last-child { border-bottom: 0 !important; }
.page main section.flow > .row > li b { display: inline; margin: 0; color: var(--ink); }
.page main section.flow > ol.row > li { display: grid !important; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 14px; }
.page main section.flow > ol.row > li::before { display: block; margin: 0; font-size: 17px; line-height: 1.6; }
.page main section.flow > ul.row > li { display: block !important; }
.page main section.flow > .row > li.pio-human b { color: var(--indigo); }
.page main section.flow > .flow-notes { margin-top: 28px; font-size: 17px; }
.page main section.flow > .flow-notes > p + p { margin-top: 14px !important; }

@media (min-width: 900px) {
  .page main .pgrid.pgrid > section { display: grid !important; }
  .page main .pgrid.pgrid > section > .artfig { grid-column: 2 !important; grid-row: 1 / span 30 !important; align-self: center !important; justify-self: end !important; width: auto !important; max-width: var(--art) !important; margin: 0 !important; }
  /* heading and intro, then the list, then the notes, all in the text column; the drawing sits beside them, centred */
  .page main section.flow { align-items: start; }
  .page main section.flow > .flow-head { grid-column: 1 !important; grid-row: auto !important; align-self: start; }
  .page main section.flow > .artfig { grid-column: 2 !important; grid-row: 1 / span 30 !important; align-self: center !important; justify-self: end !important; }
  .page main section.flow > .row { grid-column: 1 !important; display: block; }
  .page main section.flow > .flow-notes, .page main section.flow > .flow-notes.one { grid-column: 1 !important; display: block; max-width: none; }
  .page main section.flow > figure.shot { grid-column: 1 / -1 !important; margin: 56px 0 0; }
  /* questions and pricing: the heading on top, the list or table across the full frame, so nothing is pushed into half the page */
  .page main section.split { grid-template-columns: minmax(0, 1fr) !important; }
  .page main section.split > .split-head { grid-column: 1 !important; grid-row: auto !important; max-width: var(--text); }
  .page main section.split > :not(.split-head) { grid-column: 1 !important; grid-row: auto !important; margin-top: 12px !important; }
}
@media (max-width: 899px) {
  .page main .pgrid.pgrid > section > .artfig { margin: 0 0 24px !important; }
  .page main .pgrid.pgrid > section > .artfig img { max-height: 200px !important; }
}

/* a little more air inside the questions and the pricing table */
.page .faq summary { padding: 18px 0; }
.page .faq details p { margin: -2px 0 22px; }
.page table.plans th, .page table.plans td { padding: 15px 0; }