/*! Wedu App section · v3 · 2026-10-23 (v3: the bottom fades into black like the top, no divider line under it)
   "The Wedu App." band on the homepage, right after "What we do" and before "In good company".
   The markup is in index.html: <section class="wfa" id="app">. Sign-ups use the site's own form
   (site.js → FormSubmit → info@wedu.io, subject "Wedu app invite request (wedu.io homepage)").
   TO TURN IT OFF: add the word hidden to that tag (<section class="wfa" id="app" hidden ...>) and publish,
   or delete the section and the flagship.css <link> from index.html. Nothing else on the page depends on it. */
.wfa{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(72px,7vw,104px) var(--side,24px) clamp(64px,6vw,88px);background:linear-gradient(180deg,#000 0%,#0B0E15 34%,#131720 62%);color:#fff;font-family:var(--fb);scroll-margin-top:calc(var(--h,68px) + 12px)}
.wfa[hidden]{display:none}
.wfa-top,.wfa-cta{position:relative;z-index:3;width:100%}
.wfa-top{max-width:1312px}
.wfa .wfa-eb{justify-content:center}
.wfa .wfa-h{margin:16px 0 0;font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:0;font-size:clamp(64px,10.4vw,150px);line-height:.9;text-transform:uppercase}
.wfa-tag{margin:22px 0 0;font-size:clamp(19px,1.7vw,24px);line-height:1.3}
.wfa-whisper{margin:14px auto 0;max-width:560px;font:500 13px/1.55 var(--fd);letter-spacing:.25em;text-transform:uppercase;color:#8E99AE}
.wfa-stage{position:relative;z-index:1;width:100%;height:280px;margin-top:36px}
.wfa-stage.rv{opacity:1;transform:none;transition:none}
.wfa-glow,.wfa-haze,.wfa-rim,.wfa-floor{position:absolute;left:50%;border-radius:50%}
.wfa-glow{top:16px;width:1400px;height:420px;margin-left:-700px;background:radial-gradient(closest-side,rgba(38,227,246,.16),rgba(38,227,246,0))}
.wfa-haze{top:222px;width:2000px;height:1000px;margin-left:-1000px;background:linear-gradient(90deg,rgba(143,247,167,0) 22%,#8FF7A7 42%,#26E3F6 58%,rgba(38,227,246,0) 78%);filter:blur(30px);opacity:.85}
.wfa-rim{top:226px;width:2000px;height:1000px;margin-left:-1000px;background:linear-gradient(90deg,rgba(143,247,167,0) 18%,#8FF7A7 40%,#26E3F6 60%,rgba(38,227,246,0) 82%)}
.wfa-floor{top:228px;width:2000px;height:1000px;margin-left:-1000px;background:#090C12}
.wfa-phone{position:absolute;left:50%;top:10px;width:250px;height:520px;margin-left:-125px;border-radius:40px;background:linear-gradient(180deg,#1B2130 0%,#0B0E15 60%);border:1px solid rgba(228,239,245,.28);box-shadow:0 -12px 60px rgba(38,227,246,.22);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .15s}
.wfa-stage.rv:not(.in) .wfa-phone{transform:translateY(90px)}
.wfa-screen{position:absolute;inset:9px;border-radius:31px;overflow:hidden;background:radial-gradient(120% 50% at 50% 0%,rgba(38,227,246,.24) 0%,rgba(11,14,21,0) 70%),#0B0E15}
.wfa-ol{position:absolute;left:0;top:0;width:100%;aspect-ratio:390/844;container-type:inline-size}
.wfa-ol span{position:absolute;border:.4cqw dashed rgba(38,227,246,.45);border-radius:99px}
.wfa-ol span.m{border-color:rgba(143,247,167,.6)}
.wfa-ol svg{position:absolute;left:0;top:0;width:100%;height:100%}
.wfa-notch{position:absolute;top:12px;left:50%;width:30%;height:16px;transform:translateX(-50%);border-radius:99px;background:#000}
.wfa-icon{position:absolute;top:74px;left:50%;width:60px;height:60px;margin-left:-30px;border-radius:17px;background:#8FF7A7;color:#000;display:flex;align-items:center;justify-content:center;font:400 32px/1 Anton,Impact,sans-serif;box-shadow:0 0 0 10px rgba(143,247,167,.08),0 0 60px rgba(143,247,167,.5);animation:wfa-breathe 4.5s ease-in-out infinite alternate}
@keyframes wfa-breathe{from{box-shadow:0 0 0 10px rgba(143,247,167,.07),0 0 42px rgba(143,247,167,.36)}to{box-shadow:0 0 0 13px rgba(143,247,167,.1),0 0 78px rgba(143,247,167,.62)}}
.wfa-name{position:absolute;top:152px;left:0;right:0;text-align:center;font:700 11px/1 var(--fd);letter-spacing:3px;text-transform:uppercase;color:#8E99AE}
.wfa-cta{max-width:560px;margin-top:6px}
.wfa-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.wfa-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1.5px solid rgba(228,239,245,.4);font-size:14px;line-height:1.2;color:#fff}
.wfa-chip-mint{border-color:#8FF7A7;color:#8FF7A7}
.wfa-chip-mint i{width:8px;height:8px;border-radius:50%;border:2px solid #8FF7A7}
.wfa-form{margin:22px 0 0;text-align:left}
.wfa .wfa-form label{display:block;margin:0 0 8px;font-size:13px;color:#AEB8C8}
.wfa-row{display:flex;flex-wrap:wrap;gap:10px}
.wfa .wfa-row input{flex:1 1 240px;min-width:0;width:auto;height:52px;padding:0 20px;border-radius:99px;border:1.5px solid rgba(228,239,245,.4);background:#0B0E15;color:#fff;font:400 16px var(--fb)}
.wfa .wfa-row input::placeholder{color:#8E99AE;opacity:1}
.wfa .wfa-row input:focus{outline:none;border-color:#26E3F6;box-shadow:0 0 0 3px rgba(38,227,246,.25)}
.wfa-row button{height:52px;padding:0 24px;border:0;border-radius:99px;background:linear-gradient(90deg,#8FF7A7 0%,#26E3F6 100%);color:#0B0E15;font:500 16px var(--fb);cursor:pointer;transition:transform .25s,box-shadow .25s}
.wfa-row button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(38,227,246,.25)}
.wfa-row button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wfa-row button:disabled{opacity:.7;cursor:progress;transform:none;box-shadow:none}
.wfa .wfa-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.wfa .form-msg{margin:12px 0 0;font-size:14px;line-height:1.4;color:#E4EFF5;text-align:center}
.wfa .form-msg:empty{display:none}
.wfa .form-msg a{color:#8FF7A7}
.wfa-line{margin:18px 0 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;font-size:14px;line-height:1.4;color:#E4EFF5}
.wfa-orbs{display:inline-flex;align-items:center}
.wfa-orbs i{width:26px;height:26px;border-radius:50%;border:2px solid #0B0E15}
.wfa-orbs i+i{margin-left:-8px}
.wfa-orbs i:nth-child(1){background:radial-gradient(circle at 35% 30%,#DFFFEA 0%,#8FF7A7 48%,#2FA77A 100%)}
.wfa-orbs i:nth-child(2){background:radial-gradient(circle at 35% 30%,#D8FCFF 0%,#26E3F6 48%,#0E8FB0 100%)}
.wfa-orbs i:nth-child(3){background:radial-gradient(circle at 35% 30%,#CFE3FF 0%,#1187F1 50%,#1D3FA6 100%)}
.wfa-orbs i:nth-child(4){background:radial-gradient(circle at 35% 30%,#EED6FF 0%,#A225F5 52%,#5B1494 100%)}
@media (max-width:640px){.wfa{padding-top:64px;padding-bottom:56px}.wfa-whisper{font-size:12px;letter-spacing:.2em}.wfa-stage{margin-top:28px}.wfa-row button{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.wfa-icon{animation:none}.wfa-phone,.wfa-row button{transition:none}}
/* bottom fade: the navy floor melts into the black of the next section, like the top does */
.wfa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(160px,22vw,300px);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 55%,#000 100%);pointer-events:none;z-index:2}
.wfa+section{border-top:0}

/* v4 (Oct 23): First look / Invite only are a choice (flagship.js); the picked one wears the mint ring */
button.wfa-chip{-webkit-appearance:none;appearance:none;margin:0;background:transparent;font-family:inherit;font-size:14px;cursor:pointer;transition:border-color .25s,color .25s,background-color .25s}
button.wfa-chip:hover{border-color:rgba(228,239,245,.75);background:rgba(255,255,255,.04)}
button.wfa-chip.wfa-chip-mint:hover{border-color:#8FF7A7}
button.wfa-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wfa-chip:not(.wfa-chip-mint) i{display:none}