/* ==========================================================================
   pseo.css — styling for programmatic-SEO (/data/...) pages.
   Self-contained, written in the DynaPictures visual language:
   Rubik font (inherited from body), brand purple #7f0052, accent red #ff7171,
   turquoise #E5F9F3. Reuses the global .container and .btn helpers from site.css.
   All classes are prefixed .pseo- to avoid collisions.
   ========================================================================== */

.pseo-page {
  color: #383838;
}

/* ---- Section scaffolding ------------------------------------------------ */
.pseo-section {
  padding: 56px 16px;
}

.pseo-section--alt {
  background-color: #e5f9f3; /* turquoise */
}

/* Background variants selected per block via the JSON "background" field.
   Same colours as the legacy section_shell_* classes in welcome.css, minus their
   margin-top / padding-bottom, so sections stack flush. */
.pseo-section--white {
  background-color: #ffffff;
}

.pseo-section--turquoise {
  background-color: #e5f9f3;
}

.pseo-section--rose {
  background-color: #f2dad3;
}

/* Dark section variant (e.g. tiles with variant="dark") */
.pseo-section--dark {
  background-color: #300224;
}

.pseo-section--dark .pseo-section__title {
  color: #ffffff;
}

.pseo-section--dark .pseo-section__lead {
  color: #b7b6b6;
}

.pseo-section--dark .pseo-tile {
  background-color: rgba(255, 255, 255, 0.13);
  border: none;
  box-shadow: none;
}

.pseo-section--dark .pseo-tile__title {
  color: #ffffff;
}

.pseo-section--dark .pseo-tile__text {
  color: #d8cfd4;
}

.pseo-section--dark .pseo-step__title {
  color: #ffffff;
}

.pseo-section--dark .pseo-step__text {
  color: #d8cfd4;
}

.pseo-section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px auto;
}

/* Section title emitted above a flipping_features block (its items carry their own
   background shells, so the heading sits in a slim white band). */
.pseo-feature-shell__head {
  padding-bottom: 0;
}

.pseo-feature-shell__head .pseo-section__head {
  margin-bottom: 0;
}

.pseo-section__title {
  font-family: Rubik, Open-Sans, sans-serif;
  font-weight: bold;
  color: #7f0052;
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 12px 0;
  padding-bottom: 16px;
}

.pseo-section__lead {
  font-size: 18px;
  color: #515050;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) {
  .pseo-section {
    padding: 80px 48px;
  }
  .pseo-section__title {
    font-size: 38px;
  }
}

/* ---- Hero (uses native hero_xs / api_hero classes; only the hint needs CSS) */
.hero_button_hint,
.hero_button_hint_xs {
  text-align: center;
  color: #666;
  margin-top: 16px;
}

.hero_button_hint {
  font-size: 18px;
}

.hero_button_hint_xs {
  font-size: 15px;
}

/* img-responsive is used in DP markup but not defined in the linked stylesheets */
.img-responsive {
  max-width: 100%;
  height: auto;
}

/* ---- Feature subsections (native DP feature look, defined here because
        welcome_feature_subsection_content / section_feature_image are not in
        the stylesheets pseo pages link) ------------------------------------- */
.pseo-feature-shell {
  padding-top: 56px;
  padding-bottom: 56px;
}

.welcome_feature_subsection_content {
  display: flex;
  flex-direction: column;
}

.welcome_feature_subsection_content h3 {
  font-family: Rubik, Open-Sans, sans-serif;
  font-weight: bold;
  color: #7f0052;
  font-size: 26px;
  line-height: 1.3;
  text-align: center;
  margin: 16px 0 0 0;
}

.section_feature_image {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* check_text is referenced in DP markup but not defined in any stylesheet */
.check_text {
  flex: 1;
  color: #515050;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .pseo-feature-shell {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .welcome_feature_subsection_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: center;
  }
  .welcome_feature_subsection_content h3 {
    text-align: left;
    margin-top: 0;
  }
}

/* ---- Generic buttons (lean on .btn / .btn_red from site.css) ------------ */
.pseo-btn {
  font-size: 17px;
  padding: 12px 32px;
  border-radius: 4px;
  font-weight: 500;
}

