/* ════════════════════════════════════════════════════════════════════════════
   Product detail — Phase 3A
   ────────────────────────────────────────────────────────────────────────────
   A separate sheet, loaded only on single product pages. Two reasons:

   1. components.css is a shared, heavily-edited file. Keeping this work out of
      it means the product page can be reshaped without touching anything the
      rest of the marketplace depends on.
   2. It only ships where it is used. The product page is the heaviest template
      in the catalogue and none of this is needed on /browse/ or the homepage.

   Everything here uses the same --sq-* tokens as the component layer, so it
   follows the theme in light and dark without defining a palette of its own.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Rhythm ──────────────────────────────────────────────────────────────────
   One fluid spacing scale for the whole page, so a section is never separated
   from the next one by a gap that happens to be whatever its own padding was.
   Mobile gets genuinely smaller gaps rather than the desktop rhythm scaled: the
   old page kept ~80px between sections at 390px wide, which is most of a screen
   of nothing between one idea and the next. */
.sqpp {
  --sqpp-gap-section: clamp(38px, 5.5vw, 76px);
  --sqpp-gap-block: clamp(16px, 2vw, 26px);
  --sqpp-gap-tight: clamp(10px, 1.2vw, 15px);
  --sqpp-measure: 68ch;
  --sqpp-aside: minmax(200px, 280px);
}

.sqpp .sqpp-section + .sqpp-section { margin-block-start: var(--sqpp-gap-section); }

/* The two-column section shell.
   `align-items:start` matters more than it looks: without it, grid stretches
   both columns to the height of the taller one, which is how a three-line
   heading ended up as a 600px column of empty space beside a long FAQ. */
.sqpp .sqpp-section {
  display: grid;
  grid-template-columns: var(--sqpp-aside) minmax(0, 1fr);
  gap: var(--sqpp-gap-block) clamp(28px, 5vw, 72px);
  align-items: start;
}

.sqpp .sqpp-section__aside { display: flex; flex-direction: column; gap: 9px; }
.sqpp .sqpp-section__aside h2 { margin: 0 !important; text-wrap: balance; }
.sqpp .sqpp-section__body { min-inline-size: 0; }

/* A section with nothing in its aside should not reserve the column for it. */
.sqpp .sqpp-section:not(:has(.sqpp-section__aside)) { grid-template-columns: minmax(0, 1fr); }

/* ── Editorial ───────────────────────────────────────────────────────────── */
.sqpp .sqpp-editorial__body { max-inline-size: var(--sqpp-measure); }
.sqpp .sqpp-editorial__body p { margin: 0 0 1em; line-height: var(--sq-lh-body); color: var(--sq-ink); }
.sqpp .sqpp-editorial__body p:last-child { margin-bottom: 0; }
.sqpp .sqpp-editorial__body em { font-style: italic; }
.sqpp .sqpp-editorial__source {
  margin: 4px 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting);
}

/* ── Fit: who it is for ──────────────────────────────────────────────────── */
/* Two columns only when there are two lists. `is-single` collapses to one
   rather than leaving a reserved half-width of nothing. */
.sqpp .sqpp-audience__cols {
  display: grid; gap: var(--sqpp-gap-block) clamp(24px, 4vw, 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.sqpp .sqpp-audience__cols.is-single { grid-template-columns: minmax(0, 1fr); max-inline-size: var(--sqpp-measure); }
.sqpp .sqpp-audience__col h3 {
  margin: 0 0 10px !important; font-size: var(--sq-t-p3) !important; font-weight: var(--sq-w-bold) !important;
  letter-spacing: var(--sq-ls-body); text-transform: uppercase;
}
.sqpp .sqpp-audience__col--for h3 { color: var(--sq-good); }
.sqpp .sqpp-audience__col--not h3 { color: var(--sq-caution); }
.sqpp .sqpp-audience__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sqpp .sqpp-audience__col li {
  position: relative; padding-inline-start: 22px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-ink);
}
.sqpp .sqpp-audience__col li::before {
  content: ""; position: absolute; inset-block-start: .55em; inset-inline-start: 2px;
  inline-size: 9px; block-size: 9px; border-radius: 50%; background: currentColor; opacity: .28;
}
.sqpp .sqpp-audience__col--for li::before { background: var(--sq-good); opacity: .55; }
.sqpp .sqpp-audience__col--not li::before { background: var(--sq-caution); opacity: .55; }

/* ── Full-page screenshot ────────────────────────────────────────────────── */
/* These files are ~300px wide and ~2500px tall. Dropped into the old landscape
   showcase rail they became an unreadable smear, so here the image keeps its
   own proportions and the FRAME scrolls instead of the image being squashed
   into it. */
.sqpp .sqpp-fullpage__note { margin: 0; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sqpp .sqpp-fullpage__demo {
  align-self: flex-start; margin-block-start: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sq-ink); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none;
  border-block-end: 1px solid var(--sq-line); padding-block-end: 2px;
}
.sqpp .sqpp-fullpage__demo:hover { border-block-end-color: var(--sq-signal); color: var(--sq-signal-ink); }
.sqpp .sqpp-fullpage__demo:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; }

.sqpp .sqpp-fullpage__frame {
  margin: 0; border: 1px solid var(--sq-line); border-radius: 14px; overflow: hidden;
  background: var(--sq-soft);
  /* A tall narrow screenshot in a full-width frame leaves two wide empty margins.
     The frame tracks the image instead. */
  max-inline-size: 460px;
}
.sqpp .sqpp-fullpage__open {
  display: block; inline-size: 100%; max-block-size: min(74vh, 760px);
  overflow-y: auto; overflow-x: hidden; padding: 0; border: 0; cursor: zoom-in;
  background: var(--sq-soft); scrollbar-width: thin;
  /* A visible hint that this box scrolls rather than being a cropped image. */
  overscroll-behavior: contain;
}
/* Never upscaled. The file is ~304px wide; blown up to a 900px column it is a
   blur, so it is capped to its own natural width (passed in as --sqpp-fp-w) and
   centred in the frame. Below that width it scales down normally. */
.sqpp .sqpp-fullpage__open img {
  display: block; margin-inline: auto;
  inline-size: min(100%, var(--sqpp-fp-w, 340px));
  block-size: auto;                                      /* native ratio, never stretched */
}
.sqpp .sqpp-fullpage__open:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; }
.sqpp .sqpp-fullpage__frame figcaption {
  padding: 11px 16px; border-block-start: 1px solid var(--sq-line);
  background: var(--sq-sheet); color: var(--sq-muted); font-size: var(--sq-t-eyebrow);
}

/* ── Demo action ─────────────────────────────────────────────────────────── */
/* Secondary to the buy button by design. It must never be mistaken for the
   purchase, and it must never replace it. */
.sqpp .sqpp-demo {
  margin-block-start: 9px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-block-size: 48px; padding: 0 18px;
  border: 1px solid var(--sq-border-strong, var(--sq-line)); border-radius: 10px;
  background: var(--sq-sheet); color: var(--sq-ink);
  font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.sqpp .sqpp-demo:hover { border-color: var(--sq-ink); background: var(--sq-soft); }
.sqpp .sqpp-demo:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
/* The heading column is narrow and short; the accordion is long. Sticking the
   aside keeps the two visually connected through a long list instead of the
   heading scrolling away and leaving a tall empty column beside the questions. */
@media (min-width: 981px) {
  .sqpp .sqpp-faq .sqpp-section__aside { position: sticky; inset-block-start: 96px; }
}
.sqpp .sqpp-faq__list { display: flex; flex-direction: column; max-inline-size: var(--sqpp-measure); }
.sqpp .sqpp-faq__divider {
  margin: var(--sqpp-gap-block) 0 6px; padding-block-start: var(--sqpp-gap-tight);
  border-block-start: 1px solid var(--sq-line);
  color: var(--sq-muted); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
}

/* ── Closing call to action ──────────────────────────────────────────────── */
.sqpp .sqpp-close { display: block; }
.sqpp .sqpp-close__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sqpp-gap-block);
  padding: clamp(22px, 3.4vw, 38px);
  border: 1px solid var(--sq-line); border-radius: 16px; background: var(--sq-soft);
}
.sqpp .sqpp-close__text { flex: 1 1 320px; min-inline-size: 0; }
.sqpp .sqpp-close__text h2 {
  margin: 0 0 6px !important; font-size: var(--sq-t-h3) !important;
  letter-spacing: var(--sq-ls-h2); text-wrap: balance;
}
.sqpp .sqpp-close__text p { margin: 0; color: var(--sq-muted); font-size: var(--sq-t-p3); }
.sqpp .sqpp-close__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sqpp .sqpp-close__demo,
.sqpp .sqpp-close__buy {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 50px; padding: 0 24px; border-radius: 10px;
  font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sqpp .sqpp-close__demo { border: 1px solid var(--sq-line); background: var(--sq-sheet); color: var(--sq-ink); }
.sqpp .sqpp-close__demo:hover { border-color: var(--sq-ink); }
.sqpp .sqpp-close__buy { border: 1px solid var(--sq-ink); background: var(--sq-ink); color: var(--sq-paper); }
.sqpp .sqpp-close__buy:hover { background: var(--sq-signal); border-color: var(--sq-signal); color: var(--wp--preset--color--on-signal); }
.sqpp .sqpp-close__demo:focus-visible,
.sqpp .sqpp-close__buy:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; }

