/* Compact grouped composition requested by owner, 2026-10-14. */
@font-face{font-family:VPNVReminderPlex;src:url(/assets/partners/cutout-v2/plex-400.woff2);font-weight:400}
@font-face{font-family:VPNVReminderPlex;src:url(/assets/partners/cutout-v2/plex-600.woff2);font-weight:600}
@font-face{font-family:VPNVReminderPlex;src:url(/assets/partners/cutout-v2/plex-700.woff2);font-weight:700}
#vpnvReminder,#vpnvReminder *{box-sizing:border-box}
#vpnvReminder{position:fixed;inset:auto 0 0;z-index:80;width:100%;max-width:none;height:108px;margin:0;padding:0;border:0;border-radius:0;overflow:visible;transform:none;isolation:isolate;color:#fff;font-family:VPNVReminderPlex,Arial,sans-serif;line-height:normal;letter-spacing:normal;text-align:left;text-transform:none}
#vpnvReminder[hidden],#vpnvReminder [hidden]{display:none!important}
#vpnvReminder .creative{position:absolute;inset:0;margin:0;padding:0;border:0;border-radius:0;max-width:none;width:auto;overflow:visible;box-shadow:none;background:none;color:inherit;font:inherit}
#vpnvReminder .plane,#vpnvReminder .motif{position:absolute;inset:0;z-index:-1;pointer-events:none}
#vpnvReminder .layout{position:relative;max-width:1140px;margin:auto;padding:0 24px;height:100%;display:grid;grid-template-columns:220px 1fr;grid-template-rows:minmax(0,1fr);gap:24px;align-items:center}
#vpnvReminder .message{display:grid;grid-template-columns:max-content max-content;grid-template-rows:24px auto;column-gap:28px;row-gap:5px;align-items:center;justify-self:center;position:relative;z-index:2;min-width:0}
#vpnvReminder .logo{position:relative;grid-column:1;grid-row:1;width:125px;height:24px;margin:0;overflow:visible}
#vpnvReminder .logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;max-width:none;margin:0;padding:0;border:0;border-radius:0}
/* The original Nord PNG includes transparent margins. Its visible mark is
   centered in this row without clipping, editing or stretching the asset. */
