/* MWR marketing site v2: Option 1 (Hybrid). Base design system, shared by every page. */
:root{
  /* light surface set */
  --bg:#ffffff; --soft:#f5f7fa; --soft-2:#eceff4; --card:#ffffff; --line:#e3e7ee;
  --ink:#121417; --ink-2:#2e3239; --muted:#5f6670; --faint:#8b929c; --hdr:rgba(255,255,255,.92);
  /* brand (portal + Business Center) */
  --blue:#00b4ff; --blue-d:#0798dd; --green:#76c043;
  --grad:linear-gradient(115deg,#00b4ff 0%,#3cbcb0 50%,#76c043 100%);
  --keep:#00b4ff; --access:#9a7bff; --own:#7ccb4a; --make:#f5b942;
  --sh-1:0 2px 10px rgba(18,20,23,.06); --sh-2:0 14px 40px rgba(18,20,23,.10); --sh-3:0 30px 70px rgba(18,20,23,.18);
}
/* dark surface set = the Membership Portal's tokens */
.dk, html.dark body{
  --bg:#0e0f11; --soft:#141518; --soft-2:#212227; --card:#1a1b1f; --line:rgba(255,255,255,.08);
  --ink:#f4f5f7; --ink-2:#d6d9df; --muted:#a3a7b0; --faint:#6f747e; --hdr:rgba(14,15,17,.88);
  --sh-1:0 2px 10px rgba(0,0,0,.3); --sh-2:0 14px 40px rgba(0,0,0,.35); --sh-3:0 30px 70px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Montserrat",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:0 28px}
section,.band{background:var(--bg);color:var(--ink)}
.section{padding:110px 0}
.alt{background:var(--soft)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.kicker::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--grad)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.08}
h2{font-size:clamp(32px,4vw,52px);font-weight:900;margin:16px 0 18px}
.lede{font-size:19px;color:var(--muted);max-width:660px}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font-weight:800;font-size:16px;border-radius:999px;padding:17px 30px;transition:transform .15s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--grad);color:#fff;box-shadow:0 14px 30px rgba(0,180,255,.30)}
.btn-o{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-o:hover{box-shadow:inset 0 0 0 2px var(--blue)}
.anim .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.anim .reveal.in{opacity:1;transform:none}
.logo .on-dark{display:none}
.dk .logo .on-light, html.dark .logo .on-light{display:none}
.dk .logo .on-dark, html.dark .logo .on-dark{display:block}

/* ---------- Director bar ---------- */
.dbar{display:none;background:#00b4ff;color:#04121c;font-size:14px;font-weight:600}
.dbar.on{display:block}
.dbar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 28px;flex-wrap:wrap}
.dbar .av{width:30px;height:30px;border-radius:50%;background:#0e0f11;color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.dbar a{font-weight:800;text-decoration:underline}

/* ---------- Header ---------- */
header.hd{position:sticky;top:0;z-index:60;background:var(--hdr);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
header.hd .wrap{display:flex;align-items:center;height:78px;gap:34px}
.logo img{height:46px}
nav.nv{display:flex;gap:28px;font-weight:600;font-size:15px;color:var(--ink-2)}
nav.nv a{position:relative;padding:6px 0}
nav.nv a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .2s}
nav.nv a:hover::after{transform:scaleX(1)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:18px}
.hd-r .login{font-weight:700;font-size:15px;color:var(--ink-2)}
.hd-r .btn{padding:12px 24px;font-size:15px}
.lang{display:inline-flex;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--soft)}
.lang a{min-width:38px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;line-height:1;text-align:center;color:var(--muted);transition:color .2s,background .2s}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(0,180,255,.28)}
nav.nv a,.hd-r .login{white-space:nowrap}
.logo{flex-shrink:0}
@media (max-width:1180px){header.hd .wrap{gap:22px}nav.nv{gap:18px;font-size:14px}.hd-r{gap:12px}.hd-r .btn{padding:12px 18px}}
/* Spanish labels are longer: use the menu button a little earlier */
@media (max-width:1100px){html[lang^="es"] nav.nv,html[lang^="es"] .hd-r .login{display:none}html[lang^="es"] .burger{display:block}}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:56px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;width:900px;height:900px;left:-380px;top:-420px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,255,.16),transparent 65%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;position:relative}
.hero h1{font-size:clamp(44px,5.6vw,76px);font-weight:900;margin:20px 0 22px}
.hero .lede{font-size:20px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 22px}
.assure{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--muted)}
.assure span{display:flex;align-items:center;gap:7px}
.assure span::before{content:"✓";color:var(--green);font-weight:900}
.hero-media{position:relative}
.hero-img{border-radius:36px;overflow:hidden;aspect-ratio:1/1.06;box-shadow:var(--sh-3);position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,0) 50%,rgba(14,15,17,.5))}
.qcard{position:absolute;left:-60px;bottom:-34px;width:380px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-3);padding:22px 22px 18px;z-index:2}
.qcard .q-top{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qcard .bar{height:6px;border-radius:6px;background:var(--soft-2);margin:12px 0 14px;overflow:hidden}
.qcard .bar i{display:block;height:100%;width:16%;background:var(--grad);border-radius:6px}
.qcard h3{font-size:19px;font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
.qcard .o{display:block;width:100%;text-align:left;border:2px solid var(--line);background:transparent;color:var(--ink);border-radius:14px;padding:12px 14px;margin-top:8px;font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.qcard .o:hover{border-color:var(--blue)}
.hero-badge{position:absolute;right:-18px;top:34px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);padding:12px 16px;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700}
.hero-badge .dot{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:900}
.hero-badge small{display:block;color:var(--muted);font-weight:600;font-size:12px}
.proof{margin-top:110px;border-top:1px solid var(--line);background:var(--soft)}
.proof .wrap{display:flex;align-items:center;gap:30px;padding:22px 28px}
.proof .lbl{font-weight:800;white-space:nowrap;font-size:16px}
.proof .lbl span{color:var(--blue)}
.tick{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tick-t{display:flex;gap:30px;white-space:nowrap;width:max-content;animation:tick 45s linear infinite;font-weight:600;font-size:15px;color:var(--ink-2)}
.tick-t span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:10px;vertical-align:2px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Problem ---------- */
.prob-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:46px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 20px;box-shadow:var(--sh-1)}
.pc .ic{width:44px;height:44px;border-radius:14px;background:var(--soft-2);display:grid;place-items:center;margin-bottom:14px;color:var(--blue)}
.pc b{display:block;font-size:16px;line-height:1.3;margin-bottom:6px}
.pc span{font-size:14px;color:var(--muted)}
.turn{margin-top:40px;font-size:22px;font-weight:800}

/* ---------- Pillars ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.pcard{background:var(--card);border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer}
.pcard:hover,.pcard.sel{transform:translateY(-6px);box-shadow:var(--sh-2)}
.pcard .ph{height:170px;position:relative;overflow:hidden;display:grid;place-items:center}
.pcard .ph::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12);right:-60px;top:-80px}
.pcard .ph img{position:relative;height:84%;width:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.3))}
.pcard .pico{position:relative;width:92px;height:92px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
.pcard .bd{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard h3{font-size:24px;font-weight:900}
.pcard .pr{font-weight:700;color:var(--ink-2);margin:6px 0 14px;font-size:15px;line-height:1.45}
.pcard ul{list-style:none;display:grid;gap:7px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:18px}
.pcard li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:9px;vertical-align:2px;opacity:.6}
.pcard .more{margin-top:auto;font-weight:800;font-size:14px}
.drawer{display:none;margin-top:24px;background:var(--card);border-radius:26px;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.drawer.on{display:grid;grid-template-columns:.8fr 1.2fr}
.dr-l{padding:36px;color:#fff}
.dr-l h3{font-size:32px;font-weight:900;margin:0 0 8px}
.dr-l p{opacity:.92}
.dr-r{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}
.svc{padding:16px 18px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}
.svc b{display:block;font-size:15px}
.svc span{font-size:14px;color:var(--muted)}

/* ---------- Wealth Plan assessment ---------- */
.quiz-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:60px;align-items:center}
.game{background:var(--card);border-radius:30px;box-shadow:var(--sh-3);border:1px solid var(--line);overflow:hidden}
.g-hd{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-bottom:1px solid var(--line);font-weight:800}
.g-hd small{font-weight:700;color:var(--muted);font-size:13px}
.g-bar{height:6px;background:var(--soft-2)}.g-bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .5s}
.g-bd{padding:28px 26px;min-height:410px}
.g-n{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.g-q{font-size:24px;font-weight:800;margin:8px 0 20px;line-height:1.25}
.g-o{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:16px;border:2px solid var(--line);background:transparent;color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;margin-bottom:11px;transition:.15s}
.g-o:hover{border-color:var(--blue)}
.g-o .k{flex:0 0 32px;height:32px;border-radius:10px;background:var(--soft-2);display:grid;place-items:center;font-weight:800;color:var(--ink-2);font-size:14px}
.back{background:none;border:0;color:var(--muted);font-weight:700;font-size:14px;cursor:pointer;margin-top:6px}
.res h3{font-size:27px;font-weight:900;margin:6px 0 6px}
.rbars{display:grid;gap:12px;margin:18px 0 22px}
.rrow{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;font-weight:700;font-size:14px}
.rbar{height:12px;border-radius:12px;background:var(--soft-2);overflow:hidden}.rbar i{display:block;height:100%;width:0;border-radius:12px;transition:width 1s .2s}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form input{padding:15px 16px;border-radius:13px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:500 15px "Montserrat"}
.form input::placeholder{color:var(--faint)}
.form input:focus{outline:0;border-color:var(--blue)}
.form .full{grid-column:1/-1}
.fine{font-size:12.5px;color:var(--faint);margin-top:12px;line-height:1.5}
.steps-l{list-style:none;display:grid;gap:16px;margin-top:30px}
.steps-l li{display:flex;gap:16px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.steps-l b{color:var(--ink)}
.steps-l .n{flex:0 0 38px;height:38px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:900}

/* ---------- Calculator ---------- */
.calc{position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;width:760px;height:760px;right:-240px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,255,.22),transparent 68%)}
.calc::after{content:"";position:absolute;width:600px;height:600px;left:-260px;bottom:-320px;border-radius:50%;background:radial-gradient(circle,rgba(118,192,67,.16),transparent 68%)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:34px;box-shadow:var(--sh-3)}
.fld{margin-bottom:24px}
.fld label{display:flex;justify-content:space-between;font-weight:800;margin-bottom:10px;font-size:15px}
.fld output{color:var(--blue)}
input[type=range]{width:100%;accent-color:var(--blue)}
.out{border-radius:22px;background:var(--soft);padding:22px;text-align:center;border:1px solid var(--line)}
.out small{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.out .d{font-size:40px;font-weight:900;margin:4px 0}
.out .s{font-size:14px;font-weight:600;color:var(--muted)}.out .s b{color:var(--ink)}

/* ---------- What's included + paths ---------- */
.value{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}
.inc{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1);font-size:15px;font-weight:600;color:var(--muted)}
.inc i{flex:0 0 10px;height:10px;border-radius:50%;margin-top:7px}
.inc b{color:var(--ink);display:block}
.paths{display:grid;gap:18px;position:sticky;top:100px}
.path-c{border-radius:28px;padding:30px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-2);position:relative}
.path-c.feat{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.path-c .role{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.path-c h3{font-size:22px;font-weight:900;margin:6px 0 4px}
.path-c .price{font-size:40px;font-weight:900;margin:10px 0 0}
.path-c .price small{font-size:15px;color:var(--muted);font-weight:700}
.path-c .t{font-size:14px;color:var(--muted);font-weight:600;margin-bottom:18px}
.path-c .btn{width:100%}
.path-c .tag{position:absolute;top:-13px;right:24px;background:var(--grad);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px}
.path-c ul{list-style:none;display:grid;gap:8px;margin:0 0 20px;font-size:14px;font-weight:600;color:var(--ink-2)}
.path-c li::before{content:"✓";color:var(--green);font-weight:900;margin-right:8px}

/* ---------- How it works ---------- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px;align-items:start}
.hw{background:var(--card);border-radius:26px;padding:30px;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hw .num{width:52px;height:52px;border-radius:16px;background:var(--grad);color:#fff;font-size:22px;font-weight:900;display:grid;place-items:center;margin-bottom:18px}
.hw h3{font-size:21px;font-weight:800;margin-bottom:8px}
.hw p{color:var(--muted);font-size:15px}
.portal{margin-top:20px;background:#0e0f11;color:#f4f5f7;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;font-size:12.5px}
.portal .pr{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:#1a1b1f;margin-top:6px;font-weight:600}
.portal .pr i{width:8px;height:8px;border-radius:50%}
.portal .pr span{margin-left:auto;color:#a3a7b0;font-size:11.5px}

/* ---------- Stories ---------- */
.stories{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.st{border-radius:24px;overflow:hidden;position:relative;aspect-ratio:3/4;box-shadow:var(--sh-2);cursor:pointer}
.st img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.st:hover img{transform:scale(1.05)}
.st::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,0) 45%,rgba(14,15,17,.88))}
.st .pl{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;z-index:1}
.st .pl::before{content:"";border-left:18px solid #0e0f11;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.st .who{position:absolute;left:20px;bottom:18px;color:#fff;z-index:1}
.st .who b{display:block;font-size:18px}.st .who span{font-size:14px;opacity:.85;font-weight:600}
.community{margin-top:26px;border-radius:30px;overflow:hidden;position:relative;min-height:300px;display:flex;align-items:center;color:#fff}
.community img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.community::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,15,17,.92),rgba(14,15,17,.5) 60%,rgba(14,15,17,.1));z-index:1}
.community .tx{position:relative;z-index:2;padding:48px;max-width:620px}
.community h3{font-size:34px;font-weight:900;margin-bottom:10px}
.community p{color:#d6d9df;margin-bottom:22px}

/* ---------- CEO ---------- */
.ceo{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:center}
.ceo-ph{border-radius:32px;background:var(--grad);padding-top:34px;display:flex;justify-content:center;overflow:hidden;box-shadow:var(--sh-2)}
.ceo-ph img{width:80%}
.ceo blockquote{font-size:25px;font-weight:700;line-height:1.45;margin:18px 0}
.ceo .sig{height:62px;mix-blend-mode:multiply}
html.dark .ceo .sig,.dk .ceo .sig{mix-blend-mode:normal;filter:invert(1);opacity:.9}
.ceo .who{font-weight:700;color:var(--muted);font-size:15px}
.ceo .lnk{display:inline-block;margin-top:18px;font-weight:800;color:var(--blue)}

/* ---------- FAQ ---------- */
.faq-l{max-width:860px;margin:44px auto 0;display:grid;gap:12px}
details{background:var(--card);border-radius:18px;border:1px solid var(--line);box-shadow:var(--sh-1);padding:0 24px}
summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:800;font-size:17px;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:26px;line-height:.8;color:var(--blue);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--muted);font-size:16px}

