@font-face {
  font-family: "Fat Frank";
  src: url("../fonts/fat-frank-heavy.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

.flow-newsletter {
  --nl-red: #e52b23;
  --nl-ink: #171210;
  --nl-paper: #f4f0ec;
  --nl-line: #e5ddd7;
  width: 100%;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: block !important;
  padding: 0 !important;
  background: #fff !important;
  color: var(--nl-ink) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.flow-newsletter .container {
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: minmax(245px, 35%) minmax(0, 1fr) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.flow-newsletter .header {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start !important;
  padding: 32px 30px !important;
  border: 0 !important;
  background: radial-gradient(circle at 28% 30%, rgba(229, 43, 35, .32), transparent 30%), linear-gradient(145deg, #15110f 0%, #231815 62%, #351411 100%) !important;
  color: #fff !important;
  text-align: left !important;
  overflow: hidden;
}

.flow-newsletter .header::after {
  content: "";
  position: absolute;
  right: -145px;
  bottom: -155px;
  width: 330px;
  height: 330px;
  border: 58px solid rgba(255, 255, 255, .045);
  border-radius: 50%;
}

.newsletter-brand-logo,
.newsletter-brand-copy,
.newsletter-benefits { position: relative; z-index: 2; }

.newsletter-brand-logo {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.flow-newsletter .newsletter-brand-logo .logo {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px;
  object-fit: contain;
}

.newsletter-eyebrow,
.form-kicker {
  display: block;
  margin-bottom: 10px;
  color: #ffaaa5;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.newsletter-brand-copy h1,
.flow-newsletter .form-section h2 {
  margin: 0 !important;
  font-family: "Fat Frank", "DM Sans", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
}

.flow-newsletter .header .newsletter-brand-copy h1 { color: #fff !important; font-size: clamp(30px, 4.5vw, 43px); line-height: .98; }
.flow-newsletter .header .newsletter-brand-copy h1 em { color: #ff4b42 !important; font-style: normal; }
.newsletter-brand-copy p { max-width: 310px; margin: 14px 0 0; color: rgba(255, 255, 255, .6); font-size: 11px; line-height: 1.55; }
.newsletter-benefits { width: 100%; display: grid; gap: 9px; }
.newsletter-benefits span { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .72); font-size: 9px; font-weight: 850; }
.newsletter-benefits b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #ff7770; font-size: 8px; }

.flow-newsletter .content {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 34px clamp(28px, 5vw, 52px) !important;
  background: linear-gradient(180deg, #fff 0%, #fdfbf9 100%) !important;
  overflow: visible;
}

.flow-newsletter .form-section { width: 100%; max-width: 520px; margin: 0 auto; }
.flow-newsletter .form-kicker { color: var(--nl-red); }
.flow-newsletter .form-section h2 { color: var(--nl-ink) !important; font-size: clamp(31px, 5vw, 45px) !important; line-height: .96 !important; text-align: left !important; }
.flow-newsletter .form-intro { max-width: 440px; margin: 12px 0 22px; color: #7f746d; font-size: 11px; line-height: 1.55; }
.flow-newsletter .newsletter-form,
.flow-newsletter .form-grid { display: grid; gap: 12px; }
.flow-newsletter .form-grid { grid-template-columns: minmax(0, 1fr) 120px; }
.flow-newsletter .form-group { min-width: 0; margin: 0 !important; }
.flow-newsletter .form-group-email { grid-column: 1 / -1; grid-row: 1; }
.flow-newsletter .form-label { margin: 0 0 6px !important; color: #332a26 !important; font-size: 9px !important; font-weight: 900 !important; }

.flow-newsletter .form-control {
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 14px !important;
  border: 1px solid var(--nl-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--nl-ink) !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

.flow-newsletter .form-control:focus { outline: none !important; border-color: rgba(229, 43, 35, .65) !important; box-shadow: 0 0 0 4px rgba(229, 43, 35, .08) !important; }

.flow-newsletter .btn {
  width: 100%;
  min-height: 54px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(105deg, #e52b23, #ff4b40) !important;
  color: #fff !important;
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 12px 28px rgba(229, 43, 35, .22) !important;
}

.flow-newsletter .btn b { font-size: 22px; line-height: 1; }
.flow-newsletter .privacy-notice { margin: 0 !important; padding: 10px 12px !important; border: 1px solid var(--nl-line) !important; border-radius: 12px !important; background: var(--nl-paper) !important; color: #81766f !important; font-size: 8px !important; line-height: 1.5; text-align: left !important; }
.flow-newsletter .privacy-link,
.flow-newsletter .link { display: inline !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--nl-red) !important; font: inherit !important; font-weight: 900 !important; text-decoration: none !important; cursor: pointer; }
.flow-newsletter .message { width: 100%; margin: 0 0 16px !important; padding: 12px 14px !important; border-radius: 13px !important; font-size: 10px !important; line-height: 1.45; }

/* Privacy overlay: one frame and exactly one scroll surface. */
.flow-newsletter .modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: rgba(18, 14, 12, .76) !important;
  backdrop-filter: blur(10px);
  overflow: hidden !important;
}

.flow-newsletter .modal[style*="block"] { display: grid !important; place-items: center !important; }

.flow-newsletter .modal-content {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.flow-newsletter .modal-header {
  position: relative !important;
  min-height: 78px;
  padding: 21px 66px 20px 24px !important;
  border: 0 !important;
  background: linear-gradient(120deg, #171210, #2d1d18) !important;
  color: #fff !important;
}

.flow-newsletter .modal-header h2 { margin: 0 !important; color: #fff !important; font-family: "Fat Frank", "DM Sans", sans-serif !important; font-size: 24px !important; line-height: 1.05; }
.flow-newsletter .modal-header .close { position: absolute; right: 18px; top: 17px; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .1); color: #fff !important; font: inherit; font-size: 24px !important; line-height: 1; cursor: pointer; }
.flow-newsletter .modal-body { min-height: 0; padding: 30px clamp(25px, 6vw, 70px) !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #bcaea5 transparent; }
.flow-newsletter .modal-body > * { max-width: 740px; margin-left: auto !important; margin-right: auto !important; }
.flow-newsletter .modal-body::-webkit-scrollbar { width: 7px; }
.flow-newsletter .modal-body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: #bcaea5; background-clip: padding-box; }
.flow-newsletter .modal-body h3 { margin: 22px 0 8px !important; color: var(--nl-ink) !important; font-size: 15px !important; }
.flow-newsletter .modal-body h3:first-child { margin-top: 0 !important; }
.flow-newsletter .modal-body p,
.flow-newsletter .modal-body li { color: #746963 !important; font-size: 11px !important; line-height: 1.65 !important; }

@media (max-width: 680px) {
  .flow-newsletter .container { display: block !important; }
  .flow-newsletter .header { min-height: auto; display: grid !important; grid-template-columns: 64px minmax(0, 1fr); align-items: center !important; gap: 13px; padding: 16px 58px 17px 15px !important; border-radius: 0 0 22px 22px !important; }
  .newsletter-brand-logo { width: 64px; height: 64px; border-radius: 18px; }
  .newsletter-brand-copy .newsletter-eyebrow { margin-bottom: 6px; font-size: 7px; }
  .newsletter-brand-copy h1 { font-size: 24px; }
  .newsletter-brand-copy p,
  .newsletter-benefits { display: none; }
  .flow-newsletter .content { min-height: 0; display: block; padding: 25px 16px calc(30px + env(safe-area-inset-bottom)) !important; }
  .flow-newsletter .form-section h2 { font-size: 34px !important; }
  .flow-newsletter .form-intro { margin-bottom: 19px; }
  .flow-newsletter .form-grid { grid-template-columns: 1fr; }
  .flow-newsletter .form-group-email { grid-column: auto; grid-row: auto; }
  .flow-newsletter .form-control { min-height: 52px !important; }
  .flow-newsletter .btn { min-height: 55px !important; }
  .flow-newsletter .modal { padding: 0 !important; }
  .flow-newsletter .modal-content { width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .flow-newsletter .modal-header { min-height: 70px; padding: 18px 60px 17px 18px !important; }
  .flow-newsletter .modal-header h2 { font-size: 20px !important; }
  .flow-newsletter .modal-header .close { right: 13px; top: 13px; }
  .flow-newsletter .modal-body { padding: 20px 18px !important; }
}