/* ========================================
   450 ENVELOPES CAMPAIGN (en-*)
   Loaded only on /450/ via front-matter headScripts, like the golf and p2p
   pages. Everything here is scoped to .en-* so it cannot leak into style.css.
   ======================================== */

.en-page-vars,
:root {
  --en-kraft: #d9c3a0;
  --en-kraft-dark: #c2a87f;
  --en-kraft-deep: #a98c61;
  --en-paper: #fffdf6;
  --en-ink: #3a3027;
  --en-seal: #a51c30;
}

/* Review-build banner. Delete this rule and its markup, the noindex, and swap
   in real funded/claimed numbers when the campaign goes live. */
.en-preview-flag {
  margin: 0;
  padding: 10px 20px;
  background: #3a3027;
  color: #f3e6d0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

/* ============ HERO ============ */
.en-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 20% 15%, #4a2f2a 0%, #2b1b18 55%, #1b100e 100%);
  color: #fff;
  padding: 120px 0 90px;
  text-align: center;
}

.en-hero-bg { position: absolute; inset: 0; pointer-events: none; }

.en-float {
  position: absolute;
  width: 120px;
  height: 80px;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--en-kraft), var(--en-kraft-deep));
  opacity: 0.12;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  animation: enDrift 18s ease-in-out infinite;
}

.en-float::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  background: rgba(0, 0, 0, 0.18);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.en-float-1 { top: 12%; left: 8%; transform: rotate(-14deg); animation-delay: -2s; }
.en-float-2 { top: 62%; left: 16%; transform: rotate(9deg); animation-delay: -7s; }
.en-float-3 { top: 20%; right: 11%; transform: rotate(12deg); animation-delay: -4s; }
.en-float-4 { top: 68%; right: 7%; transform: rotate(-8deg); animation-delay: -11s; }

@keyframes enDrift {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-26px) rotate(-4deg); }
}

.en-hero-inner { position: relative; z-index: 1; }

.en-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--en-kraft);
  margin-bottom: 18px;
}

.en-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.9;
  margin-bottom: 20px;
}

.en-title-num {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(90px, 18vw, 190px);
  font-weight: 700;
  letter-spacing: -2px;
  background: linear-gradient(180deg, #fff 30%, var(--en-kraft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.en-title-word {
  font-size: clamp(22px, 4vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 10px;
  text-indent: 10px;
  color: #fff;
}

.en-lede {
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.84);
}

/* ============ PROGRESS ============ */
.en-progress { max-width: 820px; margin: 0 auto 36px; }

.en-progress-track {
  height: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.en-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--en-seal), #e0556d);
  box-shadow: 0 0 18px rgba(224, 85, 109, 0.6);
  transition: width 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.en-progress.is-filled .en-progress-fill { width: var(--pct); }

.en-progress-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.en-figure-num {
  display: block;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #fff;
}

.en-figure-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, 0.6);
}

.en-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* Worn by both an anchor and a button, so the button's user-agent chrome has to
   be cleared: its light background put white text on a white box, and its
   border boxed in the underline. */
.en-hero-link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0 0 2px;
  color: rgba(255, 255, 255, 0.8);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.4;
  cursor: pointer;
}

.en-hero-link:hover { color: #fff; }

/* ============ SECTIONS ============ */
.en-section { padding: 80px 0; }

.en-how { background: var(--color-white); }

.en-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.en-steps li { position: relative; padding-top: 10px; }

.en-step-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--en-seal);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 16px;
}

.en-steps h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 8px;
}

.en-steps p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-light);
  margin: 0;
}

/* ============ BOARD ============ */
.en-board-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(165, 28, 48, 0.06), transparent 60%),
    var(--color-off-white);
}

.en-board-head { text-align: center; margin-bottom: 26px; }

.en-board-title {
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-dark);
}

.en-board-sub { font-size: 15px; color: var(--color-text-light); margin-top: 6px; }

.en-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.en-filters { display: flex; gap: 8px; }

