/* ============================================================
   The "Island tips, once a month" band that closes the journal pages (partials/site/newsletter-band.blade.php).
   Classes are prefixed cdf-nl-. The band sits between two sections with the same room above and below it.
   ============================================================ */

.cdf-nl-section { padding-block: 0 clamp(56px, 8vw, 104px); }

.cdf-nl {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(28px, 5vw, 64px);
  padding: clamp(32px, 5.2vw, 68px);
  border-radius: 28px;
  color: var(--tc-newsletter-ffffff,#fff);
  background:
    radial-gradient(900px 420px at 100% -10%, var(--tc-newsletter-e5503a4d,rgba(229, 80, 58, .30)), transparent 60%),
    radial-gradient(700px 380px at -8% 112%, var(--tc-newsletter-3d9caa42,rgba(61, 156, 170, .26)), transparent 62%),
    linear-gradient(135deg, var(--tc-newsletter-0f2a3b,#0f2a3b) 0%, var(--tc-newsletter-123347,#123347) 55%, var(--tc-newsletter-0d2433,#0d2433) 100%);
  box-shadow: 0 1px 2px var(--tc-newsletter-0a1e2b1f,rgba(10, 30, 43, .12)), 0 28px 60px -24px var(--tc-newsletter-0a1e2b8c,rgba(10, 30, 43, .55));
}
.cdf-nl::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(var(--tc-newsletter-ffffff17,rgba(255, 255, 255, .09)) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, var(--tc-newsletter-000000,#000) 0%, transparent 55%); mask-image: linear-gradient(120deg, var(--tc-newsletter-000000,#000) 0%, transparent 55%);
}

/* ---- the words ---- */
.cdf-nl-copy { text-align: left; }
.cdf-nl-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 999px;
  background: var(--tc-newsletter-ffffff17,rgba(255, 255, 255, .09)); border: 1px solid var(--tc-newsletter-ffffff29,rgba(255, 255, 255, .16));
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tc-newsletter-ffd9d0,#ffd9d0);
}
.cdf-nl-eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }
.cdf-nl h2 {
  margin: 18px 0 0; font-family: var(--serif, Georgia, serif); font-weight: 500; color: var(--tc-newsletter-ffffff,#fff);
  font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
}
.cdf-nl-copy > p { margin: 16px 0 0; max-width: 46ch; color: var(--tc-newsletter-c3d1da,#c3d1da); font-size: 17px; line-height: 1.6; }
.cdf-nl-perks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.cdf-nl-perks li { display: flex; align-items: center; gap: 12px; color: var(--tc-newsletter-e6eef3,#e6eef3); font-size: 15.5px; font-weight: 500; }
.cdf-nl-perks svg {
  width: 24px; height: 24px; padding: 5px; flex-shrink: 0; border-radius: 50%; color: var(--tc-newsletter-ffffff,#fff); background: var(--coral, #e5503a);
  box-shadow: 0 4px 12px -2px var(--tc-newsletter-e5503a8c,rgba(229, 80, 58, .55));
}

/* ---- the form ---- */
.cdf-nl-card {
  padding: clamp(24px, 3vw, 34px); border-radius: 22px;
  background: var(--tc-newsletter-ffffff12,rgba(255, 255, 255, .07)); border: 1px solid var(--tc-newsletter-ffffff26,rgba(255, 255, 255, .15));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--tc-newsletter-ffffff14,rgba(255, 255, 255, .08));
}
.cdf-nl-label { margin: 0 0 16px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--tc-newsletter-ffffff,#fff); }
.cdf-nl-card form { display: grid; gap: 12px; margin: 0; }
.cdf-nl-card input[type="email"] {
  width: 100%; height: 54px; padding: 0 20px; border-radius: 14px; font: inherit; font-size: 16px; color: var(--tc-newsletter-ffffff,#fff);
  background: var(--tc-newsletter-ffffff1a,rgba(255, 255, 255, .1)); border: 1.5px solid var(--tc-newsletter-ffffff33,rgba(255, 255, 255, .2)); outline: none; box-shadow: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.cdf-nl-card input[type="email"]::placeholder { color: var(--tc-newsletter-9fb2be,#9fb2be); }
.cdf-nl-card input[type="email"]:focus { border-color: var(--tc-newsletter-ff8a76,#ff8a76); background: var(--tc-newsletter-ffffff24,rgba(255, 255, 255, .14)); box-shadow: 0 0 0 4px var(--tc-newsletter-e5503a40,rgba(229, 80, 58, .25)); }
.cdf-nl-card .btn { width: 100%; height: 54px; justify-content: center; border-radius: 14px; font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.cdf-nl-card [data-newsletter-msg] { max-width: none; margin: 12px 0 0; font-size: 14.5px; }
.cdf-nl-card .note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--tc-newsletter-93a8b5,#93a8b5); }
.cdf-nl-card .note a { color: var(--tc-newsletter-c3d1da,#c3d1da); text-decoration: underline; text-underline-offset: 2px; }
.cdf-nl-card .note a:hover { color: var(--tc-newsletter-ffffff,#fff); }

/* ---- narrow screens: one column ---- */
@media (max-width: 880px) {
  .cdf-nl { grid-template-columns: 1fr; border-radius: 22px; }
  .cdf-nl-copy > p { max-width: none; }
}
@media (max-width: 480px) {
  .cdf-nl-section { padding-inline: 0; }
  .cdf-nl { border-radius: 20px; padding: 28px 20px; }
  .cdf-nl-card { padding: 22px 18px; }
}