/* Self-contained: no global button, form, container, or modal overrides. */
.newsletter-band {
  background: #f4f3ff; border-block-start: 1px solid #e2e1f2;
  padding: clamp(40px, 5vw, 72px) 24px; color: #242438;
}
.newsletter-band-inner {
  max-width: 1440px; margin-inline: auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center;
}
.newsletter-eyebrow {
  display: block; color: #e7240c; font-size: 12px; font-weight: 800;
  letter-spacing: .055em; line-height: 1.5; margin-block-end: 16px;
}
.newsletter-band h2 {
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3;
  margin: 0 0 14px; font-weight: 750; color: #181840;
}
.newsletter-band-copy > p { margin: 0; max-width: 580px; line-height: 1.8; color: #626276; font-size: 16px; }
.newsletter-form { margin: 0; text-align: start; }
.newsletter-form[hidden], [data-newsletter-fields][hidden] { display: none; }
.newsletter-label { display: block; color: #30304d; font-size: 13px; font-weight: 650; margin-block-end: 8px; }
.newsletter-form-row { display: flex; align-items: stretch; gap: 10px; }
.newsletter-input {
  box-sizing: border-box; min-width: 0; width: 100%; flex: 1;
  border: 1px solid #cfcee1; border-radius: 10px; padding: 14px 16px;
  background: #fff; color: #242438; font: inherit; font-size: 16px;
  line-height: 1.4; box-shadow: none; outline-offset: 3px;
}
.newsletter-input:focus-visible { outline: 2px solid #5551dd; border-color: #5551dd; }
.newsletter-input[aria-invalid="true"] { border-color: #c22c18; }
.newsletter-submit {
  border: 1px solid #e7240c; border-radius: 10px; padding: 14px 22px;
  background: #e7240c; color: #fff; font: inherit; font-size: 15px;
  font-weight: 650; line-height: 1.4; white-space: nowrap; cursor: pointer;
  transition: background .15s ease;
}
.newsletter-submit:hover { background: #c91e09; border-color: #c91e09; }
.newsletter-submit:focus-visible, .newsletter-text-button:focus-visible, .newsletter-close:focus-visible { outline: 3px solid #5551dd; outline-offset: 4px; }
.newsletter-submit:disabled { opacity: .65; cursor: wait; }
.newsletter-consent { margin: 12px 0 0; color: #66667c; font-size: 12px; line-height: 1.8; }
.newsletter-consent a { color: #3c397e; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.newsletter-result { margin: 0; font-size: 14px; line-height: 1.6; color: #a62816; }
.newsletter-result:not(:empty) { margin-block-start: 12px; }
.newsletter-result[data-success="true"] {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 18px 20px;
  border: 1px solid #bee5d1; border-radius: 12px; background: #effaf4; color: #13704b;
  font-size: 16px; font-weight: 600;
}
.newsletter-result[data-success="true"]::before { content: '\2713'; font-size: 24px; flex-shrink: 0; }
.newsletter-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.newsletter-text-button { font: inherit; font-size: 13px; border: none; background: none; color: #656579; text-decoration: underline; text-underline-offset: 4px; padding: 8px 0; cursor: pointer; }
.newsletter-manual-trigger { margin-block-start: 6px; }
.newsletter-manual-trigger[hidden] { display: none; }
.newsletter-dialog {
  padding: 0; border: 1px solid #e3e1f3; border-radius: 24px;
  box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 40px); margin: auto; color: #242438;
  background: #fff; box-shadow: 0 28px 90px rgb(18 18 58 / 25%); overflow: auto;
  font-family: Inter, 'Noto Sans TC', sans-serif; z-index: 2000;
}
.newsletter-dialog:not([open]) { display: none; }
.newsletter-dialog::backdrop { background: rgb(18 18 42 / 48%); backdrop-filter: blur(3px); }
.newsletter-dialog[open] { animation: newsletter-enter .22s ease-out; }
.newsletter-dialog-content { position: relative; padding: 36px; }
.newsletter-close { position: absolute; inset-inline-end: 16px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3f2fa; color: #55546c; padding: 0; font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.newsletter-icon { position: relative; width: 58px; height: 58px; display: grid; place-items: center; background: #efedff; color: #5551dd; border-radius: 16px; margin-block-end: 24px; font-size: 27px; }
.newsletter-icon-spark { position: absolute; inset-inline-end: -7px; top: -10px; color: #e7240c; font-size: 23px; }
.newsletter-dialog h2 { color: #181840; margin: 0 0 16px; font-size: 30px; line-height: 1.35; font-weight: 750; }
.newsletter-description { color: #626276; font-size: 15px; line-height: 1.8; margin: 0 0 24px; }
.newsletter-dialog .newsletter-form-row { flex-direction: column; }
.newsletter-dialog .newsletter-submit { width: 100%; }
.newsletter-dismiss { display: block; margin: 12px auto 0; text-align: center; }
.newsletter-dialog[data-subscribed="true"] .newsletter-icon { background: #e8f8ef; color: #13704b; }
.newsletter-dialog[data-subscribed="true"] .newsletter-icon-spark { display: none; }
.newsletter-dialog[data-subscribed="true"] .newsletter-dismiss {
  min-width: 150px; margin-block-start: 8px; padding: 12px 24px;
  border-radius: 10px; background: #e7240c; color: #fff; font-size: 15px;
  font-weight: 650; text-decoration: none;
}
.newsletter-dialog[data-subscribed="true"] .newsletter-dismiss:hover { background: #c91e09; }
.newsletter-response-page { max-width: 850px; margin: 80px auto; padding: 24px; }
@keyframes newsletter-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 850px) {
  .newsletter-band-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .newsletter-band { padding-inline: 20px; }
  .newsletter-band .newsletter-form-row { flex-direction: column; }
  .newsletter-dialog-content { padding: 30px 24px 24px; }
  .newsletter-dialog h2 { font-size: 25px; }
  .newsletter-dialog .newsletter-eyebrow { font-size: 11px; }
  .newsletter-icon { margin-block-end: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .newsletter-dialog[open] { animation: none; }
  .newsletter-submit { transition: none; }
  .newsletter-dialog::backdrop { backdrop-filter: none; }
}