/* Drawn illustrations (inline SVG) and the data-flow diagram (scripts/site/apply-static-media.py). */
.lp svg.lp-illus{ display:block; width:100%; height:auto; }


/* Framed illustration used on product pages and in the home products strip. */
.lp .lp-shot{ margin:0; }
.lp .lp-shot-frame{ background:#fff; border:1px solid var(--lp3-line2); border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,40,100,.28); }
.lp .lp-shot-bar{ display:flex; align-items:center; gap:6px; padding:9px 14px; border-bottom:1px solid var(--lp3-line2); background:var(--lp3-bg3); }
.lp .lp-shot-bar i{ width:9px; height:9px; border-radius:50%; background:#FF5F57; }
.lp .lp-shot-bar i:nth-child(2){ background:#FEBC2E; }
.lp .lp-shot-bar i:nth-child(3){ background:#28C840; }
.lp .lp-shot-bar span{ margin-inline-start:auto; font-family:var(--lp3-mono) !important; font-size:11px; color:var(--lp3-muted2); }
.lp .lp-shot figcaption{ margin-top:10px; font-size:13.5px; color:var(--lp3-muted); text-align:center; }
.lp .lp-shot-note{ margin:14px 0 0; font-size:13px; color:var(--lp3-muted2); text-align:center; }

/* A product page without a screenshot keeps a single hero column. */
.lp .lp-page-hero-grid:has(> :only-child){ grid-template-columns:minmax(0,1fr); }

/* Three screenshots under the products bento. */
.lp .lp-shots3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:40px; }
.lp .lp-shots3 h3{ margin:12px 0 2px; font-size:18px; font-weight:700; }
.lp .lp-shots3 p{ margin:0; font-size:14.5px; color:var(--lp3-muted); line-height:1.7; }
@media (max-width: 900px){ .lp .lp-shots3{ grid-template-columns:minmax(0,1fr); gap:32px; } }

/* Data-flow diagram: five stages, one row on wide screens, a column on phones. */
.lp .lp-flow{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:1.25fr repeat(4,minmax(0,1fr)); gap:34px; align-items:stretch; counter-reset:flow; }
.lp .lp-flow > li{ position:relative; background:#fff; border:1px solid var(--lp3-line2); border-radius:var(--lp3-r-sm); padding:20px 18px; counter-increment:flow; }
.lp .lp-flow > li::before{ content:counter(flow, decimal-leading-zero); display:block; font-family:var(--lp3-mono) !important; font-size:12px; color:var(--lp3-muted2); margin-bottom:6px; }
.lp .lp-flow > li + li::after{ content:""; position:absolute; top:50%; inset-inline-start:-28px; width:22px; height:2px; background:var(--lp3-line); }
.lp .lp-flow > li + li > .arrow{ position:absolute; top:calc(50% - 5px); inset-inline-start:-10px; width:0; height:0; border-block:6px solid transparent; border-inline-start:8px solid var(--lp3-line); }
.lp .lp-flow h3{ margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.5; }
.lp .lp-flow p{ margin:0; font-size:14px; color:var(--lp3-muted); line-height:1.75; }
.lp .lp-flow .src{ display:grid; gap:8px; margin-top:10px; }
.lp .lp-flow .src span{ display:block; padding:8px 10px; border-radius:10px; background:var(--lp3-bg2); font-size:13.5px; line-height:1.6; }
.lp .lp-flow .src small{ display:block; color:var(--lp3-muted); font-size:12.5px; }
.lp .lp-flow .is-model{ border-color:var(--lp3-blue); box-shadow:0 0 0 3px rgba(0,113,227,.08); }
.lp .lp-flow .is-out{ background:var(--lp3-bg3); }
.lp .lp-flow-note{ margin:22px 0 0; font-size:14px; color:var(--lp3-muted); text-align:center; }
@media (max-width: 1000px){
  .lp .lp-flow{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .lp .lp-flow > li + li::after{ top:-24px; inset-inline-start:calc(50% - 1px); width:2px; height:18px; }
  .lp .lp-flow > li + li > .arrow{ top:-9px; inset-inline-start:calc(50% - 6px); border-block:0; border-inline:6px solid transparent; border-top:8px solid var(--lp3-line); }
}

/* Wide framed illustration on a solution page. */
.lp .lp-shot-wide{ max-width:980px; margin:32px auto 0; }