/* Illustrated discovery buttons: clear affordance, with the full story revealed on interaction. */
.use-cases{position:relative;margin:20px 0 10px;min-width:0;grid-column:1/-1;--case-ink:#24556e;--case-accent:#14638a}
.use-cases .case-invitation{display:flex;align-items:center;gap:10px;font:600 12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.015em;color:var(--case-ink);margin:0 0 5px;min-height:0;max-width:none}
.case-invitation>span:last-child{font-size:23px;line-height:1}.case-invitation-touch{display:none}
.case-triggers{display:flex;align-items:center;gap:30px;width:max-content;max-width:100%;height:94px;padding:5px 9px;box-sizing:border-box}
.case-trigger{display:grid;place-items:center;position:relative;width:64px;height:64px;min-width:64px;min-height:64px;border:0;padding:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.case-trigger:nth-child(2){margin-top:-13px}.case-trigger:nth-child(3){margin-top:7px}
.case-orb{display:block;position:relative;width:100%;height:100%;border:2px solid var(--case-accent);border-radius:50%;padding:3px;background:#fffaf0;box-shadow:0 4px 0 #17496420,0 7px 16px #1749641a;box-sizing:border-box;animation:case-bob 3.6s ease-in-out calc(var(--delay) * -1) infinite;animation-play-state:paused;transition:box-shadow .2s,transform .2s}
.case-peek{display:block;width:100%;height:100%;border-radius:50%;background:#f4f0e7 url('/assets/everyday-scenes.webp');background-size:650.84746% 433.89831%;background-position:var(--scene-x) var(--scene-y)}
.case-plus{position:absolute;right:-6px;bottom:-3px;width:23px;height:23px;background:var(--case-accent);border:2px solid #fffaf0;border-radius:50%;box-shadow:0 2px 6px #143b5030;animation:case-invite 3.6s ease-out calc(var(--delay) * -1) infinite;animation-play-state:paused}
.case-plus:before,.case-plus:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;background:white;border-radius:2px;transform:translate(-50%,-50%);transition:transform .2s}.case-plus:after{transform:translate(-50%,-50%) rotate(90deg)}
.cases-visible .case-orb,.cases-visible .case-plus{animation-play-state:running}
.case-trigger:hover .case-orb,.case-trigger:focus-visible .case-orb,.case-trigger[aria-expanded=true] .case-orb{animation:none;transform:translateY(-4px) scale(1.08);box-shadow:0 0 0 5px #298bbc24,0 9px 20px #143b5030}
.case-trigger[aria-expanded=true] .case-plus:after{transform:translate(-50%,-50%) rotate(0deg)}
.case-trigger[aria-expanded=true] .case-plus{animation:none}
.case-trigger:focus-visible,.case-close:focus-visible{outline:3px solid #288ec1;outline-offset:5px}
.finish-feature .use-cases{--case-ink:#c9e8f2;--case-accent:#216c90}
@keyframes case-bob{0%,65%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes case-invite{0%,55%,100%{box-shadow:0 0 0 0 #2480aa00}20%{box-shadow:0 0 0 6px #2480aa30}45%{box-shadow:0 0 0 11px #2480aa00}}
@keyframes case-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.case-panel{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr);gap:22px;padding:18px 40px 18px 18px;margin:12px 0 0;border:1px solid #d1dce0;background:#f4f0e7;color:#173b50;border-radius:8px 22px 8px 8px;box-shadow:0 12px 30px #07263812;animation:case-reveal .22s ease-out;max-width:660px;align-items:center}
.case-panel[hidden]{display:none}.case-art{width:100%;aspect-ratio:1;background-image:url('/assets/everyday-scenes.webp');background-size:650.84746% 433.89831%;background-position:var(--scene-x) var(--scene-y);border-radius:9px}
.case-tag{font:600 10px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#80552c;margin:0 0 7px;max-width:none}
.case-copy h4{font:600 19px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173b50;margin:0 0 10px;letter-spacing:-.02em}.case-copy>p:last-child{font:400 14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#445f6e;margin:0;max-width:none;min-height:0}
.case-close{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;background:transparent;color:#4e6573;font-size:24px;cursor:pointer}
.case-panel.case-floating{position:fixed;z-index:10000;box-sizing:border-box;max-width:none;margin:0;grid-template-columns:116px minmax(0,1fr);gap:16px;padding:18px 34px 18px 14px;box-shadow:0 15px 55px #07192335;max-height:calc(100dvh - 28px);overflow:auto;border-color:#bcced7}.case-floating .case-art{align-self:center}.case-floating .case-copy h4{font-size:18px}.case-floating .case-copy>p:last-child{font-size:14px}.case-close{width:44px;height:44px;top:0;right:0}
@media(max-width:420px){.case-panel.case-floating{grid-template-columns:92px minmax(0,1fr);gap:12px;padding-right:34px}.case-floating .case-copy h4{font-size:16px}.case-floating .case-copy>p:last-child{font-size:13px}}


@media(max-width:600px){.case-triggers{height:86px;gap:26px}.use-cases{margin-top:16px}.case-trigger{width:56px;height:56px;min-width:56px;min-height:56px}}
@media(hover:none),(pointer:coarse){.case-invitation-desktop{display:none}.case-invitation-touch{display:inline}}
@media(prefers-reduced-motion:reduce){.case-orb,.case-plus,.case-panel{animation:none;transition:none}.case-trigger:hover .case-orb,.case-trigger:focus-visible .case-orb,.case-trigger[aria-expanded=true] .case-orb{transform:none}}