/* digital.html: PNG downloads and bundles. Added 2026-10-08.
   The hero leans on the one picture everyone knows means "transparent PNG":
   the grey checkerboard, here dark and fading in from the right behind a
   framed bundle preview. File facts sit in small monospace chips, like the
   info panel of a file. Bundles get their own dark band before the singles,
   and the license is spelled out in plain words at the end. */

.dg-hero{
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: 88px 0 96px;
  overflow: hidden;
}
.dg-hero::before{
  content: "";
  position: absolute; inset: 0;
  background-color: #101010;
  background-image:
    linear-gradient(45deg, #1e1e1e 25%, transparent 25%, transparent 75%, #1e1e1e 75%),
    linear-gradient(45deg, #1e1e1e 25%, transparent 25%, transparent 75%, #1e1e1e 75%);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 28%, rgba(0,0,0,.9) 78%);
          mask-image: linear-gradient(100deg, transparent 28%, rgba(0,0,0,.9) 78%);
  pointer-events: none;
}
.dg-hero::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(40% 60% at 18% 30%, rgba(179,18,45,.22), transparent 70%);
  pointer-events: none;
}
.dg-hero-inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}
.dg-copy .eyebrow{ display: block; color: var(--accent-bright); margin-bottom: 18px; }
.dg-copy h1{
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  margin-bottom: 24px;
}
.dg-copy h1 em{ font-style: normal; color: var(--accent-bright); }
.dg-copy .lede{
  font-size: clamp(.98rem, 1.8vw, 1.1rem);
  line-height: 1.7;
  color: var(--muted-dark);
  max-width: 50ch;
  margin-bottom: 24px;
}
.dg-file{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.dg-file li{
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: .76rem;
  color: var(--white);
  padding: 6px 10px;
  border: 1px solid rgba(245,243,238,.22);
  border-radius: 3px;
  background: rgba(245,243,238,.05);
}
.dg-copy .cta-row{ display: flex; flex-wrap: wrap; gap: 14px; }

.dg-preview{
  margin: 0;
  background: #0d0c0f;
  border: 1px solid rgba(245,243,238,.18);
  box-shadow: 0 30px 70px rgba(0,0,0,.65);
  transform: rotate(1.5deg);
}
.dg-preview img{ display: block; width: 100%; height: auto; }
.dg-preview figcaption{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid rgba(245,243,238,.12);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: .74rem;
  color: var(--muted-dark);
}

/* Bundles band. */
.dg-bundles{
  background: var(--charcoal);
  padding: 62px 0 80px;
  border-top: 1px solid var(--line-dark);
}
.dg-bundles .coll-head{ border-bottom-color: var(--line-dark); }
.dg-bundles .coll-head h2{ color: var(--white); }
.dg-bundles .coll-head p{ color: var(--muted-dark); }
.shop-grid.dg-bundle-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dg-bundle-grid .p-card{ border-color: transparent; }

/* The license, in plain words. */
.dg-license{
  background: var(--paper-dim);
  padding: 72px 0 84px;
  border-top: 1px solid var(--line-light);
}
.dg-license h2{
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--ink);
  margin-bottom: 30px;
}
.dg-license-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}
.dg-yes, .dg-no{
  background: #fff;
  border: 1px solid var(--line-light);
  padding: 26px 28px 22px;
}
.dg-yes{ border-top: 3px solid var(--gold); }
.dg-no{ border-top: 3px solid var(--accent); }
.dg-license h3{
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 14px;
}
.dg-license ul li{
  position: relative;
  padding-left: 26px;
  font-size: .95rem;
  line-height: 1.6;
  color: #3d3a35;
  margin-bottom: 10px;
}
.dg-yes li::before,
.dg-no li::before{
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
}
.dg-yes li::before{ content: "\2713"; color: #a37a1d; }
.dg-no li::before{ content: "\2715"; color: var(--accent); }
.dg-note{
  font-size: .9rem;
  line-height: 1.7;
  color: var(--muted-light);
  max-width: 76ch;
}

@media (max-width: 960px){
  .dg-hero-inner{ grid-template-columns: 1fr; gap: 40px; }
  .dg-preview{ max-width: 560px; }
}
@media (max-width: 620px){
  .dg-hero{ padding: 60px 0 66px; }
  .dg-preview{ transform: none; }
  .shop-grid.dg-bundle-grid{ grid-template-columns: 1fr; }
  .dg-bundle-grid .p-blurb{ display: block; }
  .dg-license-grid{ grid-template-columns: 1fr; }
  .dg-yes, .dg-no{ padding: 22px 20px 16px; }
}