/* ── Explore links ───────────────────────────────────────────────────────── */
.sqpp .sqpp-explore {
  margin-block-start: var(--sqpp-gap-section);
  padding-block-start: var(--sqpp-gap-block);
  border-block-start: 1px solid var(--sq-line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
}
.sqpp .sqpp-explore ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.sqpp .sqpp-explore a {
  display: inline-flex; align-items: center; min-block-size: 34px; padding: 0 13px;
  border: 1px solid var(--sq-line); border-radius: 999px;
  background: var(--sq-sheet); color: var(--sq-ink);
  font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none; white-space: nowrap;
}
.sqpp .sqpp-explore a:hover { border-color: var(--sq-ink); }
.sqpp .sqpp-explore a:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* One column. The aside becomes a heading above its own content instead of a
     narrow column beside it. */
  .sqpp .sqpp-section { grid-template-columns: minmax(0, 1fr); gap: var(--sqpp-gap-tight); }
  .sqpp .sqpp-section__body { margin-block-start: 4px; }
}

@media (max-width: 700px) {
  .sqpp .sqpp-audience__cols { grid-template-columns: minmax(0, 1fr); }
  .sqpp .sqpp-close__inner { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .sqpp .sqpp-close__actions { flex-direction: column; min-inline-size: 0; }
  /* These two carry the page's purchase actions, so they keep the 14px interface floor
     and the 50px target. What they cannot keep on a 320px screen is `white-space:
     nowrap` -- the longer label's min-content width was 274px against 259px of room,
     which pushed the document 15px wide. Letting the label wrap is the fix. */
  .sqpp .sqpp-close__demo,
  .sqpp .sqpp-close__buy {
    inline-size: 100%; min-inline-size: 0;
    white-space: normal; text-align: center; padding: 12px 16px;
  }
  .sqpp .sqpp-fullpage__open { max-block-size: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sqpp .sqpp-demo,
  .sqpp .sqpp-close__demo,
  .sqpp .sqpp-close__buy { transition: none; }
  @media (min-width: 981px) {
    .sqpp .sqpp-faq .sqpp-section__aside { position: static; }
  }
}

/* The lede that opens the editorial section — the same sentence used as the meta
   description, set larger so the section has an entry point rather than starting
   mid-argument. */
.sqpp .sqpp-editorial__body .sqpp-lede {
  margin: 0 0 1.1em; font-size: var(--sq-t-p1); line-height: var(--sq-lh-body);
  font-weight: var(--sq-w-medium); color: var(--sq-ink);
}
.sqpp .sqpp-editorial__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: var(--sqpp-gap-block) 0 0; padding-block-start: var(--sqpp-gap-tight);
  border-block-start: 1px solid var(--sq-line);
}
.sqpp .sqpp-editorial__tags > span {
  color: var(--sq-muted); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
}
.sqpp .sqpp-editorial__tags a {
  display: inline-flex; align-items: center; min-block-size: 30px; padding: 0 11px;
  border: 1px solid var(--sq-line); border-radius: 999px;
  color: var(--sq-ink); font-size: var(--sq-t-eyebrow); text-decoration: none;
}
.sqpp .sqpp-editorial__tags a:hover { border-color: var(--sq-ink); }
.sqpp .sqpp-editorial__tags a:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }

/* ── Hero balance ────────────────────────────────────────────────────────────
   The purchase panel is the taller of the two hero columns, which left a column
   of dead space under the gallery thumbnails — the "excessive empty space in the
   gallery" in the review.

   Stretching the media column to match was the wrong fix: it simply moved the
   void to the other side, because whichever column is shorter ends first. So the
   columns keep their natural heights and the panel becomes sticky instead. The
   price, the code and the buy button stay in view while the reader scrolls the
   gallery and the sections below it, which turns the height difference from a
   hole into headroom the panel actually uses.

   Bounded by max-height so a tall panel can still scroll itself rather than
   overflowing the viewport, and switched off entirely below the breakpoint where
   the layout is a single column anyway. */
@media (min-width: 981px) {
  .sqpp .sqpp-hero { align-items: start; }
  /* Sticky, and never a scroll container.
     The panel used to carry `max-block-size` plus `overflow-y:auto`, so once its content
     passed the viewport height it became a little scrolling box: the title could sit
     halfway down a field of white while the rest was hidden behind an inner scrollbar.
     A sticky element does not need either. It travels with the scroll until its parent
     runs out, and the page scrollbar is the only one involved. */
  .sqpp .sqpp-hero > .sqpp-panel {
    position: sticky;
    inset-block-start: 88px;
  }
}

/* A panel taller than the viewport cannot stick without hiding its own foot, so on short
   screens it simply stays in the flow. */
@media (min-width: 981px) and (max-height: 900px) {
  .sqpp .sqpp-hero > .sqpp-panel { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sticky is not motion, but a reader who has asked for less movement is poorly
     served by a panel that appears to follow them down the page. */
  @media (min-width: 981px) {
    .sqpp .sqpp-hero > .sqpp-panel { position: static; }
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase 3A.1 — density, icons and the component set
   ════════════════════════════════════════════════════════════════════════════ */

.sqpp {
  --sqpp-gap-section: clamp(40px, 4.6vw, 72px);
  --sqpp-gap-minor: clamp(28px, 3vw, 48px);
  --sqpp-card-gap: clamp(14px, 1.6vw, 22px);
  --sqpp-radius: 12px;
}

/* ── Icons ───────────────────────────────────────────────────────────────────
   One family, one stroke weight, sized by role rather than by whim. Every icon
   inherits currentColor, so a control's hover and focus states carry the icon
   with them instead of needing their own colour rules. */
/* Every sprite reference gets a size, whatever class it carries. A <use> has no
   intrinsic dimensions, so an unsized icon expands to fill its box — which is how a
   16px info mark ended up as a 200px disc across the requirements note. This is the
   floor; the rules below adjust individual roles. */
/* `.sqpp svg` and not `:not(.sgp-sprite)` — the sprite is printed at wp_body_open,
   outside this article, so it is already out of scope, and the extra :not() raised
   this rule's specificity above the per-role sizes below and overrode all of them. */
.sqpp svg { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
.sqpp .sgp-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; }
.sqpp .sqpp-btn__icon,
.sqpp .sqpp-chip__icon,
.sqpp .sqpp-extlink__icon,
.sqpp .sqpp-faq__link-icon { inline-size: 16px; block-size: 16px; }
.sqpp .sqpp-facts__icon,
.sqpp .sqpp-licence__icon,
.sqpp .sqpp-requirements__icon,
.sqpp .sqpp-fit__icon { inline-size: 20px; block-size: 20px; }
.sqpp .sqpp-noreviews__icon { inline-size: 22px; block-size: 22px; }

/* ── One external-link treatment ─────────────────────────────────────────── */
.sqpp .sqpp-extlink {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--sq-ink); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none;
  border-block-end: 1px solid var(--sq-line); padding-block-end: 1px;
}
.sqpp .sqpp-extlink:hover { border-block-end-color: var(--sq-signal); color: var(--sq-signal-ink); }
.sqpp .sqpp-extlink:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; border-radius: 2px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.sqpp .sqpp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: 44px; padding: 0 16px;
  border: 1px solid var(--sq-line); border-radius: 10px;
  background: var(--sq-sheet); color: var(--sq-ink);
  font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); line-height: var(--sq-lh-h1); text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sqpp .sqpp-btn:hover { border-color: var(--sq-ink); background: var(--sq-soft); }
.sqpp .sqpp-btn:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqpp .sqpp-btn__icon--trail { margin-inline-start: -2px; opacity: .7; }

/* ── Stacked section shell ───────────────────────────────────────────────────
   Most sections do not have a second column worth of content, and a narrow
   heading beside a wide body was leaving a tall empty gutter down the page. The
   stacked variant puts the heading above its content at full width; the
   two-column shell is kept only where the left column earns its place (the FAQ,
   which has an intro and a link). */
.sqpp .sqpp-section--stack { display: block; }
.sqpp .sqpp-section--stack .sqpp-section__head { margin-block-end: var(--sqpp-gap-tight); max-inline-size: 62ch; }
.sqpp .sqpp-section--stack .sqpp-section__head h2 {
  margin: 0 !important; font-size: var(--sq-t-h3) !important;
  letter-spacing: var(--sq-ls-h2); text-wrap: balance;
}
.sqpp .sqpp-section__sub { margin: 6px 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }

/* ── Editorial ───────────────────────────────────────────────────────────── */
.sqpp .sqpp-prose { max-inline-size: 70ch; }
.sqpp .sqpp-prose p { margin: 0 0 .95em; line-height: var(--sq-lh-body); }
.sqpp .sqpp-prose p:last-child { margin-bottom: 0; }

/* Best for / Not ideal for. Two cards when there are two lists, one when not. */
.sqpp .sqpp-fit {
  display: grid; gap: var(--sqpp-card-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--sqpp-gap-minor);
}
.sqpp .sqpp-fit.is-single { grid-template-columns: minmax(0, 1fr); max-inline-size: 70ch; }
.sqpp .sqpp-fit__card {
  padding: 18px 20px; border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius);
  background: var(--sq-sheet);
}
.sqpp .sqpp-fit__card h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px !important; font-size: var(--sq-t-p3) !important; font-weight: var(--sq-w-bold) !important;
  letter-spacing: var(--sq-ls-body); text-transform: uppercase;
}
.sqpp .sqpp-fit__card--for h3 { color: var(--sq-good); }
.sqpp .sqpp-fit__card--not h3 { color: var(--sq-caution); }
.sqpp .sqpp-fit__card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sqpp .sqpp-fit__card li {
  position: relative; padding-inline-start: 18px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-ink);
}
.sqpp .sqpp-fit__card li::before {
  content: ""; position: absolute; inset-block-start: .58em; inset-inline-start: 1px;
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: .45;
}
.sqpp .sqpp-fit__card--for li::before { background: var(--sq-good); }
.sqpp .sqpp-fit__card--not li::before { background: var(--sq-caution); }

/* ── Fact cards ──────────────────────────────────────────────────────────────
   Short facts only. The long Requirements prose that used to sit in this grid
   and set the height of its whole row now lives in the note below it. */
