/* The "Jak udostępnić IKP" page ([zp_ikp_guide], IkpGuide\IkpGuide, 2026-11-11) — a 1:1 copy of the app page
   /jak-udostepnic-ikp (zielona-przychodnia-app). Printed on that page only. Three parts, copied from the app (2 before 1, as in the app's
   bundle: .zp-care__card's padding wins over .zp-spec-card's):
     1. the app's online-care.css (the plugin's assets/online-care.css with the 2026-11-10/11 gradients, 1px borders,
        the CTA band and the FAQ cards) — the FAQ and CTA sections;
     2. the section shell of the app's specialization.css (.zp-spec-section, cards, ticked lists);
     3. the app's guide-steps.css (numbered steps with screenshots).
   The app defines the gradient tokens on :root (theme settings/_colors.scss); here they live on the page wrapper,
   so nothing else on the site changes. Font sizes stay the theme's (.title-*, .text-*). */

.zp-ikp {
  --zp-gradient-primary: linear-gradient(135deg, #0B6A4F 0%, #085440 50%, #063D2F 100%);
  --zp-gradient-third: linear-gradient(150deg, #D6EFED 0%, #E3F2E9 44%, #FFFFFF 100%);
  --zp-secondary-ink: #267337;
}
.zp-ikp .background-primary { background-image: var(--zp-gradient-primary); }
/* the hero's jump links land below the sticky header */
.zp-ikp [id] { scroll-margin-top: 140px; }

/* ==== 2. section shell (app specialization.css) ================================================================ */
.zp-spec-section {
  --zp-primary: #085440;
  --zp-secondary: #53C063;
  --zp-third: #E3F2E9;
  --zp-radius: 8px;
  --zp-radius-soft: 16px;
}
.zp-spec-section { padding: 88px 0; color: var(--zp-primary); }
.zp-spec-section--tint { background: var(--zp-third) var(--zp-gradient-third, none); }
.zp-spec-section:not(.zp-spec-section--tint) + .zp-spec-section:not(.zp-spec-section--tint) { padding-top: 0; }
.zp-spec-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 40px;
}
.zp-spec-section__title { max-width: 860px; overflow-wrap: anywhere; }
/* The clinic's mark above every section heading, as on the online pages. */
.zp-spec-section__title::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  background: url("zp-mark.svg") center / contain no-repeat;
}
.zp-spec-section__intro { max-width: 860px; margin: -16px 0 40px; }
.zp-spec-section__intro > :last-child { margin-bottom: 0; }

/* Cards and ticked lists (spec-conditions, feature-columns). */
.zp-spec-columns { row-gap: 24px; }
.zp-spec-card { padding: 36px 34px 38px; }
.zp-spec-card__title { margin: 0 0 22px; overflow-wrap: anywhere; }
.zp-spec-list { list-style: none; margin: 0; padding: 0; }
.zp-spec-list li { display: flex; align-items: flex-start; gap: 12px; }
.zp-spec-list li + li { margin-top: 14px; }
.zp-spec-list__icon { flex: 0 0 22px; margin-top: 2px; color: var(--zp-secondary); }
.zp-spec-list li > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 991px) {
  .zp-spec-section { padding: 64px 0; }
}
@media (max-width: 575px) {
  .zp-spec-section { padding: 56px 0; }
  .zp-spec-section__head { margin-bottom: 28px; }
  .zp-spec-card { padding: 28px 22px 30px; }
}

/* ==== 1. online-care.css (app copy) ============================================================================= */
/* Shared components for the online services (konsultacje online, e-wizyta,
   e-recepta, e-zwolnienie).

   Design system contract — zp-theme owns typography and controls:
     headings   .title-2 (48/700 + italic <i> eyebrow), .title-3 (24/700),
                .title-6 (22/400, pair with .font--semi-bold)
     body       .text (22→18→16 /160%), .text-3 (16/160%), .text-8 (14/22)
     buttons    .btn, .btn-small, .btn-border
     inputs     .input-text
     spacing    .pt-* / .pb-* / .mt-* / .mb-* utilities
   Cards repeat the clinic's existing card language (.product and .faq-item):
   2px solid #53C063, 8px radius, translucent white or #E3F2E9 fill.

   Nothing here may restate a font size, weight or line height that a theme
   class already owns — that is what made these pages drift out of the system. */

