/* Product pictures (stage 3 spec 6.1): a window around real components, with the product's own
   words for example data. Home and Solutions pages. */
.shot { position: relative; display: grid; gap: var(--space-3); margin: 0; min-inline-size: 0; }
.shot__window { overflow: hidden; background: var(--card); border-radius: var(--radius-panel); box-shadow: var(--shadow-lift); }
.shot__bar { display: flex; gap: var(--space-4); max-inline-size: none; margin: 0; padding-inline: var(--space-4); background: var(--code); border-block-end: 1px solid var(--line); font-size: var(--text-sm); }
.shot__domain { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; padding-block: 0.6rem; font-weight: 600; overflow-wrap: anywhere; }
.shot__domain img { inline-size: 1.15rem; flex: none; }
.shot__tab { display: flex; align-items: center; margin-inline-start: auto; color: var(--blue); font-weight: 600; box-shadow: inset 0 -2px var(--seal); }
.shot__body { padding: var(--space-4); overflow-x: auto; }
.shot__body > *, .shot__note p, .hero__copy > *, .closing__copy > * { margin: 0; }
.shot__body > * + * { margin-block-start: var(--space-3); }
.shot__summary, .shot__small, .shot figcaption, .hero__note { color: var(--ink-2); font-size: var(--text-sm); }
.shot__table { font-size: var(--text-sm); }
.shot__table :is(th, td) { padding: 0.6rem var(--space-2); vertical-align: middle; }
.shot__table th { font-size: 0.7rem; }
.shot__table tr:last-child td { border-block-end: 0; }
.shot__table b { display: block; font-weight: 600; }
.shot__table td > span:not(.pill) { color: var(--ink-2); font-size: var(--text-xs); }
.shot .pill { font-size: 0.78rem; }
/* A phone has no room for every column; the status says it in words. */
@media (max-width: 559px) { .shot__rate { display: none; } }
@media (max-width: 479px) { .shot__count { display: none; } }
/* The note lies over the window's foot, which keeps room for it. */
.shot__note { position: relative; display: grid; gap: var(--space-2); margin-block-start: calc(-1 * var(--space-6)); margin-inline-start: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); }
.shot__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.shot__who b { font-size: var(--text-lg); letter-spacing: var(--track-lg); }
.shot--hero .shot__body { padding-block-end: var(--space-7); }
@media (min-width: 860px) {
  .shot--hero .shot__body { padding-block-end: var(--space-8); }
  .shot--hero .shot__note { inline-size: min(25rem, 82%); justify-self: end; margin-block-start: calc(-1 * var(--space-8)); margin-inline-end: calc(-1 * var(--space-5)); }
}
.shot--small .shot__note { margin: 0; padding: 0; background: none; box-shadow: none; }
.shot--readiness .strip svg { block-size: 5rem; }
.shot--mail .shot__body { padding: var(--space-5); }
.shot__subject { font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-title); }
.shot__button { display: inline-block; padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font-weight: 600; }

/* A hero with a picture, beside the words from 1000px, on the envelope halo: a background,
   never in front of text. Beside a picture the headline steps down from --text-4xl. */
.hero { padding-block: var(--space-6) var(--space-7); overflow: clip; }
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.hero__grid > * { min-inline-size: 0; }
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; }
.hero__copy .lede { max-inline-size: 34rem; }
.hero .hero-title { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.hero__note { font-size: var(--text-md); }
.hero__art { position: relative; isolation: isolate; padding-block: var(--space-5); }
.hero__art::before { content: ""; position: absolute; inset: -6% -12%; z-index: -1; background: url("../brand/envelope-halo.facedc7667ff.svg") center / contain no-repeat; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .hero__art { padding-block: var(--space-6); }
}
@media (max-width: 480px) {
  .hero__copy .btn--lg { padding-inline: var(--space-5); }
  .hero__copy .lede { font-size: 1.1rem; }
}

/* The How it works drawings (marketing/art/), in the envelope's tints. */
.art-card { fill: var(--card); stroke: var(--env-2); stroke-width: 2; }
.art-1 { fill: var(--env-1); }
.art-2 { fill: var(--env-2); }
.art-3 { fill: var(--env-3); }
.art-blue { fill: var(--blue); }
.art-ok { fill: var(--pass); }
.art-warn { fill: var(--warn); }
.art-flap, .art-tray { fill: none; stroke: var(--card); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-path { fill: none; stroke: var(--env-3); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }

/* The closing band: the action beside the envelope cloud. */
.closing { overflow: clip; }
.closing__grid { display: grid; gap: var(--space-6); align-items: center; }
.closing__copy { display: grid; gap: var(--space-4); justify-items: start; }
.closing h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--track-2xl); }
.closing__copy p { font-size: 1.15rem; }
.closing__art { inline-size: 100%; max-inline-size: 26rem; justify-self: center; }
@media (min-width: 860px) { .closing__grid { grid-template-columns: 1.2fr 1fr; } }
@media (max-width: 559px) { .closing__art { max-inline-size: 13rem; } }