#vpnvReminder .nordvpn .logo{width:129px;height:24px}
#vpnvReminder .nordvpn .logo img{position:absolute;width:180px;height:auto;left:-27.9px;top:-30px;max-height:none}
#vpnvReminder .copy{grid-column:1;grid-row:2;margin:0;padding:0;min-width:0}
#vpnvReminder .copy h2{font-family:inherit;font-size:32px;line-height:1.06;font-weight:700;letter-spacing:-.035em;text-transform:none;color:inherit;margin:0;padding:0;border:0;white-space:nowrap}
#vpnvReminder .copy h2 br{display:none}
#vpnvReminder .copy em{font-style:normal}
#vpnvReminder .copy em:before{content:' '}
#vpnvReminder .copy p{font:400 16px/1.2 VPNVReminderPlex,Arial,sans-serif;margin:5px 0 0;padding:0;border:0;max-width:none;white-space:nowrap;text-transform:none;color:#d4e5ff}
#vpnvReminder .action{grid-column:2;grid-row:1 / 3;margin:0;padding:0;align-self:center}
#vpnvReminder .cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border:1px solid #ffffff5c;border-radius:999px;font:700 18px/1 VPNVReminderPlex,Arial,sans-serif;text-decoration:none;text-transform:none;white-space:nowrap;cursor:pointer;color:#081c50;background:linear-gradient(110deg,#fff,#dcecff);box-shadow:0 6px 18px #0002,inset 0 2px 0 #ffffff80;transform-origin:center}
#vpnvReminder .art{grid-column:1;grid-row:1;align-self:end;justify-self:center;position:relative;bottom:4px;width:250px;margin:0;padding:0;pointer-events:none;z-index:1}
#vpnvReminder .art img{display:block;width:100%;height:auto;max-width:none;object-fit:contain;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0}
#vpnvReminder .message{grid-column:2;grid-row:1}
#vpnvReminder .close{position:absolute;right:8px;top:-14px;z-index:5;display:grid;place-items:center;width:28px;height:28px;padding:0;margin:0;border:1px solid #ffffff80;border-radius:50%;background:#081220b8;color:white;font:22px/1 Arial;cursor:pointer}
#vpnvReminder .nordvpn .plane{background:linear-gradient(105deg,#050d27,#081c50 56%,#164fa8);clip-path:polygon(0 12px,21% 12px,calc(21% + 24px) 0,100% 0,100% 100%,0 100%)}
#vpnvReminder .nordvpn .motif{background:linear-gradient(120deg,transparent 42%,#6eb5ff18 42%,#6eb5ff18 43%,transparent 43%,transparent 46%,#6eb5ff10 46%,#6eb5ff10 56%,transparent 56%);border-bottom:3px solid #5eacff}
#vpnvReminder .nordvpn em{color:#9dceff}
#vpnvReminder .surfshark{color:#092b30}
#vpnvReminder .surfshark .plane{background:linear-gradient(110deg,#9de5df,#e4faf6 52%,#d5f4f0);clip-path:polygon(0 12px,16% 12px,calc(16% + 20px) 0,100% 0,100% 100%,0 100%)}
#vpnvReminder .surfshark .motif{left:auto;width:36%;border-radius:100% 0 0 0;background:#87dcd44d;border-bottom:4px solid #209e92}
#vpnvReminder .surfshark em{color:#087a72}
#vpnvReminder .surfshark .copy p{color:#21524e}
#vpnvReminder .surfshark .cta{background:linear-gradient(110deg,#092e31,#08645e);color:#fff;border-color:#268a82;box-shadow:0 6px 18px #092e3126,inset 0 2px 0 #ffffff20}
#vpnvReminder .protonvpn .layout{grid-template-columns:1fr 220px}
#vpnvReminder .protonvpn .message{grid-column:1}
#vpnvReminder .protonvpn .art{grid-column:2}
#vpnvReminder .protonvpn .plane{background:linear-gradient(100deg,#24113e,#38205f 55%,#6d3ce0);clip-path:polygon(0 0,66% 0,calc(66% + 24px) 12px,83% 12px,calc(83% + 24px) 0,100% 0,100% 100%,0 100%)}
#vpnvReminder .protonvpn .motif{background:repeating-linear-gradient(120deg,transparent 0 100px,#c9b4ff10 101px 102px,transparent 103px 160px);border-bottom:3px solid #b5a0ff}
#vpnvReminder .protonvpn em{color:#d0bbff}
#vpnvReminder .protonvpn .copy p{color:#e2d7fa}
#vpnvReminder .protonvpn .logo{width:143px}
#vpnvReminder .protonvpn .cta{background:linear-gradient(110deg,#fff,#e4d5ff);color:#301555}
#vpnvReminder .mobile-copy{display:none}
#vpnvReminder a:focus-visible,#vpnvReminder button:focus-visible{outline:3px solid #137cf0;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){#vpnvReminder .creative:not([hidden]) .cta{animation:cta-continuous .82s ease-in-out infinite}@keyframes cta-continuous{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.025)}}}
#vpnvReminder:has(.creative:focus-within) .cta{animation:none!important}
@media(prefers-reduced-motion:reduce){#vpnvReminder .cta{animation:none!important;transition:none!important}}
@media(min-width:701px) and (max-width:1100px){
 #vpnvReminder .layout{grid-template-columns:160px 1fr;gap:16px;padding:0 40px 0 16px}
 #vpnvReminder .protonvpn .layout{grid-template-columns:1fr 160px;padding:0 40px 0 24px}
 #vpnvReminder .art{width:195px}
 #vpnvReminder .message{column-gap:20px}
 #vpnvReminder .copy h2{font-size:27px}
 #vpnvReminder .copy p{font-size:14px}
 #vpnvReminder .cta{font-size:16px;padding:12px 18px}
}
@media(min-width:701px) and (max-width:999px){
 #vpnvReminder{height:144px}
 #vpnvReminder .message{grid-template-columns:max-content;grid-template-rows:24px auto auto;row-gap:5px}
 #vpnvReminder .action{grid-column:1;grid-row:3;justify-self:start}
 #vpnvReminder .cta{min-height:38px;padding:10px 20px}
 #vpnvReminder .copy h2{font-size:28px}
}
@media(max-width:700px){
 #vpnvReminder{height:156px}
 #vpnvReminder .layout,#vpnvReminder .protonvpn .layout{display:block;padding:12px 16px}
 #vpnvReminder .message{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px auto auto;row-gap:7px;justify-self:auto;width:100%}
 #vpnvReminder .logo{grid-column:1;grid-row:1;width:118px;height:24px}
 #vpnvReminder .protonvpn .logo{width:132px}
 #vpnvReminder .copy{grid-column:1;grid-row:2}
 #vpnvReminder .copy h2{font-size:24px;line-height:1.1;letter-spacing:-.035em;white-space:nowrap}
 #vpnvReminder .copy p{font-size:15px;line-height:1.2;margin-top:5px;white-space:nowrap}
 #vpnvReminder .action{grid-column:1;grid-row:3;justify-self:center;align-self:center;margin-top:3px}
 #vpnvReminder .cta{min-height:42px;padding:11px 32px;font-size:18px;min-width:210px}
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{position:absolute;right:42px;left:auto;bottom:114px;width:120px}
 #vpnvReminder .desktop-copy{display:none}#vpnvReminder .mobile-copy{display:inline}
 #vpnvReminder .close{top:-14px;right:8px;width:28px;height:28px}
 #vpnvReminder .nordvpn .plane{clip-path:polygon(0 0,64% 0,calc(64% + 18px) 10px,100% 10px,100% 100%,0 100%)}
 #vpnvReminder .surfshark .plane{clip-path:polygon(0 0,63% 0,calc(63% + 18px) 10px,100% 10px,100% 100%,0 100%)}
 #vpnvReminder .protonvpn .plane{clip-path:polygon(0 0,59% 0,calc(59% + 18px) 10px,83% 10px,calc(83% + 18px) 0,100% 0,100% 100%,0 100%)}
}
@media(max-width:370px){#vpnvReminder .copy h2{font-size:20px}#vpnvReminder .copy p{font-size:14px}#vpnvReminder .art,#vpnvReminder .protonvpn .art{right:36px;width:105px}}
body:has(#vpnvReminder:not([hidden])) #vpnv-cookie-settings,body:has(#vpnvReminder:not([hidden])) #backTop{bottom:124px!important}
@media(min-width:701px) and (max-width:999px){body:has(#vpnvReminder:not([hidden])) #vpnv-cookie-settings,body:has(#vpnvReminder:not([hidden])) #backTop{bottom:160px!important}}
@media(max-width:700px){body:has(#vpnvReminder:not([hidden])) #vpnv-cookie-settings,body:has(#vpnvReminder:not([hidden])) #backTop{bottom:172px!important}}

/* Owner-directed horizontal composition, based on supplied GearUP captures.
   Desktop: art | logo | hook | promise | CTA, each on the same center line. */
@media(min-width:1000px){
 #vpnvReminder{height:88px}
 #vpnvReminder .layout,#vpnvReminder .protonvpn .layout{max-width:none;width:100%;height:100%;margin:0;padding:0 32px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,.9vw,20px)}
 #vpnvReminder .message,#vpnvReminder .copy{display:contents}
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{order:0;position:relative;left:auto;right:auto;bottom:0;align-self:flex-end;flex:0 0 clamp(184px,20vw,320px);width:clamp(184px,20vw,320px);margin:0}
 #vpnvReminder .logo,#vpnvReminder .nordvpn .logo,#vpnvReminder .protonvpn .logo{order:1;flex:0 0 clamp(88px,8vw,150px);width:clamp(88px,8vw,150px);height:28px;margin:0;align-self:center}
 #vpnvReminder .nordvpn .logo img{width:139.738%;height:auto;left:-21.659%;top:50%;transform:translateY(-50%)}
 #vpnvReminder .copy h2{order:2;flex:0 0 auto;font-size:clamp(18px,1.82vw,34px);line-height:1.1;white-space:nowrap;margin:0}
 #vpnvReminder .copy p{order:3;flex:0 0 auto;font-size:clamp(11.5px,1.03vw,19px);line-height:1.2;white-space:nowrap;margin:0;max-width:none}
 #vpnvReminder .action{order:4;flex:0 0 auto;margin:0;align-self:center}
 #vpnvReminder .cta{font-size:clamp(14px,1.25vw,20px);min-height:44px;padding:12px clamp(14px,1.3vw,25px);min-width:0}
 #vpnvReminder .close{top:-14px;right:8px;width:28px;height:28px}
 #vpnvReminder .nordvpn .plane{clip-path:polygon(0 10px,15% 10px,calc(15% + 24px) 0,100% 0,100% 100%,0 100%)}
 #vpnvReminder .surfshark .plane{clip-path:polygon(0 10px,14% 10px,calc(14% + 24px) 0,100% 0,100% 100%,0 100%)}
 #vpnvReminder .protonvpn .plane{clip-path:polygon(0 10px,14% 10px,calc(14% + 24px) 0,79% 0,calc(79% + 20px) 8px,100% 8px,100% 100%,0 100%)}
 body:has(#vpnvReminder:not([hidden])) #vpnv-cookie-settings,body:has(#vpnvReminder:not([hidden])) #backTop{bottom:104px!important}
}
@media(min-width:701px) and (max-width:999px){
 #vpnvReminder .protonvpn .layout{grid-template-columns:160px 1fr;padding:0 40px 0 16px}
 #vpnvReminder .protonvpn .art{grid-column:1}
 #vpnvReminder .protonvpn .message{grid-column:2}
}
@media(max-width:700px){
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{left:8px;right:auto}
 #vpnvReminder .logo,#vpnvReminder .nordvpn .logo,#vpnvReminder .protonvpn .logo{margin-left:124px}
}
@media(max-width:370px){
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{left:2px;right:auto}
 #vpnvReminder .logo,#vpnvReminder .nordvpn .logo,#vpnvReminder .protonvpn .logo{margin-left:108px}
}

/* Keep the privacy control clear of the raised artwork, not just the banner base. */
#vpnvReminder .copy[hidden]{display:none!important}
body:has(#vpnvReminder:not([hidden])) #vpnv-cookie-settings{bottom:calc(var(--vpnv-reminder-clearance, 172px) + 40px)!important}

/* Compact screens retain an explicit image / message / action layout. */
@media(600px <= width < 1000px){
 #vpnvReminder{height:112px}
 #vpnvReminder .layout,#vpnvReminder .protonvpn .layout{display:grid;grid-template-columns:118px minmax(0,1fr) auto;grid-template-rows:26px minmax(0,1fr);column-gap:16px;row-gap:4px;max-width:none;width:100%;padding:16px 32px 12px 8px;margin:0;align-items:center}
 #vpnvReminder .message{display:contents}
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{position:absolute;grid-column:auto;grid-row:auto;left:8px;right:auto;bottom:0;width:128px;margin:0}
 #vpnvReminder .logo,#vpnvReminder .nordvpn .logo,#vpnvReminder .protonvpn .logo{grid-column:2;grid-row:1;width:112px;height:24px;margin:0;justify-self:start}
 #vpnvReminder .nordvpn .logo img{width:139.738%;height:auto;left:-21.659%;top:50%;transform:translateY(-50%)}
 #vpnvReminder .copy{display:block;grid-column:2;grid-row:2;min-width:0;justify-self:stretch}
 #vpnvReminder .copy h2{font-size:clamp(19px,2.8vw,27px);line-height:1.1;white-space:normal;margin:0}
 #vpnvReminder .copy p{font-size:12px;line-height:1.3;white-space:normal;margin:4px 0 0}
 #vpnvReminder .action{grid-column:3;grid-row:1/3;justify-self:end;margin:0}
 #vpnvReminder .cta{font-size:14px;padding:12px 16px;min-width:0;min-height:42px}
 #vpnvReminder .desktop-copy{display:none}#vpnvReminder .mobile-copy{display:inline}
}
/* Larger left artwork from tablet landscape; reserve its width before the copy. */
@media(768px <= width < 1000px){
 #vpnvReminder .layout,#vpnvReminder .protonvpn .layout{grid-template-columns:clamp(192px,23vw,230px) minmax(0,1fr) auto}
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{width:clamp(200px,24vw,240px)}
}
@media(width < 600px){
 #vpnvReminder{height:156px}
 #vpnvReminder .layout,#vpnvReminder .protonvpn .layout{display:grid;grid-template-columns:clamp(88px,25vw,140px) minmax(0,1fr);grid-template-rows:22px minmax(0,1fr) 38px;column-gap:12px;row-gap:4px;padding:9px 16px 9px 8px;width:100%;max-width:none;margin:0;align-items:center}
 #vpnvReminder .message{display:contents}
 #vpnvReminder .art,#vpnvReminder .protonvpn .art{position:absolute;grid-column:auto;grid-row:auto;left:4px;right:auto;bottom:0;width:clamp(98px,28vw,156px);margin:0}
 #vpnvReminder .logo,#vpnvReminder .nordvpn .logo,#vpnvReminder .protonvpn .logo{grid-column:2;grid-row:1;width:116px;height:22px;margin:0;justify-self:start}
 #vpnvReminder .nordvpn .logo img{width:139.738%;height:auto;left:-21.659%;top:50%;transform:translateY(-50%)}
 #vpnvReminder .copy{grid-column:2;grid-row:2;justify-self:stretch;min-width:0}
 #vpnvReminder .copy h2{font-size:clamp(17px,4.8vw,23px);line-height:1.08;white-space:normal;margin:0}
 #vpnvReminder .copy p{font-size:12px;line-height:1.25;white-space:normal;margin:3px 0 0}
 #vpnvReminder .action{grid-column:2;grid-row:3;width:100%;margin:0;justify-self:stretch}
 #vpnvReminder .cta{display:flex;width:100%;min-width:0;min-height:38px;padding:9px 10px;font-size:14px}
}