.en-filter {
  padding: 9px 20px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-filter:hover { border-color: var(--en-seal); color: var(--en-seal); }

.en-filter.is-active {
  background: var(--en-seal);
  border-color: var(--en-seal);
  color: #fff;
}

.en-find { display: flex; gap: 8px; }

.en-find input {
  width: 170px;
  padding: 9px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 40px;
  font-size: 14px;
  font-family: inherit;
}

.en-find input:focus { outline: 2px solid var(--en-seal); outline-offset: 1px; }

.en-find-go {
  padding: 9px 18px;
  border: none;
  border-radius: 40px;
  background: var(--color-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
}

.en-count {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: 20px;
  min-height: 18px;
}

.en-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px;
}

/* ---- the envelope ---- */
.en-env {
  position: relative;
  aspect-ratio: 3 / 2;
  border: none;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
  background: linear-gradient(168deg, #f6ebd8 0%, var(--en-kraft) 62%, var(--en-kraft-dark) 100%);
  box-shadow:
    0 1px 2px rgba(60, 40, 20, 0.22),
    0 8px 18px -8px rgba(60, 40, 20, 0.45);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s ease,
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
  transition-delay: calc(var(--i, 0) * 14ms), 0s, 0s;
}

.en-env.is-in { opacity: 1; transform: translateY(0); }

/* the diagonal seams of a real envelope back */
.en-env-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 11%;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(120, 90, 55, 0.16) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), rgba(120, 90, 55, 0.16) 50%, transparent calc(50% + 0.5px));
}