.sqpp .sqpp-facts {
  display: grid; gap: var(--sqpp-card-gap); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sqpp .sqpp-facts__item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px;
  padding: 16px 18px; border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius);
  background: var(--sq-sheet);
}
.sqpp .sqpp-facts__icon { grid-row: 1 / 3; margin-block-start: 2px; color: var(--sq-muted); }
.sqpp .sqpp-facts__label {
  margin: 0 !important; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
}
.sqpp .sqpp-facts__value { margin: 2px 0 0 !important; font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); line-height: var(--sq-lh-eyebrow); }
.sqpp .sqpp-facts__note { margin: 5px 0 0 !important; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); }

.sqpp .sqpp-requirements {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  margin-block-start: var(--sqpp-card-gap); padding: 16px 18px;
  border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius); background: var(--sq-soft);
}
.sqpp .sqpp-requirements__icon { margin-block-start: 2px; color: var(--sq-muted); }
.sqpp .sqpp-requirements__label {
  margin: 0 0 4px !important; font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted);
}
.sqpp .sqpp-requirements p + p { margin-block-start: 6px; }
.sqpp .sqpp-requirements p:not(.sqpp-requirements__label) {
  margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); color: var(--sq-ink); max-inline-size: 74ch;
}

/* ── Licence cards ───────────────────────────────────────────────────────── */
.sqpp .sqpp-licence {
  display: grid; gap: var(--sqpp-card-gap); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sqpp .sqpp-licence__card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius);
  background: var(--sq-sheet);
}
.sqpp .sqpp-licence__icon { color: var(--sq-muted); }
.sqpp .sqpp-licence__card h3 { margin: 0 !important; font-size: var(--sq-t-p3) !important; font-weight: var(--sq-w-bold) !important; }
.sqpp .sqpp-licence__card p { margin: 0; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-muted); }
.sqpp .sqpp-terms__extra,
.sqpp .sqpp-terms__source { margin: var(--sqpp-gap-tight) 0 0; color: var(--sq-muted); font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); }
.sqpp .sqpp-terms__source:empty { display: none; }
.sqpp .sqpp-terms__links { display: flex; flex-wrap: wrap; gap: 18px; margin-block-start: var(--sqpp-gap-tight); }

/* ── Creator summary ─────────────────────────────────────────────────────────
   A summary card, not a second copy of the profile page. */
.sqpp .sqpp-creator__card {
  display: grid; gap: 16px 22px; padding: 22px 24px;
  grid-template-columns: minmax(0, 1fr) auto; align-items: start;
  border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius); background: var(--sq-sheet);
}
.sqpp .sqpp-creator__identity { display: flex; align-items: center; gap: 14px; grid-column: 1; }
.sqpp .sqpp-creator__logo {
  inline-size: 52px; block-size: 52px; flex: 0 0 auto; border-radius: 12px; object-fit: contain;
  background: var(--sq-soft); border: 1px solid var(--sq-line);
}
.sqpp .sqpp-creator__logo--mark {
  display: grid; place-items: center; border: 0;
  background: var(--sq-ink); color: var(--sq-paper); font-size: var(--sq-t-h4); font-weight: var(--sq-w-bold);
}
.sqpp .sqpp-creator__who h2 { margin: 0 !important; font-size: var(--sq-t-h4) !important; letter-spacing: var(--sq-ls-h3); }
.sqpp .sqpp-creator__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 !important; }
.sqpp .sqpp-chip {
  display: inline-flex; align-items: center; gap: 5px; min-block-size: 26px; padding: 0 9px;
  border: 1px solid var(--sq-line); border-radius: 999px;
  color: var(--sq-muted); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold); text-decoration: none;
}
.sqpp .sqpp-chip__icon { color: currentColor; opacity: .8; }
.sqpp .sqpp-chip--partner { color: var(--sq-ink); }
.sqpp .sqpp-chip--offer { background: var(--sq-signal); border-color: var(--sq-signal); color: var(--wp--preset--color--on-signal); }
.sqpp .sqpp-chip--link:hover { border-color: var(--sq-ink); color: var(--sq-ink); }
.sqpp .sqpp-chip--link:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqpp .sqpp-creator__bio {
  grid-column: 1; margin: 0; max-inline-size: 68ch; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); color: var(--sq-muted);
}
.sqpp .sqpp-creator__paid { grid-column: 1; margin: 0; font-size: var(--sq-t-p3); color: var(--sq-caution); }
.sqpp .sqpp-creator__actions { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 8px; }

/* ── Empty review callout ────────────────────────────────────────────────── */
.sqpp .sqpp-noreviews {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
  margin-block-start: var(--sqpp-gap-minor); padding: 18px 20px;
  border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius); background: var(--sq-soft);
}
.sqpp .sqpp-noreviews__icon { color: var(--sq-muted); }
.sqpp .sqpp-noreviews__text { flex: 1 1 320px; min-inline-size: 0; }
.sqpp .sqpp-noreviews__title { margin: 0 !important; font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); }
.sqpp .sqpp-noreviews p:not(.sqpp-noreviews__title) { margin: 3px 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); max-inline-size: 70ch; }

/* ── Gallery controls ────────────────────────────────────────────────────────
   44px minimum, circular, and legible over any image — the old arrows were CSS
   pseudo-element chevrons at 34px with no contrast plate, which disappeared over
   a light screenshot. */
.sqpp .sqpp-gallery__nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 44px; block-size: 44px; z-index: 3;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--sq-line); border-radius: 50%;
  background: color-mix(in srgb, var(--sq-sheet) 88%, transparent);
  color: var(--sq-ink);
  backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.sqpp .sqpp-gallery__nav::before,
.sqpp .sqpp-gallery__nav::after { content: none; }   /* retire the drawn chevrons */
.sqpp .sqpp-gallery__nav--prev { inset-inline-start: 12px; }
.sqpp .sqpp-gallery__nav--next { inset-inline-end: 12px; }
.sqpp .sqpp-gallery__nav:hover { background: var(--sq-sheet); border-color: var(--sq-ink); }
.sqpp .sqpp-gallery__nav:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqpp .sqpp-gallery__nav[disabled] { opacity: .35; cursor: default; }

.sqpp .sqpp-gallery__zoom {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 2;
  inline-size: 34px; block-size: 34px; display: grid; place-items: center;
  border-radius: 9px; background: color-mix(in srgb, var(--sq-sheet) 88%, transparent);
  border: 1px solid var(--sq-line); color: var(--sq-ink);
}

.sqpp .sqpp-gallery__counter {
  position: absolute; inset-block-end: 12px; inset-inline-start: 12px; z-index: 2;
  margin: 0; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--sq-ink) 82%, transparent); color: var(--sq-paper);
  font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold); font-variant-numeric: tabular-nums;
}

/* Thumbnail rail. Snapping, an edge fade that says "there is more", and rail
   arrows that appear only when the strip actually overflows. */
.sqpp .sqpp-gallery__rail { position: relative; margin-block-start: 10px; }
.sqpp .sqpp-gallery__thumbs {
  display: flex; gap: 8px; margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.sqpp .sqpp-gallery__thumbs::-webkit-scrollbar { display: none; }
.sqpp .sqpp-gallery__thumbs > li { scroll-snap-align: center; flex: 0 0 auto; }
.sqpp .sqpp-gallery__rail[data-overflowing="true"]::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 46px;
  pointer-events: none;
  background: linear-gradient(to left, var(--sq-paper), transparent);
}
.sqpp .sqpp-gallery__railbtn {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 2;
  inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--sq-line); border-radius: 50%; background: var(--sq-sheet); color: var(--sq-ink);
}
.sqpp .sqpp-gallery__railbtn--prev { inset-inline-start: -14px; }
.sqpp .sqpp-gallery__railbtn--next { inset-inline-end: -14px; }
.sqpp .sqpp-gallery__railbtn:hover { border-color: var(--sq-ink); }
.sqpp .sqpp-gallery__railbtn:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqpp .sqpp-gallery__railbtn[hidden] { display: none; }

/* ── Full-page viewport ──────────────────────────────────────────────────── */
.sqpp .sqpp-viewport {
  /* Sized to the screenshot it holds. The file is ~304px wide; a 720px frame left a
     third of the window empty on either side of it, which read as a layout error
     rather than as a browser window. */
  position: relative; margin: 0; max-inline-size: 560px;
  border: 1px solid var(--sq-line); border-radius: var(--sqpp-radius); overflow: hidden;
  background: var(--sq-soft);
}
.sqpp .sqpp-viewport__chrome {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-block-end: 1px solid var(--sq-line); background: var(--sq-sheet);
}
.sqpp .sqpp-viewport__dots { display: flex; gap: 5px; }
.sqpp .sqpp-viewport__dots i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--sq-line); }
.sqpp .sqpp-viewport__hint {
  display: flex; align-items: center; gap: 6px; margin: 0 auto 0 0;
  color: var(--sq-muted); font-size: var(--sq-t-p3);
}
.sqpp .sqpp-viewport__hint-icon { inline-size: 15px; block-size: 15px; }
.sqpp .sqpp-viewport__expand {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 14px;
  cursor: pointer; border: 1px solid var(--sq-line); border-radius: 8px;
  background: var(--sq-sheet); color: var(--sq-ink); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold);
}
.sqpp .sqpp-viewport__expand:hover { border-color: var(--sq-ink); background: var(--sq-soft); }
.sqpp .sqpp-viewport__expand:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }

