/* Opt-in forms (oi-*): one look for the live form, landing page, placements and every preview. Per-form colours come from /opt-in/style/{id}.css. */
.oi{--oi-button:#FF1493;--oi-button-text:#FFFFFF;--oi-radius:12px;--oi-pad:14px 22px;--oi-size:19px;position:relative;overflow:hidden;border-radius:16px;background:#fff;color:#14213d;
  padding:28px 22px;max-width:620px;margin:0 auto;box-shadow:0 10px 30px #092c501a;font-family:inherit}
.oi-inner{position:relative;z-index:1;display:grid;gap:10px;justify-items:center;text-align:center;max-width:440px;margin:0 auto}
.oi-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.oi-headline{margin:0;font:800 clamp(30px,6vw,46px)/1.05 "Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif;color:#092C50;text-shadow:2px 2px 0 #fff}
.oi-sub{margin:0;font-weight:700;font-size:17px;color:#092C50}
.oi-fields{display:grid;gap:10px;width:100%;margin:6px 0 0}
.oi-fields input[type=email],.oi-fields input[name=firstName]{width:100%;padding:12px 14px;border:1px solid #cfd8e3;border-radius:8px;font-size:16px;background:#fff;color:#14213d;box-sizing:border-box}
.oi-button{background:var(--oi-button);color:var(--oi-button-text);border:0;border-radius:var(--oi-radius);padding:var(--oi-pad);font-size:var(--oi-size);font-weight:800;letter-spacing:.02em;cursor:pointer;width:100%}
.oi-size-small .oi-button,.oi-size-medium .oi-button{width:auto;justify-self:center}
.oi-consent{display:flex;gap:8px;align-items:flex-start;text-align:left;font-size:13px;line-height:1.35}
.oi-consent input{margin-top:3px;flex:none}
.oi-note{margin:0;font-size:12px;color:#5a6b85}
.oi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.oi [hidden]{display:none!important}
/* Templates: pure CSS patterns, so they stay sharp and fast at any size. */
.oi-t-polka{background-color:#fff;background-image:radial-gradient(#111 18%,transparent 19%),radial-gradient(#111 18%,transparent 19%);background-size:56px 56px;background-position:0 0,28px 28px}
.oi-t-polka .oi-inner,.oi-t-hearts .oi-inner,.oi-t-sunshine .oi-inner{background:#ffffffe6;border-radius:14px;padding:16px}
.oi-t-hearts{background-color:#f7f8fb;background-image:radial-gradient(circle at 20% 20%,#ff4fa3 0 9px,transparent 10px),radial-gradient(circle at 80% 30%,#13b5c1 0 9px,transparent 10px),radial-gradient(circle at 50% 85%,#ff4fa3 0 7px,transparent 8px);background-size:120px 120px}
.oi-t-notebook{background-color:#fffdf5;background-image:linear-gradient(90deg,transparent 46px,#ff9bb3 46px,#ff9bb3 48px,transparent 48px),repeating-linear-gradient(#fffdf5 0 30px,#b9d7f3 30px 31px)}
.oi-t-chalkboard{background:#20463a;color:#fff}
.oi-t-chalkboard .oi-headline{color:#fff;text-shadow:none}.oi-t-chalkboard .oi-sub,.oi-t-chalkboard .oi-consent{color:#e9f5ef}
.oi-t-sunshine{background:linear-gradient(160deg,#fff4c2,#ffd36e 55%,#ffb15e)}
.oi-t-minimal{background:#fff;border:1px solid #e3e8ef}
.oi-t-image .oi-inner{background:#ffffffe0;border-radius:14px;padding:16px}
/* Placement popup: its own fixed layer above the page, so the page never moves. The panel fits the viewport; a tall form scrolls inside
   it while the close button stays in the corner. */
.oi-popup{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:16px}
.oi-popup[hidden]{display:none}
.oi-popup-backdrop{position:absolute;inset:0;background:#092c5099;cursor:pointer}
.oi-popup-panel{position:relative;width:min(620px,100%);max-height:calc(100dvh - 32px);display:flex;border-radius:16px;box-shadow:0 24px 70px #0006}
.oi-popup-scroll{overflow:auto;width:100%;border-radius:16px;overscroll-behavior:contain}
.oi-popup-scroll .oi{margin:0;max-width:none;box-shadow:none}
body .oi-popup button.oi-popup-close{position:absolute;top:-14px;right:-14px;z-index:3;display:grid;place-items:center;width:46px;height:46px;min-height:0;padding:0;border-radius:50%;
  border:3px solid #fff;background:#092C50;color:#fff;font:700 30px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 14px #0005}
body .oi-popup button.oi-popup-close:hover{background:#FF1493;color:#fff}
body .oi-popup button.oi-popup-close:focus-visible{outline:3px solid #2EE6E6;outline-offset:2px}
html.oi-popup-open{overflow:hidden}
@media(max-width:600px){.oi-popup{padding:12px}body .oi-popup button.oi-popup-close{top:6px;right:6px;width:44px;height:44px}.oi-popup-panel{max-height:calc(100dvh - 24px)}}
/* The landing page shell. */
.oi-landing{min-height:70vh;display:grid;place-items:center;padding:28px 16px}
.oi-success{max-width:560px;margin:0 auto;text-align:center;display:grid;gap:12px;padding:28px 18px;border-radius:16px;background:#fff;box-shadow:0 10px 30px #092c501a}
.oi-success .oi-button{width:auto;justify-self:center;text-decoration:none;display:inline-block}
.oi-files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.oi-files a{text-decoration:none}
@media (max-width:480px){.oi{padding:20px 12px}.oi-t-polka{background-size:40px 40px;background-position:0 0,20px 20px}}

/* Success screen (Step 5) */
.oi-success .oi-inner{gap:12px}
.oi-confetti{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:#eaf8f9;color:#e6066f}
.oi-confetti svg{width:36px;height:36px}
.oi-message{font-size:16px;line-height:1.5}
.oi-message p{margin:0 0 8px}.oi-message ul,.oi-message ol{text-align:left;margin:0 0 8px}
.oi-tip{display:flex;gap:10px;align-items:flex-start;text-align:left;background:#f7f8fb;border-radius:12px;padding:12px 14px;font-size:14px;color:#14213d}
.oi-tip svg{width:28px;height:28px;flex:none;color:#e6066f}
.oi-tip p{margin:0}
.oi-success .oi-button{display:inline-flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;width:100%}
.oi-success .oi-button svg{width:20px;height:20px}
.oi-social{border-top:1px solid #e3e8ef;padding-top:10px;width:100%}
.oi-social p{margin:0 0 8px;font-weight:600}
.oi-social ul{list-style:none;margin:0;padding:0;display:flex;gap:10px;justify-content:center}
.oi-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e6066f;color:#fff}
.oi-social svg{width:22px;height:22px}
.oi-center{text-align:center}