/* 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}
/* Anchored on the form root (.oi[data-form], specificity 0,3,0) so page heading rules such as Creator Studio's ".creator .studio-content h2"
   or a storefront's ".sf-theme h2" can't repaint the headline: the editor preview, landing page, storefront and popups all match. */
/* Fonts (schema 120): --oi-hfont/--oi-hsize/--oi-hweight and --oi-sfont/--oi-ssize/--oi-sweight are set by the per-form stylesheet only when the
   creator chose them; unset = the template's own font, size and weight (the fallbacks below), so older forms look exactly as before. */
.oi-headline,.oi[data-form] .oi-headline{margin:0;font-family:var(--oi-hfont,"Comic Sans MS","Chalkboard SE","Trebuchet MS",sans-serif);font-size:var(--oi-hsize,clamp(30px,6vw,46px));
  font-weight:var(--oi-hweight,800);font-style:normal;line-height:1.05;letter-spacing:normal;color:var(--oi-headline,#092C50);text-shadow:2px 2px 0 #fff}
/* --oi-headline / --oi-sub = the creator's Step 1 text colours (set only when chosen); unset = each template's own colour. */
.oi-sub,.oi[data-form] .oi-sub{margin:0;font-weight:var(--oi-sweight,700);font-size:var(--oi-ssize,17px);font-family:var(--oi-sfont);color:var(--oi-sub,#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[data-form] .oi-headline{color:var(--oi-headline,#fff);text-shadow:none}.oi-t-chalkboard[data-form] .oi-sub{color:var(--oi-sub,#e9f5ef)}.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}
/* Phones: the popup sits at the bottom and leaves the top of the page visible (it never covers the whole screen). */
@media(max-width:600px){.oi-popup{padding:12px;place-items:end center}body .oi-popup button.oi-popup-close{top:6px;right:6px;width:44px;height:44px}.oi-popup-panel{max-height:min(calc(100dvh - 24px),82dvh)}}
/* Manual Display Only (and #optin links): a small button in the corner opens the popup; it never covers page content for long. */
body button.oi-launch{position:fixed;left:16px;bottom:16px;z-index:9990;display:inline-flex;align-items:center;gap:6px;max-width:min(320px,calc(100vw - 32px));min-height:44px;
  padding:10px 16px;border:2px solid #fff;border-radius:999px;background:#FF1493;color:#fff;font:700 15px/1.2 system-ui,sans-serif;box-shadow:0 6px 18px #092c5040;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body button.oi-launch:hover{background:#092C50}
body button.oi-launch:focus-visible{outline:3px solid #2EE6E6;outline-offset:2px}
body button.oi-launch[hidden],html.oi-popup-open body button.oi-launch{display:none}
/* 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}