.sqpp .sqpp-viewport__scroll {
  max-block-size: min(64vh, 620px); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; overscroll-behavior: contain;   /* never hijacks the page scroll */
}
.sqpp .sqpp-viewport__scroll:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; }
.sqpp .sqpp-viewport__scroll img {
  display: block; margin-inline: auto;
  inline-size: min(100%, var(--sqpp-fp-w, 340px)); block-size: auto;   /* never upscaled */
}
.sqpp .sqpp-viewport__fade {
  position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 64px; pointer-events: none;
  background: linear-gradient(to top, var(--sq-soft), transparent);
  opacity: 1; transition: opacity .2s ease;
}
.sqpp .sqpp-viewport[data-scrolled="true"] .sqpp-viewport__fade { opacity: 0; }
.sqpp .sqpp-viewport__aside {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: var(--sqpp-gap-tight) 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.sqpp .sqpp-faq__aside { max-inline-size: 300px; }
.sqpp .sqpp-faq__intro { margin: 8px 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sqpp .sqpp-faq__link {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: 12px;
  color: var(--sq-ink); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); text-decoration: none;
  border-block-end: 1px solid var(--sq-line); padding-block-end: 2px;
}
.sqpp .sqpp-faq__link:hover { border-block-end-color: var(--sq-signal); }
.sqpp .sqpp-faq__link:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; }
.sqpp .sqpp-faq__group {
  margin: var(--sqpp-gap-minor) 0 10px !important; font-size: var(--sq-t-p3) !important; font-weight: var(--sq-w-bold) !important;
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted);
}
.sqpp .sqpp-faq__group:first-child { margin-block-start: 0 !important; }
.sqpp .sqpp-faq__list { max-inline-size: 72ch; border-block-start: 1px solid var(--sq-line); }
.sqpp .sqpp-faq__item { border-block-end: 1px solid var(--sq-line); }
/* 68px closed: the padding is inside the minimum, not added to it, so a one-line
   question and a two-line one both sit in a row of predictable height. */
.sqpp .sqpp-faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box;   /* the padding sits inside the 68px, it does not add to it */
  min-block-size: 68px; padding: 10px 4px; cursor: pointer; list-style: none;
  font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); color: var(--sq-ink);
}
.sqpp .sqpp-faq__item > summary::-webkit-details-marker { display: none; }
.sqpp .sqpp-faq__item > summary:hover { color: var(--sq-signal-ink); }
.sqpp .sqpp-faq__item > summary:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: -2px; border-radius: 4px; }
/* Retire the CSS-drawn mark.
   `components.css` builds a plus out of `::before` and `::after` on this element, from
   when the accordion had no icon markup of its own. The chevron now renders on top of it,
   producing the hybrid glyph in the review. Higher specificity here so it wins wherever
   the two sheets end up in the cascade. */
.sqpp .sqpp-faq__mark::before,
.sqpp .sqpp-faq__mark::after { content: none; display: none; }

/* One chevron that turns, rather than a plus stacked on a minus.
   Two glyphs in the same grid cell only ever looked right when exactly one of them was
   painted, and any moment where both were produced a malformed hybrid mark. A single
   element rotating 180 degrees cannot land in that state. */
.sqpp .sqpp-faq__mark {
  flex: 0 0 auto; display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  color: var(--sq-muted); background: var(--sq-soft);
  transition: transform .2s ease, background .15s ease, color .15s ease;
}
.sqpp .sqpp-faq__mark > svg { inline-size: 16px; block-size: 16px; }
.sqpp .sqpp-faq__item[open] .sqpp-faq__mark { transform: rotate(180deg); color: var(--sq-ink); }
.sqpp .sqpp-faq__item > summary:hover .sqpp-faq__mark { background: var(--sq-line); color: var(--sq-ink); }
@media (prefers-reduced-motion: reduce) { .sqpp .sqpp-faq__mark { transition: none; } }
.sqpp .sqpp-faq__answer { padding: 0 4px 18px; }
.sqpp .sqpp-faq__answer p { margin: 0; max-inline-size: 70ch; font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); color: var(--sq-muted); }

/* ── Related rail ────────────────────────────────────────────────────────────
   The catalogue card at its real size, three across, scrolling when there are
   more. Not five cards crushed into a row built for three. */
.sqpp .sqpp-related__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-inline-size: none; }
.sqpp .sqpp-rail__nav { display: flex; gap: 8px; }
.sqpp .sqpp-rail__nav[hidden] { display: none; }
.sqpp .sqpp-rail__btn {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--sq-line); border-radius: 50%; background: var(--sq-sheet); color: var(--sq-ink);
}
.sqpp .sqpp-rail__btn:hover { border-color: var(--sq-ink); }
.sqpp .sqpp-rail__btn:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqpp .sqpp-rail__btn[disabled] { opacity: .35; cursor: default; }
.sqpp .sqpp-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--sqpp-card-gap)) / 3);
  gap: var(--sqpp-card-gap); margin: 0; padding: 2px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.sqpp .sqpp-rail::-webkit-scrollbar { display: none; }
.sqpp .sqpp-rail__item { scroll-snap-align: start; min-inline-size: 0; }
.sqpp .sqpp-rail__item > .sq-pc { block-size: 100%; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.sqpp .sqpp-close__demo,
.sqpp .sqpp-close__buy { gap: 8px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sqpp .sqpp-licence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sqpp .sqpp-faq { display: block; }               /* heading above the accordion */
  .sqpp .sqpp-faq__aside { max-inline-size: none; margin-block-end: var(--sqpp-gap-tight); }
  .sqpp .sqpp-rail { grid-auto-columns: calc((100% - var(--sqpp-card-gap)) / 2); }
  .sqpp .sqpp-creator__card { grid-template-columns: minmax(0, 1fr); }
  .sqpp .sqpp-creator__actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .sqpp .sqpp-fit { grid-template-columns: minmax(0, 1fr); }
  .sqpp .sqpp-licence { grid-template-columns: minmax(0, 1fr); }
  /* One full card plus a sliver of the next, so the rail reads as scrollable. */
  .sqpp .sqpp-rail { grid-auto-columns: 86%; }
  .sqpp .sqpp-gallery__railbtn { display: none; }   /* touch drag is the affordance here */
  .sqpp .sqpp-viewport__hint { display: none; }
  .sqpp .sqpp-viewport__scroll { max-block-size: 58vh; }
  .sqpp .sqpp-creator__actions .sqpp-btn { flex: 1 1 auto; }
  .sqpp .sqpp-noreviews .sqpp-btn { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sqpp .sqpp-gallery__thumbs,
  .sqpp .sqpp-rail { scroll-behavior: auto; }
  .sqpp .sqpp-viewport__fade,
  .sqpp .sqpp-btn,
  .sqpp .sqpp-gallery__nav { transition: none; }
}

/* Rating stars, drawn from the sprite so they match every other icon. */
.sqpp .sqpp-stars { display: inline-flex; gap: 2px; }
.sqpp .sqpp-star { inline-size: 15px; block-size: 15px; color: var(--sq-line); }
.sqpp .sqpp-star.is-on,
.sqpp .sqpp-star.is-half { color: var(--sq-caution); }
.sqpp .sqpp-star.is-on { fill: currentColor; }

/* ════════════════════════════════════════════════════════════════════════════
   Phase 3A.2 — the showcase composition
   ────────────────────────────────────────────────────────────────────────────
   Everything below is scoped to `.sqpp--showcase`, which is set only on products
   carrying `_sgp_page_design = showcase`. One product has it today. The other 428
   product pages render the documentation layout untouched.

   The page reads as alternating full-bleed bands rather than a column of white
   cards: page ground, tint, dark, page ground. Embody's own charcoal appears once,
   on the responsive band, as a controlled nod to the product being sold.
   ════════════════════════════════════════════════════════════════════════════ */

.sqpp--showcase {
  --sqpp-max: 1240px;
  --sqpp-gutter: clamp(18px, 4vw, 64px);
  --sqpp-band: clamp(36px, 5.4vw, 88px);
}

/* Bands break out of the article's own max-width and paint edge to edge, while
   their contents stay on the shared measure. */
.sqpp--showcase .sqpp-band {
  margin-inline: calc(50% - 50vw);
  padding: var(--sqpp-band) var(--sqpp-gutter);
  border-block-start: 1px solid var(--sq-line);
}
.sqpp--showcase .sqpp-band + .sqpp-band { margin-block-start: 0; }
.sqpp--showcase .sqpp-band--tint { background: var(--sq-soft); }
.sqpp--showcase .sqpp-band--dark {
  background: var(--wp--preset--color--dark-canvas);
  color: var(--wp--preset--color--canvas);
  border-block-color: transparent;
}
.sqpp--showcase .sqpp-band > * {
  max-inline-size: var(--sqpp-max); margin-inline: auto;
}
.sqpp--showcase .sqpp-band h2 {
  margin: 0 !important; font-size: var(--sq-t-h2) !important;
  letter-spacing: var(--sq-ls-h1); line-height: var(--sq-lh-h3); text-wrap: balance;
}

/* ── B. Trust strip ──────────────────────────────────────────────────────────
   Facts of equal standing, so one treatment for all of them, at the page's own body size.

   The first pass fixed the inconsistency and left the bar too quiet: 13px against a page
   whose body copy is 15px, sitting left in a 1240px measure with a third of the row empty
   to its right, which is what read as tiny and off-centre. It is set at body size now, the
   row is centred on the measure, and the trademark line is centred under it, so the block
   is one centred unit rather than a short left-hand run in a wide dark band. */
.sqpp--showcase .sqpp-platformbar {
  margin-inline: calc(50% - 50vw); margin-block-start: clamp(20px, 2.4vw, 32px);
  padding: clamp(22px, 2.6vw, 30px) var(--sqpp-gutter);
  background: var(--sq-ink); color: var(--sq-paper);
}
.sqpp--showcase .sqpp-platformbar__inner {
  max-inline-size: var(--sqpp-max); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sqpp--showcase .sqpp-platformbar__facts {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 34px;
  margin: 0 !important; padding: 0; list-style: none;
}
.sqpp--showcase .sqpp-platformbar__fact {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--sqpp-t-body); font-weight: var(--sq-w-medium); line-height: var(--sq-lh-eyebrow); letter-spacing: var(--sq-ls-h4);
  color: color-mix(in srgb, var(--sq-paper) 90%, transparent);
}
/* One box for every glyph, whatever shape is inside it. The vendored Squarespace mark is
   a filled path and the Lucide set is stroked, so they are sized to the same box and take
   their fill or stroke from the row's own colour rather than being set per icon. */
.sqpp--showcase .sqpp-platformbar__icon {
  display: inline-grid; place-items: center;
  inline-size: 19px; block-size: 19px; flex: 0 0 19px;
  color: color-mix(in srgb, var(--sq-paper) 72%, transparent);
}
.sqpp--showcase .sqpp-platformbar__icon svg {
  inline-size: 19px; block-size: 19px; display: block;
}
.sqpp--showcase .sqpp-platformbar__fact:first-child .sqpp-platformbar__icon svg { fill: currentColor; }
.sqpp--showcase .sqpp-platformbar__tm {
  margin: 0; max-inline-size: 78ch; text-align: center;
  font-size: var(--sqpp-t-small); line-height: var(--sq-lh-supporting);
  color: color-mix(in srgb, var(--sq-paper) 55%, transparent);
}

/* ── C. Story split ──────────────────────────────────────────────────────────
   Composed, not stacked. The text column steps down through four sizes — label, heading,
   opening claim, supporting copy — so the eye has somewhere to land; the note and the
   audience pills are set apart from the prose because they answer different questions.

   The media column stretches to the height of whatever the text takes and centres the
   image inside it at the image's own aspect ratio. Nothing is cropped and no grey frame
   shows around it: the two columns finish level because the column stretches, not because
   the picture was cut to fit. */
.sqpp--showcase .sqpp-story__inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.5vw, 64px); align-items: stretch;
}
.sqpp--showcase .sqpp-story__text {
  max-inline-size: 60ch; display: flex; flex-direction: column; align-items: flex-start;
}
.sqpp--showcase .sqpp-story__eyebrow {
  margin: 0 0 14px !important;
  font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
  color: var(--sq-signal-ink);
}
.sqpp--showcase .sqpp-story__lede {
  margin: 18px 0 0 !important; max-inline-size: 52ch;
  font-size: var(--sq-t-p1); line-height: var(--sq-lh-supporting); letter-spacing: var(--sq-ls-h4);
  color: var(--sq-ink);
}
.sqpp--showcase .sqpp-story__text .sqpp-prose { margin-block-start: 18px; max-inline-size: 62ch; }
.sqpp--showcase .sqpp-story__text .sqpp-prose p { font-size: var(--sq-t-p2); line-height: var(--sq-lh-body); }
.sqpp--showcase .sqpp-story__text .sqpp-prose p:last-child { margin-bottom: 0; }