.zp-care {
  --zp-primary: #085440;
  --zp-secondary: #53C063;
  --zp-third: #E3F2E9;
  --zp-mint: #AAF2B0;
  --zp-radius: 8px;
  /* The booking card borrows a softer scale than the page cards: 12px on the
     controls, 16px on the full-width action, its trust strip and the mark tile. */
  --zp-radius-control: 12px;
  --zp-radius-soft: 16px;
  color: var(--zp-primary);
}
.zp-care *, .zp-care *::before, .zp-care *::after { box-sizing: border-box; }
.zp-care [hidden] { display: none !important; }
/* Vertical rhythm only. Never set margin-top (or the `margin` shorthand) here:
   `.zp-care p` and `.mt-40` have equal specificity, and this file loads after the
   theme, so a shorthand silently wins and kills every mt- and pt- utility on
   these pages. The theme already resets h1–h6/p margins to 0, so bottom-only is
   all that is needed. */
.zp-care :where(p, h1, h2, h3) { margin-bottom: 24px; }
.zp-care > .container > :last-child { margin-bottom: 0; }
.zp-care :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--zp-primary);
  outline-offset: 4px;
}
.zp-care a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.zp-care a:not(.btn):hover { color: var(--zp-secondary); }
/* The theme's .btn has no disabled state of its own. */
.zp-care .btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* Intro block. One heading and one short paragraph — see the copy budgets in
   OnlineContent.php before adding anything else here. */
.zp-care__header { margin-bottom: 64px; }
.zp-care__header--narrow { max-width: 760px; }
.zp-care__header > :last-child { margin-bottom: 0; }

/* Card — the .product card from the price list, without the price column. */
.zp-care__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  padding: 36px 34px 42px;
  border: 1px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: rgba(255, 255, 255, .6);
}

/* Filled surface — the .faq-item treatment, used for the intake form panel. */
.zp-care__panel {
  padding: 40px;
  border: 1px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: var(--zp-third) var(--zp-gradient-third, none);
}
.zp-care__panel > :last-child { margin-bottom: 0; }

/* Section heading further down a page (shared: overview and intake pages). */
.zp-care__section { max-width: 760px; margin: 100px 0 48px; }
/* The clinic's mark above every section heading — a repeating brand beat across
   both page types. Taken straight from logo.svg (cross plus leaf), so it is the
   identity's own shape rather than a generic plus. */
.zp-care__section h2::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  background: url("zp-mark.svg") center / contain no-repeat;
}
/* Inside the form panel the heading introduces the panel, not a page section. */
.zp-care__section--panel { max-width: none; margin: 0 0 20px; }

.zp-care__band { margin: 100px 0; }

/* Fine print that follows a full-width row. */
.zp-care__fineprint { max-width: 900px; }

/* Figure with the clinic's dot motif — the same grid of green dots baked into
   the `doctors` artwork, rebuilt in CSS so photographs can carry it too. */
.zp-care__figure { position: relative; }
.zp-care__figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--zp-radius);
}
/* A band of dots below the picture's left edge. It deliberately stays inside
   the figure's own width: reaching into the text column collides with the lead,
   and reaching past the container edge costs a horizontal scrollbar. */
.zp-care__figure--dots::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: -44px;
  width: 184px;
  height: 92px;
  color: var(--zp-secondary);
  background-image: radial-gradient(currentColor 3px, transparent 3px);
  background-size: 20px 20px;
  opacity: .55;
}

/* Breadcrumbs. Type carries the green on its own — no chip behind it.
   `--zp-breadcrumb-ink` is the single dial. a11y 2026-11-11: the pale #53C063
   was 2.31:1 on white; the darkened twin (theme `$secondary-ink`) is 5.85:1. */
