:root { --purple:#5d35b0; --deep-purple:#35166f; --yellow:#ffd23f; }
        * { box-sizing:border-box; } body { background:linear-gradient(135deg,#f8f4ff,#fffdf5); color:#2e2445; font-family:'Nunito',Arial,sans-serif; min-height:100vh; }
        .site-header { padding:22px 0; }.brand { color:var(--deep-purple); display:inline-block; font-size:27px; font-weight:800; letter-spacing:-.6px; }.brand:hover,.brand:focus { color:var(--deep-purple); text-decoration:none; }.brand-mark { align-items:center; background:var(--yellow); border-radius:8px; color:var(--deep-purple); display:inline-flex; font-size:17px; height:30px; justify-content:center; margin-right:7px; transform:rotate(-6deg); vertical-align:2px; width:30px; }.header-login { color:#6e637c; font-size:14px; font-weight:700; padding-top:8px; }.header-login a { color:var(--purple); font-weight:800; margin-left:6px; }
        .join-wrap { padding:43px 0 75px; text-align:center; }.eyebrow { color:var(--purple); font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }.join-wrap h1 { color:var(--deep-purple); font-size:36px; font-weight:800; letter-spacing:-.8px; margin:9px 0 8px; }.join-wrap > .container > p { color:#71677e; font-size:16px; margin:auto; max-width:535px; }.account-types { display:flex; gap:24px; justify-content:center; margin:38px auto 0; max-width:785px; text-align:left; }.account-card { background:#fff; border:1px solid #ece5f7; border-radius:15px; box-shadow:0 12px 30px rgba(67,41,121,.08); color:#2e2445; flex:1; overflow:hidden; padding:31px 29px 28px; position:relative; transition:.2s ease; }.account-card:hover { box-shadow:0 17px 34px rgba(67,41,121,.15); color:#2e2445; text-decoration:none; transform:translateY(-4px); }.account-card .icon { align-items:center; background:#f1e9ff; border-radius:12px; color:var(--purple); display:flex; font-size:25px; height:58px; justify-content:center; margin-bottom:22px; width:58px; }.account-card.teacher .icon { background:#fff0b4; color:#7b5700; }.account-card h2 { color:var(--deep-purple); font-size:23px; font-weight:800; margin:0 0 8px; }.account-card p { color:#746a80; font-size:14px; line-height:1.6; margin:0 0 24px; }.account-card .continue { color:var(--purple); font-size:14px; font-weight:800; }.account-card .continue i { margin-left:5px; }.account-card.teacher:after { background:var(--yellow); content:''; height:5px; left:0; position:absolute; top:0; width:100%; }.help { color:#80758d; font-size:13px; margin-top:30px; }.help a { color:var(--purple); font-weight:800; }
        @media(max-width:767px) { .site-header { padding:21px 18px; }.header-login { font-size:12px; }.join-wrap { padding:28px 22px 55px; }.join-wrap h1 { font-size:30px; }.account-types { display:block; margin-top:28px; }.account-card { display:block; margin-bottom:16px; }.account-card:hover { color:#2e2445; }.account-card .icon { margin-bottom:17px; } }