/* Homepage graduated from the approved canvas; other pages keep style.css. */
body.bag-proposal {
  --bp-yellow: #ffd21c;
  --bp-ink: #22251f;
  --bp-muted: #62665e;
  --bp-paper: #f8f5e9;
  --bp-card: #fffdf5;
  --bp-line: #e4dfce;
  margin: 0;
  min-height: 100dvh;
  color: var(--bp-ink);
  background: var(--bp-paper);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}
.bag-proposal *, .bag-proposal *::before, .bag-proposal *::after { box-sizing: border-box; }
.bag-proposal button { font: inherit; }
.bag-proposal button:focus-visible { outline: 3px solid #8b6500; outline-offset: 3px; }
.bp-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.bp-header {
  min-height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 max(20px, calc((100% - 1120px) / 2));
  background: var(--bp-yellow);
  border-bottom: 1px solid rgba(34,37,31,.12);
}
.bp-brand { display: flex; align-items: center; gap: 12px; }
.bp-logo { width: 48px; height: 43px; object-fit: contain; }
.bp-brand-copy { color: #765500; font: 700 17px/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.bp-brand-copy[class~="text-[color:var(--bp-ink)]"] { color: var(--bp-ink); }
.bp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(48px, 8vw, 96px) 0 58px;
}
.bp-copy { position: relative; z-index: 1; }
.bp-title {
  max-width: 590px;
  margin: 0;
  font: 700 clamp(42px, 6.3vw, 76px)/.99 'Space Grotesk', sans-serif;
  letter-spacing: -.075em;
}
.bp-title em { color: #ad861e; font-style: normal; }
.bp-lede {
  max-width: 440px;
  margin: 23px 0 0;
  color: #52574f;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
}
.bp-bag-stage {
  min-height: 355px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 46% 46% 36% 36% / 44% 44% 28% 28%;
  background: var(--bp-yellow);
}
.bp-bag-stage::before {
  position: absolute;
  inset: 7% 4% 0;
  border: 1px solid rgba(34,37,31,.12);
  border-radius: inherit;
  content: '';
}
.bp-bag-image {
  position: relative;
  width: 112%;
  max-width: 580px;
  height: auto;
  transform: translate(1%, 4%);
  filter: drop-shadow(0 20px 18px rgba(50,39,0,.16));
  animation: bp-arrive .8s cubic-bezier(.2,.8,.2,1) both;
}
.bp-action-panel {
  max-width: 480px;
  margin-top: 27px;
  padding: 17px 18px 18px;
  border: 1px solid #d8d0b8;
  border-radius: 15px;
  background: rgba(255,253,245,.78);
}
.bp-cta {
  width: 100%;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 19px;
  border: 0;
  border-radius: 10px;
  color: #22251f;
  background: var(--bp-yellow);
  cursor: pointer;
  font-weight: 700;
  transition: transform .18s ease, background-color .18s ease;
}
.bp-cta:hover { transform: translateY(-2px); background: #ffdc48; }
.bp-cta span:last-child { font-size: 21px; }
.bp-lower { padding: 0 0 72px; }
.bp-trust-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bp-trust-card {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 12px 18px;
  border: 1.5px solid rgba(255,209,0,.4);
  border-radius: 20px;
  background: #fffcf0;
  box-shadow: 0 8px 20px rgba(255,209,0,.08);
  text-align: center;
}
.bp-trust-icon {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.03);
}
.bp-trust-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bp-trust-card h2 { margin: 0; color: #1a1a1a; font: 700 16px/1.25 'DM Sans', sans-serif; }
.bp-footer {
  padding: 19px 0 27px;
  border-top: 1px solid var(--bp-line);
  color: #73766e;
  font-size: 11px;
  line-height: 1.5;
}
.bp-footer-row { display: flex; justify-content: space-between; gap: 18px; }
.bp-footer button { padding: 0; border: 0; color: #454941; background: none; text-decoration: underline; cursor: pointer; }
.bp-conditions {
  width: min(calc(100% - 36px), 500px);
  max-height: min(90dvh, 720px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bp-ink);
}
.bp-conditions::backdrop { background: rgba(26,28,23,.58); }
.bp-dialog {
  width: 100%;
  padding: clamp(23px, 6vw, 34px);
  border: 1px solid #ddd5bf;
  border-radius: 20px;
  background: var(--bp-card);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  animation: bp-rise .22s ease both;
}
.bp-dialog-top { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.bp-dialog-kicker { color: #78631b; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bp-dialog h2 { margin: 9px 0 0; font: 600 clamp(25px, 6vw, 34px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.055em; }
.bp-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--bp-line);
  border-radius: 50%;
  color: var(--bp-ink);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}
.bp-dialog-body { margin: 17px 0 0; color: #555950; font-size: 14px; line-height: 1.65; }
.hidden { display: none !important; }
.no-js { display: block; padding: 12px 16px; text-align: center; }
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  background: var(--bp-ink);
}
@keyframes bp-arrive { from { opacity: 0; transform: translate(1%, 10%); } to { opacity: 1; transform: translate(1%, 4%); } }
@keyframes bp-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 741px) {
  .bp-hero { column-gap: 64px; row-gap: 18px; padding-top: 56px; align-items: start; }
  .bp-copy { display: contents; }
  .bp-title { grid-column: 1; grid-row: 2; font-size: clamp(44px, 5vw, 64px); }
  .bp-lede { grid-column: 1; grid-row: 3; margin: 0; }
  .bp-action-panel { grid-column: 1; grid-row: 4; margin: 4px 0 0; }
  .bp-bag-stage { grid-column: 2; grid-row: 1 / span 4; align-self: center; min-height: 410px; }
}
@media (max-width: 740px) {
  .bp-shell { width: min(100% - 32px, 520px); }
  .bp-header { width: 100%; max-width: none; min-height: 62px; padding: 0 16px; }
  .bp-logo { width: 42px; height: 38px; }
  .bp-hero { grid-template-columns: 1fr; gap: 23px; padding: 37px 0 43px; }
  .bp-copy { display: contents; }
  .bp-title { order: 1; max-width: 500px; font-size: clamp(43px, 12vw, 62px); }
  .bp-lede { order: 2; margin-top: -7px; font-size: 16px; }
  .bp-bag-stage { order: 3; min-height: 255px; margin: 2px 5px 0; }
  .bp-bag-image { width: 108%; max-width: 470px; }
  .bp-action-panel { order: 4; margin: 0; padding: 15px; }
  .bp-lower { padding-bottom: 45px; }
  .bp-trust-cards { gap: 8px; }
  .bp-trust-card { padding: 14px 8px 16px; }
  .bp-trust-card h2 { font-size: 14px; }
  .bp-footer-row { display: block; }
  .bp-footer-row > * + * { display: block; margin-top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .bag-proposal *, .bag-proposal *::before, .bag-proposal *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Scoped coupon back-offer modal for the homepage. The shared script injects this modal on /home, which only loads home.css. */
body.bag-proposal #coupon-modal { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:16px; background:rgba(25,26,29,.78); backdrop-filter:blur(5px); }
body.bag-proposal #coupon-modal.hidden { display:none !important; pointer-events:none; }
body.bag-proposal #coupon-modal .modal-card { position:relative; box-sizing:border-box; width:min(100%,390px); max-height:calc(100dvh - 32px); overflow:auto; padding:22px 20px; border:1px solid #eee9dc; border-radius:22px; background:#fff; color:#22211e; text-align:left; box-shadow:0 24px 58px rgba(0,0,0,.30); }
body.bag-proposal #coupon-modal .coupon-modal-close { position:absolute; top:12px; right:12px; z-index:1; width:34px; height:34px; display:grid; place-items:center; padding:0 0 3px; border:1px solid #e5e1d9; border-radius:50%; background:#fff; color:#5e5b54; font:inherit; font-size:25px; line-height:1; cursor:pointer; }
body.bag-proposal #coupon-modal .coupon-modal-close:hover { background:#f7f5ef; }
body.bag-proposal #coupon-modal .coupon-modal-close:focus-visible { outline:3px solid #25221b; outline-offset:2px; }
body.bag-proposal #coupon-modal .modal-badge { display:inline-flex; padding:6px 12px; margin:0 0 12px; border-radius:999px; background:#fff3bf; color:#735c00; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
body.bag-proposal #coupon-modal .modal-card h3 { margin:0 0 14px; color:#22211e; font:800 clamp(1.55rem,6vw,1.85rem)/1.08 'DM Sans',sans-serif; letter-spacing:-.05em; }
body.bag-proposal #coupon-modal .coupon-value-card { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:142px; margin:0 0 14px; padding:10px 12px; overflow:hidden; border:1px solid #e9e6df; border-radius:16px; background:#fff; }
body.bag-proposal #coupon-modal .coupon-value-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
body.bag-proposal #coupon-modal .coupon-value-label { color:#6e6c66; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
body.bag-proposal #coupon-modal .coupon-value-amount { color:#22211e; font-size:2rem; font-weight:850; letter-spacing:-.06em; line-height:1; white-space:nowrap; }
body.bag-proposal #coupon-modal .coupon-value-amount>span:first-child { color:#927500; font-size:.95rem; letter-spacing:0; }
body.bag-proposal #coupon-modal .coupon-value-caption { color:#77746c; font-size:.72rem; }
body.bag-proposal #coupon-modal .coupon-hero { flex:0 0 126px; width:126px; height:126px; display:grid; place-items:center; margin:0; overflow:hidden; }
body.bag-proposal #coupon-modal .coupon-hero img { display:block; width:100%; height:100%; object-fit:contain; transform:scale(1.08); filter:none; mix-blend-mode:multiply; }
body.bag-proposal #coupon-modal .modal-card p { margin:0 0 8px; color:#4d4b45; font-size:.92rem; line-height:1.45; }
body.bag-proposal #coupon-modal .coupon-subtitle { display:block; margin:0 0 16px; color:#77746c; font-size:.8rem; }
body.bag-proposal #coupon-modal .modal-card .btn-primary { width:100%; min-height:54px; border:0; border-radius:13px; background:#ffd100; color:#211f19; font:800 1rem 'DM Sans',sans-serif; box-shadow:0 5px 0 #e3bb00; cursor:pointer; }
@media(max-width:380px){ body.bag-proposal #coupon-modal{padding:12px} body.bag-proposal #coupon-modal .modal-card{padding:19px 16px;border-radius:19px} body.bag-proposal #coupon-modal .coupon-value-card{min-height:132px;padding:9px} body.bag-proposal #coupon-modal .coupon-hero{flex-basis:112px;width:112px;height:112px} body.bag-proposal #coupon-modal .coupon-value-amount{font-size:1.8rem} }