.pseo-btn-arrow {
  margin-left: 8px;
  vertical-align: middle;
  font-size: 20px;
}

/* ---- How-to steps ------------------------------------------------------- */
.pseo-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.pseo-step {
  text-align: center;
}

.pseo-step__circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #f3e2ee;
  color: #7f0052;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.pseo-step__circle .material-symbols-rounded {
  font-size: 34px;
}

.pseo-step__num {
  font-size: 28px;
  font-weight: bold;
}

.pseo-step__title {
  font-size: 18px;
  font-weight: 600;
  color: #383838;
  margin: 0;
}

/* Body copy of a step: same treatment as .section_text (api.css) used by the
   feature sections on the same page, one size down so it fits the step column. */
.pseo-step__text {
  font-family: Rubik, Open-Sans, sans-serif;
  font-size: 17px;
  color: #515050;
  line-height: 160%;
  margin: 12px auto 0 auto;
  max-width: 360px;
}

@media (min-width: 768px) {
  .pseo-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* ---- Tiles (cards) ------------------------------------------------------ */
.pseo-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}

.pseo-tiles--2 {
  max-width: 1100px;
}

.pseo-tile {
  background: #ffffff;
  border: 1px solid #ecdfe8;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(127, 0, 82, 0.04);
}

.pseo-tile__title {
  font-size: 20px;
  font-weight: 600;
  color: #7f0052;
  margin: 0 0 10px 0;
}

.pseo-tile__text {
  font-size: 16px;
  color: #515050;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 768px) {
  .pseo-tiles--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}

/* ---- Catalogue / related items (native related_content_block_md) -------- */
/* related_content_block_md is a fixed 3-col grid in site.css; make it stack on mobile */
@media (max-width: 767.99px) {
  .related_content_block_md {
    grid-template-columns: 1fr;
  }
}

.pseo-catalogue__cta {
  text-align: center;
  margin-top: 40px;
}

/* ---- FAQ accordion ------------------------------------------------------ */
.pseo-faq {
  max-width: 820px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #ecdfe8;
  border-radius: 12px;
  padding: 12px 28px;
}

.pseo-faq__item {
  border-bottom: 1px solid #f0e6ee;
}

.pseo-faq__item:last-child {
  border-bottom: none;
}

.pseo-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 600;
  color: #383838;
  background: none;
  border: none;
  font-family: Rubik, Open-Sans, sans-serif;
}

.pseo-faq__q::after {
  content: "expand_more";
  font-family: "Material Symbols Rounded";
  font-size: 26px;
  color: #7f0052;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.pseo-faq__item.pseo-open .pseo-faq__q::after {
  transform: rotate(180deg);
}

.pseo-faq__a {
  padding: 0 0 22px 0;
  font-size: 16px;
  color: #515050;
  line-height: 1.7;
}

.pseo-faq__a p {
  margin: 0;
}

/* ---- Video -------------------------------------------------------------- */
.pseo-video {
  max-width: 960px;
  margin: 0 auto;
}

.pseo-video__frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.pseo-video__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Demo app (embedded widget) ----------------------------------------- */
.pseo-demo {
  max-width: 1000px;
  margin: 0 auto;
}

.pseo-demo .dynapictures-form-widget {
  width: 100%;
  min-height: 700px;
  margin: auto;
  background-color: #fff;
  border: 3px dashed #ff7170;
  border-radius: 2rem;
  padding: 2rem;
}

/* ---- Final CTA ---------------------------------------------------------- */
.pseo-cta {
  text-align: center;
  padding: 72px 16px;
}

.pseo-cta--primary {
  background-color: #7f0052;
}

.pseo-cta--dark {
  background-color: #300224;
}

.pseo-cta__inner {
  max-width: 720px;
  margin: 0 auto;
}

.pseo-cta__title {
  font-family: Rubik, Open-Sans, sans-serif;
  font-weight: bold;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.25;
  margin: 0 0 16px 0;
}

.pseo-cta__text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 28px 0;
}

/* High-contrast button for use on the coloured CTA band */
.pseo-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Rubik, Open-Sans, sans-serif;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 4px;
  background-color: #ffffff;
  color: #7f0052;
  text-decoration: none;
  border: none;
}

