/* All-Around Legal — digital products section
   Additive stylesheet. Loads after styles.css and only defines .digital*/.product* classes,
   so nothing in the existing build is overridden. Tokens are inherited from styles.css. */

.digital {
  padding: 6rem 0;
  background: rgba(242, 240, 235, 0.6);
  border-top: 1px solid var(--hairline);
}

.digital-head { margin-bottom: 3.5rem; }
.digital-tag {
  font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem;
}
.digital-head h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.875rem, 4vw, 2.25rem);
  letter-spacing: -0.01em; line-height: 1.25;
  margin-bottom: 1rem; max-width: 24ch; text-wrap: balance;
}
.digital-lead {
  font-size: 1rem; color: var(--muted); line-height: 1.7;
  max-width: 62ch; text-wrap: pretty;
}

/* Product grid — hairline separators, same idiom as .tiles.
   auto-fit means adding a 3rd or 4th product needs no layout change. */
.product-grid {
  display: grid; grid-template-columns: 1fr;
  gap: 1px; background: var(--hairline);
  box-shadow: 0 0 0 1px var(--hairline);
}
.product {
  position: relative;
  background: var(--page);
  padding: 2.5rem;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.125rem;
}
.product-featured { background: #fffefc; box-shadow: inset 0 2px 0 var(--accent); }

.product-num { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.product-badge {
  position: absolute; top: 2.5rem; right: 2.5rem;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--accent);
}
.product h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.375rem; line-height: 1.25;
  letter-spacing: -0.01em; max-width: 24ch;
}
.product-meta {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--muted);
}
.product-desc {
  font-size: 0.875rem; color: var(--muted);
  line-height: 1.6; text-wrap: pretty;
}
.product-list { list-style: none; width: 100%; }
.product-list li {
  font-size: 0.8125rem; line-height: 1.5;
  padding: 0.5625rem 0;
  border-top: 1px solid var(--hairline);
}
.product-list li::before { content: "— "; color: var(--accent); }

.product-foot {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.25rem;
}
.product-price {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.75rem; letter-spacing: -0.01em;
}
.product-buy {
  display: inline-block;
  background: var(--ink); color: var(--page);
  padding: 0.75rem 1.75rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
  transition: background-color 0.15s;
}
.product-buy:hover { background: var(--accent); }
.product-buy::after { content: " ↗"; font-size: 0.75em; opacity: 0.7; }
.product-buy.is-overlay::after { content: ""; }

/* Notes under the grid: upgrade credit, then the vendor / entity statement. */
.digital-notes { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.digital-refund {
  font-size: 0.9375rem; color: var(--ink); max-width: 68ch; line-height: 1.6;
  padding-left: 0.875rem; border-left: 2px solid var(--accent);
}
.digital-refund b { font-weight: 600; }
.digital-credit { font-size: 0.875rem; color: var(--ink); max-width: 68ch; line-height: 1.6; }
.digital-credit code {
  font-family: var(--font-mono); font-size: 0.8125rem;
  background: var(--surface); border: 1px solid var(--hairline);
  padding: 0.125rem 0.375rem; border-radius: 0.1875rem;
}
.digital-vendor {
  font-size: 11px; line-height: 1.7; color: var(--muted);
  max-width: 82ch;
  border-top: 1px solid var(--hairline); padding-top: 1.25rem;
}

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); }
}
@media (max-width: 480px) {
  .product { padding: 2rem 1.5rem; }
  .product-badge { top: 2rem; right: 1.5rem; }
}