.optin{
  --oi-top:clamp(12px,12vh,128px);
  box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - var(--oi-top) - 16px);
  margin:var(--oi-top) auto auto;padding:0;border:0;overflow:auto;
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity 220ms ease-out,transform 220ms ease-out;
}
.optin[open].is-in{opacity:1;transform:none}
.optin::backdrop{background:rgba(18,16,28,.56);opacity:0;transition:opacity 220ms ease-out}
.optin.is-in::backdrop{opacity:1}
html.optin-lock{overflow:hidden}
.optin-panel{position:relative;padding:44px 32px 32px}
.optin h2{margin:0 0 12px;font-size:clamp(24px,1.8vw,26px);line-height:1.15;letter-spacing:-.016em;font-weight:500;color:var(--fg)}
.optin .lead{margin:0 0 28px;color:var(--fg);max-width:none}

.optin-close{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin:0;border:0;border-radius:3px;background:none;color:var(--fg);
  cursor:pointer;opacity:.7;transition:opacity .16s linear}
.optin-close:hover{opacity:1}
.optin-close:active{opacity:.6}
.optin-close:focus-visible{outline:2px solid var(--fg);outline-offset:-4px;opacity:1}

.optin .oi-turnstile{margin:0 0 24px;min-height:65px}

.optin .fc{margin:0}
.optin .fdone:not(.ffail){font-size:var(--fs-body);line-height:1.45;letter-spacing:0;
  grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:center}
.optin .fdone .t-success-check,.optin .fdone .t-success-check svg{width:24px;height:24px}

@media (hover:none){.tlink[data-optin]{text-decoration:underline}}

@media (max-width:760px){
  .optin{width:calc(100vw - 24px);max-height:calc(100dvh - var(--oi-top) - 12px)}
  .optin-panel{padding:48px 20px 24px}
}
@media (prefers-reduced-motion:reduce){
  .optin,.optin::backdrop{transition:none;transform:none}
}