/* The one practical reassurance, lifted out of the prose. It was the fourth paragraph of
   four and read as more of the same; it is the sentence that answers "am I stuck with it". */
.sqpp--showcase .sqpp-story__note {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 24px 0 0 !important; padding: 14px 16px;
  border: 1px solid var(--sq-line); border-radius: 12px; background: var(--sq-sheet);
  font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); color: var(--sq-ink); max-inline-size: 56ch;
}
.sqpp--showcase .sqpp-story__note-icon {
  inline-size: 17px; block-size: 17px; margin-block-start: 2px; color: var(--sq-good);
}

/* Pushed to the foot of the column so the audience row sits on the bottom edge of the
   picture. Both columns are the same height now, so this is what fills the difference
   between the copy and the frame beside it. */
.sqpp--showcase .sqpp-story__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 26px 0 0 !important; margin-block-start: auto !important; padding-block-start: 26px;
}
/* Labelled, because two bare pills at the foot of a section read as leftovers rather than
   as the answer to who the template is for. */
.sqpp--showcase .sqpp-story__tags-label {
  font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
  color: var(--sq-muted); margin-inline-end: 4px;
}
.sqpp--showcase .sqpp-story__tags a {
  display: inline-flex; align-items: center; min-block-size: 32px; padding: 0 13px;
  border: 1px solid var(--sq-line); border-radius: 999px;
  color: var(--sq-ink); font-size: var(--sq-t-eyebrow); text-decoration: none;
}
.sqpp--showcase .sqpp-story__tags a:hover { border-color: var(--sq-ink); }
.sqpp--showcase .sqpp-story__tags a:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }

/* The frame takes its height from the text, not from the photograph.
   Both columns stretch to the taller of the two, and a 2:3 portrait at half of a 1240px
   measure is 880px tall against 600px of copy — so letting the picture size itself put
   250px of nothing under the last paragraph. Positioning the image absolutely removes it
   from that calculation: the figure is then exactly as tall as the column beside it, which
   is what "equal to the text" has to mean if it is to mean anything. */
.sqpp--showcase .sqpp-story__media {
  position: relative; margin: 0; min-inline-size: 0; min-block-size: 380px;
  border-radius: 18px; overflow: hidden;
}
/* The picture is the same size as the text beside it: same column width, same height,
   filling its half rather than floating in it. Two bounded attempts came before this one —
   a percentage cap that let the image set the row height, then a fixed 600px that left it
   narrower than the copy — and neither is what "equal to the text" means.

   `cover` still fills the half, but the anchor is the TOP now, not the centre. When this slot
   held a creator's lifestyle photograph, centring was right — trimming the edges of a laptop on
   a sofa loses nothing. It holds a capture of the template's own home page now, and centring cut
   the wordmark and the headline off the top of every one of them: the part a buyer is actually
   looking at. Anchor to the top and the design opens where it opens.

   No drop shadow. Nothing else on this page floats above the surface. */
.sqpp--showcase .sqpp-story__media img {
  position: absolute; inset: 0; display: block;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: top center;
}

/* ── D. Walkthrough: two thirds preview, one third notes ─────────────────── */
.sqpp--showcase .sqpp-walk__inner {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.sqpp--showcase .sqpp-walk .sqpp-viewport { max-inline-size: none; }
.sqpp--showcase .sqpp-walk .sqpp-viewport__scroll { max-block-size: clamp(560px, 62vh, 740px); }
.sqpp--showcase .sqpp-walk__lede { margin: 14px 0 0; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); }
.sqpp--showcase .sqpp-walk__steps {
  counter-reset: walk; margin: 22px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
}
.sqpp--showcase .sqpp-walk__steps li {
  counter-increment: walk; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 3px 12px;
  padding: 12px 0; border-block-start: 1px solid var(--sq-line);
}
.sqpp--showcase .sqpp-walk__steps li::before {
  content: counter(walk); grid-row: 1 / 3;
  font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); color: var(--sq-signal-ink); font-variant-numeric: tabular-nums;
}
.sqpp--showcase .sqpp-walk__steps strong { font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); }
.sqpp--showcase .sqpp-walk__steps span { color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); }
.sqpp--showcase .sqpp-walk__demo { margin-block-start: 22px; }

/* ── F. Fit, two equal panels ────────────────────────────────────────────── */
.sqpp--showcase .sqpp-fitband__inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px);
}
.sqpp--showcase .sqpp-fitband__panel {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--sq-line); border-radius: 16px; background: var(--sq-sheet);
}
.sqpp--showcase .sqpp-fitband__panel h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--sq-t-p1) !important; letter-spacing: var(--sq-ls-h3);
}
.sqpp--showcase .sqpp-fitband__panel--for h2 { color: var(--sq-good); }
.sqpp--showcase .sqpp-fitband__panel--not h2 { color: var(--sq-caution); }
.sqpp--showcase .sqpp-fitband__icon { inline-size: 20px; block-size: 20px; }
.sqpp--showcase .sqpp-fitband__panel ul {
  margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px;
}
.sqpp--showcase .sqpp-fitband__panel li {
  position: relative; padding-inline-start: 18px; font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting);
}
.sqpp--showcase .sqpp-fitband__panel li::before {
  content: ""; position: absolute; inset-block-start: .6em; inset-inline-start: 0;
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: .35;
}

/* ── G. Buying facts, always 3x2 ─────────────────────────────────────────── */
.sqpp--showcase .sqpp-buying__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px); margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; list-style: none;
}
.sqpp--showcase .sqpp-buying__facts li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 3px 12px;
  padding: 18px 20px; border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-sheet);
}
.sqpp--showcase .sqpp-buying__icon { grid-row: 1 / 4; margin-block-start: 2px; color: var(--sq-muted); }
.sqpp--showcase .sqpp-buying__label {
  margin: 0 !important; color: var(--sq-muted); font-size: var(--sq-t-eyebrow); font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase;
}
.sqpp--showcase .sqpp-buying__value { margin: 3px 0 0 !important; font-size: var(--sq-t-p2); font-weight: var(--sq-w-semibold); line-height: var(--sq-lh-h4); }
.sqpp--showcase .sqpp-buying__note { margin: 5px 0 0 !important; color: var(--sq-muted); font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting); }

.sqpp--showcase .sqpp-buying__included { margin-block-start: clamp(22px, 2.6vw, 32px); }
.sqpp--showcase .sqpp-buying__included h3 {
  margin: 0 0 14px !important; font-size: var(--sq-t-p3) !important; font-weight: var(--sq-w-bold) !important;
  letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; color: var(--sq-muted);
}
.sqpp--showcase .sqpp-buying__included ul {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px;
  margin: 0; padding: 0; list-style: none;
}
.sqpp--showcase .sqpp-buying__included li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  font-size: var(--sq-t-p3); line-height: var(--sq-lh-supporting);
}
.sqpp--showcase .sqpp-buying__tick { inline-size: 16px; block-size: 16px; margin-block-start: 3px; color: var(--sq-good); }
.sqpp--showcase .sqpp-buying__callout {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 16px 18px;
  border: 1px solid var(--sq-line); border-radius: 14px; background: var(--sq-soft);
}
.sqpp--showcase .sqpp-buying__calloticon { margin-block-start: 2px; color: var(--sq-muted); }
.sqpp--showcase .sqpp-buying__callout span {
  font-size: var(--sq-t-p3); line-height: var(--sq-lh-body); color: var(--sq-ink); max-inline-size: 78ch;
}

