#mara { scroll-margin-top: 5rem; }
.mara-card { text-align: center; min-width: 0; }
.hero-mara { color: var(--white); background: var(--night); box-shadow: 0 20px 45px rgba(23, 44, 35, .12); }
.hero-mara .mara-media { width: min(100%, 300px); }
.mara-card-top { justify-content: center; }
.mara-avatar { display: flex; flex-direction: column; gap: 1.1rem; text-align: center; padding: 0; margin: 1.5rem 0 .6rem; cursor: pointer; }
.mara-media { position: relative; display: block; width: min(100%, 248px); aspect-ratio: 1; overflow: hidden; border-radius: 24px; border: 1px solid rgba(185,241,122,.5); box-shadow: 0 12px 36px rgba(0,0,0,.2); transition: transform .2s, box-shadow .2s; }
.mara-media img, .mara-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mara-media video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mara-media.is-playing video { opacity: 1; }
.mara-hello { position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .45rem .8rem; background: rgba(20,44,35,.91); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: white; font-size: .8rem; }
.mara-avatar:hover:not(:disabled) .mara-media { transform: translateY(-3px); box-shadow: 0 12px 38px rgba(185,241,122,.15); }
.mara-invite-copy strong { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.mara-invite-copy small { max-width: 280px; line-height: 1.5; margin: .4rem auto 0; }
.mara-call-to-action { display: flex; justify-content: center; align-items: center; gap: 1.2rem; width: 100%; padding: .95rem 1rem; border-radius: 999px; background: var(--lime); color: var(--ink); font: 700 1rem/1.2 Arial, sans-serif; transition: background .2s; }
.mara-avatar:hover:not(:disabled) .mara-call-to-action { background: #d5ffa4; }
.mara-avatar:focus-visible, .mara-motion:focus-visible, .mara-stop:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
.mara-avatar:disabled { cursor: default; }
.mara-avatar:disabled .mara-call-to-action { background: #365146; color: #d6e1da; }
.mara-avatar #mara-start-hint { margin: -.4rem 0 0; font-size: .72rem; }
.mara-motion { border: 0; border-bottom: 1px solid #71897c; color: #c4d5ca; background: transparent; padding: .25rem 0; font-size: .73rem; cursor: pointer; }
.mara-controls { justify-content: center; min-height: 0; margin-top: .75rem; }
.mara-card .microcopy { font-size: .76rem; }
.mara-card [hidden] { display: none !important; }
@media (max-width: 960px) and (min-width: 761px) { .mara-layout { gap: 2.5rem; } .mara-card { padding: 1.5rem; } }
@media (max-width: 400px) { .mara-card { padding: 1.35rem; } .mara-media { width: min(100%, 224px); } }
@media (prefers-reduced-motion: reduce) { .mara-media, .mara-call-to-action { transition: none; } .mara-avatar:hover:not(:disabled) .mara-media { transform: none; } }