/* ==========================================================================
   Self Mastery: The 30-Day Alignment Protocol — course page
   Ported from the "Self Mastery" design. The hero is static; the moving parts
   sit lower down: the daily-rhythm sun, the 30 lines of the journey (they
   straighten as you reach them, hover a day to light it) and the closing line
   that pulls into alignment. Behaviour: assets/js/self-mastery.js
   ========================================================================== */

.sm-page { overflow: hidden; background: linear-gradient(180deg, #0A0410 0%, #110717 12%, #0A0410 26%, #110717 42%, #0A0410 58%, #110717 76%, #1A0B26 100%); }

/* ---------- hero (static) ---------- */
.sm-hero { position: relative; padding: 0 0 110px; isolation: isolate; text-align: center; background: radial-gradient(60% 40% at 50% 104%, rgba(158, 99, 224, .42) 0%, rgba(122, 61, 184, .16) 45%, rgba(122, 61, 184, 0) 75%), radial-gradient(40% 36% at 50% 38%, rgba(86, 48, 138, .28) 0%, rgba(86, 48, 138, 0) 70%); }
.sm-axis { position: absolute; left: 50%; top: 0; width: 1px; height: 150px; margin-left: -.5px; background: linear-gradient(180deg, rgba(233, 213, 255, 0) 0%, rgba(233, 213, 255, .65) 70%, rgba(255, 255, 255, .95) 100%); box-shadow: 0 0 14px rgba(201, 166, 240, .7); }
.sm-hc { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 150px; }
.sm-eye { position: relative; z-index: 1; padding: 8px 18px; border-radius: 999px; background: #0E0614; font-size: 11.5px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: #D9C2F5; box-shadow: 0 0 0 1px rgba(217, 194, 245, .22); }
.sm-ttl { margin-top: 34px; font-family: var(--serif); font-weight: 500; font-size: clamp(76px, 12.5vw, 196px); line-height: .95; letter-spacing: -.015em; color: var(--white); text-shadow: 0 0 40px rgba(201, 166, 240, .35); }
.sm-tag { margin-top: 30px; font-family: var(--serif); font-size: clamp(28px, 2.8vw, 42px); line-height: 1.15; }
.sm-tag .a { color: var(--muted); }
.sm-tag .b { font-style: italic; color: var(--white); text-shadow: 0 0 26px rgba(201, 166, 240, .55); }
.sm-hr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 36px 80px; margin-top: 72px; text-align: left; }
.sm-hr .body { max-width: 600px; }
.sm-hcta { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }

/* ---------- not theory. practice. ---------- */
.sm-ntg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 48px 80px; }
.sm-nth .a { display: block; color: var(--muted); }
.sm-nth .b { display: block; font-style: italic; color: var(--white); }
.sm-nt1 { margin-top: 30px; max-width: 560px; }
.sm-day { position: relative; padding: 34px 34px 30px; border-radius: 28px; border: 1px solid rgba(217, 194, 245, .18); background: linear-gradient(180deg, rgba(26, 11, 38, .8), rgba(17, 7, 23, .6)); }
.sm-day::before { content: ""; position: absolute; left: 34px; right: 34px; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF, rgba(255, 255, 255, 0)); box-shadow: 0 0 14px rgba(201, 166, 240, .8); }
.sm-dr { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-top: 1px solid rgba(217, 194, 245, .12); }
.sm-dr.first { margin-top: 14px; border-top: 0; }
.sm-dn { flex: none; width: 30px; font-family: var(--serif); font-style: italic; font-size: 20px; color: #C9A6F0; }
.sm-dt { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; color: var(--white); }
.sm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(217, 194, 245, .24); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lilac-3); }
.sm-chip i { width: 6px; height: 6px; border-radius: 50%; background: #E9D5FF; box-shadow: 0 0 8px rgba(233, 213, 255, .9); }
.sm-pull { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 110px; text-align: center; }
.sm-pq { max-width: 980px; font-family: var(--serif); font-size: clamp(30px, 3.3vw, 50px); line-height: 1.22; color: #F3EDFA; text-wrap: balance; }
.sm-pq em { font-style: italic; color: var(--lilac-3); }

/* ---------- your daily rhythm (the sun crosses the sky, 15 s loop) ---------- */
.sm-sky { position: relative; height: 340px; margin-top: 40px; }
.sm-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: .25; }
.sm-glow.g1 { left: -4%; top: 40%; width: 44%; height: 90%; background: radial-gradient(closest-side, rgba(233, 168, 240, .5), rgba(233, 168, 240, 0)); animation: sm-sk1 15s linear infinite; }
.sm-glow.g2 { left: 26%; top: -14%; width: 48%; height: 110%; background: radial-gradient(closest-side, rgba(217, 194, 245, .3), rgba(158, 99, 224, .14) 55%, rgba(158, 99, 224, 0)); animation: sm-sk2 15s linear infinite; }
.sm-glow.g3 { left: 60%; top: 40%; width: 44%; height: 90%; background: radial-gradient(closest-side, rgba(122, 61, 184, .5), rgba(122, 61, 184, 0)); animation: sm-sk3 15s linear infinite; }
.sm-hz { position: absolute; left: 0; right: 0; top: 88%; height: 1px; background: linear-gradient(90deg, rgba(233, 213, 255, 0), rgba(233, 213, 255, .7) 20%, rgba(233, 213, 255, .7) 80%, rgba(233, 213, 255, 0)); }
.sm-sun { position: absolute; left: 6%; top: 88%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 22px 8px rgba(233, 213, 255, .85), 0 0 80px 30px rgba(201, 166, 240, .4); animation: sm-sun 15s linear infinite; }
.sm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 28px; }
.sm-col { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(217, 194, 245, .16); opacity: .45; }
.sm-col.c1 { animation: sm-c1 15s linear infinite; }
.sm-col.c2 { animation: sm-c2 15s linear infinite; }
.sm-col.c3 { animation: sm-c3 15s linear infinite; }
.sm-ck { font-size: 10.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--lilac); }
.sm-cn { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 2.7vw, 40px); line-height: 1; color: var(--white); }
.sm-cd { max-width: 380px; font-size: 16px; line-height: 1.7; color: var(--text); }
.sm-cd em { display: block; margin-top: 10px; font-family: var(--serif); font-size: 21px; line-height: 1.35; color: #F3E8FF; }

/* ---------- the journey: 30 lines of light ---------- */
.sm-jy { background: radial-gradient(60% 40% at 50% 40%, rgba(122, 61, 184, .2) 0%, rgba(122, 61, 184, 0) 72%); }
.sm-cap { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 64px; margin-top: 30px; }
.sm-capk { min-height: 13px; font-size: 10.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--lilac); }
.sm-capt { min-height: 32px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; color: var(--white); }
.sm-field { display: flex; gap: clamp(14px, 2.2vw, 36px); height: 270px; margin-top: 10px; }
.sm-fg { display: flex; justify-content: space-around; align-items: flex-end; }
.sm-nd { position: relative; flex: 1 1 0; height: var(--h); display: flex; justify-content: center; transform-origin: 50% 100%; transform: rotate(var(--a1)); transition: transform 1.8s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--i) * .045s); cursor: default; }
.sm-nl { position: relative; width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(0deg, rgba(122, 61, 184, 0) 0%, var(--c) 100%); transform-origin: 50% 100%; animation: sm-sway var(--sd) ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.sm-nl::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px 3px rgba(201, 166, 240, var(--gl)); }
.sm-nd.hot { transform: rotate(0deg); transition-duration: .6s; transition-delay: 0s; }
.sm-nd.hot .sm-nl { width: 3px; background: linear-gradient(0deg, rgba(122, 61, 184, 0), #FFFFFF); filter: drop-shadow(0 0 8px rgba(233, 213, 255, .9)); animation: none; }
.sm-nd.hot .sm-nl::after { background: #FFFFFF; transform: scale(1.5); }
.sm-jy.pre .sm-nd { transform: rotate(var(--a0)); transition: none; }
.sm-rc { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.sm-rc .a { color: #7F7391; }
.sm-rc .b { color: #F1E4FF; }
.sm-rc .ln { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217, 194, 245, .12), rgba(241, 228, 255, .85)); }
.sm-phs { display: grid; grid-template-columns: 7fr 7fr 9fr 7fr; gap: clamp(14px, 2.2vw, 36px); margin-top: 56px; }
.sm-ph { display: flex; flex-direction: column; gap: 10px; }
.sm-phk { font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--lilac); }
.sm-phn { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; color: var(--white); }
.sm-phd { min-height: 70px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.sm-dl { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid rgba(217, 194, 245, .16); }
.sm-li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(217, 194, 245, .08); cursor: default; }
.sm-li b { flex: none; width: 24px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.35; color: #9E63E0; }
.sm-li span { font-size: 14.5px; line-height: 1.45; color: #EDE7F4; transition: color .3s; }
.sm-li.hot b { color: #E9D5FF; }
.sm-li.hot span { color: var(--white); }

/* ---------- what you'll receive ---------- */
.rcv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.rcv-it { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; border: 1px solid rgba(217, 194, 245, .16); background: linear-gradient(180deg, rgba(26, 11, 38, .75), rgba(17, 7, 23, .6)); }
.rcv-st { position: relative; display: flex; align-items: center; justify-content: center; height: 360px; border-bottom: 1px solid rgba(217, 194, 245, .1); background: radial-gradient(55% 60% at 50% 55%, rgba(122, 61, 184, .3) 0%, rgba(122, 61, 184, 0) 75%); }
.rcv-st::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 34px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.rcv-cov { position: relative; z-index: 1; width: 196px; height: auto; aspect-ratio: 600 / 850; border-radius: 2px 6px 6px 2px; transform: perspective(900px) rotateY(-14deg); box-shadow: -6px 0 0 rgba(0, 0, 0, .25) inset, 18px 24px 44px rgba(0, 0, 0, .55); }
.rcv-ph { display: flex; align-items: center; justify-content: center; }
.rcv-phone { position: relative; z-index: 1; width: 150px; padding: 4px; border-radius: 24px; background: #1B1124; box-shadow: 0 0 0 1px rgba(217, 194, 245, .25), 20px 26px 44px rgba(0, 0, 0, .55); transform: rotate(-4deg); }
.rcv-phone img { display: block; width: 100%; height: auto; border-radius: 20px; }
.rcv-phone.b { z-index: 0; margin-left: -26px; transform: translate(-14px, 22px) rotate(4deg); opacity: .9; }
.rcv-tx { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px 34px; }
.rcv-tx h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--white); }
.rcv-tx p { font-size: 15.5px; line-height: 1.7; color: #EDE7F4; }

/* ---------- is this for you? (three cards) ---------- */
.sm-fy { background: radial-gradient(44% 40% at 88% 50%, rgba(122, 61, 184, .18) 0%, rgba(122, 61, 184, 0) 70%); }
.sm-fyg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.sm-fyc { position: relative; padding: 38px 32px 40px; border-radius: 28px; border: 1px solid rgba(217, 194, 245, .16); background: linear-gradient(180deg, rgba(26, 11, 38, .6), rgba(17, 7, 23, .3)); }
.sm-fyc::before { content: ""; position: absolute; left: 32px; top: -1px; width: 64px; height: 1px; background: #FFFFFF; box-shadow: 0 0 12px 1px rgba(201, 166, 240, .9); }
.sm-fyn { font-family: var(--serif); font-style: italic; font-size: 22px; color: #C9A6F0; }
.sm-fyt { margin-top: 18px; font-family: var(--serif); font-size: clamp(23px, 2vw, 29px); line-height: 1.32; color: #EDE4F6; }
.sm-fyt em { font-style: italic; color: #D9C2F5; }

/* ---------- closing: the line pulls into alignment ---------- */
.sm-cl { position: relative; overflow: hidden; padding: 150px 0 170px; text-align: center; }
.sm-cl::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 120px; background: linear-gradient(180deg, rgba(233, 213, 255, 0), rgba(233, 213, 255, .7)); }
.sm-rise { position: absolute; left: 50%; bottom: -260px; width: min(1100px, 140vw); height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 213, 255, .42) 0%, rgba(185, 140, 232, .26) 30%, rgba(122, 61, 184, .14) 60%, rgba(122, 61, 184, 0) 100%); animation: sm-rise 9s ease-in-out infinite; pointer-events: none; }
.sm-cli { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1000px; margin: 0 auto; }
.sm-c1 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 4.6vw, 70px); line-height: 1.08; color: var(--white); text-wrap: balance; }
/* the aligned line: three soft, offset copies glide into one crisp line */
.sm-al { position: relative; display: inline-block; margin-top: 8px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(46px, 6vw, 92px); line-height: 1.05; white-space: nowrap; }
.sm-al .t0 { position: relative; display: block; color: #F3E8FF; text-shadow: 0 0 30px rgba(201, 166, 240, .55); transition: opacity .9s ease, filter .9s ease; }
.sm-al .g { position: absolute; left: 0; top: 0; right: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; transition: transform .85s cubic-bezier(.2, .7, .1, 1), filter .85s ease, opacity .85s ease; }
.sm-al .g1 { color: #7A3DB8; } .sm-al .g2 { color: #C9A6F0; } .sm-al .g3 { color: #E9A8F0; }
.sm-al .fl { position: absolute; left: 50%; top: 50%; width: 120%; height: 180%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 213, 255, .42), rgba(158, 99, 224, .14) 55%, rgba(158, 99, 224, 0)); opacity: 0; pointer-events: none; }
.sm-al.flash .fl { animation: sm-flash 1.6s ease-out; }
.sm-al.first .g { transition-duration: 2.6s; }
.sm-al.first .t0 { transition: opacity 1.2s ease 1.5s, filter 1.2s ease 1.5s; }
.sm-al.mis .t0 { opacity: 0; transition: none; }
.sm-al.mis .g { opacity: .85; transition: none; }
.sm-al.mis .g1 { transform: translate(-54px, -22px) rotate(-1.8deg); filter: blur(9px); }
.sm-al.mis .g2 { transform: translate(48px, 16px) rotate(1.4deg); filter: blur(7px); }
.sm-al.mis .g3 { transform: translate(-8px, 34px) rotate(.6deg); filter: blur(10px); }
.sm-al.drift .t0 { opacity: .42; filter: blur(1.5px); transition: opacity 1.3s ease, filter 1.3s ease; }
.sm-al.drift .g { opacity: .7; transition: transform 1.3s ease-in-out, filter 1.3s ease, opacity 1.3s ease; }
.sm-al.drift .g1 { transform: translate(-14px, -6px) rotate(-.5deg); filter: blur(3px); }
.sm-al.drift .g2 { transform: translate(13px, 4px) rotate(.4deg); filter: blur(2px); }
.sm-al.drift .g3 { transform: translate(-2px, 10px); filter: blur(3px); }
.sm-tr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 54px; }
.sm-tr li { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 29px); line-height: 1.35; color: #F1ECF7; transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * .35s + .2s); }
.sm-tr li.last { max-width: 820px; margin-top: 12px; font-size: clamp(25px, 2.4vw, 35px); color: var(--white); text-wrap: balance; }
.sm-tr li.last strong { font-weight: 500; text-shadow: 0 0 30px rgba(201, 166, 240, .7); }
.sm-cl.pre .sm-tr li { opacity: 0; transform: translateY(12px); transition: none; }
.sm-cl .btn { margin-top: 54px; }

@keyframes sm-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sm-sway { 0%, 100% { transform: rotate(calc(var(--s) * -1)); } 50% { transform: rotate(var(--s)); } }
@keyframes sm-rise { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .85; } 50% { transform: translateX(-50%) translateY(-26px); opacity: 1; } }
@keyframes sm-sun { 0.0% { left: 6.00%; top: 88.00%; opacity: .6; } 4.6% { left: 6.54%; top: 77.05%; opacity: 1; } 9.2% { left: 8.15%; top: 66.37%; opacity: 1; } 13.8% { left: 10.80%; top: 56.22%; opacity: 1; } 18.4% { left: 14.40%; top: 46.86%; opacity: 1; } 23.0% { left: 18.89%; top: 38.50%; opacity: 1; } 27.6% { left: 24.14%; top: 31.37%; opacity: 1; } 32.2% { left: 30.02%; top: 25.63%; opacity: 1; } 36.8% { left: 36.40%; top: 21.43%; opacity: 1; } 41.4% { left: 43.12%; top: 18.86%; opacity: 1; } 46.0% { left: 50.00%; top: 18.00%; opacity: 1; } 50.6% { left: 56.88%; top: 18.86%; opacity: 1; } 55.2% { left: 63.60%; top: 21.43%; opacity: 1; } 59.8% { left: 69.98%; top: 25.63%; opacity: 1; } 64.4% { left: 75.86%; top: 31.37%; opacity: 1; } 69.0% { left: 81.11%; top: 38.50%; opacity: 1; } 73.6% { left: 85.60%; top: 46.86%; opacity: 1; } 78.2% { left: 89.20%; top: 56.22%; opacity: 1; } 82.8% { left: 91.85%; top: 66.37%; opacity: 1; } 87.4% { left: 93.46%; top: 77.05%; opacity: 1; } 92.0% { left: 94.00%; top: 88.00%; opacity: .6; } 96% { left: 94%; top: 96%; opacity: 0; } 100% { left: 6%; top: 96%; opacity: 0; } }
@keyframes sm-c1 { 0%, 30% { opacity: 1; } 35%, 96% { opacity: .45; } 100% { opacity: 1; } }
@keyframes sm-c2 { 0%, 29% { opacity: .45; } 34%, 61% { opacity: 1; } 66%, 100% { opacity: .45; } }
@keyframes sm-c3 { 0%, 61% { opacity: .45; } 66%, 91% { opacity: 1; } 96%, 100% { opacity: .45; } }
@keyframes sm-sk1 { 0%, 28% { opacity: .9; } 36%, 96% { opacity: .18; } 100% { opacity: .9; } }
@keyframes sm-sk2 { 0%, 26% { opacity: .15; } 36%, 60% { opacity: .95; } 68%, 100% { opacity: .15; } }
@keyframes sm-sk3 { 0%, 60% { opacity: .15; } 68%, 90% { opacity: .95; } 97%, 100% { opacity: .15; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sm-hero { padding-bottom: 80px; }
  .sm-axis { height: 90px; }
  .sm-hc { padding-top: 90px; }
  .sm-eye { font-size: 10px; letter-spacing: .24em; }
  .sm-ttl { font-size: clamp(60px, 17vw, 96px); }
  .sm-tag { font-size: 28px; }
  .sm-hr { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .sm-hcta { align-items: stretch; }
  .sm-hcta .btn { white-space: normal; text-align: center; }
  .sm-ntg { grid-template-columns: minmax(0, 1fr); }
  .sm-day { padding: 24px 22px; }
  .sm-pull { margin-top: 72px; }
  .sm-sky { height: 220px; }
  .sm-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sm-col { opacity: 1; animation: none !important; }
  .sm-field { height: 180px; gap: 8px; }
  .sm-nl { width: 1.5px; }
  .sm-nl::after { top: -2px; width: 5px; height: 5px; margin-left: -2.5px; }
  .sm-phs { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sm-phd { min-height: 0; }
  .rcv, .sm-fyg { grid-template-columns: minmax(0, 1fr); }
  .rcv-st { height: 320px; }
  .sm-cl { padding: 120px 0 140px; }
  .sm-al { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-nl, .sm-sun, .sm-col, .sm-glow, .sm-rise, .sm-al.flash .fl { animation: none !important; }
  .sm-col { opacity: 1; }
  .sm-glow { opacity: .5; }
  .sm-sun { left: 50%; top: 18%; }
  .sm-nd, .sm-al .g, .sm-al .t0, .sm-tr li { transition: none !important; }
}
.sm-li { cursor: pointer; }
.sm-li:focus-visible { outline: 1px solid rgba(233, 213, 255, .6); outline-offset: 2px; border-radius: 4px; }