.pseo-cta__btn:hover {
  background-color: #f3e2ee;
  color: #7f0052;
}

/* Optional second button (final_cta secondaryButtonText / secondaryButtonUrl) */
.pseo-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.pseo-cta__btn--secondary,
.pseo-cta__btn--secondary:hover {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.pseo-cta__btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .pseo-cta {
    padding: 96px 48px;
  }
  .pseo-cta__title {
    font-size: 40px;
  }
}

/* ---- Listing / category pages ------------------------------------------- */
.pseo-listing__category {
  margin-bottom: 48px;
}

.pseo-listing__category-title {
  font-family: Rubik, Open-Sans, sans-serif;
  font-weight: bold;
  color: #7f0052;
  font-size: 24px;
  margin: 0 0 20px 0;
}

.pseo-listing__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.pseo-listing__link {
  display: block;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #ecdfe8;
  border-radius: 8px;
  color: #7f0052;
  text-decoration: none;
  font-weight: 500;
}

.pseo-listing__link:hover {
  box-shadow: 0 4px 14px rgba(127, 0, 82, 0.1);
}

.pseo-listing__back {
  display: inline-block;
  margin-bottom: 24px;
  color: #ff7171;
  text-decoration: none;
  font-weight: 600;
}

@media (min-width: 768px) {
  .pseo-listing__links {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Free tools (tool_widget block, /tools hub, /tools/r share page) ------------------------ */
.pseo-section--tool {
}

.pseo-tool {
  max-width: 1000px;
  margin: 0 auto;
}

.pseo-tool .dynapictures-tool-widget {
  width: 100%;
  min-height: 480px;
  background-color: #fff;
  border: 3px dashed #ff7170;
  border-radius: 2rem;
  overflow: hidden;
}

.pseo-tool .dynapictures-tool-widget iframe {
  width: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  .pseo-tool .dynapictures-tool-widget {
    border-radius: 1rem;
    border-width: 2px;
  }
}

.pseo-tools-hub__intro {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
}

.pseo-tools-hub__section {
  margin-bottom: 3rem;
}

.pseo-tools-hub__section-title {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
}

.pseo-tools-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.pseo-tool-card {
  display: block;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid #f0e6e6;
  box-shadow: 0 8px 24px rgba(20, 20, 40, 0.06);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.pseo-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(20, 20, 40, 0.12);
  text-decoration: none;
  color: inherit;
}

.pseo-tool-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff1f1;
  color: #f25766;
  margin-bottom: 1rem;
}

.pseo-tool-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.pseo-tool-card__text {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

.pseo-share {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* The result on its stage: a light-grey square of at most 480 px (full width on a phone), the picture fitted
   inside whatever its aspect, so a 1080x1920 story no longer pushes Download a screen down. The same stage
   as the free-tools widget's (frontend ToolWidgetPage.scss .tw_stage, DESIGN.md 2026-10-23). The media is
   absolutely positioned: absolutely positioned replaced elements resolve max-width/max-height against the
   square's final size and keep their ratio (a flex item would stretch a box sized only by aspect-ratio).
   Never enlarged; flat on the grey (no shadow or radius a transparent PNG does not have). */
.pseo-share__stage {
  --pseo-stage-pad: 16px;
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  margin: 1.5rem auto 0.75rem;
  background: #f1f2f6;
  border-radius: 14px;
  overflow: hidden;
}

.pseo-share__stage > .pseo-share__image {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--pseo-stage-pad));
  max-height: calc(100% - 2 * var(--pseo-stage-pad));
}

/* Known dimensions (--w / --h): sized before the file loads, and a video has its shape before its metadata.
   On a square the free height equals the free width, so the width alone decides. */
.pseo-share__stage > .pseo-share__image--sized {
  width: min(
    calc(var(--w) * 1px),
    calc(100% - 2 * var(--pseo-stage-pad)),
    calc((100% - 2 * var(--pseo-stage-pad)) * var(--w) / var(--h))
  );
  aspect-ratio: var(--w) / var(--h);
}

.pseo-share__file {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  color: #555;
}

.pseo-share__meta {
  margin: 0 0 1rem;
  color: #777;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.pseo-share__download {
  margin: 0 0 0.5rem;
}

/* The widget's secondary pill (frontend ToolWidgetPage.scss .tw_btn / .tw_btn--secondary), so the share page's
   Download looks like the one that made the result. Only here: site-2 has no other tw_btn. */
.pseo-share .tw_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.pseo-share .tw_btn--secondary {
  background: #f1f2f6;
  color: #1f2430;
}

.pseo-share .tw_btn--secondary:hover {
  background: #e6e8ef;
}

.pseo-share .tw_btn:focus-visible {
  outline: 3px solid rgba(255, 113, 113, 0.5);
  outline-offset: 3px;
}

/* Button icons: 16 px in the button's colour (DESIGN.md), not site.css's 24 px a.btn > svg. */
.pseo-share .tw_btn > svg,
.pseo-share a.btn > svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.pseo-share a.btn > svg {
  margin: 0 8px 0 0;
}

.pseo-share a.btn > svg.is-trailing {
  margin: 0 0 0 8px;
}

.pseo-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.pseo-share__note {
  color: #777;
  font-size: 0.95rem;
  margin-top: 1rem;
}

/* ---- Bridge CTA (bridge_cta block) --------------------------------------
        The conversion card under the tool widget (DESIGN.md "Tool upgrade card", 2026-10-23): one centred
        column on a dark teal card (the site's turquoise family taken dark; brand purple is never a
        background), white text, the checks as chips, the screenshot, then the coral CTA with an arrow. The
        white section around it hugs the widget's section, so the card reads as the tool's next step. */
.pseo-section--tool + .pseo-bridge {
  padding-top: 0;
}

.pseo-bridge__card {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0f766e 0%, #0b3f3b 100%);
  color: #fff;
  text-align: center;
}

.pseo-bridge__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e6f9f6;
}