.zp-care__breadcrumb {
  --zp-breadcrumb-ink: var(--zp-secondary-ink, #267337);
  display: block;
  margin-bottom: 40px;
}
/* Scoped through .zp-care so it outranks `.zp-care a:not(.btn)` (0,2,0), which
   otherwise holds the links at the inherited dark green. */
.zp-care .zp-care__breadcrumb :is(a, span, svg) { color: var(--zp-breadcrumb-ink); }
/* hover darkens to the ink (mint on white was 1.2:1 — the link vanished under the pointer) */
.zp-care .zp-care__breadcrumb a:not(.btn):hover { color: var(--zp-primary); }

/* At-a-glance fact strip under the heading — one panel split into cells, after
   the reference page. Values must be verifiable: no invented durations. */
.zp-care__facts--row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  border: 1px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
}
.zp-care__facts--row li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 28px;
  border-left: 1px solid var(--zp-third);
}
.zp-care__facts--row li:first-child { border-left: 0; }
.zp-care__fact-icon { display: block; color: var(--zp-secondary); }

/* Stacked variant — separate cards down a column, for the intake hero. */
.zp-care__facts--stack {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.zp-care__facts--stack li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 16px;
  padding: 16px 22px;
  border-radius: var(--zp-radius-soft);
  background: #fff;
  box-shadow: 0 4px 14px rgba(8, 84, 64, .07);
}
.zp-care__facts--stack li { position: relative; }
/* Progress marker: hidden until its step is answered, then a small double ring
   at the right end of the card. No digit — the card's own label says which
   step it is. */
.zp-care__fact-dot {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 100px;
  background: var(--zp-secondary);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease, box-shadow .5s ease;
}
.zp-care__facts--stack li.is-filled .zp-care__fact-dot {
  opacity: 1;
  visibility: visible;
  box-shadow: 0 0 0 3px var(--zp-third), 0 0 0 5px var(--zp-secondary);
}
.zp-care__facts--stack .zp-care__fact-icon { grid-row: 1 / 3; }
/* a11y 2026-11-11: .65 left the 14px label at 3.62:1 on the white card; .8 is 5.3:1 */
.zp-care__facts--stack .zp-care__fact-label { opacity: .8; }

/* Closing call-to-action band. Full bleed, in the darkest brand green, with the
   mark's cross as a watermark — masked, so it takes the band's own white. */
.zp-care__cta::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -70px;
  width: 320px;
  height: 320px;
  transform: translateY(-50%) rotate(12deg);
  background-color: #fff;
  -webkit-mask: url("zp-cross.svg") center / contain no-repeat;
  mask: url("zp-cross.svg") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}
.zp-care__cta > .container { position: relative; z-index: 1; }
.zp-care__cta { position: relative; overflow: hidden; margin: 100px 0; color: #fff; }
/* The tinted step band flows straight into the call to action — a strip of white
   between two full-bleed bands reads as a gap, not as breathing room. Both sides
   must be zeroed: adjacent margins collapse to the larger of the two, so killing
   only the band's bottom or only the CTA's top leaves the gap intact. */
.zp-care__band:has(+ .zp-care__cta) { margin-bottom: 0; }
.zp-care__band + .zp-care__cta { margin-top: 0; }
.zp-care__cta :where(h2, p) { color: #fff; }
.zp-care__cta a:not(.btn) { color: #fff; }
.zp-care__cta a:not(.btn):hover { color: var(--zp-mint); }
.zp-care__cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
/* One band on every online page and the `online-cta` block (2026-11-11): the copy on the left, the button and the
   reception phone on the right, vertically centred; under 992px they stack. */
.zp-care__cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px; }
.zp-care__cta-copy { flex: 1 1 440px; max-width: 720px; }
.zp-care__cta-copy > h2 { margin-bottom: 12px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; }
.zp-care__cta-copy > p { opacity: .92; }
/* The theme's .btn-white writes teal on white (2.6:1, QA A3): the band's button is dark green on white. */
.zp-care__cta .btn-white.zp-care__cta-btn {
  min-width: 240px;
  background: #fff;
  color: var(--zp-primary);
  border-color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.zp-care__cta .btn-white.zp-care__cta-btn:hover,
.zp-care__cta .btn-white.zp-care__cta-btn:focus-visible { background: var(--zp-mint); border-color: var(--zp-mint); color: var(--zp-primary); }
.zp-care__cta .zp-care__cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  text-decoration: none;
}
.zp-care__cta-phone-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
}
.zp-care__cta .zp-care__cta-phone:hover .zp-care__cta-phone-icon { border-color: var(--zp-mint); }

/* Photograph heading a service card. The ratio lives on the wrapper and the
   image fills it absolutely, so all three cards crop identically no matter what
   the source proportions are or how `height: auto` resolves on the <img>. */
.zp-care__card-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
  border-radius: var(--zp-radius);
  overflow: hidden;
  background: var(--zp-third) var(--zp-gradient-third, none);
}
.zp-care__card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* FAQ — the theme's .faq-item card, with its chevron and rotation. */
/* The section's own pb-80 closes the page; a bottom margin here doubles it. */
.zp-care__faq { margin: 0; }
.zp-care__faq details {
  cursor: pointer;
  padding: 26px;
  margin-bottom: 20px;
  border: 1px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: var(--zp-third) var(--zp-gradient-third, none);
}
.zp-care__faq details:last-child { margin-bottom: 0; }
.zp-care__faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
}
.zp-care__faq summary::-webkit-details-marker { display: none; }
.zp-care__faq summary > span { flex: 0 1 auto; }
.zp-care__chevron { flex: 0 0 16px; margin-top: 8px; transition: transform .3s ease; }
.zp-care__faq details[open] .zp-care__chevron { transform: rotate(180deg); }
.zp-care__faq details p { margin: 20px 0 0; opacity: .9; }

