
*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#fcfdff;background-image:url("/content/media/ece7fb5c392721628279.svg");background-size:100% auto;background-position:top center;background-repeat:repeat-y;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:#191919;-webkit-font-smoothing:antialiased}.shell{max-width:1100px;margin:0 auto;padding:24px;min-height:500vh}.hero{padding:24px}.inner{background-color:transparent;border-radius:28px;padding:30px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:27px;border-bottom:1px solid #dedede}.brand{font-size:25px;font-weight:700;white-space:nowrap}.tag{color:#a31c24;font-size:19px;text-align:right}.content{padding-top:35px}.kicker{font-size:15px;color:#606060;margin:0 0 11px;text-transform:uppercase;font-weight:400}h1{font-size:clamp(37px,5.6vw,68px);line-height:1.18;letter-spacing:-.035em;font-weight:500;margin:0}h1 span{display:block}.red{color:#d71920;font-size:1.10em;font-weight:400}.years{font-size:clamp(27px,3.4vw,44px);font-weight:500;margin:13px 0 14px}.intro{font-size:clamp(18px,2vw,25px);color:#5b5b5b;margin:0 0 6px}.benefits{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:7px}.benefits li{display:grid;grid-template-columns:5px 1fr;column-gap:10px;align-items:start;color:#5b5b5b;font-size:clamp(16px,1.65vw,21px);line-height:1.38}.benefits li:before{content:"";background:#d71920;width:4px;height:4px;border-radius:50%;margin-top:.68em}.illustration{width:100%;display:block;border-radius:27px;aspect-ratio:1082/610;object-fit:cover}.bottom{display:flex;align-items:center;justify-content:space-between;color:#666;margin-top:9px;font-size:16px}.bottom .bottom-label{display:inline-block;transform:scaleX(.98);transform-origin:left center;white-space:nowrap;font-family:inherit;font-weight:400}.arrow{font-size:31px;color:#d71920;line-height:1}@media(max-width:600px){.shell{padding:10px}.hero{padding:10px}.inner{padding:22px 20px 15px;border-radius:23px}.top{padding-bottom:18px;gap:12px}.brand{font-size:clamp(13px,3.7vw,23px)}.tag{font-size:clamp(10px,2.65vw,17px)}.content{padding-top:24px}.kicker{font-size:12px;margin-bottom:9px}h1{font-size:clamp(28px,6.5vw,42px);letter-spacing:-.035em}.years{font-size:clamp(23px,5vw,33px);margin:11px 0 13px}.intro{font-size:16px;margin-bottom:4px}.benefits li{font-size:15px}.benefits{margin-bottom:18px}.illustration{border-radius:20px}.bottom{font-size:13px;margin-top:7px}}

