/* Micropipe public page (D-LIC-14).

   The rules this page needs beyond theme.css: a wider column than the forms
   use, the row of three buttons, the feature list in two columns, the price
   cards, the numbered steps, the screenshot gallery and the what's-new list.
   Everything else - the panels, the footer, the utility classes - is shared
   with the licence, checkout and order pages (spec 5.5).

   Loaded after theme.css. */

/* A reading column, not a form column */

.panel-wide { max-width: 56em; margin-inline: auto; }

.tagline { font-size: 1.15rem; margin-top: calc(var(--pico-spacing) * -0.5); }

/* The three ways in */

.button-row { display: flex; flex-wrap: wrap; gap: calc(var(--pico-spacing) * .5); margin-bottom: var(--pico-spacing); }

.button-row a[role="button"] { margin: 0; }

/* The feature list, two columns where there is room */

.feature-list { columns: 2; column-gap: calc(var(--pico-spacing) * 2); padding-inline-start: 1.2em; }

.feature-list li { break-inside: avoid; margin-bottom: calc(var(--pico-spacing) * .35); }

@media (max-width: 40em) { .feature-list { columns: 1; } }

/* Screenshots */

.screenshot-gallery:not(.hide) { display: grid; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: var(--pico-spacing); margin: 0 0 var(--pico-spacing) 0; }

.screenshot-gallery img { width: 100%; border: var(--pico-border-width) solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }

.screenshot-gallery figcaption { font-size: 0.85rem; color: var(--pico-muted-color); margin-top: calc(var(--pico-spacing) * .25); }

/* Prices: one card per term, the amount filled by public.js */

.price-cards:not(.hide) { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: var(--pico-spacing); margin-bottom: var(--pico-spacing); }

.price-card { padding: var(--pico-spacing); border: var(--pico-border-width) solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }

.price-card .term-name { font-weight: bold; }

.price-card .term-price { font-size: 1.4rem; font-weight: bold; margin: calc(var(--pico-spacing) * .25) 0; }

.price-card .term-per { font-size: 0.9rem; color: var(--pico-muted-color); }

/* Getting started */

.steps { counter-reset: step; list-style: none; padding-inline-start: 0; }

.steps li { counter-increment: step; margin-bottom: calc(var(--pico-spacing) * .5); }

.steps li::before { content: counter(step) ". "; font-weight: bold; }

/* What's new: a dated list */

.whats-new { list-style: none; padding-inline-start: 0; }

.whats-new li { margin-bottom: calc(var(--pico-spacing) * .35); }

.whats-new-date { font-weight: bold; margin-inline-end: .5em; }