/* Direct mail proposal additions */

.counts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin-top: 1.5rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.counts div { padding: 1rem 1.1rem; border-right: 1px solid var(--color-divider); }
.counts div:last-child { border-right: 0; }
.counts b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1.1; color: var(--color-primary); }
.counts span { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
@media (max-width: 560px) { .counts { grid-template-columns: repeat(2, minmax(0,1fr)); } .counts div:nth-child(2) { border-right: 0; } .counts div:nth-child(-n+2) { border-bottom: 1px solid var(--color-divider); } }

.pieces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 960px) { .pieces { grid-template-columns: 1fr; } }
.piece__label { margin: 0 0 0.5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); }
.piece h3 { font-size: var(--text-xl); margin: 0 0 0.75rem; }
.piece > p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.piece ul { margin: 1rem 0 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.piece ul li { margin-bottom: 0.35rem; }
.piece ul b { color: var(--color-text); }
.mock { margin: 0 0 1.75rem; position: relative; }
.mock figcaption { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 0.75rem; }

/* Envelope + letter */
.env-stack { position: relative; padding-bottom: 20%; }
.letter { background: #fff; border: 1px solid #e3e1dc; box-shadow: 0 18px 36px -22px rgba(11,28,40,0.35); padding: 1.4rem 1.5rem 1.25rem; font-size: 11px; line-height: 1.55; color: #26313a; width: 84%; }
.letter__head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--color-red); padding-bottom: 0.6rem; margin-bottom: 0.9rem; }
.letter__head img { height: 26px; width: auto; }
.letter__head span { font-size: 9px; color: #6b7681; text-align: right; line-height: 1.35; }
.letter p { margin: 0 0 0.6rem; }
.letter__sig { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 20px; color: #0e2a52; margin: 0.2rem 0 0; line-height: 1; }
.env { position: absolute; right: 0; bottom: 0; width: 66%; aspect-ratio: 9.5 / 4.125; background: #fdfdfb; border: 1px solid #dcd9d2; box-shadow: 0 22px 40px -20px rgba(11,28,40,0.45); padding: 0.8rem 1rem; font-size: 10px; color: #26313a; }
.env__from { line-height: 1.35; }
.env__from img { height: 14px; width: auto; display: block; margin-bottom: 0.25rem; }
.env__stamp { position: absolute; top: 0.7rem; right: 0.8rem; width: 64px; border: 1px solid #26313a; font-size: 7px; line-height: 1.25; text-align: center; padding: 0.3rem 0.2rem; font-weight: 700; letter-spacing: 0.04em; }
.env__to { position: absolute; left: 40%; top: 50%; font-size: clamp(8px, 0.85vw, 11px); line-height: 1.4; }

/* Oversized postcard */
.card6 { aspect-ratio: 11 / 6; width: 100%; box-shadow: 0 22px 40px -20px rgba(11,28,40,0.45); overflow: hidden; position: relative; }
.card6--front { background: #0e2a52; color: #fff; display: grid; grid-template-columns: 1.35fr 1fr; }
.card6__copy { padding: 6% 0 6% 6%; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; position: relative; z-index: 1; }
.card6__tag { align-self: flex-start; background: var(--color-red); font-size: clamp(8px, 1vw, 11px); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.55rem; }
.card6__h { font-family: var(--font-display); font-weight: 900; font-size: clamp(18px, 2.6vw, 32px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
.card6__h em { font-style: normal; color: var(--color-gold-bright); }
.card6__sub { font-size: clamp(9px, 1.1vw, 13px); opacity: 0.85; margin: 0; }
.card6__art { position: relative; background: var(--color-mega-blue); }
.card6__art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 12px, transparent 12px 24px); }
.box { position: absolute; background: #c8955a; border: 2px solid #8f6334; }
.box::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 18%; transform: translateX(-50%); background: #e9d3a6; }
.box--a { width: 46%; height: 34%; left: 14%; bottom: 14%; }
.box--b { width: 34%; height: 26%; left: 52%; bottom: 14%; }
.box--c { width: 30%; height: 24%; left: 30%; bottom: 48%; }
.card6__logo { position: absolute; right: 6%; top: 8%; width: 42%; height: auto; }
.card6--back { background: #fff; color: #26313a; display: grid; grid-template-columns: 1.15fr 1fr; border: 1px solid #e3e1dc; margin-top: 1rem; }
.card6__msg { padding: 6%; display: flex; flex-direction: column; gap: 0.45rem; border-right: 1px dashed #d5dae0; }
.card6__msg b { font-family: var(--font-display); font-size: clamp(11px, 1.4vw, 16px); font-weight: 800; color: #0e2a52; line-height: 1.15; }
.card6__msg ul { margin: 0; padding-left: 1rem; font-size: clamp(8px, 0.95vw, 11px); line-height: 1.45; }
.card6__cta { display: flex; gap: 0.6rem; align-items: center; margin-top: auto; font-size: clamp(8px, 0.95vw, 11px); font-weight: 700; color: #0e2a52; }
.qr { width: clamp(38px, 5vw, 58px); height: auto; flex: none; display: block; }
.card6__addr { padding: 6%; position: relative; font-size: clamp(8px, 1vw, 11px); line-height: 1.4; }
.card6__ind { position: absolute; top: 8%; right: 8%; border: 1px solid #26313a; font-size: clamp(6px, 0.7vw, 8px); font-weight: 700; text-align: center; padding: 0.25rem 0.35rem; line-height: 1.25; }
.card6__to { position: absolute; left: 10%; bottom: 18%; }

.why { margin-top: 1rem; border-left: 4px solid var(--color-mega-blue); background: var(--color-surface); padding: 0.9rem 1.1rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.why b { color: var(--color-text); }

.dl__btn--pending { opacity: 0.6; cursor: default; pointer-events: none; }
@media (max-width: 600px) {
  .env-stack { padding-bottom: 36%; }
  .letter { width: 100%; padding: 1rem; font-size: 10px; }
  .env { width: 92%; font-size: 8px; padding: 0.5rem 0.6rem; }
  .env__from img { height: 11px; }
  .env__stamp { width: 50px; font-size: 6px; top: 0.5rem; right: 0.5rem; }
  .env__to { left: 40%; top: 50%; font-size: 8px; }
}