/* Two classes: site.css `.container h2` (purple) would otherwise win on the dark card. */
.pseo-bridge__card .pseo-bridge__title {
  font-family: Rubik, Open-Sans, sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 26px;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 auto 14px;
  max-width: 720px;
}

.pseo-bridge__text {
  max-width: 640px;
  margin: 0 auto 20px;
  font-size: 17px;
  line-height: 1.55;
  color: #e6f9f6;
}

.pseo-bridge__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.pseo-bridge__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-align: left;
}

.pseo-bridge__chip > svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

.pseo-bridge__img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto 24px;
  border-radius: 12px;
  box-shadow: 0 0.6em 2em rgba(0, 0, 0, 0.35);
  background: #fff;
}

.pseo-bridge__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* The site's coral primary (site.css .btn_red) as a pill with its arrow (16 px, DESIGN.md), full width on a phone. */
a.btn.pseo-bridge__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.btn.pseo-bridge__btn > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  fill: none;
  stroke: currentColor;
}

a.btn.pseo-bridge__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.7em 1.6em rgba(0, 0, 0, 0.3);
}

a.btn.pseo-bridge__btn:focus-visible,
.pseo-bridge__link:focus-visible {
  outline: 3px solid rgba(255, 113, 113, 0.6);
  outline-offset: 3px;
}

.pseo-bridge__link {
  color: #e6f9f6;
  font-size: 16px;
  text-decoration: underline;
}

.pseo-bridge__link:hover,
.pseo-bridge__link:focus {
  color: #fff;
}