/* ---------- Final CTA ---------- */
.final .box{display:grid;grid-template-columns:1.1fr .9fr;border-radius:36px;overflow:hidden;background:linear-gradient(120deg,rgba(0,180,255,.10),rgba(118,192,67,.10)),var(--soft);border:1px solid var(--line);box-shadow:var(--sh-2)}
.final .tx{padding:60px}
.final .ph{display:flex;align-items:flex-end;justify-content:center;padding-top:30px}
.final .ph img{width:94%}

/* ---------- Footer (always the portal's dark) ---------- */
footer{background:#0b0c0e;color:#a3a7b0;padding:70px 0 30px;font-size:15px;border-top:1px solid rgba(255,255,255,.06)}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
footer h4{color:#f4f5f7;font-size:15px;margin-bottom:14px}
footer ul{list-style:none;display:grid;gap:10px}
footer a:hover{color:#fff}
.flogo img{height:54px;margin-bottom:18px}
.legal{border-top:1px solid rgba(255,255,255,.08);margin-top:48px;padding-top:24px;font-size:13px;color:#6f747e;display:grid;gap:10px}
.legal a{text-decoration:underline}
.mcta{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){.prob-grid{grid-template-columns:repeat(3,1fr)}.pgrid{grid-template-columns:1fr 1fr}.stories{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  nav.nv,.hd-r .login{display:none}.burger{display:block}
  .section{padding:80px 0}
  .hero-grid,.quiz-grid,.calc-grid,.value,.ceo,.final .box,.drawer.on{grid-template-columns:1fr}
  .qcard{position:relative;left:auto;bottom:auto;width:auto;margin:-80px 16px 0}
  .hero-badge{right:12px}
  .how-grid{grid-template-columns:1fr}.paths{position:static}.fg{grid-template-columns:1fr 1fr}.proof{margin-top:70px}
}
@media (max-width:600px){
  body{font-size:16px}.wrap{padding:0 18px}
  .prob-grid,.pgrid,.incl,.dr-r,.stories,.form{grid-template-columns:1fr}
  .hd-r .btn{display:none}.final .tx,.community .tx{padding:30px}
  .proof .wrap{flex-direction:column;align-items:flex-start;gap:10px}.fg{grid-template-columns:1fr}
  .mcta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:80;transition:transform .3s}.mcta .btn{flex:1}.mcta.hide{transform:translateY(120%)}
  footer{padding-bottom:100px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =============================================================
   Inner-page components (Membership, Precious Metals, Opportunity,
   Fundable360, About, Enrollment, Events)
   ============================================================= */
nav.nv a.on{color:var(--ink)}
nav.nv a.on::after{transform:scaleX(1)}

/* Mobile menu drawer */
.mnav{position:fixed;inset:0;z-index:90;display:none}
.mnav.on{display:block}
.mnav .sc{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.mnav .pn{position:absolute;right:0;top:0;bottom:0;width:min(340px,86vw);background:#0e0f11;color:#f4f5f7;padding:24px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.mnav .pn a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.mnav .pn .btn{margin-top:16px;border:0}
.mnav .x{align-self:flex-end;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;line-height:1}

/* Page hero */
.phero{position:relative;padding:70px 0 90px;overflow:hidden}
.phero::before{content:"";position:absolute;width:900px;height:900px;left:-380px;top:-460px;border-radius:50%;background:radial-gradient(circle,rgba(0,180,255,.16),transparent 65%);pointer-events:none}
.phero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative}
.phero h1{font-size:clamp(40px,5vw,64px);font-weight:900;margin:18px 0 20px}
.phero .lede{font-size:19px}
.phero-img{border-radius:32px;overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3.3;position:relative}
.phero-img img{width:100%;height:100%;object-fit:cover}
.phero-img .chip{position:absolute;left:18px;bottom:18px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:11px 15px;font-weight:800;font-size:14px;box-shadow:var(--sh-2);display:flex;gap:10px;align-items:center}
.phero-img .chip i{width:30px;height:30px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-style:normal}
.crumb{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.crumb a:hover{color:var(--blue)}
/* Full-bleed photo hero */
.phero.bleed{padding:150px 0 130px;color:#fff}
.phero.bleed>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero.bleed::before{width:auto;height:auto;inset:0;left:0;top:0;border-radius:0;background:linear-gradient(90deg,rgba(14,15,17,.94) 0%,rgba(14,15,17,.72) 50%,rgba(14,15,17,.25) 100%);z-index:1}
.phero.bleed .wrap{position:relative;z-index:2}
.phero.bleed .tx{max-width:680px}
.phero.bleed .lede{color:#d6d9df}

/* Video block: poster first, Vimeo/YouTube loads on click */
.vid{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:#0e0f11;box-shadow:var(--sh-3);cursor:pointer}
.vid img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s,transform .5s}
.vid:hover img{opacity:.95;transform:scale(1.03)}
.vid .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--grad);display:grid;place-items:center;box-shadow:0 16px 40px rgba(0,180,255,.45)}
.vid .pl::before{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.vid .cap{position:absolute;left:22px;bottom:18px;color:#fff;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid.grad-poster{background:linear-gradient(135deg,#0e0f11,#1a1b1f)}

/* Split: media + text */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev>:first-child{order:2}
.split .ph{border-radius:30px;overflow:hidden;box-shadow:var(--sh-2)}
.split .ph img{width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;display:grid;gap:12px;margin:24px 0 30px}
.ticks li{display:flex;gap:12px;font-weight:600;color:var(--ink-2)}
.ticks li::before{content:"✓";flex:0 0 26px;height:26px;border-radius:8px;background:rgba(118,192,67,.15);color:var(--green);display:grid;place-items:center;font-weight:900;font-size:14px}

/* Feature cards */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.fgrid.four{grid-template-columns:repeat(4,1fr)}
.fc{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:var(--sh-1)}
.fc .ic{width:50px;height:50px;border-radius:15px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:18px}
.fc h3{font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.01em}
.fc p{color:var(--muted);font-size:15px}
.fc .tagline{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;display:block}

/* Service cards (Membership page), colored by pillar */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.sv{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--sh-1);border-top:4px solid var(--pc,var(--blue))}
.sv h3{font-size:19px;font-weight:800;margin-bottom:6px}
.sv .pr{font-weight:700;color:var(--pc,var(--blue));font-size:14px;margin-bottom:10px}
.sv p{color:var(--muted);font-size:15px}
.pill-h{display:flex;align-items:center;gap:18px;margin-top:70px}
.pill-h:first-of-type{margin-top:40px}
.pill-h .bx{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;flex:0 0 64px}
.pill-h h3{font-size:30px;font-weight:900}
.pill-h p{color:var(--muted);font-weight:600}

/* Compare (Precious Metals) */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.cmp .c{border-radius:26px;padding:32px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1)}
.cmp .c.win{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:var(--sh-2)}
.cmp h3{font-size:22px;font-weight:900;margin-bottom:16px}
.cmp ul{list-style:none;display:grid;gap:12px}
.cmp li{display:flex;gap:12px;font-weight:600;color:var(--ink-2)}
.cmp .c:not(.win) li::before{content:"–";color:var(--faint);font-weight:900}
.cmp .c.win li::before{content:"✓";color:var(--green);font-weight:900}

/* Disclosure */
.disc{margin-top:34px;border-radius:18px;border:1px solid var(--line);background:var(--soft);padding:18px 22px;font-size:13.5px;color:var(--muted);line-height:1.6}
.disc b{color:var(--ink-2)}

/* Reward cards (Opportunity) */
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.rc{border-radius:26px;padding:32px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2);position:relative;overflow:hidden}
.rc::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--grad)}
.rc .n{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.rc h3{font-size:26px;font-weight:900;margin:8px 0 10px}
.rc p{color:var(--muted)}

/* Team (About) */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:48px}
.tm{text-align:center}
.tm .ph{aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:var(--grad);box-shadow:var(--sh-2);margin-bottom:14px;display:flex;align-items:flex-end;justify-content:center}
.tm .ph img{width:100%;height:100%;object-fit:cover;object-position:center bottom}  /* cut-out portraits stand on the tile's bottom edge, like the home page CEO tile */
.tm b{display:block;font-size:16px}
.tm span{font-size:13.5px;color:var(--muted);font-weight:600}
/* CEO letter */
.letter{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.letter .fam{border-radius:30px;overflow:hidden;box-shadow:var(--sh-3);position:sticky;top:110px}
.letter .fam img{width:100%}
.letter p{font-size:18px;color:var(--ink-2);margin-bottom:18px}
.letter p.lead1{font-size:22px;font-weight:700;color:var(--ink);line-height:1.5}
.letter .sig{height:66px;margin-top:10px;mix-blend-mode:multiply}
.dk .letter .sig{mix-blend-mode:normal;filter:invert(1);opacity:.9}
.mission{border-radius:32px;padding:56px;background:linear-gradient(120deg,rgba(0,180,255,.12),rgba(118,192,67,.12)),var(--soft);border:1px solid var(--line);text-align:center}
.mission p{font-size:22px;font-weight:700;max-width:860px;margin:0 auto;line-height:1.5}

/* Enrollment plans */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:stretch}
.plans .path-c{display:flex;flex-direction:column}
.plans .path-c ul{flex:1}
.plans .path-c .old{font-size:18px;color:var(--faint);text-decoration:line-through;font-weight:700;margin-left:8px}
.nodir{display:none;margin-top:18px;border-radius:16px;padding:16px 20px;background:rgba(245,185,66,.12);border:1px solid rgba(245,185,66,.45);font-weight:700;color:var(--ink-2);text-align:center}
.nodir.on{display:block}

/* Events */
.ev{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.agenda{display:grid;gap:14px;margin-top:26px}
.day{border-radius:22px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sh-1);overflow:hidden}
.day .dh{padding:16px 22px;background:var(--soft);font-weight:800;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.day .dh small{color:var(--muted);font-weight:700}
.slot{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 22px;border-top:1px solid var(--line);font-size:15px}
.slot b{color:var(--blue);font-weight:800}
.tix{border-radius:28px;padding:30px;border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:var(--sh-3);position:sticky;top:110px}
.tix .price{font-size:44px;font-weight:900}
.tix .meta{display:grid;gap:10px;margin:18px 0 24px;font-size:15px;font-weight:600;color:var(--ink-2)}
.tix .meta div{display:flex;gap:10px}
.tix .btn{width:100%}

/* Notice modal (no Director, form messages) */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}
.modal.on{display:grid}
.modal .sc{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal .bx{position:relative;max-width:440px;width:100%;background:#1a1b1f;color:#f4f5f7;border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:32px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.modal h3{font-size:22px;font-weight:900;margin-bottom:10px}
.modal p{color:#a3a7b0;white-space:pre-line}
.modal .btn{margin-top:22px}
.fmsg{font-weight:800;font-size:18px;margin-top:14px}
.fmsg.err{color:#e5484d;font-size:15px}
button[disabled]{opacity:.6;cursor:wait}

/* Director bar photo */
.dbar .av img{width:30px;height:30px;border-radius:50%;object-fit:cover}

/* Strip CTA */
.strip{border-radius:32px;padding:50px 56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:var(--grad);color:#fff;box-shadow:var(--sh-2)}
.strip h2{color:#fff;margin:0;font-size:clamp(28px,3.2vw,40px)}
.strip p{opacity:.92;font-weight:600;margin-top:6px}
.strip .btn{background:#0e0f11;color:#fff}

@media (max-width:1080px){.team{grid-template-columns:repeat(3,1fr)}.fgrid.four{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  .phero-grid,.split,.cmp,.letter,.plans,.ev{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .fgrid,.svc-grid,.rcards{grid-template-columns:1fr 1fr}
  .letter .fam,.tix{position:static}
  .phero.bleed{padding:100px 0 90px}
}
@media (max-width:600px){
  .fgrid,.fgrid.four,.svc-grid,.rcards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .slot{grid-template-columns:1fr;gap:2px}
  .mission,.strip{padding:32px 24px}
  .phero{padding:44px 0 60px}
}

/* Let flex/grid children shrink to the phone width (no clipped text) */
.community .tx{flex:1 1 auto;min-width:0}
.final .box>*{min-width:0}
@media (max-width:960px){.final .box{grid-template-columns:minmax(0,1fr)}}@media (max-width:600px){.btn{white-space:normal;text-align:center}.proof .lbl{white-space:normal}}

/* =============================================================
   Motion layer (js/fx.js adds html.fx, and `.go` when an element scrolls into view).
   Entrances are TRANSITIONS from a start state that exists only under `html.fx :not(.go)`, so static
   renders, no-JS and reduced-motion all land on the finished artwork. Idle loops are animations.
   ============================================================= */

/* ---------- Typing headline (see js/fx.js) ---------- */
html.fx-type h1.type:not(.ready){visibility:hidden}
h1.type{position:relative;line-height:1.14} /* a little more air than the 1.08 default so the underline clears the line below */
.type .tw{white-space:nowrap}
.type .tc{opacity:0;transition:opacity .34s ease}
.type .tc.on{opacity:1}
/* once each letter carries its own gradient colour the line no longer needs the clipped background */
.type .tl.flat{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
.type .caret{position:absolute;left:0;top:0;width:.04em;min-width:2px;border-radius:2px;background:var(--blue);pointer-events:none;transition:transform .085s linear,opacity .7s ease;animation:mwrCaret 1.2s ease-in-out infinite}
.type .caret.done{animation:none;opacity:0}
@keyframes mwrCaret{0%,100%{opacity:1}50%{opacity:.15}}
/* Single-stroke underline under "You", rising gently to the right, drawn once "You" is typed.
   Start state exists only while .typing is on the h1 (reduced-motion / static renders show it finished). */
.emph{position:relative}
.emph .ul{position:absolute;left:-1%;bottom:.01em;width:102%;height:.19em;overflow:visible;pointer-events:none}
.emph .ul path{fill:none;stroke:url(#mwrUl);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.emph .ul .u1{stroke-width:7.2}
.typing .emph:not(.go) .ul path{stroke-dashoffset:1}
.emph .ul .u1{transition:stroke-dashoffset .9s cubic-bezier(.6,.05,.25,1)}

/* ---------- Drawn checkmark (hero badge, page chips) ---------- */
.chk{width:22px;height:22px;display:block;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.chip .chk{width:16px;height:16px}
.chk path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .35s}
html.fx .chk:not(.go) path{stroke-dashoffset:1}

/* ---------- Problem icons: glossy gradient tiles, drawn in when the row scrolls into view ---------- */
.prob-grid .pc{transition:transform .3s,box-shadow .3s}
.prob-grid .pc:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* One shared scroll drift for every tile: translate only, same direction, so the row stays level
   (the old per-tile rotation and even/odd offsets are what made one tile look tilted). */
.prob-grid .pc .ic{--p:0;position:relative;width:62px;height:62px;border-radius:19px;margin-bottom:18px;color:#fff;
  background:radial-gradient(120% 90% at 25% 15%,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(145deg,var(--g1),var(--g2));
  box-shadow:0 12px 26px -10px var(--g2),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -6px 14px rgba(0,0,0,.12);
  transform:translate3d(0,calc(var(--p) * -6px),0);will-change:transform}
.prob-grid .pc .ic::after{content:"";position:absolute;inset:-6px;border-radius:24px;background:linear-gradient(145deg,var(--g1),var(--g2));opacity:.18;filter:blur(10px);z-index:-1}
.prob-grid .pi{width:32px;height:32px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.prob-grid .pi *{transform-box:view-box}
.prob-grid .mh,.prob-grid .hh,.prob-grid .tk{transform-origin:12px 12px}
.prob-grid .tk{opacity:.6}
.prob-grid .ln,.prob-grid .l1,.prob-grid .l2,.prob-grid .l3{stroke-dasharray:1;stroke-dashoffset:0}
.prob-grid .ry{--dx:0;--dy:-1}.prob-grid .ry.r2{--dx:-.7;--dy:-.7}.prob-grid .ry.r3{--dx:.7;--dy:-.7}
/* start states (waiting to scroll into view) */
html.fx .prob-grid:not(.go) .mh{transform:rotate(-300deg)}
html.fx .prob-grid:not(.go) .hh{transform:rotate(-60deg)}
html.fx .prob-grid:not(.go) .tk{opacity:0}
html.fx .prob-grid:not(.go) .ln,html.fx .prob-grid:not(.go) .l1,html.fx .prob-grid:not(.go) .l2,html.fx .prob-grid:not(.go) .l3{stroke-dashoffset:1}
html.fx .prob-grid:not(.go) .up{transform:translate(-1px,4px)}
html.fx .prob-grid:not(.go) .ah{opacity:0;transform:translate(-3px,3px)}
html.fx .prob-grid:not(.go) .um{transform:translateY(2px);opacity:.4}
html.fx .prob-grid:not(.go) .sun{transform:translateY(5px);opacity:.3}
html.fx .prob-grid:not(.go) .ry{opacity:0}
/* entrances */
html.fx .prob-grid .mh,html.fx .prob-grid .hh{transition:transform 1.8s cubic-bezier(.2,.8,.2,1) .3s}
html.fx .prob-grid .tk{transition:opacity .5s ease 1.3s}
html.fx .prob-grid .ln{transition:stroke-dashoffset 1.3s ease .45s}
html.fx .prob-grid .up{transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .45s}
html.fx .prob-grid .ah{transition:opacity .4s ease 1.55s,transform .4s ease 1.55s}
html.fx .prob-grid .l1{transition:stroke-dashoffset .65s ease .5s}
html.fx .prob-grid .l2{transition:stroke-dashoffset .65s ease .95s}
html.fx .prob-grid .l3{transition:stroke-dashoffset .65s ease 1.4s}
html.fx .prob-grid .um{transition:transform .7s cubic-bezier(.3,1.6,.5,1) .75s,opacity .5s ease .75s}
html.fx .prob-grid .sun{transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .9s,opacity 1s ease .9s}
html.fx .prob-grid .ry{transition:opacity .5s ease 1.9s}
html.fx .prob-grid .ry.r2{transition-delay:2s}html.fx .prob-grid .ry.r3{transition-delay:2.1s}
/* gentle life once revealed, all five icons */
html.fx .prob-grid.go .mh{animation:mwrSpin 24s linear 2.2s infinite}
html.fx .prob-grid.go .hh{animation:mwrSpin 288s linear 2.2s infinite}
html.fx .prob-grid.go .tk{animation:mwrTick 4s ease-in-out 2.2s infinite}
html.fx .prob-grid.go .t2{animation-delay:3.2s}html.fx .prob-grid.go .t3{animation-delay:4.2s}html.fx .prob-grid.go .t4{animation-delay:5.2s}
html.fx .prob-grid.go .up{animation:mwrRise 3.4s ease-in-out 2.4s infinite}
html.fx .prob-grid.go .dr{animation:mwrDrop 2.4s ease-in infinite}
html.fx .prob-grid.go .d2{animation-delay:.8s}html.fx .prob-grid.go .d3{animation-delay:1.6s}
html.fx .prob-grid.go .ry{animation:mwrRay 3s ease-in-out 2.6s infinite}
/* sunrise loop: the sun dips behind the horizon line (clipped in the markup) and rises again, rays riding along */
html.fx .prob-grid.go .sun{animation:mwrSunrise 6.5s ease-in-out 2.8s infinite}
html.fx .prob-grid.go .ry.r2{animation-delay:2.9s}html.fx .prob-grid.go .ry.r3{animation-delay:3.2s}
@keyframes mwrSpin{to{transform:rotate(360deg)}}
@keyframes mwrTick{0%,100%{opacity:.35;transform:scale(1)}10%,20%{opacity:1;transform:scale(1.1)}35%{opacity:.35;transform:scale(1)}}
@keyframes mwrRise{0%,100%{transform:translate(0,0)}50%{transform:translate(.9px,-1.2px)}}
@keyframes mwrDrop{0%{transform:translateY(-1px);opacity:0}25%{opacity:1}80%{transform:translateY(4px);opacity:0}100%{opacity:0}}
@keyframes mwrRay{0%,100%{opacity:1;transform:translate(0,0)}50%{opacity:.25;transform:translate(calc(var(--dx) * 1.5px),calc(var(--dy) * 1.5px))}}
@keyframes mwrSunrise{0%,38%{transform:translateY(0)}70%{transform:translateY(5.4px)}100%{transform:translateY(0)}}

/* ---------- Four pillars: hover ----------
   Everything eases with one curve (fast out, long settle) so it reads as one motion. Each icon's gesture is applied to a GROUP wrapped
   around the artwork (.pi-g, added in home.js) so the whole icon moves as one object: the old key spun each of its strokes around its
   own centre, which pulled the ring and shaft apart. */
.pcard{container-type:inline-size}
.pcard .ph::before{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pcard .ph::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);pointer-events:none}
.pcard .pico{transition:transform .6s cubic-bezier(.22,1,.36,1);transform-origin:50% 55%}
.pcard .pico *{transform-box:fill-box;transform-origin:center}
.pcard .pico .pi-g{transform-box:view-box;transform-origin:12px 12px}
.pcard:hover .ph::before,.pcard:focus-visible .ph::before{transform:scale(1.3)}
.pcard:hover .ph::after,.pcard:focus-visible .ph::after{animation:pSheen 1.25s cubic-bezier(.3,.2,.2,1)}
.pcard:hover .pico,.pcard:focus-visible .pico{transform:translateY(-3px) scale(1.07)}
/* Keep More (wallet): a soft tip-and-settle */
.pcard[data-k=keep]:hover .pi-g{animation:pKeep 1.1s cubic-bezier(.22,1,.36,1)}
/* Access More (key): swings like a key on a ring, pivoting at the bow, a few settling swings */
.pcard[data-k=access] .pi-g{transform-origin:7.5px 15.5px}
.pcard[data-k=access]:hover .pi-g{animation:pKey 1.5s ease-in-out}
/* Own More (stack): the layers lift one after another, the sparkles breathe */
.pcard[data-k=own]:hover .pico path:nth-child(-n+3){animation:pLift 1s cubic-bezier(.45,0,.2,1)}
.pcard[data-k=own]:hover .pico path:nth-child(2){animation-delay:.1s}
.pcard[data-k=own]:hover .pico path:nth-child(1){animation-delay:.2s}
.pcard[data-k=own]:hover .pico path:nth-child(n+4){animation:pTwinkle 1.2s ease-in-out}
/* Make More (arrow): the line redraws, the head lands as it finishes */
.pcard[data-k=make] .pico polyline{stroke-dasharray:1;stroke-dashoffset:0}
.pcard[data-k=make]:hover .pico polyline:nth-child(1){animation:pDraw .95s cubic-bezier(.4,0,.2,1)}
.pcard[data-k=make]:hover .pico polyline:nth-child(2){animation:pHead .95s cubic-bezier(.4,0,.2,1)}
@keyframes pSheen{to{left:140%}}
@keyframes pKeep{0%{transform:rotate(0)}30%{transform:rotate(-4.5deg) translateY(-.3px)}65%{transform:rotate(1.8deg)}100%{transform:rotate(0)}}
@keyframes pKey{0%{transform:rotate(0)}22%{transform:rotate(-9deg)}48%{transform:rotate(5deg)}70%{transform:rotate(-2.4deg)}86%{transform:rotate(.8deg)}100%{transform:rotate(0)}}
@keyframes pLift{0%,100%{transform:translateY(0)}45%{transform:translateY(-1.4px)}}
@keyframes pTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
@keyframes pDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pHead{0%,55%{opacity:0;transform:translate(-2px,2px)}100%{opacity:1;transform:none}}
/* "See everything in X →" stays on ONE line and the four links line up: the link sits at the bottom of its (equal-height) card and its
   type size scales with the card so the longest name ("Access More") still fits */
.pcard .more{display:block;white-space:nowrap;font-size:13px;font-size:clamp(10.5px,calc((100cqw - 44px) / 17.6),14px);letter-spacing:-.005em}

/* ---------- Step numbers (Wealth Plan list, How it works): pop in ---------- */
.steps-l .n,.hw .num{transition:opacity .5s ease,transform .7s cubic-bezier(.3,1.55,.5,1),box-shadow .7s ease;box-shadow:0 8px 20px -8px rgba(0,180,255,.5)}
html.fx .steps-l:not(.go) .n,html.fx .hw:not(.go) .num{opacity:0;transform:translateY(14px) scale(.55) rotate(-14deg);box-shadow:none}
.steps-l li:nth-child(2) .n{transition-delay:.18s}.steps-l li:nth-child(3) .n{transition-delay:.36s}

/* ---------- Own More / Make More heading tiles (Membership) ---------- */
.pill-h .bx{transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .5s ease}
.pill-h .bx *{transform-box:fill-box;transform-origin:center}
html.fx #own.pill-h:not(.go) .bx,html.fx #make.pill-h:not(.go) .bx{transform:scale(.8);opacity:.4}
#own.pill-h svg path,#make.pill-h svg polyline{transition:transform .6s cubic-bezier(.3,1.4,.5,1) var(--d,0s),opacity .5s ease var(--d,0s),stroke-dashoffset .8s ease var(--d,0s)}
#make.pill-h svg polyline{stroke-dasharray:1;stroke-dashoffset:0}
#own.pill-h svg path:nth-child(1){--d:.15s}#own.pill-h svg path:nth-child(2){--d:.3s}#own.pill-h svg path:nth-child(3){--d:.45s}
#own.pill-h svg path:nth-child(4){--d:.8s}#own.pill-h svg path:nth-child(5){--d:.95s}
html.fx #own.pill-h:not(.go) svg path:nth-child(-n+3){transform:translateY(-5px);opacity:0}
html.fx #own.pill-h:not(.go) svg path:nth-child(n+4){transform:scale(.2);opacity:0}
html.fx #make.pill-h:not(.go) svg polyline{stroke-dashoffset:1}
#make.pill-h svg polyline:nth-child(2){--d:.7s}
html.fx #make.pill-h:not(.go) svg polyline:nth-child(2){transform:translate(-3px,3px);opacity:0}
html.fx #own.pill-h.go svg path:nth-child(n+4){animation:pTwinkle 3.2s ease-in-out 1.8s infinite}
html.fx #own.pill-h.go svg path:nth-child(5){animation-delay:2.6s}

/* ---------- Opportunity feature icons: each draws in as its card scrolls into view ---------- */
.fc .ic svg *{transform-box:fill-box;transform-origin:center}
.fc .ic .d{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease var(--d,.2s)}
.fc .ic .o-pop{transition:transform .7s cubic-bezier(.3,1.6,.5,1) var(--d,.2s),opacity .4s ease var(--d,.2s)}
html.fx .fc:not(.go) .ic .d{stroke-dashoffset:1}
html.fx .fc:not(.go) .ic .o-pop{transform:scale(.2);opacity:0}
html.fx .fc:not(.go) .ic .o-drop{transform:translateY(-5px);opacity:0}
html.fx .fc:not(.go) .ic .o-rise{transform:translateY(3px);opacity:0}
html.fx .fc:not(.go) .ic .o-star{transform:scale(.3) rotate(-40deg);opacity:0}
.fc .ic .o-drop{transition:transform .8s cubic-bezier(.3,1.5,.5,1) .15s,opacity .4s ease .15s}
.fc .ic .o-rise{transition:transform .6s ease var(--d,.5s),opacity .5s ease var(--d,.5s)}
.fc .ic .o-star{transition:transform .9s cubic-bezier(.3,1.6,.5,1) .15s,opacity .4s ease .15s}
.fc .ic .o-b{--d:.7s}.fc .ic .o-c{--d:1s}
html.fx .fc.go .ic .o-live{animation:pTwinkle 1.8s ease-in-out 1.2s infinite}
html.fx .fc.go .ic .o-star{animation:mwrStar 4.2s ease-in-out 1.4s infinite}
@keyframes mwrStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(8deg)}}

/* ---------- Gentle loops: every entrance-only icon keeps a slow, subtle replay so it can be seen ---------- */
/* redraw: hold finished, fade out, redraw. First frame equals the finished artwork so a loop starting never "pops". */
@keyframes mwrRedraw{0%,68%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:0}81%{stroke-dashoffset:1;opacity:0}82%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
/* arrowhead rides the same cycle, reappearing as its line finishes drawing */
@keyframes mwrHeadLoop{0%,68%{opacity:1;transform:none}80%{opacity:0;transform:translate(-3px,3px)}96%{opacity:0;transform:translate(-3px,3px)}100%{opacity:1;transform:none}}
@keyframes mwrClimb{0%{opacity:1;transform:translate(0,0)}55%{opacity:1;transform:translate(1.3px,-1.7px)}80%{opacity:0;transform:translate(2.2px,-2.8px)}81%{opacity:0;transform:translate(-1.8px,2.2px)}100%{opacity:1;transform:translate(0,0)}}
@keyframes mwrBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
@keyframes mwrBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

/* problem icons: receipt lines re-draw one after another; the inflation arrow climbs and repeats */
html.fx .prob-grid.go .l1{animation:mwrRedraw 7s ease-in-out 3.2s infinite}
html.fx .prob-grid.go .l2{animation:mwrRedraw 7s ease-in-out 3.6s infinite}
html.fx .prob-grid.go .l3{animation:mwrRedraw 7s ease-in-out 4s infinite}
html.fx .prob-grid.go .up{animation:mwrClimb 3.6s ease-in-out 2.4s infinite}

/* drawn checkmarks (hero badge, page chips) */
html.fx .chk.go path{animation:mwrRedraw 8s ease-in-out 3.2s infinite}

/* Own More / Make More tiles */
html.fx #own.pill-h.go svg path:nth-child(1){animation:pLift 4.4s ease-in-out 2.4s infinite}
html.fx #own.pill-h.go svg path:nth-child(2){animation:pLift 4.4s ease-in-out 2.55s infinite}
html.fx #own.pill-h.go svg path:nth-child(3){animation:pLift 4.4s ease-in-out 2.7s infinite}
html.fx #make.pill-h.go svg polyline:nth-child(1){animation:mwrRedraw 7s ease-in-out 2.6s infinite}
html.fx #make.pill-h.go svg polyline:nth-child(2){animation:mwrHeadLoop 7s ease-in-out 2.6s infinite}

/* Opportunity icons, in card order: screen, chart, cap, person, key (star already loops) */
html.fx .fgrid .fc.go:nth-child(1) .ic rect.d{animation:mwrRedraw 7s ease-in-out 3s infinite}
html.fx .fgrid .fc.go:nth-child(2) .ic .d.o-b{animation:mwrRedraw 7s ease-in-out 3.4s infinite}
html.fx .fgrid .fc.go:nth-child(3) .ic .o-drop{animation:mwrBob 3.6s ease-in-out 2.4s infinite}
html.fx .fgrid .fc.go:nth-child(4) .ic .o-pop{animation:mwrBreath 3.8s ease-in-out 2.6s infinite}
html.fx .fgrid .fc.go:nth-child(5) .ic .d.o-b{animation:mwrRedraw 7s ease-in-out 3.2s infinite}
html.fx .fgrid .fc.go:nth-child(5) .ic .d.o-c{animation:mwrRedraw 7s ease-in-out 3.4s infinite}

/* ---------- Stopwatch ("Find your money leaks in 60 seconds") ----------
   A REAL minute: the hand takes 60s per lap, then holds on 60 for 3s and restarts (63s cycle).
   CSS drives the hand + progress arc; js/fx.js drives the readout, the progress bar, the ticks, and lights each of the three
   steps below in turn (0-20s, 20-40s, 40-60s). Static / no-JS / reduced-motion show it at rest, no steps highlighted. */
.swrow{display:flex;align-items:center;gap:22px;margin:30px 0 4px;padding:18px 22px 18px 18px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.stopw{flex:0 0 auto;display:block;width:96px;height:96px;overflow:visible}
.stopw .sw-face{fill:var(--soft)}
.stopw .sw-ring{fill:none;stroke:url(#mwrSw);stroke-width:4.2}
.stopw .sw-case{filter:drop-shadow(0 8px 14px rgba(0,180,255,.22))}
.stopw .sw-tk{stroke:var(--faint);stroke-width:1;opacity:.5;stroke-linecap:round}
.stopw .sw-tk.mj{stroke-width:1.9;opacity:.8}
.stopw .sw-tk.on{opacity:1;transition:stroke .15s}
.stopw .sw-arc{fill:none;stroke:url(#mwrSw);stroke-width:3.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:60px 68px;opacity:.9}
.stopw .sw-hand{transform-origin:60px 68px}
.stopw .sw-hand line{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.stopw .sw-pivot{fill:var(--ink)}
.sw-info{flex:1;min-width:0}
.sw-time{display:flex;align-items:baseline;gap:10px;font-weight:800}
.sw-read{font-size:44px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .25s}
.sw-time span{font-size:15px;font-weight:700;color:var(--muted)}
.sw-bar{height:8px;border-radius:8px;background:var(--soft-2);margin-top:12px;overflow:hidden}
.sw-bar i{display:block;height:100%;width:100%;border-radius:8px;background:var(--grad);transform-origin:left center;transform:scaleX(1)}
.swrow.done .sw-read{color:var(--green)}
html.fx .swrow:not(.go){opacity:0;transform:translateY(16px)}
html.fx .swrow{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
html.fx .swrow.go .sw-hand{animation:swHand 63s linear infinite}
html.fx .swrow.go .sw-arc{animation:swArc 63s linear infinite}
html.fx .swrow.go .sw-case{animation:swPulse 63s ease-out infinite;transform-origin:60px 68px}
@keyframes swHand{0%{transform:rotate(0)}95.24%,100%{transform:rotate(360deg)}}
@keyframes swArc{0%{stroke-dashoffset:1;opacity:.9}95.24%,98.4%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}
@keyframes swPulse{0%,95%{transform:scale(1)}96.2%{transform:scale(1.05)}98.5%,100%{transform:scale(1)}}
/* the three steps ride the same clock: the active third glows and fills a thin progress line, finished thirds stay full */
.steps-l.sync li{position:relative;padding-bottom:12px;transition:opacity .4s}
.steps-l.sync li::before{content:"";position:absolute;left:54px;right:0;bottom:0;height:3px;border-radius:3px;background:var(--soft-2)}
.steps-l.sync li::after{content:"";position:absolute;left:54px;bottom:0;height:3px;border-radius:3px;background:var(--grad);width:calc((100% - 54px) * var(--p,0))}
.steps-l.sync li .n{transition:transform .5s cubic-bezier(.3,1.5,.5,1),box-shadow .5s,opacity .5s}
.steps-l.sync li.active .n{transform:scale(1.12);box-shadow:0 0 0 5px rgba(0,180,255,.16),0 10px 22px -6px rgba(0,180,255,.6)}
.steps-l.sync li:not(.active):not(.fin){opacity:.62}
@media (max-width:600px){.swrow{gap:16px;padding:14px}.stopw{width:80px;height:80px}.sw-read{font-size:34px}}

/* Spanish runs ~35% longer: a slightly smaller hero headline keeps it to four lines instead of five */
html[lang^="es"] .hero h1{font-size:clamp(38px,4.5vw,62px)}

/* headlines that opt into the underline (data-ul="word") need the same breathing room as the home headline */
h1[data-ul],h1.has-ul,h2.has-ul{line-height:1.14}

/* Opportunity hero checkmarks: revealed one by one (js/fx.js, [data-seq]) */
.assure[data-seq] span{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
html.fx .assure[data-seq] span:not(.show){opacity:0;transform:translateY(8px)}
.assure[data-seq] span.show::before{animation:mwrChkPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes mwrChkPop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}

/* Heart that replaces the headline's closing period ("The right community matters"): the gradient's end colour, sits on the baseline where the period sat */
.hrt{display:inline-block;width:.4em;height:.37em;margin-left:.07em;vertical-align:-.02em;fill:#76c043;overflow:visible}

/* ---------- Completion: the stopwatch becomes a trophy ---------- */
.swrow .trophy,.swrow .sw-done{display:none}
.swrow.complete .stopw,.swrow.complete .sw-info{display:none}
.swrow.complete .trophy{display:block;flex:0 0 auto;width:96px;height:96px;overflow:visible;animation:trPop .9s cubic-bezier(.3,1.5,.5,1) both;filter:drop-shadow(0 10px 16px rgba(245,185,66,.35))}
.swrow.complete .sw-done{display:block;flex:1;min-width:0;animation:trMsg .7s ease .35s both}
.swrow.complete{border-color:rgba(245,185,66,.55);box-shadow:0 14px 34px -14px rgba(245,185,66,.5)}
.sw-done b{display:block;font-size:30px;font-weight:900;line-height:1.1;letter-spacing:-.02em}
.sw-done span{display:block;margin-top:4px;font-size:16px;font-weight:600;color:var(--muted)}
.trophy .tr-h{fill:none;stroke:#e7a52a;stroke-width:5;stroke-linecap:round}
.trophy .tr-sp path{fill:none;stroke:#ffd36b;stroke-width:2.2;stroke-linecap:round}
.trophy *{transform-box:fill-box;transform-origin:center}
.swrow.complete .tr-body{animation:trFloat 4.2s ease-in-out 1s infinite}
.swrow.complete .tr-shine{animation:trShine 5.2s ease-in-out 1.4s infinite}
.swrow.complete .tr-sp path{animation:pTwinkle 2.8s ease-in-out 1s infinite}
.swrow.complete .tr-sp .s2{animation-delay:1.9s}.swrow.complete .tr-sp .s3{animation-delay:2.7s}
@keyframes trPop{0%{opacity:0;transform:scale(.45) rotate(-10deg)}100%{opacity:1;transform:none}}
@keyframes trMsg{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:none}}
@keyframes trFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.6px)}}
@keyframes trShine{0%,55%{transform:translateX(0)}85%,100%{transform:translateX(130px)}}
@media (max-width:600px){.swrow.complete .trophy{width:80px;height:80px}.sw-done b{font-size:24px}}

/* a hair wider so "community matters" + the closing heart stay on one line */
.phero.bleed .tx{max-width:740px}
.phero.bleed .tx .lede{max-width:680px}
/* completion message / trophy are click targets that jump to the first-name field (js/fx.js) */
.swrow.complete .trophy,.swrow.complete .sw-done{cursor:pointer}
.swrow.complete .sw-done:hover b{color:var(--blue)}
.swrow.complete .sw-done:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:10px}

/* Rainbow shimmer (Membership "privileges"): a colour wave runs through the word's letters once, then each letter eases back to its own
   gradient colour. No 100% keyframe on purpose: the browser blends the last stop into the element's real colour. */
@keyframes mwrRainbow{0%{color:#ff5a7a}17%{color:#ff9f43}34%{color:#ffe14d}51%{color:#4cd37a}68%{color:#3db8ff}85%{color:#a67cff}}
.tw.rb .tc{animation:mwrRainbow 1.9s ease-in-out both;animation-delay:calc(var(--i,0) * 60ms)}
/* the Opportunity heart lands after the last letter */
.hrt{transition:opacity .45s ease 1.4s,transform .7s cubic-bezier(.3,1.6,.5,1) 1.4s;transform-origin:50% 60%}
html.fx .type:not(.typed) .hrt{opacity:0;transform:scale(.2)}

/* ---------- Sentence-by-sentence headings ([data-sentences], js/fx.js) ---------- */
.sent{display:inline-block}
.gt.flat-seq{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
html.fx [data-sentences] .sent{transition:opacity .85s ease,transform .95s cubic-bezier(.2,.8,.2,1)}
html.fx [data-sentences] .sent:not(.on){opacity:0;transform:translateY(10px)}

/* ---------- Membership four-pillar cards: entrance + a slow subtle loop, like the other icons on the site ---------- */
.fgrid.four .fc .ic{transition:transform .8s cubic-bezier(.3,1.5,.5,1),opacity .5s ease}
html.fx .fgrid.four .fc:not(.go) .ic{transform:scale(.7);opacity:.25}
.fgrid.four .fc .ic .pi-g{transform-box:view-box;transform-origin:12px 12px}
.fgrid.four .fc[data-pk=access] .ic .pi-g{transform-origin:7.5px 15.5px}
.fgrid.four .fc[data-pk=make] .ic polyline{stroke-dasharray:1;stroke-dashoffset:0}
html.fx .fgrid.four .fc.go[data-pk=keep] .ic .pi-g{animation:mwrKeepLoop 6s ease-in-out 1.2s infinite}
html.fx .fgrid.four .fc.go[data-pk=access] .ic .pi-g{animation:mwrKeyLoop 6.5s ease-in-out 1.6s infinite}
html.fx .fgrid.four .fc.go[data-pk=own] .ic path:nth-child(1){animation:pLift 4.6s ease-in-out 1.4s infinite}
html.fx .fgrid.four .fc.go[data-pk=own] .ic path:nth-child(2){animation:pLift 4.6s ease-in-out 1.55s infinite}
html.fx .fgrid.four .fc.go[data-pk=own] .ic path:nth-child(3){animation:pLift 4.6s ease-in-out 1.7s infinite}
html.fx .fgrid.four .fc.go[data-pk=own] .ic path:nth-child(n+4){animation:pTwinkle 3.2s ease-in-out 1.9s infinite}
html.fx .fgrid.four .fc.go[data-pk=make] .ic polyline:nth-child(1){animation:mwrRedraw 7s ease-in-out 1.8s infinite}
html.fx .fgrid.four .fc.go[data-pk=make] .ic polyline:nth-child(2){animation:mwrHeadLoop 7s ease-in-out 1.8s infinite}
@keyframes mwrKeepLoop{0%,60%,100%{transform:rotate(0)}74%{transform:rotate(-3.5deg)}88%{transform:rotate(1.4deg)}}
@keyframes mwrKeyLoop{0%,55%,100%{transform:rotate(0)}68%{transform:rotate(-6deg)}82%{transform:rotate(3deg)}92%{transform:rotate(-1deg)}}

/* ---------- Precious Metals "Why it's exclusive" icons: lock, institution, star ---------- */
.excl .fc .ic .m-col{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.excl .fc .ic .m-pop{transition:transform .7s cubic-bezier(.3,1.6,.5,1) .1s,opacity .4s ease .1s}
.excl .fc .ic .m-shackle{transition:transform .8s cubic-bezier(.3,1.5,.5,1) .35s,opacity .4s ease .35s}
.excl .fc .ic .m-roof{transition:transform .8s cubic-bezier(.3,1.5,.5,1) .15s,opacity .4s ease .15s}
.excl .fc .ic .m-base{transition:opacity .5s ease}
.excl .fc .ic .c1{--d:.2s}.excl .fc .ic .c2{--d:.32s}.excl .fc .ic .c3{--d:.44s}.excl .fc .ic .c4{--d:.56s}
html.fx .excl .fc:not(.go) .ic .m-pop{transform:scale(.4);opacity:0}
html.fx .excl .fc:not(.go) .ic .m-shackle{transform:translateY(-4px);opacity:0}
html.fx .excl .fc:not(.go) .ic .m-roof{transform:translateY(-5px);opacity:0}
html.fx .excl .fc:not(.go) .ic .m-col{stroke-dashoffset:1}
html.fx .excl .fc:not(.go) .ic .m-base{opacity:0}
/* slow loops: the shackle gives a tiny "click"; the columns pulse in sequence, like a ledger being read */
html.fx .excl .fc.go .ic .m-shackle{animation:mwrShackle 6s ease-in-out 2s infinite}
html.fx .excl .fc.go .ic .m-col{animation:mwrColPulse 5s ease-in-out 2.2s infinite}
html.fx .excl .fc.go .ic .c2{animation-delay:2.5s}html.fx .excl .fc.go .ic .c3{animation-delay:2.8s}html.fx .excl .fc.go .ic .c4{animation-delay:3.1s}
@keyframes mwrShackle{0%,66%,100%{transform:translateY(0)}74%{transform:translateY(-1.7px)}83%{transform:translateY(.5px)}91%{transform:translateY(0)}}
@keyframes mwrColPulse{0%,100%{opacity:1;transform:scaleY(1)}40%{opacity:.45;transform:scaleY(.82)}}
.excl .fc .ic .m-col{transform-origin:50% 100%}

/* =============================================================
   Remaining icons: Fundable360 six, Keep/Access More tiles, reward numbers, hero chips
   ============================================================= */
/* ---------- Fundable360 icons (entrance when the card scrolls in, then a slow loop) ---------- */
.fgrid .fc .ic .f-draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease .15s}
.fgrid .fc .ic .f-l1{transition-delay:.55s}.fgrid .fc .ic .f-l2{transition-delay:.8s}
.fgrid .fc .ic .f-plus,.fgrid .fc .ic .f-wallet,.fgrid .fc .ic .f-body,.fgrid .fc .ic .f-head,.fgrid .fc .ic .f-hand,.fgrid .fc .ic .f-head2{transition:transform .8s cubic-bezier(.3,1.5,.5,1) .15s,opacity .5s ease .15s}
.fgrid .fc .ic .f-hand{transform-origin:12px 12px;transform-box:view-box}
.fgrid .fc .ic .f-plus{transform-origin:12px 12px;transform-box:view-box}
html.fx .fgrid .fc:not(.go) .ic .f-draw{stroke-dashoffset:1}
html.fx .fgrid .fc:not(.go) .ic .f-plus{transform:rotate(-90deg) scale(.3);opacity:0}
html.fx .fgrid .fc:not(.go) .ic .f-wallet{transform:translateY(-5px);opacity:0}
html.fx .fgrid .fc:not(.go) .ic .f-body{transform:translateY(3px);opacity:0}
html.fx .fgrid .fc:not(.go) .ic .f-head{transform:scale(.2);opacity:0}
html.fx .fgrid .fc:not(.go) .ic .f-hand{transform:rotate(-120deg);opacity:0}
html.fx .fgrid .fc:not(.go) .ic .f-head2{opacity:0;transform:translate(-3px,3px)}
.fgrid .fc .ic .f-head2{transition-delay:1.1s}
/* loops */
html.fx .fgrid .fc.go .ic .f-l1{animation:mwrRedraw 7s ease-in-out 3.2s infinite}
html.fx .fgrid .fc.go .ic .f-l2{animation:mwrRedraw 7s ease-in-out 3.5s infinite}
html.fx .fgrid .fc.go .ic .f-plus{animation:fPlus 6s ease-in-out 2s infinite}
html.fx .fgrid .fc.go .ic .f-wallet{animation:mwrBob 3.8s ease-in-out 2.2s infinite}
html.fx .fgrid .fc.go .ic .f-head{animation:mwrBreath 3.8s ease-in-out 2.4s infinite}
html.fx .fgrid .fc.go .ic .f-hand{animation:mwrSpin 18s linear 2.4s infinite}
html.fx .fgrid .fc.go .ic circle.f-draw{animation:mwrRedraw 9s ease-in-out 3.5s infinite}
html.fx .fgrid .fc.go .ic .f-draw:not(.f-l1):not(.f-l2):not(circle){animation:mwrRedraw 7s ease-in-out 3.4s infinite}
html.fx .fgrid .fc.go .ic .f-head2{animation:mwrHeadLoop 7s ease-in-out 3.4s infinite}
@keyframes fPlus{0%,60%,100%{transform:rotate(0) scale(1)}78%{transform:rotate(90deg) scale(1.1)}90%{transform:rotate(90deg) scale(1)}}
/* the document card's frame is also a .f-draw rect: keep it steady, only the text lines redraw */
html.fx .fgrid .fc.go .ic rect.f-draw{animation:none}

/* ---------- Membership: Keep More + Access More heading tiles (Own/Make already animate) ---------- */
html.fx #keep.pill-h:not(.go) .bx,html.fx #access.pill-h:not(.go) .bx{transform:scale(.8);opacity:.4}
.pill-h .bx .pi-g{transform-box:view-box;transform-origin:12px 12px}
#access.pill-h .bx .pi-g{transform-origin:7.5px 15.5px}
html.fx #keep.pill-h.go .bx .pi-g{animation:mwrKeepLoop 6s ease-in-out 1.2s infinite}
html.fx #access.pill-h.go .bx .pi-g{animation:mwrKeyLoop 6.5s ease-in-out 1.6s infinite}

/* ---------- Opportunity reward numbers 01 / 02 / 03 ---------- */
.rc .n{display:inline-block;transform-origin:left center;transition:opacity .6s ease var(--d,0s),transform .8s cubic-bezier(.3,1.5,.5,1) var(--d,0s),letter-spacing .9s ease var(--d,0s)}
.rcards .rc:nth-child(2) .n{--d:.15s}.rcards .rc:nth-child(3) .n{--d:.3s}
html.fx .rc:not(.go) .n{opacity:0;transform:translateY(8px) scale(.7);letter-spacing:.5em}
.rc::before{transform-origin:left center;transition:transform 1.1s cubic-bezier(.4,0,.2,1) .1s}
html.fx .rc:not(.go)::before{transform:scaleX(0)}
html.fx .rc.go .n{animation:mwrBreath 4.2s ease-in-out 1.6s infinite}
html.fx .rcards .rc:nth-child(2).go .n{animation-delay:2.2s}html.fx .rcards .rc:nth-child(3).go .n{animation-delay:2.8s}

/* ---------- Hero chips: the lock (Precious Metals) and the heart (About) ---------- */
.chip i{display:grid;place-items:center}
.chk-ic{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.chk-ic *{transform-box:fill-box;transform-origin:center}
html.fx .phero-img.in .chip .m-shackle{animation:mwrShackle 5s ease-in-out 1.6s infinite}
html.fx .phero-img.in .chip i.beat{animation:chipHeart 3.4s ease-in-out 1.4s infinite}
@keyframes chipHeart{0%,100%{transform:scale(1)}12%{transform:scale(1.2)}24%{transform:scale(1)}36%{transform:scale(1.12)}60%{transform:scale(1)}}

/* Precious Metals: full-bleed coin hero (2026-10-21). Coins sit on the right; the text column is wider than the old two-column hero. */
.phero.pm-bleed{padding:120px 0 110px}
.phero.pm-bleed>img{object-position:50% center}
.phero.pm-bleed::before{background:linear-gradient(90deg,rgba(10,12,18,.94) 0%,rgba(10,12,18,.84) 36%,rgba(10,12,18,.4) 60%,rgba(10,12,18,.1) 100%)}
.phero.pm-bleed .tx{max-width:800px}
.phero.pm-bleed .tx .lede{max-width:720px}
.phero.pm-bleed h1{font-size:clamp(40px,4.6vw,58px)}
@media (max-width:760px){.phero.pm-bleed{padding:56px 0 300px}.phero.pm-bleed>img{inset:auto 0 -80px 0;height:600px;object-position:95% 0}.phero.pm-bleed::before{background:linear-gradient(180deg,#0e0f11 0,#0e0f11 calc(100% - 520px),rgba(14,15,17,.7) calc(100% - 410px),rgba(14,15,17,.05) calc(100% - 300px),rgba(14,15,17,0) 100%)}}@media (min-width:761px) and (max-width:1100px){.phero.pm-bleed{padding:80px 0 330px}.phero.pm-bleed>img{inset:auto 0 -90px 0;height:640px;object-position:100% 0}.phero.pm-bleed::before{background:linear-gradient(180deg,#0e0f11 0,#0e0f11 calc(100% - 560px),rgba(14,15,17,.7) calc(100% - 440px),rgba(14,15,17,.05) calc(100% - 330px),rgba(14,15,17,0) 100%)}}
/* Precious Metals hero: MWR silver collage (2026-10-21), replaces the coin image. Darker overlay because the collage is busy. */
.phero.pm-bleed.pm-collage>img{object-position:35% center}
.phero.pm-bleed.pm-collage::before{background:linear-gradient(90deg,rgba(10,12,18,.94) 0%,rgba(10,12,18,.88) 50%,rgba(10,12,18,.55) 72%,rgba(10,12,18,.3) 100%)}
@media (min-width:761px) and (max-width:1100px){.phero.pm-bleed.pm-collage{padding:80px 0 500px}.phero.pm-bleed.pm-collage>img{inset:auto 0 0 0;height:520px;object-position:12% center}.phero.pm-bleed.pm-collage::before{background:linear-gradient(180deg,#0e0f11 0,#0e0f11 calc(100% - 520px),rgba(14,15,17,.75) calc(100% - 470px),rgba(14,15,17,.15) calc(100% - 380px),rgba(14,15,17,.05) 100%)}}
@media (max-width:760px){.phero.pm-bleed.pm-collage{padding:56px 0 410px}.phero.pm-bleed.pm-collage>img{inset:auto 0 0 0;height:400px;object-position:35% center}.phero.pm-bleed.pm-collage::before{background:linear-gradient(180deg,#0e0f11 0,#0e0f11 calc(100% - 400px),rgba(14,15,17,.75) calc(100% - 360px),rgba(14,15,17,.15) calc(100% - 280px),rgba(14,15,17,.05) 100%)}}
/* Director bar on phones: one centered block, photo inline before the text, callback link centered below */
@media (max-width:600px){
  .dbar{font-size:13.5px;line-height:1.4}
  .dbar .wrap{display:block;text-align:center;padding:9px 16px 10px}
  .dbar .av,.dbar .av img{width:24px;height:24px}
  .dbar .av{display:inline-grid;vertical-align:-6px;margin-right:7px;font-size:10px}
  .dbar .wrap>span:nth-child(2){display:inline}
  .dbar #director-name{display:block;font-size:15px}
  .dbar a{display:block;margin-top:3px}
}