/* ── I. Creator, full width ──────────────────────────────────────────────── */
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 3vw, 40px);
  border-radius: 18px;
}
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__identity { grid-column: 1; }
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__logo { inline-size: 64px; block-size: 64px; }
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__who h2 { font-size: var(--sq-t-h3) !important; }
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__bio {
  grid-column: 1; grid-row: 2; max-inline-size: 74ch; margin: 0;
}
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__actions {
  grid-column: 2; grid-row: 1 / 3; flex-direction: row; align-items: center; gap: 10px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sqpp--showcase .sqpp-buying__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sqpp--showcase .sqpp-walk__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sqpp--showcase .sqpp-story__inner,
  .sqpp--showcase .sqpp-walk__inner { grid-template-columns: minmax(0, 1fr); }
  /* Image first on a narrow screen: it explains faster than the paragraph does. */
  .sqpp--showcase .sqpp-story__media { order: -1; }
  .sqpp--showcase .sqpp-creator--wide .sqpp-creator__card { grid-template-columns: minmax(0, 1fr); }
  .sqpp--showcase .sqpp-creator--wide .sqpp-creator__actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .sqpp--showcase .sqpp-fitband__inner,
  .sqpp--showcase .sqpp-buying__facts,
  .sqpp--showcase .sqpp-buying__included ul { grid-template-columns: minmax(0, 1fr); }
  .sqpp--showcase .sqpp-creator--wide .sqpp-creator__actions .sqpp-btn { flex: 1 1 auto; }
}

/* ── Density pass ────────────────────────────────────────────────────────────
   The first showcase build came out taller than the layout it replaced: the
   responsive band ran to 930px because three tall portrait mockups were being
   printed at full height, and the licence band was still using the old stacked
   section. Capping the mockups and tightening the bands brings the page under
   the documentation layout it replaces, without crowding anything. */
/* The licence cards read as one row of four short facts, so they do not need the
   full band padding above and below. */
.sqpp--showcase .sqpp-terms .sqpp-licence { margin-block-start: clamp(18px, 2.2vw, 26px); }
.sqpp--showcase .sqpp-terms .sqpp-licence__card { padding: 16px 18px; }
.sqpp--showcase .sqpp-terms .sqpp-section__head { margin-block-end: 0; }

/* Bands sit directly against one another, so only one of each pair of borders is
   needed and the section rhythm comes from the padding, not from added margins. */
.sqpp--showcase .sqpp-noreviews { margin-block-start: clamp(28px, 3.4vw, 44px); }
.sqpp--showcase .sqpp-faq { margin-block-start: clamp(36px, 4.4vw, 64px); }

/* The buying band carries three groups; the included list is the one that can be
   read at two columns without becoming a wall. */
.sqpp--showcase .sqpp-buying__facts li { padding: 15px 17px; }

/* ── Lightbox ────────────────────────────────────────────────────────────────
   Two problems, both visible on the full-page screenshot.

   The close button carried a CSS `::before` cross AND an SVG icon, so it painted
   two overlapping X shapes. The glyph wins; the pseudo-element is retired.

   And a 304x2560 image fitted to `max-block-size:92vh` shrank to about 90px wide:
   a legible page reduced to a thread down the middle of a white sheet. A very tall
   image is now shown at a readable width and the dialog scrolls, which is what
   "expand" ought to mean for a full-page screenshot. */
.sqpp .sqpp-lightbox__close::before,
.sqpp .sqpp-lightbox__close::after { content: none; }
.sqpp .sqpp-lightbox__close {
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--sq-line);
  background: var(--sq-sheet); color: var(--sq-ink); cursor: pointer;
}
.sqpp .sqpp-lightbox__close:hover { background: var(--sq-soft); border-color: var(--sq-ink); }
.sqpp .sqpp-lightbox__close:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 2px; }
.sqpp .sqpp-lightbox__close svg { inline-size: 20px; block-size: 20px; }

.sqpp .sqpp-lightbox {
  max-inline-size: min(1100px, 94vw); max-block-size: 92vh;
  overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 16px; padding: 0; background: var(--sq-sheet);
}
.sqpp .sqpp-lightbox__frame { padding: 56px 0 24px; }
/* Wide images still fit the dialog; tall ones are shown big enough to read and the
   dialog scrolls past them. `--sqpp-lb-tall` is set by script when the aspect ratio
   is extreme. */
.sqpp .sqpp-lightbox__frame img {
  inline-size: auto; max-inline-size: 100%; block-size: auto; max-block-size: 88vh;
  margin-inline: auto; object-fit: contain;
}
.sqpp .sqpp-lightbox[data-tall="true"] .sqpp-lightbox__frame img {
  max-block-size: none; inline-size: min(680px, 88vw); max-inline-size: none;
}


/* Card button hover lives in components.css, next to the rest of the shared card, so
   the browse grid and the related rail cannot drift apart. Nothing to add here. */

/* ── A. Page header ──────────────────────────────────────────────────────────
   Creator first, then the name of the thing.

   Both used to sit inside the purchase panel, which set the product's identity to the
   width of a 372px commercial box: a 38-character title wrapped to three lines beside
   900px of picture, and the creator was a second avatar-and-link block a few centimetres
   below the one in the byline component every other surface uses.

   The header runs the full measure above the hero. `.sq-byline` is that shared component,
   unchanged, so a listing carries one identity treatment wherever it appears.

   Named `masthead`, not `lede`: `.sqpp-lede` is already the opening paragraph of the
   documentation layout's editorial section, styled unscoped in `components.css`. Reusing it
   here would have been the same class collision that put a `-559px` margin on the "Untested"
   badge last round, waiting for the first showcase page that also runs an editorial block. */
.sqpp--showcase .sqpp-masthead {
  margin-block-start: clamp(14px, 1.6vw, 22px);
  margin-block-end: clamp(20px, 2.4vw, 30px);
}
/* Title first, creator underneath: the byline is an attribution and an attribution reads
   after the thing it attributes. */
.sqpp--showcase .sqpp-masthead__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  margin-block-start: 14px;
}
/* The byline sets its own top margin for use under a title. Here it leads. */
.sqpp--showcase .sqpp-masthead__meta .sq-byline { margin: 0; gap: 10px; font-size: var(--sq-t-p3); }
/* The article-wide icon floor is 20px; the byline sizes its own marks and must keep them. */
.sqpp--showcase .sqpp-masthead .sq-byline__brand { inline-size: 14px; block-size: 14px; }
.sqpp--showcase .sqpp-masthead__sep { color: var(--sq-muted); opacity: .5; }
.sqpp--showcase .sqpp-masthead__type {
  color: var(--sq-muted); font-size: var(--sq-t-p3); text-decoration: none;
  border-block-end: 1px solid transparent;
}
.sqpp--showcase .sqpp-masthead__type:hover { color: var(--sq-ink); border-block-end-color: var(--sq-line); }
.sqpp--showcase .sqpp-masthead__type:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; }
/* The status pill keeps its own tone; a small gap sets it apart from the identity run
   without needing a separator that would imply it is the same kind of fact. */
.sqpp--showcase .sqpp-masthead .sqpp-trust { margin: 0 !important; margin-inline-start: 4px !important; }
/* Below the breakpoint the identity run wraps, and a wrapped run leaves its separator
   stranded at the end of a line. The dots earn their place on one line and not on two, so
   they go and the gap does the separating. */
@media (max-width: 700px) {
  .sqpp--showcase .sqpp-masthead__meta { gap: 8px 14px; }
  .sqpp--showcase .sqpp-masthead__sep,
  .sqpp--showcase .sqpp-masthead__meta .sq-byline__sep { display: none; }
}
.sqpp--showcase .sqpp-masthead__title {
  margin: 0 !important;
  font-size: var(--sq-t-h1) !important;
  line-height: var(--sq-lh-h2) !important; letter-spacing: var(--sq-ls-h1) !important; font-weight: var(--sq-w-semibold) !important;
  text-wrap: balance;
}

/* ── Hero: two columns of equal height ───────────────────────────────────────
   The panel is no longer sticky here, and does not need to be. Sticky was answering the
   old problem — a panel far taller than the gallery beside it, leaving a column of dead
   space under the thumbnails. Moving the title, the status, the taxonomy and the creator
   into the header took roughly 200px out of the panel, and the two columns are now close
   enough in height that the honest fix is to make them equal.

   The row stretches, the gallery becomes a column with the stage taking the slack, and the
   affiliate disclosure is pinned to the foot of the panel. Both columns start and finish on
   the same line, and the picture gets every pixel the panel is not using. */
