/* ==========================================================================
   YITD | Buyer's Guide pop-up v2 (site side). Uses the class names already in
   src/components/GuideOptIn.astro (.fold-guide-modal ...). New elements: __media, __book, __body, __kicker, __lede, __rule, __fine.
   v2: the left panel is just a big guide book (no caption), and the copy ties the
   saving to the guide (Save $1,600+) instead of singling out $500.
   Selectors include #fold-guide-modal so this file wins over the older modal
   rules in page styles. The variable Hanken file is scoped to the modal.
   ========================================================================== */
@font-face{
  font-family:"Hanken Grotesk Variable";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/fonts/hanken-grotesk/HankenGrotesk-Variable.woff2") format("woff2");
}
#fold-guide-modal.fold-guide-modal,
#fold-guide-modal.fold-guide-modal *,
#fold-guide-modal.fold-guide-modal *::before,
#fold-guide-modal.fold-guide-modal *::after{box-sizing:border-box}
#fold-guide-modal.fold-guide-modal,
#fold-guide-modal.fold-guide-modal *{font-family:"Hanken Grotesk Variable","Hanken Grotesk",system-ui,sans-serif}
#fold-guide-modal.fold-guide-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;letter-spacing:-.1px;width:auto;height:auto}
#fold-guide-modal.fold-guide-modal[hidden]{display:none}
#fold-guide-modal .fold-guide-modal__backdrop{position:absolute;inset:0;background:rgba(20,29,16,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#fold-guide-modal .fold-guide-modal__dialog{position:relative;z-index:1;width:min(920px,100%);max-height:calc(100dvh - 48px);overflow:auto;display:grid;grid-template-columns:380px 1fr;padding:0;background:#fefbe8;color:#293b21;border-radius:14px;box-shadow:0 30px 80px rgba(12,18,9,.45),0 0 0 1px rgba(41,59,33,.08);animation:fgIn .28s cubic-bezier(.2,.7,.2,1)}
@keyframes fgIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
#fold-guide-modal .fold-guide-modal__media{position:relative;background:#293b21 radial-gradient(110% 75% at 50% 45%,#3d5533 0%,#293b21 60%,#1f2d18 100%);border-radius:14px 0 0 14px;display:flex;align-items:center;justify-content:center;padding:22px 18px;overflow:hidden}
#fold-guide-modal .fold-guide-modal__book{width:100%;max-width:344px;height:auto;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35))}
#fold-guide-modal .fold-guide-modal__body{padding:44px 44px 30px}
#fold-guide-modal .fold-guide-modal__kicker{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7c6420}
#fold-guide-modal h2{margin:0;padding:0;background:none;border:0;text-transform:none;font-weight:560;font-size:34px;line-height:1.08;letter-spacing:-.4px;color:#293b21;text-wrap:balance}
#fold-guide-modal .fold-guide-modal__lede{margin:12px 0 0;font-size:16.5px;line-height:1.5;color:#313131;text-transform:none}
#fold-guide-modal .fold-guide-modal__lede strong{font-weight:600;color:#293b21;white-space:nowrap}
#fold-guide-modal .fold-guide-modal__rule{height:1px;background:#b2bc9f;border:0;margin:22px 0 20px}
#fold-guide-modal .fold-guide-modal__slot{min-height:236px;background:transparent;border-radius:0;overflow:visible}
#fold-guide-slot.fold-guide-modal__slot iframe{background:transparent!important;border-radius:0!important;height:var(--fold-form-height,310px)!important;min-height:0!important}
#fold-guide-modal .fold-guide-modal__fine{margin:2px 0 0;font-size:13.5px;line-height:1.4;color:rgba(49,49,49,.72);text-align:center}
#fold-guide-modal .fold-guide-modal__close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;border:0;background:rgba(41,59,33,.07);color:#293b21;cursor:pointer;display:grid;place-items:center;font-size:0;line-height:0;font-weight:400;transition:background .15s}
#fold-guide-modal .fold-guide-modal__close::before,#fold-guide-modal .fold-guide-modal__close::after{content:"";position:absolute;width:16px;height:1.75px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
#fold-guide-modal .fold-guide-modal__close::after{transform:rotate(-45deg)}
#fold-guide-modal .fold-guide-modal__close:hover{background:rgba(41,59,33,.14);color:#293b21}
#fold-guide-modal .fold-guide-modal__close:focus-visible{outline:3px solid #fad86c;outline-offset:2px}
@media (max-width:767px){
 #fold-guide-modal.fold-guide-modal{padding:0;place-items:end stretch}
 #fold-guide-modal .fold-guide-modal__dialog{width:100%;max-height:calc(100dvh - 28px);grid-template-columns:1fr;border-radius:18px 18px 0 0;animation-name:fgUp}
 @keyframes fgUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
 #fold-guide-modal .fold-guide-modal__media{border-radius:18px 18px 0 0;padding:16px 20px 12px;min-height:0}
 #fold-guide-modal .fold-guide-modal__book{width:auto;max-width:none;height:216px;filter:drop-shadow(0 12px 14px rgba(0,0,0,.35))}
 #fold-guide-modal .fold-guide-modal__close{top:12px;right:12px;width:40px;height:40px;padding:0;border-radius:50%;background:rgba(254,251,232,.14);color:#fefbe8;font-size:0}
 #fold-guide-modal .fold-guide-modal__close:hover{background:rgba(254,251,232,.28);color:#fefbe8}
 #fold-guide-modal .fold-guide-modal__body{padding:22px 20px calc(18px + env(safe-area-inset-bottom))}
 #fold-guide-modal h2{font-size:26px}
 #fold-guide-modal .fold-guide-modal__lede{font-size:15.5px;margin-top:8px}
 #fold-guide-modal .fold-guide-modal__rule{margin:16px 0 14px}
}
@media (prefers-reduced-motion:reduce){#fold-guide-modal .fold-guide-modal__dialog{animation:none}}