/* Animated pearlescent highlights: illustration and layout remain unchanged. */
.shimmer-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:27px;aspect-ratio:1082/610}
.shimmer-panel .illustration{height:100%;width:100%;position:absolute;inset:0}
.shimmer-panel::after{content:"";position:absolute;inset:-45%;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.7;background:conic-gradient(from 10deg at 50% 50%,transparent 0deg,rgba(174,216,245,.05) 36deg,rgba(166,219,250,.28) 72deg,rgba(250,225,238,.24) 104deg,rgba(255,255,255,.04) 140deg,rgba(255,239,194,.22) 183deg,rgba(184,234,232,.27) 227deg,rgba(204,190,249,.24) 269deg,transparent 320deg);filter:blur(28px);animation:iridescent-turn 11s linear infinite}
.shimmer-panel::before{content:"";position:absolute;inset:-35%;pointer-events:none;z-index:2;opacity:.43;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.04) 42%,rgba(255,255,255,.68) 49%,rgba(220,244,255,.20) 52%,transparent 63%);transform:translateX(-55%) rotate(-5deg);animation:specular-sweep 7.5s ease-in-out infinite}
@keyframes iridescent-turn{to{transform:rotate(360deg)}}
@keyframes specular-sweep{0%,12%{transform:translateX(-58%) rotate(-5deg)}60%,100%{transform:translateX(58%) rotate(-5deg)}}
@media(max-width:600px){.shimmer-panel{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.shimmer-panel::before,.shimmer-panel::after{animation:none}}
.community-brand{display:flex;align-items:center;gap:9px;min-width:0}.community-symbol{display:block;width:39px;height:39px;object-fit:contain;flex:none}.community-wordmark{display:block;width:190px;height:auto;object-fit:contain;max-width:100%}@media(max-width:600px){.community-brand{gap:5px}.community-symbol{width:25px;height:25px}.community-wordmark{width:clamp(94px,27vw,150px)}}

/* Compact special offer inspired by reference announcement pill */
.offer-wrap{display:flex;justify-content:flex-end;margin:22px 0 0}
.offer-pill{display:flex;align-items:center;justify-content:center;gap:13px;max-width:100%;padding:11px 17px 11px 20px;border-radius:999px;background:#f0f0f2;color:#20232c;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-size:17px;font-weight:400;line-height:1.25;text-align:center}
.offer-copy{min-width:0}.offer-arrow{font-size:23px;line-height:1;flex:none;font-weight:400}
@media(max-width:600px){.offer-wrap{margin:20px 0 0}.offer-pill{padding:10px 13px 10px 16px;font-size:14px;gap:9px}.offer-arrow{font-size:20px}}

/* Targeted Arch-inspired adjustments on iPO COMMUNITY page */
body{color:#19243b}
.top{border-bottom-color:#d9dce3}
.kicker,.intro,.benefits li,.bottom{color:#566176}
.years{color:#19243b}
.offer-pill{position:relative;border:1px solid #e1e3e9;border-radius:14px;background:linear-gradient(145deg,#fff 0%,#f8f9fb 100%);color:#17213a;font-size:17px;font-weight:400;line-height:1.25;padding:11px 16px 11px 20px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.98),inset 0 -2px 0 rgba(25,36,59,.035),0 3px 0 #e8e9ee,0 7px 16px rgba(25,36,59,.12);transition:transform .18s ease,box-shadow .18s ease}.offer-pill:active{transform:translateY(2px) scale(.99);box-shadow:inset 0 2px 5px rgba(25,36,59,.13),inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(25,36,59,.08)}.offer-copy{text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(25,36,59,.13)}
.offer-arrow{font-size:0;display:flex;align-items:center;justify-content:center;width:23px;height:23px}
.offer-arrow:before{content:"";width:20px;height:20px;background:currentColor;clip-path:polygon(0 45%,65% 45%,43% 23%,50% 16%,85% 50%,50% 84%,43% 77%,65% 55%,0 55%)}
.join-btn{appearance:none;border:0;border-radius:11px;background:linear-gradient(135deg,#e31e2b,#bf1424);color:#fff;font:500 17px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;padding:13px 19px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer}
@media(max-width:600px){.join-btn{font-size:14px;padding:11px 13px;border-radius:9px}.offer-pill{font-size:14px;padding:10px 12px 10px 15px}.offer-arrow{width:19px;height:19px}.offer-arrow:before{width:18px;height:18px}}

.matte-panel{background:#e7e8ea;background-image:linear-gradient(145deg,#eef0f1 0%,#e3e5e7 46%,#e9eaec 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -1px 2px rgba(75,85,99,.07);}
.matte-panel{position:relative;overflow:hidden;isolation:isolate;border-radius:27px;animation:none!important;} .matte-panel::before,.matte-panel::after{content:none!important;display:none!important;} @media(max-width:600px){.matte-panel{border-radius:20px;}}

/* Procedural animation only. No background image or pre-rendered artwork. */
.liquid-waves{position:relative;overflow:hidden;isolation:isolate;background:#e8e9ef;}
.liquid-waves canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;}

/* Reliable animated liquid light: pure CSS, including offline iOS file preview. */
.liquid-waves{background:linear-gradient(130deg,#d9dce7,#f4f2f9 39%,#cfd4e2 76%,#e9e9f3)!important;overflow:hidden;isolation:isolate}
.liquid-waves .wave-field{position:absolute;inset:-65%;border-radius:45%;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;filter:blur(12px);opacity:.95}
.liquid-waves .wave-1{background:repeating-radial-gradient(ellipse 53% 38% at 28% 44%,transparent 0 13%,rgba(102,126,255,.15) 15%,rgba(77,144,255,.85) 17%,rgba(235,250,255,.95) 18%,rgba(162,90,255,.63) 20%,transparent 24%,transparent 34%);animation:liquid-a 7s ease-in-out infinite alternate}
.liquid-waves .wave-2{background:repeating-radial-gradient(ellipse 46% 52% at 71% 34%,transparent 0 14%,rgba(179,95,255,.78) 17%,rgba(255,255,255,.97) 18%,rgba(67,209,255,.8) 20%,transparent 25%,transparent 37%);animation:liquid-b 8.5s ease-in-out infinite alternate}
.liquid-waves .wave-3{background:repeating-radial-gradient(ellipse 57% 41% at 49% 76%,transparent 0 15%,rgba(94,202,255,.76) 18%,rgba(255,255,255,.96) 19%,rgba(197,110,255,.78) 21%,transparent 26%,transparent 38%);animation:liquid-c 6.3s ease-in-out infinite alternate}
.liquid-waves .wave-4{background:radial-gradient(ellipse 32% 19% at 35% 44%,rgba(89,123,255,.74),transparent 80%),radial-gradient(ellipse 26% 24% at 75% 64%,rgba(187,111,255,.72),transparent 80%);animation:liquid-d 5.5s ease-in-out infinite alternate;filter:blur(20px)}
.liquid-waves .wave-5{background:repeating-radial-gradient(ellipse 35% 58% at 20% 75%,transparent 0 17%,rgba(112,192,255,.75) 19%,rgba(255,255,255,.99) 20%,rgba(154,116,255,.68) 21%,transparent 25%,transparent 40%);animation:liquid-e 9s ease-in-out infinite alternate}
.liquid-waves .wave-6{background:radial-gradient(ellipse 16% 12% at 44% 38%,rgba(255,255,255,.98),transparent 85%),radial-gradient(ellipse 20% 14% at 78% 55%,rgba(255,255,255,.96),transparent 85%);animation:liquid-f 4.6s ease-in-out infinite alternate;filter:blur(7px)}
@keyframes liquid-a{0%{transform:translate(-13%,-5%) rotate(-17deg) scale(1.03,1.1)}50%{transform:translate(7%,3%) rotate(9deg) scale(1.23,.94)}100%{transform:translate(13%,-8%) rotate(30deg) scale(.97,1.18)}}
@keyframes liquid-b{0%{transform:translate(12%,-11%) rotate(32deg) scale(1.1,.96)}50%{transform:translate(-8%,7%) rotate(-4deg) scale(.96,1.2)}100%{transform:translate(-16%,12%) rotate(-29deg) scale(1.22,.91)}}
@keyframes liquid-c{0%{transform:translate(-9%,14%) rotate(17deg) scale(.96,1.1)}50%{transform:translate(13%,-4%) rotate(-18deg) scale(1.19,.96)}100%{transform:translate(-3%,-12%) rotate(41deg) scale(1.03,1.25)}}
@keyframes liquid-d{0%{transform:translate(-18%,8%) rotate(-30deg)}100%{transform:translate(18%,-13%) rotate(35deg)}}
@keyframes liquid-e{0%{transform:translate(13%,10%) rotate(-15deg) scale(1.12,.9)}100%{transform:translate(-12%,-10%) rotate(38deg) scale(.91,1.18)}}
@keyframes liquid-f{0%{transform:translate(-15%,-10%) rotate(-14deg)}100%{transform:translate(16%,14%) rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.liquid-waves .wave-field{animation:none!important}}

/* Precise rounded clipping of the animated surface, including iOS Safari. */
.illustration.matte-panel.liquid-waves{
  border-radius:27px!important;
  overflow:hidden!important;
  clip-path:inset(0 round 27px);
  -webkit-clip-path:inset(0 round 27px);
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  background-clip:padding-box;
  transform:translateZ(0);
}
@media(max-width:600px){
 .illustration.matte-panel.liquid-waves{
  border-radius:20px!important;
  clip-path:inset(0 round 20px);
  -webkit-clip-path:inset(0 round 20px);
 }
}

.metal-foreground{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;display:block;overflow:hidden;}