@media (min-width: 981px) {
  .sqpp--showcase .sqpp-hero { align-items: stretch; }
  .sqpp--showcase .sqpp-hero > .sqpp-panel { position: static; }
  .sqpp--showcase .sqpp-hero > .sqpp-panel > .sqpp-disclosure { margin-block-start: auto; }

  .sqpp--showcase .sqpp-hero > .sqpp-gallery { display: flex; flex-direction: column; }
  .sqpp--showcase .sqpp-hero > .sqpp-gallery .sqpp-gallery__stage {
    flex: 1 1 auto;
  }
  /* The ceiling has to be a length, not a percentage.
     A flex item still offers its max-content height to the grid row that contains it, so a
     percentage cap resolves against nothing during row sizing and the picture goes to its
     intrinsic height: a 3:4 screenshot in a 1030px column is 1370px tall, and it dragged the
     panel down to match. A fixed ceiling bounds the row, and the stage grows into whatever
     the panel needs beyond it. 620px rather than the catalogue's 560px because this column
     has 200px more to spend now the title and creator have left the panel. */
  .sqpp--showcase .sqpp-hero > .sqpp-gallery .sqpp-gallery__stage img,
  .sqpp--showcase .sqpp-gallery--contain .sqpp-gallery__stage img {
    max-block-size: 620px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPE SCALE
   ════════════════════════════════════════════════════════════════════════════

   The page had thirty-odd distinct size and weight pairings. Six of them were `h2`:
   33px in the bands, 31 in the FAQ, 28 in the closing CTA, 26 in the related rail, 22 on
   the creator card and 17 in the fit panels — five different answers to "this is a section
   heading". Body copy ran at 15, 14.5, 14 and 13.5; notes at 13, 12.5, 12 and 11.5; small
   uppercase labels at 12, 11.5, 10.5 and 10. Every one of those numbers was defensible
   where it was written and none of them were decided together.

   Eight roles, below. Everything on the page resolves to one of them, and the only two
   deliberate exceptions are the price — a number, sized as a number — and the monogram
   inside a creator mark, which is a piece of artwork rather than text.

   The overrides carry `!important` because most of what they are correcting carries it
   too; the components they touch were written to win against the block editor's own
   styles, and a plain declaration here loses to them wherever the two meet. */
.sqpp--showcase {
  /* Re-pointed at the canonical roles in typography.css; see the note in
     marketplace-system.css. --sqpp-t-label is the only one that stays sub-14px, and
     only because it is used exclusively for eyebrows and badges. */
  --sqpp-t-display: var(--sq-t-h1);
  --sqpp-t-section: var(--sq-t-h2);
  --sqpp-t-sub:     var(--sq-t-h4);
  --sqpp-t-lede:    var(--sq-t-p1);
  --sqpp-t-body:    var(--sq-t-p2);
  --sqpp-t-small:   var(--sq-t-p3);
  --sqpp-t-label:   var(--sq-t-eyebrow);
}

/* ── Display and sections ────────────────────────────────────────────────── */
.sqpp--showcase .sqpp-masthead__title { font-size: var(--sqpp-t-display) !important; }

.sqpp--showcase .sqpp-band h2,
.sqpp--showcase .sqpp-section h2,
.sqpp--showcase .sqpp-creator h2,
.sqpp--showcase .sqpp-creator--wide .sqpp-creator__who h2 {
  font-size: var(--sqpp-t-section) !important;
  font-weight: var(--sq-w-semibold) !important; letter-spacing: var(--sq-ls-h1); line-height: var(--sq-lh-h3); text-wrap: balance;
}

/* The fit panels and the licence cards head a card, not a section: same role, one step
   down, so a card title cannot outrank the section it sits inside. */
.sqpp--showcase .sqpp-fitband__panel h2,
.sqpp--showcase .sqpp-terms h3,
.sqpp--showcase .sqpp-licence__card h3,
.sqpp--showcase .sqpp-noreviews__title {
  font-size: var(--sqpp-t-sub) !important; font-weight: var(--sq-w-semibold) !important; letter-spacing: var(--sq-ls-h3);
}

/* ── Lede ────────────────────────────────────────────────────────────────── */
.sqpp--showcase .sqpp-story__lede { font-size: var(--sqpp-t-lede) !important; font-weight: var(--sq-w-regular) !important; }

/* ── Body ────────────────────────────────────────────────────────────────── */
.sqpp--showcase .sqpp-prose p,
.sqpp--showcase .sqpp-section__sub,
.sqpp--showcase .sqpp-fitband__panel li,
.sqpp--showcase .sqpp-buying__included li,
.sqpp--showcase .sqpp-creator__bio,
.sqpp--showcase .sqpp-walk__lede,
.sqpp--showcase .sqpp-faq__answer p,
.sqpp--showcase .sqpp-faq__list p,
.sqpp--showcase .sqpp-close__text p,
.sqpp--showcase .sqpp-masthead__meta,
.sqpp--showcase .sqpp-masthead__meta .sq-byline,
.sqpp--showcase .sqpp-masthead__type,
.sqpp--showcase .sqpp-masthead__sep,
.sqpp--showcase .sqpp-story__note,
.sqpp--showcase .sqpp-pages__note {
  font-size: var(--sqpp-t-body) !important;
}

.sqpp--showcase .sqpp-buying__value,
.sqpp--showcase .sqpp-walk__steps strong,
.sqpp--showcase .sqpp-offer__code,
.sqpp--showcase .sqpp-buy,
.sqpp--showcase .sqpp-demo,
.sqpp--showcase .sqpp-btn,
.sqpp--showcase .sqpp-close__buy,
.sqpp--showcase .sqpp-close__demo {
  font-size: var(--sqpp-t-body) !important; font-weight: var(--sq-w-semibold) !important;
}
.sqpp--showcase .sqpp-offer__save { font-size: var(--sqpp-t-body) !important; font-weight: var(--sq-w-semibold) !important; }
.sqpp--showcase .sqpp-offer__now  { font-size: var(--sqpp-t-lede) !important; font-weight: var(--sq-w-semibold) !important; }

/* ── Small ───────────────────────────────────────────────────────────────── */
.sqpp--showcase .sqpp-crumbs,
.sqpp--showcase .sqpp-crumbs a,
.sqpp--showcase .sqpp-price__model,
.sqpp--showcase .sqpp-offer__was,
.sqpp--showcase .sqpp-offer__validity,
.sqpp--showcase .sqpp-offer__note,
.sqpp--showcase .sqpp-offer__more,
.sqpp--showcase .sqpp-actions__note,
.sqpp--showcase .sqpp-buying__note,
.sqpp--showcase .sqpp-terms__source,
.sqpp--showcase .sqpp-walk__steps span,
.sqpp--showcase .sqpp-faq__intro,
.sqpp--showcase .sqpp-viewport__hint,
.sqpp--showcase .sqpp-disclosure,
.sqpp--showcase .sqpp-platformbar__tm {
  font-size: var(--sqpp-t-small) !important;
}
.sqpp--showcase .sqpp-offer__delta,
.sqpp--showcase .sqpp-chip,
.sqpp--showcase .sqpp-trust,
.sqpp--showcase .sqpp-extlink,
.sqpp--showcase .sqpp-faq__link,
.sqpp--showcase .sqpp-viewport__expand-label {
  font-size: var(--sqpp-t-small) !important; font-weight: var(--sq-w-semibold) !important;
}

/* ── Labels ──────────────────────────────────────────────────────────────── */
/* Every small uppercase run: section eyebrows, fact labels, FAQ group headings, the copy
   button. One size, one weight, one tracking. */
.sqpp--showcase .sqpp-story__eyebrow,
.sqpp--showcase .sqpp-story__tags-label,
.sqpp--showcase .sqpp-buying__label,
.sqpp--showcase .sqpp-buying h3,
.sqpp--showcase .sqpp-faq__group,
.sqpp--showcase .sqpp-label,
.sqpp--showcase .sqpp-offer__copy {
  /* .sqpp-faq__group and .sqpp-buying h3 are real headings that group content, and
     .sqpp-offer__copy is purchase information, so this shared eyebrow treatment keeps
     the uppercase label look but sits on the 14px interface floor rather than 12px. */
  font-size: var(--sq-t-p3) !important; font-weight: var(--sq-w-semibold) !important;
  letter-spacing: var(--sq-ls-eyebrow) !important; text-transform: uppercase;
}

/* ── The two deliberate exceptions ───────────────────────────────────────── */
/* The price is a figure, not a heading, and reads as the largest thing in the panel
   because that is the question the panel answers. The monogram is artwork. */
/* The price takes the section size rather than a private 31px. Two sizes a pixel apart are
   not two roles, they are one role written twice. */
.sqpp--showcase .sqpp-price__value { font-size: var(--sqpp-t-section) !important; font-weight: var(--sq-w-semibold) !important; }

/* The masthead badge sits in a row of 15px type and joins it. */
.sqpp--showcase .sqpp-masthead .sqpp-trust { font-size: var(--sqpp-t-body) !important; }

/* Stragglers the role selectors above could not reach.
   The related heading is set by `.sqpp .sqpp-section--stack .sqpp-section__head h2`, which
   is one class more specific than the section rule above; the rest are elements nested
   inside a styled parent, so they take their size from that parent and not from the role. */
.sqpp--showcase .sqpp-section--stack .sqpp-section__head h2 {
  font-size: var(--sqpp-t-section) !important; font-weight: var(--sq-w-semibold) !important; letter-spacing: var(--sq-ls-h1);
}
.sqpp--showcase .sqpp-buying__callout,
.sqpp--showcase .sqpp-buying__callout span,
.sqpp--showcase .sqpp-faq__item summary {
  font-size: var(--sqpp-t-body) !important;
}
.sqpp--showcase .sqpp-ghost { font-size: var(--sqpp-t-body) !important; font-weight: var(--sq-w-semibold) !important; }
.sqpp--showcase .sqpp-story__tags a,
.sqpp--showcase .sqpp-showcase__caption { font-size: var(--sqpp-t-small) !important; }
.sqpp--showcase .sqpp-showcase__all { font-size: var(--sqpp-t-small) !important; font-weight: var(--sq-w-semibold) !important; }
.sqpp--showcase .sqpp-disclosure strong,
.sqpp--showcase .sqpp-explore a {
  font-size: var(--sqpp-t-small) !important; font-weight: var(--sq-w-semibold) !important;
}

/* ── Buying band: two lists, side by side ────────────────────────────────────
   The band used to print only what was included. Both halves are shown now, in matched
   columns, so the caveats carry the same visual weight as the inclusions rather than being
   a smaller footnote under them — which is the point of printing them at all. */
.sqpp--showcase .sqpp-buying__lists {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-block-start: clamp(22px, 2.6vw, 32px);
}
.sqpp--showcase .sqpp-buying__lists .sqpp-buying__included { margin-block-start: 0; }
/* One column each, so a two-column list inside a two-column band does not become four
   columns of ragged half-lines. */
.sqpp--showcase .sqpp-buying__lists .sqpp-buying__included ul { grid-template-columns: minmax(0, 1fr); }
.sqpp--showcase .sqpp-buying__caveat { color: var(--sq-caution); }
@media (max-width: 860px) {
  .sqpp--showcase .sqpp-buying__lists { grid-template-columns: minmax(0, 1fr); }
}

/* ── Carousel controls: 44px ─────────────────────────────────────────────────
   The shared carousel draws its arrows and its pause button at 42px, two pixels under the
   WCAG 2.5.8 target minimum. Corrected here rather than in the component, because the
   component belongs to the plugin page and this page is the one under review. */
.sqpp--showcase .sqsw-rail__arrow,
.sqpp--showcase .sqsw-rail__toggle {
  inline-size: 44px; block-size: 44px;
}

/* ── Multi-page showcase: the page list beside the pages ─────────────────────
   The aside column was a label and a heading; it now carries the note and the numbered
   walkthrough as well, so it needs the width the one-page layout gives the same content and
   the aside needs to be able to run long beside a scrolling rail. */
.sqpp--showcase .sqpp-showcase .sqpp-section__aside { max-inline-size: 42ch; gap: 0; }
.sqpp--showcase .sqpp-showcase .sqpp-walk__lede { margin: 12px 0 0; color: var(--sq-muted); line-height: var(--sq-lh-body); }
.sqpp--showcase .sqpp-showcase .sqpp-walk__steps { margin-block-start: 20px; }
@media (min-width: 981px) {
  /* Two thirds pictures, one third explanation — the same split the one-page layout uses. */
  .sqpp--showcase .sqpp-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
}

/* The page list with no screenshots beside it: two columns, so a twelve-page template does
   not become one very long ladder. */
.sqpp--showcase .sqpp-showcase--listonly .sqpp-walk__steps--split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px);
}
@media (max-width: 700px) {
  .sqpp--showcase .sqpp-showcase--listonly .sqpp-walk__steps--split { grid-template-columns: minmax(0, 1fr); }
}