@media (min-width: 768px) {
  .pseo-bridge__card {
    padding: 40px 48px 44px;
  }
  .pseo-bridge__card .pseo-bridge__title {
    font-size: 32px;
  }
  .pseo-bridge__text {
    font-size: 18px;
  }
  a.btn.pseo-bridge__btn {
    width: auto;
  }
  .pseo-bridge__actions {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.btn.pseo-bridge__btn {
    transition: none;
  }
  a.btn.pseo-bridge__btn:hover {
    transform: none;
  }
}

/* ---- Design showcase (design_showcase block) ---- */
.pseo-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.pseo-showcase__item {
  flex: 0 1 280px;
  max-width: 280px;
  text-align: center;
}

/* Fixed square frame reserves the space before the image loads, so mixed thumbnail
   ratios cannot shift the layout. */
.pseo-showcase__frame {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0.3em 1.2em rgba(204, 204, 204, 0.6);
}

.pseo-showcase__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pseo-showcase__caption {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #515050;
}

.pseo-showcase__actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Certificates and letterheads (variant "landscape" / "portrait"): the frame takes the paper's ratio, so an
   A4 sheet is not letterboxed inside a square. */
.pseo-showcase--landscape .pseo-showcase__item {
  flex-basis: 320px;
  max-width: 320px;
}

.pseo-showcase--landscape .pseo-showcase__frame {
  aspect-ratio: 1.414 / 1;
}

.pseo-showcase--portrait .pseo-showcase__item {
  flex-basis: 220px;
  max-width: 220px;
}

.pseo-showcase--portrait .pseo-showcase__frame {
  aspect-ratio: 1 / 1.414;
}

.pseo-showcase--landscape .pseo-showcase__img,
.pseo-showcase--portrait .pseo-showcase__img {
  object-fit: cover;
}

/* Per-item downloads (the blank certificates): small links in coral ink under the caption. */
.pseo-showcase__downloads {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.pseo-showcase__downloads a {
  color: #c2413f;
  font-weight: 600;
}

@media (max-width: 767px) {
  .pseo-showcase {
    gap: 1.25rem;
  }

  .pseo-showcase__item {
    flex: 0 1 220px;
    max-width: 220px;
  }
}

/* ---- Breadcrumbs -------------------------------------------------------- */
/* Sits inside .header_block, above the hero, on the header's own background. The trail mirrors the
   BreadcrumbList JSON-LD exactly; no microdata (PseoPageRenderingTest rejects itemprop/itemtype). */
.pseo-crumbs {
  padding: 8px 0 0 0;
}

.pseo-crumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.85rem;
  line-height: 1.5;
}

.pseo-crumbs__item {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The separator is decorative, so it is a pseudo-element: screen readers announce the list, not "›". */
.pseo-crumbs__item + .pseo-crumbs__item::before {
  content: "›";
  margin: 0 8px;
  color: #a08b99;
  flex: none;
}

.pseo-crumbs__link {
  color: #7f0052;
  text-decoration: none;
  opacity: 0.8;
}

.pseo-crumbs__link:hover,
.pseo-crumbs__link:focus {
  opacity: 1;
  text-decoration: underline;
}

/* The current page is not a link. It is the crumb most likely to be long, so it truncates first. */
.pseo-crumbs__current {
  color: #6b5c65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 767px) {
  /* A four-level variant trail would wrap onto two lines on a phone; scroll it instead. */
  .pseo-crumbs {
    padding-top: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pseo-crumbs__list {
    font-size: 0.8rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* ---- Hero secondary button (hero secondaryButtonText / secondaryButtonUrl) ---- */
.hero_btn_container_xs .pseo-hero__secondary {
  display: inline-block;
  margin-top: 12px;
}

@media (max-width: 991px) {
  .hero_actions {
    flex-wrap: wrap;
    row-gap: 16px;
    justify-content: center;
  }
}

/* ---- Event widget (event_widget block) ---------------------------------- */
/* The attendee share widget is an iframe injected by /app/widgets/event-widget-v1.js; it starts at
   560px and resizes itself via postMessage. The frame mirrors .pseo-tool so the two demos match. */
.pseo-event-widget {
  max-width: 560px;
  margin: 0 auto;
}

.pseo-event-widget .dynapictures-event-widget {
  width: 100%;
  min-height: 560px;
  background-color: #fff;
  border: 3px dashed #ff7170;
  border-radius: 2rem;
  overflow: hidden;
}

.pseo-event-widget .dynapictures-event-widget iframe {
  width: 100%;
  border: 0;
  display: block;
}

.pseo-event-widget__fallback {
  display: block;
  margin: 0 auto;
  border-radius: 1rem;
  box-shadow: 0 0.3em 1.2em rgba(0, 0, 0, 0.12);
}

.pseo-event-widget__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 32px;
  row-gap: 12px;
  margin-top: 28px;
}

.pseo-event-widget__share-link {
  color: #7f0052;
  font-size: 17px;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .pseo-event-widget .dynapictures-event-widget {
    border-radius: 1rem;
    border-width: 2px;
  }
}

/* ---- Comparison table (comparison_table block) --------------------------- */
.pseo-compare__scroll {
  /* position: the containing block of the cells' .pseo-sr-only labels, so the scroll box clips them; without
     it they escape and widen the whole page on phones (a vendor table made the event hub 729 px wide). */
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

.pseo-compare {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e6e1e4;
  border-radius: 16px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.45;
}

.pseo-compare th,
.pseo-compare td {
  padding: 14px 16px;
  border-bottom: 1px solid #efeaed;
  vertical-align: middle;
  text-align: center;
}

.pseo-compare thead th {
  background: #faf6f8;
  font-weight: 600;
  color: #300224;
  font-size: 15px;
}

.pseo-compare thead th a {
  color: inherit;
}

.pseo-compare th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: #300224;
  min-width: 180px;
}

.pseo-compare th[scope="row"] a {
  /* coral ink: DESIGN.md keeps heading purple for headings, links take #c2413f */
  color: #c2413f;
}

.pseo-compare tbody tr:last-child th,
.pseo-compare tbody tr:last-child td {
  border-bottom: 0;
}

.pseo-compare .pseo-compare__us {
  background: #fff4f4;
  font-weight: 600;
}

.pseo-compare thead .pseo-compare__us {
  background: #ffe9e9;
  color: #7f0052;
}

.pseo-compare__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.pseo-compare__mark--yes {
  color: #0f766e;
  background: #e6f9f6;
}

.pseo-compare__mark--no {
  color: #b42318;
  background: #fdecea;
}

.pseo-compare__mark--partial {
  color: #8a6d00;
  background: #fff6d6;
}

.pseo-compare__note {
  margin-top: 16px;
  font-size: 14px;
  color: #686868;
  text-align: center;
}

.pseo-compare__actions {
  text-align: center;
  margin-top: 28px;
}

.pseo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  .pseo-compare {
    font-size: 14px;
  }
  .pseo-compare th,
  .pseo-compare td {
    padding: 10px 12px;
  }
}

/* ---- Logo bar (logo_bar block) ------------------------------------------ */
.pseo-logo-bar__caption {
  text-align: center;
  color: #686868;
  font-size: 15px;
  margin: 0 0 8px;
}

/* A plain specification table (e.g. banner sizes) has no "us" column to highlight. */
.pseo-compare--specs .pseo-compare__us,
.pseo-compare--specs thead .pseo-compare__us {
  background: inherit;
  color: inherit;
  font-weight: inherit;
}

.pseo-compare--specs thead th {
  background: #faf6f8;
  font-weight: 600;
}

.pseo-compare--specs tbody .pseo-compare__us {
  font-weight: 500;
}

/* On narrow screens the table scrolls sideways; the row label stays put so a cell is never read
   without knowing which feature it belongs to. */
@media (max-width: 767px) {
  .pseo-compare th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    min-width: 140px;
    box-shadow: 2px 0 0 #efeaed;
  }
}

/* "See plans and pricing" under the footer buttons on the module clusters (countdown and event
   marketing hubs and their children). Rendered by includes/footer.ftl when pseo/page.ftl passes
   pricingLinkUrl. On phones .footer_actions carries 60px of bottom padding, so the link moves up
   into it instead of floating halfway to the link columns. */
.footer_pricing_link,
.footer_pricing_link:visited,
.footer_pricing_link:active,
.footer_pricing_link:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin: 32px 0 8px;
  font-size: 20px;
  font-weight: 500;
  color: #7f0052;
  text-decoration: none;
}

.footer_pricing_link:hover {
  text-decoration: underline;
}

.footer_pricing_link:focus-visible {
  outline: 3px solid #7f0052;
  outline-offset: 4px;
}

.footer_pricing_link svg {
  flex-shrink: 0;
  color: #e0485a;
}

@media (max-width: 767px) {
  .footer_pricing_link,
  .footer_pricing_link:visited,
  .footer_pricing_link:active,
  .footer_pricing_link:focus {
    margin: -28px 0 40px;
    font-size: 18px;
  }
}