/* Shared shell: version switcher, device mockups, reveal-on-scroll. Each proposal owns its own palette and type under .s-<id>. */
:root{
  --sw-bg:rgba(18,22,32,.72); --sw-fg:#eef2fa; --sw-mute:#8f99ad; --sw-on:#ffffff; --sw-on-fg:#0b1222;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f4f8ff;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-site="pure-white"] body{background:#ffffff}
html[data-site="dark-blue"]{color-scheme:dark}
html[data-site="dark-blue"] body{background:#030711}
html[data-site="dark-minimal"]{color-scheme:dark}
html[data-site="dark-minimal"] body{background:#0a0a0b}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:inherit}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.site{min-height:100vh;overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logo: the original wordmark used as a mask, so each proposal can color it */
.logo{display:block;height:20px;aspect-ratio:853/122;background:currentColor;-webkit-mask:url(assets/aegon-logo.png) left center/contain no-repeat;mask:url(assets/aegon-logo.png) left center/contain no-repeat}
.mark{display:block;width:22px;aspect-ratio:1;background:currentColor;-webkit-mask:url(assets/aegon-a.png) center/contain no-repeat;mask:url(assets/aegon-a.png) center/contain no-repeat}

/* version switcher */
.switcher{position:fixed;z-index:100;left:50%;translate:-50% 0;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--sw-bg);color:var(--sw-fg);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 18px 50px -18px rgba(0,0,0,.45);font:500 12px/1 "Geist",-apple-system,system-ui,sans-serif;max-width:calc(100vw - 24px)}
.sw-label{color:var(--sw-mute);letter-spacing:.02em;margin-right:6px;white-space:nowrap}
.sw-list{display:flex;gap:2px}
.sw-list button{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;white-space:nowrap;color:var(--sw-fg);transition:background .3s,color .3s}
.sw-list button:hover{background:rgba(255,255,255,.08)}
.sw-list button[aria-current="true"]{background:var(--sw-on);color:var(--sw-on-fg)}
.sw-list b{font-weight:500;font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;opacity:.6}
.sw-list button:focus-visible{outline:2px solid #7fb0ff;outline-offset:2px}
@media (max-width:760px){
  .sw-label{display:none}
  .switcher{padding:5px}
  .sw-list button{padding:0 11px;height:32px}
  .sw-list button span{display:none}
  .sw-list b{font-size:11px;opacity:1}
}

/* device mockups */
.mac{width:100%;filter:drop-shadow(0 40px 60px rgba(4,12,30,.28))}
.mac-scr{position:relative;border:clamp(6px,.9vw,11px) solid #111214;border-bottom-width:clamp(8px,1.2vw,15px);border-radius:clamp(10px,1.4vw,18px) clamp(10px,1.4vw,18px) 4px 4px;background:#000;aspect-ratio:16/10;overflow:hidden;box-shadow:0 0 0 1px #3a3b40}
.mac-scr img{width:100%;height:100%;object-fit:cover;object-position:top}
.mac-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 38%);pointer-events:none}
.mac-base{height:clamp(8px,1vw,13px);margin:0 -8%;border-radius:0 0 14px 14px;background:linear-gradient(#e2e3e8,#9a9ca4);position:relative}
.mac-base::before{content:"";position:absolute;left:42%;right:42%;top:0;height:35%;border-radius:0 0 6px 6px;background:#7d7f87}
.phone{position:relative;aspect-ratio:640/1385;border-radius:15%/7%;border:clamp(4px,.45vw,7px) solid #16171a;background:#000;overflow:hidden;box-shadow:0 0 0 1px #4a4b51,0 30px 60px -22px rgba(4,12,30,.5)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.phone i{position:absolute;top:2.4%;left:50%;translate:-50% 0;width:31%;height:3.3%;border-radius:999px;background:#000}
.phone::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 34%);pointer-events:none}

/* reveal: elements are visible at rest; only those below the first screen start hidden */
[data-r]{transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),filter 1.1s var(--ease);transition-delay:var(--rd,0ms)}
[data-r].r-pre{opacity:0;transform:translateY(34px);filter:blur(6px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-r].r-pre{opacity:1;transform:none;filter:none}
}