/* A page list of eight or more runs in two columns beside the rail, so the aside does not
   tower over the pictures it is describing. */
@media (min-width: 981px) {
  .sqpp--showcase .sqpp-showcase .sqpp-walk__steps--two {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px;
  }
  .sqpp--showcase .sqpp-showcase:has(.sqpp-walk__steps--two) .sqpp-section__aside { max-inline-size: none; }
  .sqpp--showcase .sqpp-showcase:has(.sqpp-walk__steps--two) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* ── D. The pages, one card each ─────────────────────────────────────────────
   A band rather than a two-column section, because the cards want the full measure and the
   old aside has been folded into them. The head carries the copy on the left and the carousel
   controls on the right, which is where the related rail puts them too. */
.sqpp--showcase .sqpp-pages__inner { max-inline-size: var(--sqpp-max); margin-inline: auto; }
.sqpp--showcase .sqpp-pages__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 32px; margin-block-end: clamp(24px, 3vw, 36px);
}
.sqpp--showcase .sqpp-pages__head > div { max-inline-size: 58ch; }
.sqpp--showcase .sqpp-pages__note { margin: 12px 0 0; color: var(--sq-muted); line-height: var(--sq-lh-body); }
/* The controls are positioned against the rail on the plugin page; here they sit in the head,
   so the absolute placement that suits that layout has to be undone. */
.sqpp--showcase .sqpp-pages__nav { position: static; margin: 0; }

.sqpp--showcase .sqpp-pages__track {
  /* Three cards on the measure, which at 1240px is about 390px each — roughly half again the
     width the old rail could give them. */
  grid-auto-columns: calc((100% - 2 * clamp(18px, 2.2vw, 28px)) / 3);
  gap: clamp(18px, 2.2vw, 28px);
  margin: 0 !important; padding: 4px 0 10px; list-style: none;
}
/* `position: relative`, and it is load-bearing.
   `.sgp-visually-hidden` is `position:absolute` with `white-space:nowrap`, so it resolves
   against the nearest positioned ancestor. With none inside the card it escaped the track's
   clipping context entirely: the screen-reader note on a placeholder card sat at x=2834 with
   276px of un-wrapping text behind it, and the document grew to 5,793px wide. Every product
   with at least one page missing a screenshot scrolled sideways; the two with a screenshot on
   every card did not, which is what made it look like a data problem rather than a CSS one. */
.sqpp--showcase .sqpp-pagecard { position: relative; display: flex; flex-direction: column; min-inline-size: 0; }

/* The screenshot is a full-height page capture, so the card shows the top of it and the
   button opens the whole thing. `cover` from the top is the honest crop for a page: it is
   the part a visitor sees first. */
.sqpp--showcase .sqpp-pagecard__shot {
  display: block; inline-size: 100%; margin: 0; padding: 0; cursor: zoom-in;
  border: 1px solid var(--sq-line); border-radius: 14px; overflow: hidden;
  background: var(--sq-soft);
  transition: border-color var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}
.sqpp--showcase .sqpp-pagecard__shot img {
  display: block; inline-size: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: top center;
}
.sqpp--showcase .sqpp-pagecard__shot:hover { border-color: var(--sq-ink); transform: translateY(-2px); }
.sqpp--showcase .sqpp-pagecard__shot:focus-visible { outline: 2px solid var(--sq-signal); outline-offset: 3px; }

/* The same card, for a page whose screenshot the creator never published.
   A numbered panel, not an empty frame. The dashed border and the words "No screenshot
   published" made it an error message, and on a product where the first two pages have no
   screenshot that error was the first thing in the section. It is the page's place in the
   sequence now, and the name and purpose underneath carry the content either way. */
.sqpp--showcase .sqpp-pagecard__shot--none {
  aspect-ratio: 4 / 5; cursor: default;
  display: grid; place-content: center; justify-items: center;
  background: var(--sq-soft); border-color: transparent;
}
.sqpp--showcase .sqpp-pagecard__shot--none:hover { border-color: transparent; transform: none; }
.sqpp--showcase .sqpp-pagecard__num {
  font-size: var(--sq-t-h1); font-weight: var(--sq-w-semibold); letter-spacing: var(--sq-ls-h1);
  color: color-mix(in srgb, var(--sq-ink) 12%, transparent);
  font-variant-numeric: tabular-nums; line-height: var(--sq-lh-h1);
}

.sqpp--showcase .sqpp-pagecard__name {
  margin: 16px 0 0 !important;
  font-size: var(--sqpp-t-sub) !important; font-weight: var(--sq-w-semibold) !important; letter-spacing: var(--sq-ls-h3);
}
.sqpp--showcase .sqpp-pagecard__note {
  margin: 6px 0 0 !important; color: var(--sq-muted);
  font-size: var(--sqpp-t-small) !important; line-height: var(--sq-lh-supporting);
}

@media (max-width: 980px) {
  .sqpp--showcase .sqpp-pages__track { grid-auto-columns: calc((100% - clamp(18px, 2.2vw, 28px)) / 2); }
}
@media (max-width: 700px) {
  .sqpp--showcase .sqpp-pages__track { grid-auto-columns: 82%; }
  .sqpp--showcase .sqpp-pages__head { align-items: flex-start; }
}

/* A purchase panel with no discount and no demo link sits at its natural height at the top of
   the row instead of stretching. See `hero()` for why: equal columns are right when the two
   are close, and wrong when one of them is a price and a button. */
@media (min-width: 981px) {
  .sqpp--showcase .sqpp-hero--compact > .sqpp-panel { align-self: start; }
  .sqpp--showcase .sqpp-hero--compact > .sqpp-panel > .sqpp-disclosure { margin-block-start: 0; }
}

/* ── A publisher's own sale ─────────────────────────────────────────────────
 *
 * The price you pay, then what it was, then how much off. Reading order is the
 * order the three facts matter in, so the was-price and the chip are siblings of
 * the value rather than a second line: a buyer scanning the panel sees one price,
 * not two competing ones.
 *
 * `baseline` alignment rather than centre — the was-price is set much smaller, and
 * centring it against a 32px figure floats it in the middle of the digits.
 */
.sqpp-price__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sqpp-price__was {
  font-size: var(--sqpp-t-body, 15px);
  font-weight: var(--sq-w-medium);
  text-decoration: line-through;
  /* Not a muted grey: struck-through *and* faded reads as disabled rather than superseded. */
  opacity: 0.62;
}

.sqpp-price__off {
  font-size: var(--sqpp-t-label, 11.5px);
  font-weight: var(--sq-w-bold);
  letter-spacing: var(--sq-ls-eyebrow);
  text-transform: uppercase;
  padding: 0.25em 0.55em;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--wp--preset--color--discount-ink) 12%, transparent);
  color: var(--wp--preset--color--discount-ink);
}

/* ── The buy panel stops where its content stops ────────────────────────────
 *
 * The panel is a grid item beside the gallery, and it was stretching to the
 * gallery's height with the disclosure pinned to the bottom edge. On a Go Live
 * HQ template that is invisible — the discount code block fills the difference.
 * A creator with no code has nothing to put there, so Station Seven's panel
 * opened a 150px hole between "Share" and the affiliate footer.
 *
 * `align-self` on the item rather than `align-items` on the hero, so this holds
 * wherever the grid is redeclared in a breakpoint.
 */
.sqpp--showcase .sqpp-panel { align-self: start; }