/* Inside TrueNext popup on articles: a forest header over a white form, in the site design. */
.nlpop{
  border:0;padding:0;margin:auto;background:transparent;color:var(--ink);
  width:min(460px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible;
}
.nlpop::backdrop{background:rgba(0,26,19,.58);backdrop-filter:blur(2px)}
.nlpop[open]{animation:nlpop-in .45s var(--ease)}
.nlpop[open]::backdrop{animation:nlpop-fade .3s ease}
@keyframes nlpop-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes nlpop-fade{from{opacity:0}to{opacity:1}}

.nlpop-card{
  position:relative;background:var(--white);border-radius:var(--r-lg);overflow:hidden auto;
  max-height:calc(100dvh - 32px);
  box-shadow:0 40px 90px -30px rgba(0,20,14,.6),0 6px 18px -6px rgba(0,20,14,.25);
}
.nlpop-head{
  position:relative;background:var(--forest);color:#E9F0E4;padding:30px 30px 26px;
  border-top:4px solid var(--lime);
  background-image:radial-gradient(120% 90% at 100% 0,rgba(174,222,61,.16),transparent 60%);
}
.nlpop-badge{
  display:grid;place-items:center;width:46px;height:46px;border-radius:99px;margin-bottom:18px;
  background:rgba(174,222,61,.12);border:1px solid rgba(174,222,61,.4);color:var(--lime);
}
.nlpop-badge svg{width:22px;height:22px}
.nlpop-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--lime)}
.nlpop-title{margin-top:8px;font-size:clamp(1.5rem,1.2rem + 1vw,1.85rem);color:#fff}
.nlpop-lede{margin-top:10px;font-size:.96875rem;line-height:1.6;color:#C6D6BF}
.nlpop-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:99px;
  display:grid;place-items:center;padding:0;cursor:pointer;
  background:rgba(233,240,228,.08);border:1px solid rgba(233,240,228,.2);color:#E9F0E4;
  transition:background-color .2s var(--ease),border-color .2s var(--ease);
}
.nlpop-close:hover{background:rgba(233,240,228,.16);border-color:rgba(233,240,228,.4)}
.nlpop-close:focus-visible{outline-color:var(--lime)}
.nlpop-close svg{width:16px;height:16px}

.nlpop-form{padding:24px 30px 26px}
.nlpop-form .form-fields{display:grid;gap:14px}
.nlpop-submit{width:100%;margin-top:4px}
.nlpop-note{font-size:.75rem;line-height:1.55;color:var(--ink-2);text-align:center}
.nlpop-note a{color:var(--forest-2)}
.nlpop-form .form-err{font-size:.8125rem;color:#B3261E;font-weight:600}
.nlpop-form .form-ok{display:none;text-align:center;padding:20px 18px;font-weight:500;line-height:1.6}
.nlpop-form .form-ok b{display:block;font-family:var(--ff-display);font-size:1.125rem;font-weight:600;margin-bottom:4px}
.nlpop-form[data-sent="true"] .form-ok{display:block}
.nlpop-form .form-ok span{display:block}
.nlpop-done{display:flex;margin:16px auto 0}
.nlpop-card:focus{outline:none}

/* phones: a sheet rising from the bottom edge */
@media(max-width:620px){
  .nlpop{width:100%;max-height:92dvh;margin:auto 0 0}
  .nlpop-card{border-radius:14px 14px 0 0;max-height:92dvh}
  .nlpop[open]{animation-name:nlpop-up}
  .nlpop-head{padding:24px 20px 20px}
  .nlpop-badge{width:40px;height:40px;margin-bottom:14px}
  .nlpop-badge svg{width:19px;height:19px}
  .nlpop-form{padding:20px 20px calc(22px + env(safe-area-inset-bottom))}
}
@keyframes nlpop-up{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .nlpop[open],.nlpop[open]::backdrop{animation:none}
}