/* The Exports tile.

   The second documented exception to typekit.css, for the reason console.css is the first: this is
   a picture of a product's artifact — a printed export — and its type belongs to that document the
   way the pixels of a scan do. Everything is namespaced .pd- and reaches nothing outside the card.
   Coordinates are real ones on a 1440x810 stage that paper.js scales to the frame. */

.tile .shot.is-paper,.case-hero .shot.is-paper { position: relative; overflow: hidden; background: #eceef2 }

.pd-card {
  --ease: cubic-bezier(.2,.7,.2,1);
  --s: .5;
  --ink: #1b1c1f; --mute: #7b7f87; --rule: #e6e3dc; --blue: #154eca; --ok: #1f8a4c;
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(85% 80% at 50% 45%, #f8f9fb, #e2e5eb);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
}
.pd-stage { position: absolute; left: 0; width: 1440px; height: 810px; transform: scale(var(--s)); transform-origin: 0 0 }

.pd-sheet { position: absolute; top: 70px; width: 480px; height: 680px; padding: 44px 44px 0; background: #fff;
  border-radius: 6px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 30px 60px -24px rgba(20,28,48,.20);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease) }
.pd-blue { left: 200px; transform: rotate(-2.2deg) }
.pd-log { left: 760px; top: 56px; transform: rotate(1.4deg) }
.pd-card.is-on .pd-log { transform: rotate(0deg) translateY(-10px); box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 44px 80px -28px rgba(20,28,48,.26) }
.pd-card.is-on .pd-blue { transform: rotate(-3deg) translateX(-12px) }

.pd-eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue) }
.pd-title { margin: 10px 0 0; font-size: 34px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1 }
.pd-sub { margin: 8px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--mute) }

/* The blueprint: abstract steps either side of the one that branches. */
.pd-steps { display: flex; flex-direction: column; gap: 16px; padding-top: 26px }
.pd-step { display: flex; align-items: center; gap: 14px }
.pd-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: #f2f1ee; color: var(--mute); font-size: 13px; font-weight: 600 }
.pd-bar { height: 10px; border-radius: 5px; background: #ecebe7 }
.pd-step.is-key .pd-n { background: var(--blue); color: #fff }
.pd-name { font-size: 19px; font-weight: 600 }
.pd-fork { position: relative; height: 120px; margin-left: 0 }
.pd-wires { position: absolute; left: 0; top: -8px; width: 300px; height: 70px; overflow: visible }
.pd-wires path { fill: none; stroke: #c9cdd6; stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .4s, opacity .4s }
.pd-mod { position: absolute; top: 62px; width: 150px; padding: 10px 12px; border: 1.5px solid #d6d9e0; border-radius: 6px;
  font-size: 15px; font-weight: 600; background: #fff; transition: opacity .4s, border-color .4s, background-color .4s }
.pd-mod span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--mute) }
.pd-mod.pd-a { left: 16px }
.pd-mod.pd-b { left: 172px }
/* The path the perform took, and the one it did not. */
.pd-card.is-on .pd-mod.pd-a { border-color: var(--blue); background: #f3f6fd }
.pd-card.is-on .pd-wires .pd-a { stroke: var(--blue) }
.pd-card.is-on .pd-mod.pd-b,.pd-card.is-on .pd-wires .pd-b { opacity: .28 }

/* The record: flat rows, only what happened. */
.pd-stamp { position: absolute; top: 40px; right: 40px; padding: 7px 12px; border: 1.5px solid var(--ok); border-radius: 5px;
  color: var(--ok); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: rotate(4deg) }
.pd-table { margin-top: 18px }
.pd-row { display: grid; grid-template-columns: 1.15fr 1.25fr 1fr; align-items: center; gap: 10px; padding: 15px 0;
  border-bottom: 1px solid var(--rule); font-size: 17px }
.pd-row.is-head { padding: 10px 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute) }
.pd-row span { display: flex; align-items: center; gap: 8px; white-space: nowrap }
.pd-photo { display: inline-block; width: 30px; height: 30px; border-radius: 4px; background: linear-gradient(135deg, #b9c3d4, #8d99ad) }
.pd-ok { color: var(--ok); font-weight: 600 }
.pd-ok i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e3f3ea; font-style: normal; font-size: 12px }
.pd-card.is-on .pd-row:not(.is-head) { animation: pd-fill .5s var(--ease) both; animation-delay: var(--d) }
@keyframes pd-fill { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }

.pd-media { display: flex; align-items: center; gap: 16px; margin-top: 26px }
.pd-qr { width: 84px; height: 84px; flex: none; fill: var(--ink) }
.pd-media p { margin: 0; max-width: 220px; font-size: 14px; line-height: 1.4; color: var(--mute) }
.pd-foot { position: absolute; left: 44px; right: 44px; bottom: 30px; margin: 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--mute) }
.pd-foot b { margin-left: 4px; padding: 2px 6px; border-radius: 3px; background: #fbe9e7; color: #b3261e; font-weight: 700;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase }

@media (prefers-reduced-motion: reduce) {
  .pd-sheet, .pd-mod, .pd-wires path { transition: none }
  .pd-card.is-on .pd-row:not(.is-head) { animation: none }
}