.en-env-flap {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background: linear-gradient(180deg, #f3e6d0, var(--en-kraft-dark));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
  box-shadow: 0 2px 4px rgba(90, 65, 35, 0.18);
  z-index: 2;
}

.en-env-num {
  position: relative;
  z-index: 3;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 700;
  color: #5c4326;
  line-height: 1;
}

.en-env-amt {
  position: relative;
  z-index: 3;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: rgba(92, 67, 38, 0.72);
}

.en-env:hover,
.en-env:focus-visible {
  transform: translateY(-7px) scale(1.03);
  box-shadow:
    0 2px 4px rgba(60, 40, 20, 0.25),
    0 20px 32px -12px rgba(60, 40, 20, 0.6);
  outline: none;
}

.en-env:focus-visible { outline: 3px solid var(--en-seal); outline-offset: 3px; }

.en-env:hover .en-env-flap,
.en-env:focus-visible .en-env-flap { transform: rotateX(-34deg); filter: brightness(1.04); }

.en-env:active { transform: translateY(-2px) scale(0.99); }

/* ---- funded ---- */
.en-env.is-funded {
  background: linear-gradient(168deg, #e6d8c2 0%, #c9b391 62%, #b49a74 100%);
}

.en-env.is-funded .en-env-num,
.en-env.is-funded .en-env-amt { color: rgba(92, 67, 38, 0.55); }

.en-env-seal {
  position: absolute;
  z-index: 4;
  right: 7%;
  bottom: 9%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: radial-gradient(circle at 34% 30%, #c6324a, #7e1222 70%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  transform: rotate(-8deg);
}

/* ---- claimed but unpaid ---- */
.en-env.is-claimed::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(92, 67, 38, 0.4);
  border-radius: 5px;
  z-index: 3;
}

.en-env-tag {
  position: absolute;
  z-index: 4;
  top: 6%;
  right: 6%;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(58, 48, 39, 0.82);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.en-env[hidden] { display: none; }

.en-env.is-flash {
  animation: enFlash 1.4s ease;
}

@keyframes enFlash {
  0%, 100% { box-shadow: 0 1px 2px rgba(60, 40, 20, 0.22), 0 8px 18px -8px rgba(60, 40, 20, 0.45); }
  30% { box-shadow: 0 0 0 4px var(--en-seal), 0 14px 26px -10px rgba(60, 40, 20, 0.6); }
}

.en-disclosure {
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.75;
  color: #8a8077;
  font-style: italic;
}

/* ============ OVERLAY ============ */
.en-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.en-overlay[hidden] { display: none; }

.en-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 14, 11, 0.74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.en-overlay.is-open .en-overlay-backdrop { opacity: 1; }

.en-letter-wrap {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 1400px;
  padding-top: 26px;
}

.en-close {
  position: sticky;
  top: 0;
  left: 100%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-dark);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.en-close svg { width: 19px; height: 19px; }

/* decorative envelope that opens behind the letter */
.en-open-env {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(520px, 100%);
  height: 190px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.en-open-back,
.en-open-front,
.en-open-flap { position: absolute; left: 0; right: 0; }

.en-open-back {
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(170deg, var(--en-kraft), var(--en-kraft-deep));
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.4);
}

.en-open-front {
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(185deg, var(--en-kraft-dark), #b08f62);
  clip-path: polygon(0 36%, 50% 0, 100% 36%, 100% 100%, 0 100%);
  z-index: 4;
}

.en-open-flap {
  top: 0;
  height: 64%;
  background: linear-gradient(180deg, #f1e3cc, var(--en-kraft-dark));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 0.7s cubic-bezier(0.3, 0.9, 0.3, 1);
  z-index: 1;
  border-radius: 10px 10px 0 0;
}

.en-overlay.is-open .en-open-flap { transform: rotateX(-174deg); }

/* the letter itself */
.en-letter {
  position: relative;
  z-index: 3;
  margin-bottom: 120px;
  padding: 30px 30px 34px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(transparent, transparent 31px, rgba(120, 90, 55, 0.09) 32px),
    var(--en-paper);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(90px) scale(0.97);
  transition:
    opacity 0.45s ease 0.25s,
    transform 0.65s cubic-bezier(0.2, 0.9, 0.25, 1) 0.25s;
}

.en-overlay.is-open .en-letter { opacity: 1; transform: translateY(0) scale(1); }

.en-letter-head { text-align: center; border-bottom: 2px solid rgba(165, 28, 48, 0.18); padding-bottom: 16px; }

.en-letter-env {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--color-text-light);
}

.en-letter-amt {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--en-seal);
  margin: 2px 0 6px;
}

.en-letter-state {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.en-letter-state.is-available { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.en-letter-state.is-funded { background: rgba(165, 28, 48, 0.12); color: var(--en-seal); }
.en-letter-state.is-claimed { background: rgba(58, 48, 39, 0.1); color: #6b5c4b; }

/* Drawn stamp and postmark. Deliberately not a photograph: these letters are
   composite stories, and putting a real camper's face beside an invented name
   would misrepresent that child. */
.en-stamp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin: 24px 0 14px;
}

.en-stamp-inner {
  position: relative;
  width: 104px;
  height: 120px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--en-paper);
  transform: rotate(-5deg);
  box-shadow: 0 7px 18px rgba(60, 40, 20, 0.22);
  z-index: 1;
}

.en-stamp-inner::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: linear-gradient(165deg, #f5e7cd, var(--en-kraft));
  border: 1px dashed rgba(120, 90, 55, 0.55);
}

.en-stamp-amt,
.en-stamp-camp { position: relative; z-index: 2; }

.en-stamp-amt {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 30px;
  font-weight: 700;
  color: #5c4326;
  line-height: 1;
}

.en-stamp-camp {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(92, 67, 38, 0.8);
}

.en-postmark {
  position: absolute;
  left: 50%;
  margin-left: 26px;
  width: 108px;
  height: 108px;
  z-index: 3;
  border-radius: 50%;
  border: 2px dashed rgba(165, 28, 48, 0.45);
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  transform: rotate(-13deg);
  opacity: 0.85;
}

.en-postmark-activity {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  line-height: 1.35;
  color: rgba(165, 28, 48, 0.78);
}

/* ============ SCENERY BAND ============ */
.en-band { width: 100%; height: 320px; overflow: hidden; }

.en-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

.en-letter-note { margin: 0 0 18px; padding: 0; border: none; }

.en-letter-note p {
  font-family: "Caveat", "Segoe Script", cursive;
  font-size: 25px;
  line-height: 1.5;
  color: var(--en-ink);
  margin-bottom: 10px;
}

.en-letter-note cite {
  display: block;
  text-align: right;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-light);
}

.en-letter-math {
  padding: 12px 16px;
  border-left: 4px solid var(--en-seal);
  background: var(--color-off-white);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 22px;
}

.en-letter-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* display:flex would outrank the UA [hidden] rule, same trap as .en-give. */
.en-letter-actions[hidden] { display: none; }

.en-give { flex: 1 1 auto; }

/* .btn sets display:inline-block, which outranks the UA [hidden] rule, so a
   funded envelope kept showing its Give button. Scope the override high enough
   to win rather than reaching for !important. */
.en-letter-actions .en-give[hidden] { display: none; }

.en-copy {
  padding: 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-copy:hover { border-color: var(--en-seal); color: var(--en-seal); }
.en-copy.is-copied { background: var(--en-seal); border-color: var(--en-seal); color: #fff; }

.en-letter-help {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-light);
}

.en-letter-help a { color: var(--en-seal); font-weight: 600; }

/* ============ CHOOSING SEVERAL ============ */
.en-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.en-multi-toggle {
  padding: 9px 20px;
  border: 1px solid var(--en-seal);
  background: #fff;
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--en-seal);
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-multi-toggle:hover { background: rgba(165, 28, 48, 0.07); }

.en-multi-toggle.is-active {
  background: var(--en-seal);
  color: #fff;
}

.en-chooser {
  margin: 0 0 18px;
  padding: 20px 24px 18px;
  border: 1px solid rgba(165, 28, 48, 0.22);
  border-left: 4px solid var(--en-seal);
  border-radius: 4px;
  background: var(--color-off-white, #f7f4ef);
}

.en-chooser[hidden] { display: none; }

.en-chooser-lede {
  margin: 0 0 14px;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}

.en-adder { display: flex; gap: 8px; }

.en-adder input {
  width: 220px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 40px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
}

.en-adder input:focus { outline: 2px solid var(--en-seal); outline-offset: 1px; }

.en-adder-go {
  padding: 10px 20px;
  border: none;
  border-radius: 40px;
  background: var(--en-seal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
}

.en-chooser-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--color-text-light);
}

.en-chooser-msg {
  margin: 8px 0 0;
  min-height: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--en-seal);
}

/* The tick that marks a chosen envelope. Sits above the flap, which is why it
   needs a z-index of its own rather than relying on source order. */
.en-env-check {
  position: absolute;
  z-index: 5;
  top: 7%;
  right: 7%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}

.en-env-check svg { width: 13px; color: var(--en-seal); }

.en-board.is-choosing .en-env.is-available { cursor: copy; }

.en-env.is-picked {
  background: linear-gradient(168deg, #c6324a 0%, #a51c30 62%, #7e1222 100%);
  box-shadow: 0 2px 4px rgba(60, 40, 20, 0.3), 0 14px 26px -12px rgba(126, 18, 34, 0.7);
}

.en-env.is-picked .en-env-flap {
  background: linear-gradient(180deg, #d2495f, #91182a);
  transform: rotateX(-34deg);
}

.en-env.is-picked .en-env-num,
.en-env.is-picked .en-env-amt { color: rgba(255, 255, 255, 0.92); }

.en-env.is-picked .en-env-check { opacity: 1; transform: scale(1); }

/* ============ THE BASKET ============ */
.en-basket {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  background: var(--en-ink);
  color: #f3e6d0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
}

.en-basket[hidden] { display: none; }

.en-basket-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.en-basket-main { min-width: 0; }

.en-basket-count {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(243, 230, 208, 0.7);
}

.en-basket-count strong { color: #fff; font-size: 14px; }

.en-basket-chips {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0 0 2px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.en-basket-chips li { flex: 0 0 auto; }

.en-basket-chips button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1px solid rgba(243, 230, 208, 0.3);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3e6d0;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
}

.en-basket-chips button:hover {
  background: var(--en-seal);
  border-color: var(--en-seal);
  color: #fff;
}

.en-chip-x { font-size: 15px; line-height: 1; opacity: 0.75; }

.en-basket-side {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

.en-basket-sum { text-align: right; }

.en-basket-total {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 30px;
  line-height: 1;
  color: #fff;
}

.en-basket-math {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(243, 230, 208, 0.72);
}

.en-basket-actions { display: flex; align-items: center; gap: 12px; }

.en-basket-clear {
  border: none;
  background: none;
  padding: 6px 2px;
  color: rgba(243, 230, 208, 0.75);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.en-basket-clear:hover { color: #fff; }

/* The bar is fixed, so the footer needs room or it sits underneath it, and the
   chat launcher needs lifting or it lands on top of the basket's buttons. One
   variable so the two can never drift apart. */
:root { --en-basket-h: 122px; }
html.en-has-basket body { padding-bottom: var(--en-basket-h); }
html.en-has-basket .cb-toggle { bottom: calc(var(--en-basket-h) + 18px); }

/* The launcher also sits over the card fields in the giving form, so while a
   dialog is open it goes away entirely. Two classes rather than one shared
   class: closing the letter to open the form would otherwise remove the class
   the form had just added. */
html.en-overlay-open .cb-toggle,
html.en-checkout-open .cb-toggle { display: none; }

/* ============ CHECKOUT ============ */
.en-checkout {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: start center;
  padding: 24px 16px;
  overflow-y: auto;
}

.en-checkout[hidden] { display: none; }

.en-checkout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(24, 14, 11, 0.78);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.en-checkout.is-open .en-checkout-backdrop { opacity: 1; }

.en-checkout-panel {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  padding: 0 0 26px;
  border-radius: 6px;
  background: var(--en-paper);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.en-checkout.is-open .en-checkout-panel { opacity: 1; transform: translateY(0); }

.en-checkout-close { position: absolute; top: 12px; right: 12px; left: auto; }

.en-checkout-head {
  padding: 30px 32px 24px;
  background: var(--en-ink);
  color: #f3e6d0;
  border-radius: 6px 6px 0 0;
}

.en-checkout-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(243, 230, 208, 0.65);
}

.en-checkout-head h2 {
  margin: 0;
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 30px;
  line-height: 1.2;
  color: #fff;
}

.en-checkout-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.en-checkout-chips li {
  padding: 5px 11px;
  border: 1px solid rgba(243, 230, 208, 0.26);
  border-radius: 40px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f3e6d0;
}

.en-checkout-chips li span { font-weight: 400; opacity: 0.7; }

.en-checkout-steps {
  margin: 0;
  padding: 26px 32px 0;
  list-style: none;
  counter-reset: encheck;
}

.en-checkout-steps li {
  position: relative;
  padding: 0 0 20px 44px;
  counter-increment: encheck;
}

.en-checkout-steps li::before {
  content: counter(encheck);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--en-seal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.en-checkout-steps h3 {
  margin: 3px 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
}

.en-checkout-steps p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

.en-copyline {
  display: inline-block;
  margin: 0 0 10px;
  padding: 9px 14px;
  border: 1px dashed rgba(92, 67, 38, 0.4);
  border-radius: 4px;
  background: #fff;
  font-family: "Caveat", var(--font-display, Georgia), cursive;
  font-size: 21px;
  color: var(--en-ink);
}

/* Shown instead of the numbered steps once Raisely captures the envelope
   numbers itself: there is nothing left for the donor to do. */
.en-checkout-attached {
  position: relative;
  margin: 0;
  padding: 18px 24px 18px 56px;
  background: rgba(29, 122, 60, 0.07);
  border-left: 4px solid #1d7a3c;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

.en-checkout-attached::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 20px;
  width: 20px;
  height: 11px;
  border-left: 3px solid #1d7a3c;
  border-bottom: 3px solid #1d7a3c;
  transform: rotate(-45deg);
}

.en-checkout-attached strong { color: var(--en-ink); }

.en-checkout-form { padding: 6px 20px 0; }

.en-checkout-loading {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--color-text-light);
  text-align: center;
}

.en-checkout-loading[hidden] { display: none; }

.en-checkout-form iframe { width: 100%; border: none; }

.en-checkout-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 0;
  padding: 16px 32px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 12.5px;
}

.en-checkout-share {
  border: none;
  background: none;
  padding: 0;
  color: var(--en-seal);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.en-checkout-share.is-copied { color: #1d7a3c; }

.en-checkout-foot a { color: var(--en-seal); font-weight: 600; }

.en-letter-onlist {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--en-seal);
  background: rgba(165, 28, 48, 0.06);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--color-text);
}

.en-letter-onlist[hidden] { display: none; }
.en-letter-actions .en-add[hidden] { display: none; }

.en-add {
  padding: 12px 20px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.en-add:hover { border-color: var(--en-seal); color: var(--en-seal); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .en-steps { grid-template-columns: 1fr; gap: 28px; }
  .en-progress-figures { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 768px) {
  .en-hero { padding: 100px 0 70px; }
  .en-section { padding: 56px 0; }
  .en-board { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
  .en-toolbar { flex-direction: column; align-items: stretch; }
  .en-tools { flex-direction: column; align-items: stretch; }
  .en-find { width: 100%; }
  .en-find input { width: 100%; }
  .en-adder { flex-wrap: wrap; }
  .en-adder input { width: 100%; }
  .en-adder-go { width: 100%; }
  .en-chooser { padding: 18px 18px 16px; }
  .en-basket-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .en-basket-side { flex-direction: column; align-items: stretch; gap: 10px; }
  .en-basket-sum { display: flex; align-items: baseline; gap: 10px; text-align: left; }
  .en-basket-total { font-size: 24px; }
  .en-basket-math { margin: 0; }
  .en-basket-actions { gap: 8px; }
  .en-basket-give { flex: 1 1 auto; }
  :root { --en-basket-h: 200px; }
  .en-checkout-head { padding: 26px 20px 20px; }
  .en-checkout-head h2 { font-size: 24px; }
  .en-checkout-steps { padding: 22px 20px 0; }
  .en-checkout-foot { padding: 14px 20px 0; }
  .en-letter { padding: 24px 20px 28px; margin-bottom: 100px; }
  .en-band { height: 200px; }
  .en-letter-amt { font-size: 44px; }
  .en-letter-note p { font-size: 22px; }
}

@media (max-width: 480px) {
  .en-board { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
  .en-title-word { letter-spacing: 6px; text-indent: 6px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .en-float { animation: none; }
  .en-env,
  .en-env-check,
  .en-checkout-panel,
  .en-checkout-backdrop,
  .en-env-flap,
  .en-letter,
  .en-open-flap,
  .en-progress-fill,
  .en-overlay-backdrop {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  .en-env { opacity: 1; transform: none; }
  .en-env:hover { transform: none; }
  .en-overlay.is-open .en-open-flap { transform: rotateX(-174deg); }
}