/* Xbar: practical examples and creative capabilities share the same page. */
.desktop-preview,
.creative-studio {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid #b4c3b2;
  padding-top: 2.5rem;
}

.preview-heading {
  max-width: 50rem;
  margin-bottom: 2rem;
}
.preview-heading .eyebrow { margin-top: 0; }
.preview-heading h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.035em;
  margin: .6rem 0 1rem;
}
.preview-status {
  font-size: .875rem;
  line-height: 1.6;
  border-left: 2px solid #b77b32;
  padding-left: 1rem;
  max-width: 43rem;
}
.preview-status strong,
.creative-workflow-note strong { color: #183b2e; }

.preview-examples { display: grid; gap: 2.5rem; }
.desktop-preview figure { margin: 0; min-width: 0; }
.preview-example {
  display: grid;
  grid-template-columns: minmax(190px, 320px) minmax(0, 640px);
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
.preview-example + .preview-example {
  border-top: 1px solid #c5cdbd;
  padding-top: 2.5rem;
}
.desktop-preview .preview-example-copy {
  margin: 0;
  padding-top: .35rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #486156;
}
.preview-number,
.creative-tool-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: #805419;
}
.preview-example h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: #183b2e;
  margin: .85rem 0 0;
}
.preview-example .preview-requirement { font-size: .82rem; line-height: 1.55; }
.preview-open {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  color: #244d3c;
  margin-top: 1.2rem;
  text-decoration-thickness: 1px;
}
.preview-image-link { display: block; min-width: 0; width: 100%; max-width: 640px; border-radius: 6px; }
.desktop-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #aebdad;
  border-radius: 6px;
  box-shadow: 0 12px 32px #12302715;
}
.preview-image-link:focus-visible,
.preview-open:focus-visible { outline: 3px solid #a76b1f; outline-offset: 5px; }
.desktop-preview .preview-model-note {
  max-width: 58rem;
  margin-top: 1.5rem;
  font-size: .85rem;
  line-height: 1.6;
}

.preview-details {
  border-top: 1px solid #b4c3b2;
  margin-top: 1.5rem;
  padding-top: .4rem;
}
.preview-details summary,
.creative-studio summary { font-weight: 600; padding: .85rem 0; color: #244d3c; }
.desktop-preview .preview-library { max-width: 640px; margin-top: 1rem; }
.preview-details .preview-example { margin-top: 1.25rem; }
.preview-library figcaption { padding-top: .4rem; line-height: 1.55; color: #486156; }

.creative-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.creative-tools article {
  min-width: 0;
  padding: 1.35rem;
  border: 1px solid #bdcbb9;
  border-top: 2px solid #b78a49;
  border-radius: 2px 14px 2px 2px;
  background: #e0e5d7;
}
.creative-tools .creative-tool-label { color: #805419; margin-top: 0; }
.creative-tools h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: .8rem 0 0;
}
.creative-tools article > p:last-child { font-size: .9rem; line-height: 1.65; }
.creative-workflow-note { max-width: 68rem; padding-block: .5rem; }
.creative-controls,
.creative-evidence,
.creative-studio .conversation-demo {
  border-top: 1px solid #b4c3b2;
  padding-top: .3rem;
  margin-top: 1.25rem;
}
.creative-evidence .showcase-heading { margin: 1rem 0 1.5rem; }
.creative-evidence .showcase-heading h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
  margin-top: .7rem;
}
.creative-evidence .showcase-grid img { margin-top: 0; }
.discord-product > .xbar-direction { border-top-color: #b4c3b2; }

@media (max-width: 1100px) {
  .creative-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .preview-example { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .preview-example-copy { max-width: 42rem; }
  .preview-example h3 { margin-top: .5rem; }
  .preview-example-copy p,
  .preview-open { margin-top: .65rem; }
}
@media (max-width: 620px) {
  .desktop-preview,
  .creative-studio { padding-top: 1.7rem; }
  .preview-heading { margin-bottom: 1.5rem; }
  .preview-status { font-size: .82rem; }
  .preview-examples { gap: 2rem; }
  .preview-example + .preview-example { padding-top: 2rem; }
  .preview-details summary,
  .creative-studio summary { font-size: .95rem; line-height: 1.5; }
  .creative-tools { grid-template-columns: minmax(0, 1fr); }
  .creative-tools article { padding: 1.25rem; }
}

/* A compact, optional family-controls showcase using the supplied app capture. */
.parental-preview h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #183b2e;
  margin: .85rem 0 0;
}
.parental-checks { border-top: 1px solid #c5cdbd; margin-top: 1rem; }
.parental-checks summary { padding-block: .7rem; font-weight: 600; color: #244d3c; }
.parental-checks p { font-size: .9rem; line-height: 1.6; margin-top: .2rem; }

/* Swipeable examples: one screenshot at a time, without automatic movement. */
.gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.gallery-controls button { flex: 0 0 auto; border: 1px solid #788f7e; border-radius: 999px; padding: .7rem 1rem; background: transparent; color: #183b2e; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.gallery-controls button:hover:not([aria-disabled="true"]) { background: #d6dfcf; }
.gallery-controls button[aria-disabled="true"] { opacity: .4; cursor: default; }
.gallery-controls button:focus-visible, .gallery-viewport:focus-visible { outline: 3px solid #a76b1f; outline-offset: 4px; }
/* Announce slide changes to screen readers without a visible counter row. */
.gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.gallery-viewport { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport .gallery-slide { box-sizing: border-box; flex: 0 0 100%; min-width: 0; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: .5rem 0 1.25rem; }
.gallery-slide + .gallery-slide { border-top: 0; padding-top: .5rem; }
.gallery-slide .preview-image-link { display: grid; align-items: start; justify-items: center; }
.gallery-slide img { width: auto; max-width: 100%; max-height: 30rem; object-fit: contain; box-sizing: border-box; }
.gallery-secondary-link { display: block; }
@media (max-width: 900px) {
 .gallery-slide { align-content: start; }
 .gallery-slide img { max-height: 23rem; }
}
@media (max-width: 620px) {
 .gallery-controls { flex-wrap: wrap; gap: .5rem; }
 .gallery-slide img { max-height: 21rem; }
}

/* Space between Pragmatically’s compact screenshot gallery and illustrated workflow. */
.pragmatically-preview { margin-bottom: 3rem; }
.pragmatically-preview .preview-example-copy p { margin-top: 1rem; }

/* Local phone access: keep the benefit visible and the connection easy to read. */
/* Keep the supplied portrait captures legible, with full-size originals linked. */
.mcp-photo-copy h5 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.85rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 1.4rem; }
.mcp-photo-copy .mcp-photo-note { font-size: .85rem; line-height: 1.65; }
.mcp-phone-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; max-width: 42rem; }
.mcp-phone-shots figure { min-width: 0; margin: 0; padding: .5rem; }
.mcp-phone-shots a, .mcp-phone-shots img { display: block; }
.mcp-phone-shots a:focus-visible { outline: 3px solid #a76b1f; outline-offset: 4px; }
.mcp-phone-shots figcaption { margin-top: .75rem; font-size: .85rem; line-height: 1.5; }
.mcp-phone-shots figcaption strong { display: block; margin-bottom: .25rem; color: #244d3c; }
@media (max-width: 620px) {
  .mcp-phone-shots { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .mcp-phone-shots figure { box-sizing: border-box; width: 100%; max-width: 22rem; }
}
.product-copy .pragmatically-mobile-intro { border-left: 2px solid #b77b32; padding-left: 1rem; color: #244d3c; }
.feature-jumps a[href="#pragmatically-mobile"] { display: inline-block; }
.pragmatically-mobile { scroll-margin-top: 2rem; border-radius: 0 16px 0 0; }
.pragmatically-mobile .pragmatically-mobile-lead { max-width: 48rem; }
.pragmatically-mobile-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.25rem; max-width: 60rem; margin-block: 1.5rem; }
.pragmatically-mobile-device { min-width: 0; display: grid; gap: .25rem; padding: 1rem 1.25rem; background: #e9ebdf; border: 1px solid #afbeaa; border-radius: 2px 10px 2px 2px; }
.pragmatically-mobile-device strong { font-size: 1.05rem; color: #183b2e; }
.pragmatically-mobile-device > span:last-child { font-size: .85rem; line-height: 1.5; color: #486156; }
.pragmatically-mobile-label { font-size: .65rem; line-height: 1.5; font-weight: 700; letter-spacing: .1em; color: #805419; margin-bottom: .2rem; }
.pragmatically-mobile-connection { display: flex; align-items: center; gap: .65rem; font-size: .75rem; color: #486156; }
.pragmatically-mobile-connection::before, .pragmatically-mobile-connection::after { content: ''; width: 1.5rem; height: 1px; background: #b77b32; }
.pragmatically-mobile .pragmatically-mobile-note { font-size: .85rem; line-height: 1.65; max-width: 60rem; }
@media (max-width: 760px) {
  .pragmatically-mobile-flow { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .pragmatically-mobile-connection { justify-content: center; }
}

/* Current workflow captures */
.xbar-flagship-page .gallery-slide{grid-template-columns:1fr}.xbar-flagship-page .gallery-slide img{width:100%;height:auto;max-height:none}.xbar-flagship-page .preview-image-link{width:100%;max-width:none}