/* Closing contact panel, shared by the overview and the intake pages. */
.zp-care__contact {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  padding: 40px;
  border: 1px solid var(--zp-secondary);
  border-radius: var(--zp-radius);
  background: var(--zp-third) var(--zp-gradient-third, none);
}
.zp-care__contact > div > :last-child { margin-bottom: 0; }
.zp-care__contact::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 150px;
  height: 150px;
  color: var(--zp-secondary);
  background-image: radial-gradient(currentColor 2.5px, transparent 2.5px);
  background-size: 18px 18px;
  opacity: .35;
  pointer-events: none;
}

@media (max-width: 1199px) {
  .zp-care__card { padding: 32px 28px 36px; }
}
@media (max-width: 991px) {
  .zp-care__header { margin-bottom: 40px; }
  .zp-care__section { margin: 64px 0 36px; }
  .zp-care__band, .zp-care__cta { margin: 64px 0; }
  .zp-care__figure--dots::before { display: none; }
  .zp-care__facts--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zp-care__facts--row li:nth-child(odd) { border-left: 0; }
  .zp-care__facts--row li:nth-child(n+3) { border-top: 1px solid var(--zp-third); }
  .zp-care__cta-actions { justify-content: flex-start; }
  .zp-care__faq { margin: 0; }
  .zp-care__contact { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; }
}
@media (max-width: 575px) {
  .zp-care__card { padding: 28px 22px 32px; }
  .zp-care__facts--row { grid-template-columns: minmax(0, 1fr); }
  .zp-care__facts--row li { border-left: 0; }
  .zp-care__facts--row li + li { border-top: 1px solid var(--zp-third); }
  .zp-care__panel { padding: 28px 22px; }
  .zp-care__faq details { padding: 20px; }
  .zp-care .title-2, .zp-care .title-3 { overflow-wrap: anywhere; }
}

/* Wizyty on-line: the three cases and the "outside the cannabis therapy" notice (2026-10-14). The cases are linked
   tiles with the service's illustration (2026-11-11); the hero is two columns from 992px with the photo on the right. */
