/* New-look preview on the login site: applies only when look.js has put .evex-look on <html> (admins who switched it on). */
@font-face{font-family:'Manrope';src:url(manrope-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Manrope';src:url(manrope-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Manrope';src:url(manrope-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url(manrope-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Manrope';src:url(manrope-800.woff2) format('woff2');font-weight:800 900;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(cormorant-700-italic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Michroma';src:url(michroma-400.woff2) format('woff2');font-weight:400;font-display:swap}
html.evex-look{--ui:Manrope,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:radial-gradient(70% 50% at 85% 0%,rgba(90,31,110,.42),transparent 70%) fixed,
    radial-gradient(60% 45% at 10% 100%,rgba(90,31,110,.22),transparent 70%) fixed,
    radial-gradient(circle at 50% -20%,#153b54 0,#071725 39%,#04111d 100%) fixed #04111d}
html.evex-look .eyebrow{font-family:Michroma,sans-serif;font-weight:400;letter-spacing:.2em}
html.evex-look .card:before{background:linear-gradient(90deg,transparent,#1c5fd6 20%,#e3b563 50%,#a8285f 80%,transparent)}

/* one accent across the login site: gold for links, focus and primary buttons; Eve's plum/rose for selected things */
html.evex-look{--cyan:#f2c25a;scrollbar-color:#4a2a5a transparent}
html.evex-look ::selection{background:rgba(224,85,143,.38);color:#fff}
html.evex-look a:hover{color:#ffe2a3}
html.evex-look .btn{background:linear-gradient(135deg,#ffe08a,#f2c25a 55%,#d99a3a);color:#1b1405;box-shadow:0 10px 30px -12px rgba(242,194,90,.6)}
html.evex-look .btn:hover{color:#1b1405;box-shadow:0 14px 34px -12px rgba(242,194,90,.8)}
html.evex-look .btn.ghost{background:transparent;color:var(--text);box-shadow:none}
html.evex-look .btn.danger{background:transparent}
html.evex-look .form input:focus,html.evex-look .form select:focus{box-shadow:0 0 0 4px rgba(242,194,90,.18)}
html.evex-look .navlink.on{background:rgba(123,45,120,.42);box-shadow:inset 0 0 0 1px rgba(224,85,143,.45)}

/* ---------- the X with Eve's eye replaces the three-bar mark (Ben, Oct 31 00:34) ---------- */
.xmark{display:none}
html.evex-look .mark:not(.xmark){display:none}
html.evex-look .xmark{display:block;filter:drop-shadow(0 0 18px rgba(224,85,143,.28)) drop-shadow(0 0 30px rgba(242,194,90,.18))}
html.evex-look .hero .xmark{width:104px}
html.evex-look .auth .hero .xmark{animation:none}
.xmark .xa{transform-box:fill-box;transform-origin:center}
.xmark .xeye{transform-box:fill-box;transform-origin:center}
/* sign-in pages: the four arms glide in from the corners, then Eve opens her eye */
@keyframes xaIn1{from{opacity:0;transform:translate(-60px,-46px)}}
@keyframes xaIn2{from{opacity:0;transform:translate(60px,-46px)}}
@keyframes xaIn3{from{opacity:0;transform:translate(-60px,46px)}}
@keyframes xaIn4{from{opacity:0;transform:translate(60px,46px)}}
@keyframes eyeOpen{0%,30%{opacity:0;transform:scaleY(.05)}100%{opacity:1;transform:none}}
@keyframes eyeGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(58,166,255,.55))}}
html.evex-look .hero .xmark .xa1{animation:xaIn1 .7s var(--out) .05s both}
html.evex-look .hero .xmark .xa2{animation:xaIn2 .7s var(--out) .12s both}
html.evex-look .hero .xmark .xa3{animation:xaIn3 .7s var(--out) .19s both}
html.evex-look .hero .xmark .xa4{animation:xaIn4 .7s var(--out) .26s both}
html.evex-look .hero .xmark .xeye{animation:eyeOpen .6s var(--out) .62s both,eyeGlow 4.5s ease-in-out 1.6s infinite}
/* on submit: the arms slip back out to the corners and her eye closes */
@keyframes xaOut1{to{opacity:0;transform:translate(-50px,-38px)}}
@keyframes xaOut2{to{opacity:0;transform:translate(50px,-38px)}}
@keyframes xaOut3{to{opacity:0;transform:translate(-50px,38px)}}
@keyframes xaOut4{to{opacity:0;transform:translate(50px,38px)}}
@keyframes eyeClose{to{opacity:0;transform:scaleY(.05)}}
html.evex-look .leaving .hero .xmark .xa1{animation:xaOut1 .42s cubic-bezier(.5,0,.9,.3) .06s both}
html.evex-look .leaving .hero .xmark .xa2{animation:xaOut2 .42s cubic-bezier(.5,0,.9,.3) .06s both}
html.evex-look .leaving .hero .xmark .xa3{animation:xaOut3 .42s cubic-bezier(.5,0,.9,.3) .06s both}
html.evex-look .leaving .hero .xmark .xa4{animation:xaOut4 .42s cubic-bezier(.5,0,.9,.3) .06s both}
html.evex-look .leaving .hero .xmark .xeye{animation:eyeClose .28s ease-in both}
/* after sign-in: the X forms, holds a beat, then the arms fly out to the four corners while her eye zooms toward you
   and the page opens behind it */
@keyframes xaFly1{to{opacity:0;transform:translate(-420px,-320px) rotate(-8deg)}}
@keyframes xaFly2{to{opacity:0;transform:translate(420px,-320px) rotate(8deg)}}
@keyframes xaFly3{to{opacity:0;transform:translate(-420px,320px) rotate(8deg)}}
@keyframes xaFly4{to{opacity:0;transform:translate(420px,320px) rotate(-8deg)}}
@keyframes eyeZoom{0%{transform:none;opacity:1;filter:none}60%{opacity:1}100%{transform:scale(9);opacity:0;filter:blur(3px)}}
html.evex-look .intro .xmark{width:190px;animation:none}
html.evex-look .intro .xmark .xa1{animation:xaIn1 .55s var(--out) 0s both,xaFly1 .75s cubic-bezier(.55,0,.85,.35) 1.05s forwards}
html.evex-look .intro .xmark .xa2{animation:xaIn2 .55s var(--out) .06s both,xaFly2 .75s cubic-bezier(.55,0,.85,.35) 1.05s forwards}
html.evex-look .intro .xmark .xa3{animation:xaIn3 .55s var(--out) .12s both,xaFly3 .75s cubic-bezier(.55,0,.85,.35) 1.05s forwards}
html.evex-look .intro .xmark .xa4{animation:xaIn4 .55s var(--out) .18s both,xaFly4 .75s cubic-bezier(.55,0,.85,.35) 1.05s forwards}
html.evex-look .intro .xmark .xeye{animation:eyeOpen .45s var(--out) .45s both,eyeZoom .85s cubic-bezier(.6,0,.9,.4) 1.1s forwards}
html.evex-look .intro{background:radial-gradient(circle at 50% 45%,#1a1030 0,#04111d 62%);animation:introOpen .6s ease-in 1.5s both}

/* tool colours in the new palette: Daily gold, Intraday rose, Architect orchid (match the -g2 icons) */
html.evex-look .t-daily,html.evex-look .ts.t-daily{--acc:#f2c25a}
html.evex-look .t-intraday,html.evex-look .ts.t-intraday{--acc:#e8739f}
html.evex-look .t-architect,html.evex-look .ts.t-architect{--acc:#6fb6ff}
html.evex-look .tool.t-daily{--ic-glow:#f2c25a55}html.evex-look .tool.t-intraday{--ic-glow:#e8739f50}html.evex-look .tool.t-architect{--ic-glow:#6fb6ff60}
html.evex-look .chip.c-daily{color:#f2c25a;border-color:#f2c25a55;background:#f2c25a12}
html.evex-look .chip.c-intraday{color:#e8739f;border-color:#e8739f55;background:#e8739f12}
html.evex-look .chip.c-architect{color:#6fb6ff;border-color:#6fb6ff55;background:#6fb6ff12}
html.evex-look .tool .eyebrow{letter-spacing:.14em;font-size:11px;white-space:nowrap}

/* ---------- dashboard tiles, premium pass (Ben, Oct 31: "this needs to look more premium") ---------- */
.greet2 h1{font-weight:800;letter-spacing:-.02em}
.greet2 h1 .fn{background:linear-gradient(180deg,#ffe9b0,#e3a94a);-webkit-background-clip:text;background-clip:text;color:transparent}
.greet2 .sub{color:#8fa6b8;font-size:14px}
.tools2{gap:22px;margin-top:26px}
.tools2 .tile{padding:24px 24px 26px;gap:0;border-radius:24px;border:0;isolation:isolate;
  background:radial-gradient(90% 55% at 50% 30%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 70%),
             linear-gradient(180deg,rgba(17,40,58,.82),rgba(6,19,31,.88));
  box-shadow:0 30px 80px -36px #000,inset 0 1px 0 rgba(255,255,255,.07)}
/* hairline gradient border: tool colour at the top fading to nothing */
.tools2 .tile::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 70%,transparent),rgba(150,180,205,.14) 38%,rgba(150,180,205,.06));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tools2 .tile::before{left:30%;right:30%;height:1px;opacity:1;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 90%,#fff),transparent);
  box-shadow:0 0 14px 1px color-mix(in srgb,var(--acc) 60%,transparent)}
.tools2 .tile .sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden}
.tools2 .tile .sheen::before{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.tools2 .tile.on:hover .sheen::before{left:130%}
.tools2 .tile:hover{transform:translateY(-4px);box-shadow:0 40px 90px -36px #000,0 0 50px -18px color-mix(in srgb,var(--acc) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.09)}
.tl-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:22px}
.tl-tag{font:400 9.5px/1.2 Michroma,sans-serif;letter-spacing:.22em;color:var(--acc);white-space:nowrap;opacity:.95}
.st{display:inline-flex;align-items:center;gap:7px;font:400 8.5px/1 Michroma,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 10px 5px;border-radius:99px;white-space:nowrap}
.st-on{color:#9ff0c8;background:rgba(63,207,156,.08);box-shadow:inset 0 0 0 1px rgba(63,207,156,.32)}
.st-on i{width:6px;height:6px;border-radius:50%;background:#3fcf9c;box-shadow:0 0 8px #3fcf9c;animation:stPulse 2.6s ease-in-out infinite}
@keyframes stPulse{50%{opacity:.45}}
.st-soon{color:color-mix(in srgb,var(--acc) 85%,#fff);background:color-mix(in srgb,var(--acc) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 38%,transparent)}
.st-off{color:#8fa6b8;box-shadow:inset 0 0 0 1px rgba(150,180,205,.25)}
.tl-ic{position:relative;width:112px;height:112px;margin:26px auto 20px}
.tl-ic img{position:relative;width:112px;height:112px;display:block;border-radius:28px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 22px var(--ic-glow));transition:transform .35s var(--ease)}
.tl-ic .halo{position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-48%);border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 62%);pointer-events:none}
.tl-ic::after{content:"";position:absolute;left:14%;right:14%;bottom:-14px;height:10px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 35%,transparent),transparent);filter:blur(2px)}
.tile.on:hover .tl-ic img{transform:translateY(-3px) scale(1.03)}
.lockb{position:absolute;right:-8px;bottom:-6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(23,48,68,.95),rgba(8,22,35,.95));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 14px rgba(0,0,0,.5)}
.lockb svg{width:14px;height:14px;fill:none;stroke:color-mix(in srgb,var(--acc) 80%,#fff);stroke-width:1.4}
.tools2 .tile h2{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 14px;text-align:center}
.tools2 .tile h2 .br{font:400 9.5px/1 Michroma,sans-serif;letter-spacing:.42em;padding-left:.42em;color:#8fa6b8}
.tools2 .tile h2 .nm{font:800 30px/1.05 var(--ui);letter-spacing:-.02em;color:#f5fbff}
.tl-facts{display:grid;grid-template-columns:1fr 1fr;margin:0 0 20px;border-top:1px solid rgba(150,180,205,.12);border-bottom:1px solid rgba(150,180,205,.12);flex:1;align-content:center}
.tl-facts div{padding:12px 6px;text-align:center}
.tl-facts div+div{border-left:1px solid rgba(150,180,205,.12)}
.tl-facts dt{font:400 8.5px/1.3 Michroma,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#7f97a9;margin-bottom:6px}
.tl-facts dd{margin:0;font:700 14px/1.3 var(--ui);color:#e6eef4}
.tools2 .tile .meta{margin:0 0 20px;text-align:center;font-size:14px;line-height:1.55;color:#93a9ba;flex:1}
.tools2 .tile .btn{width:100%;min-height:50px;border-radius:14px;font-weight:800;letter-spacing:.01em}
.tools2 .tile .btn.go{background:linear-gradient(180deg,#ffe3a0,#f2c25a 55%,#d9a243);color:#1b1405;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -14px rgba(242,194,90,.8)}
.tools2 .tile.t-intraday .btn.go,.tools2 .tile.t-architect .btn.go{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 55%,#fff),var(--acc));color:#081420}
.tools2 .tile .btn.glass{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#e6eef4;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(150,180,205,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.tools2 .tile .btn.glass:hover{border-color:color-mix(in srgb,var(--acc) 60%,transparent);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 24px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.tools2 .tile .btn.glass .bell{width:15px;height:15px;fill:none;stroke:color-mix(in srgb,var(--acc) 85%,#fff);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.tools2 .tile .btn.glass.done{color:#9ff0c8;border-color:rgba(63,207,156,.35)}
.tools2 .tile .btn.glass.gold-edge{border-color:rgba(242,194,90,.45);color:#ffe2a3}
.tools2 .tile.off .tl-ic img{filter:saturate(.8) brightness(.92) drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 18px var(--ic-glow))}
/* Architect's ice blue reads grey once dimmed (Ben, Oct 31: "architect needs a bit more color"): keep it vivid */
.tools2 .tile.t-architect .tl-ic img{filter:saturate(1.35) brightness(1.05) drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(111,182,255,.55))}
.tools2 .tile.t-architect .halo{background:radial-gradient(circle,rgba(111,182,255,.30),transparent 62%);opacity:1}
.tools2 .tile.off .halo{opacity:.55}
.tools2 .tile.off h2 .nm{color:#d8e3ea}
@media (prefers-reduced-motion:reduce){.st-on i{animation:none}.tools2 .tile .sheen::before{transition:none}}
@media (max-width:420px){.tools2 .tile h2 .nm{font-size:27px}.tl-ic{margin:22px auto 18px}}

/* ---------- How to use EVEX (Oct 31) ---------- */
.lv-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:26px;align-items:center;margin-top:26px;padding:22px;border-radius:24px;
  background:radial-gradient(80% 70% at 20% 30%,rgba(123,45,120,.22),transparent 70%),linear-gradient(180deg,rgba(17,40,58,.82),rgba(6,19,31,.88));
  box-shadow:0 30px 80px -36px #000,inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(242,194,90,.18)}
.lv-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#050f19;box-shadow:inset 0 0 0 1px rgba(150,180,205,.14)}
.lv-frame video{width:100%;height:100%;display:block;background:#000}
.lv-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8fa6b8;
  background:radial-gradient(60% 60% at 50% 45%,rgba(242,194,90,.10),transparent 70%)}
.lv-soon b{font:400 10px/1 Michroma,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#f2c25a}
.lv-soon span:not(.lv-x):not(.lv-n){font-size:13px}
.lv-x{width:64px;height:64px;background:url(/static/icons/evex-x-g2.svg) center/contain no-repeat;opacity:.9;filter:drop-shadow(0 0 18px rgba(242,194,90,.35))}
.lv-n{font:800 34px/1 var(--ui);color:#d8e3ea;opacity:.6}
.lv-k{margin:0 0 8px;font:400 9.5px/1.2 Michroma,sans-serif;letter-spacing:.22em;color:#f2c25a}
.lv-info h2{margin:0 0 10px;font:800 30px/1.1 var(--ui);letter-spacing:-.02em}
.lv-info p:last-child{margin:0;color:#a9bccb;line-height:1.6}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:24px}
.lv-card{padding:14px 14px 18px;border-radius:20px;background:linear-gradient(180deg,rgba(17,40,58,.7),rgba(6,19,31,.8));
  box-shadow:inset 0 0 0 1px rgba(150,180,205,.12);transition:transform .25s var(--ease),box-shadow .25s}
.lv-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(242,194,90,.35),0 24px 50px -30px #000}
.lv-card .lv-k{margin-top:14px}
.lv-card h3{margin:0 0 6px;font:800 18px/1.25 var(--ui)}
.lv-card p:last-child{margin:0;color:#93a9ba;font-size:14px;line-height:1.55}
@media (max-width:760px){.lv-hero{grid-template-columns:1fr;padding:14px}.lv-info h2{font-size:25px}}
.learn-cta{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:9px 16px 9px 10px;border-radius:99px;text-decoration:none;color:#e6eef4;font-size:14px;
  background:linear-gradient(135deg,rgba(242,194,90,.12),rgba(123,45,120,.18));box-shadow:inset 0 0 0 1px rgba(242,194,90,.35);transition:box-shadow .2s}
.learn-cta:hover{box-shadow:inset 0 0 0 1px rgba(242,194,90,.7),0 0 24px -8px rgba(242,194,90,.6);color:#fff}
.learn-cta b{color:#f2c25a;font-weight:800}
.lc-x{width:24px;height:24px;background:url(/static/icons/evex-x-g2.svg) center/contain no-repeat}

/* Eve's name: gold Cormorant italic everywhere (accent rule), as in her Breakdown title */
.eve-name{font-family:'Cormorant Garamond',Garamond,Georgia,serif;font-style:italic;font-weight:700;letter-spacing:.005em;
  background:linear-gradient(180deg,#ffe9b0,#e3a94a);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
h1 .eve-name{font-size:1.12em}