.zp-online__hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.zp-online__hero-figure { justify-self: center; width: 100%; max-width: 440px; }
.zp-online__hero-figure img { width: 100%; height: auto; }
@media (min-width: 992px) {
  .zp-online__hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; }
  .zp-online__hero-figure { max-width: 480px; justify-self: end; }
}
@media (max-width: 575px) {
  .zp-online__hero-figure { max-width: 320px; }
}
.zp-online__cases { display: grid; gap: 12px; max-width: 620px; margin: 12px 0 20px; padding: 0; }
.zp-online__cases > li { display: block; width: 100%; margin: 0; padding: 0; }
.zp-online__cases > li::before { content: none; }
/* `.zp-care a:not(.btn)` underlines every link (0,2,1): the tile is a card, not a text link */
.zp-care a.zp-online__case { text-decoration: none; }
.zp-online__case {
  display: grid;
  width: 100%;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px 12px 12px;
  border: 1px solid var(--zp-secondary);
  border-radius: var(--zp-radius-soft);
  background: rgba(255, 255, 255, .7);
  color: var(--zp-primary);
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.zp-online__case:hover,
.zp-online__case:focus-visible { background: #fff; box-shadow: 0 10px 24px rgba(8, 84, 64, .12); transform: translateY(-1px); color: var(--zp-primary); }
.zp-online__case-icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--zp-third) var(--zp-gradient-third, none);
  overflow: hidden;
}
.zp-online__case-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.zp-online__case-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zp-online__case-title { font-size: 17px; line-height: 1.3; }
.zp-online__case-text { font-size: 14px; line-height: 1.4; opacity: .85; }
.zp-online__case-arrow { font-size: 20px; color: var(--zp-secondary); transition: transform .2s ease; }
.zp-online__case:hover .zp-online__case-arrow { transform: translateX(3px); }
.zp-online__notice { padding: 12px 16px; border-left: 4px solid #085440; background: #E3F2E9 var(--zp-gradient-third, none); border-radius: var(--zp-radius-soft); }

/* ==== 3. guide-steps.css (app copy) ============================================================================= */
/*
 * The `guide-steps` block (2026-11-11): numbered steps, each a title, a text and a screenshot. The section shell, the
 * heading with the clinic's mark and the palette come from `SpecSection` (`specialization.css`); only the steps live
 * here. Phone screenshots (`--phones`): a card grid, the screenshot at the foot of each card in a phone-like frame.
 * Browser screenshots (`--wide`): one row per step, the text beside the wide screenshot, stacked below `lg`.
 */

/* a jump link (#pacjent-gov-pl) lands the section below the sticky header */
[data-block="guide-steps"][id] { scroll-margin-top: 140px; }

.zp-guide {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.zp-guide__step {
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--zp-secondary, #53C063);
  border-radius: var(--zp-radius, 8px);
  background: #fff;
}
.zp-guide__body { position: relative; min-width: 0; }
.zp-guide__num {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--zp-primary, #085440);
  color: #fff;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
}
.zp-guide__title { margin: 0 0 12px; overflow-wrap: anywhere; }
.zp-guide__text { overflow-wrap: anywhere; }
.zp-guide__text > :last-child { margin-bottom: 0; }
.zp-guide__text ul,
.zp-guide__text ol { padding-left: 1.2em; }

.zp-guide__figure { margin: 24px 0 0; min-width: 0; }
.zp-guide__shot {
  display: block;
  width: auto; /* the theme gives every `a` width: max-content */
  overflow: hidden;
  border: 1px solid #d5e6dc;
  border-radius: var(--zp-radius, 8px);
  background: #fff;
  box-shadow: 0 10px 30px rgba(8, 84, 64, .10);
}
.zp-guide__shot:focus-visible { outline: 3px solid var(--zp-secondary, #53C063); outline-offset: 3px; }
.zp-guide__shot img { display: block; width: 100%; height: auto; }
.zp-guide__caption { margin-top: 10px; font-size: .875rem; line-height: 1.4; opacity: .8; }

/* a phone screenshot: narrow, centred, rounded like the device */
.zp-guide__step--phone .zp-guide__figure { width: min(100%, 260px); margin-left: auto; margin-right: auto; }
.zp-guide__step--phone .zp-guide__shot { border-radius: 22px; border: 6px solid #1d2b26; }
.zp-guide__step--phone .zp-guide__caption { text-align: center; }

/* phones: a card grid; the screenshots line up at the cards' feet */
.zp-guide--phones .zp-guide__step { display: flex; flex-direction: column; }
.zp-guide--phones .zp-guide__figure { margin-top: auto; padding-top: 24px; }

@media (min-width: 768px) {
  .zp-guide--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .zp-guide--phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zp-guide__step--phone .zp-guide__figure { width: min(100%, 300px); }
  /* wide: the text beside the screenshot */
  .zp-guide--wide .zp-guide__step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: center;
    padding: 40px;
  }
  .zp-guide--wide .zp-guide__figure { margin: 0; }
  .zp-guide--wide .zp-guide__step--text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .zp-guide { gap: 20px; }
  .zp-guide__step { padding: 24px 20px; }
  /* a browser screenshot takes the card's full width on a phone */
  .zp-guide__step:not(.zp-guide__step--phone) .zp-guide__shot { margin: 0 -12px; }
}