/* Compact by default; the panel expands in flow, leaving the art its own space. */
.hero-balanced .availability-meta{margin-bottom:22px!important}
.availability-stack{display:flex;flex-direction:column;align-items:flex-end;gap:9px;width:100%;max-width:360px}
.availability-disclosure{width:224px;max-width:100%;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:26px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #fff5,0 5px 22px #80553615;transition:width .3s ease,border-radius .3s ease;color:var(--ink);box-sizing:border-box}
.availability-disclosure.is-open{width:340px;border-radius:22px}
.availability-disclosure .availability-trigger{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:11px 16px;border:0;border-radius:inherit;background:transparent;color:var(--ink);font:600 12px/1.4 Satoshi,sans-serif;cursor:pointer;text-align:left}
.availability-trigger i{width:6px;height:6px;border-radius:50%;background:#be945b;box-shadow:0 0 0 4px #be945b22;flex-shrink:0}
.availability-chevron{margin-left:auto;font-size:15px;transition:transform .3s}
.is-open .availability-chevron{transform:rotate(180deg)}
.availability-panel{padding:0 16px 16px;animation:availability-reveal .2s ease-out}
.availability-panel[hidden]{display:none!important}
.availability-panel .availability-kicker{margin:2px 0 12px}
.availability-panel .availability-intent{display:flex;width:100%;margin:0 0 12px;box-sizing:border-box}
.availability-panel .availability-intent button{flex:1;min-height:38px;padding:7px 9px;border-radius:999px;font:500 11px/1.4 Satoshi,sans-serif}
.availability-panel .availability-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;box-sizing:border-box;background:var(--accent);color:var(--bg);padding:10px 12px;border-radius:11px;text-decoration:none!important;font:600 12px/1.4 Satoshi,sans-serif}
.availability-panel .availability-cta::after{display:none!important}
.availability-stack>.career-screen{width:100%;margin:0;border:0;min-height:30px;padding:0 2px;box-sizing:border-box}
.availability-stack .career-name{font-size:10px}
.availability-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* The floating mobile reminder now opens choices instead of navigating on tap. */
.engage-nudge{padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;align-items:flex-end}
.engage-nudge .availability-dismiss{position:absolute;right:-8px;top:-9px;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:var(--bg);color:var(--muted);font:16px/1 Satoshi,sans-serif;padding:0}
.engage-nudge .availability-trigger{font-size:11px}
.engage-nudge .availability-intent button{width:auto;height:auto;color:var(--muted);background:transparent}
.engage-nudge .availability-intent button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.engage-nudge .availability-cta{font:600 12px/1.4 Satoshi,sans-serif}
/* A fuller collage: extra objects stay around its edges, away from the face. */
.hero-balanced .collage{max-width:500px;height:480px}
.hero-balanced .scrap-camera{width:88px;height:73px}
.hero-balanced .scrap-seo,.hero-balanced .scrap-analytics{width:68px;height:72px}
@keyframes availability-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.hero-balanced .collage{height:420px}.hero-balanced .scrap-camera{width:68px;height:56px}.hero-balanced .scrap-seo,.hero-balanced .scrap-analytics{width:54px;height:61px}.availability-stack{max-width:340px}.availability-disclosure.is-open{width:min(340px,100%)}.engage-nudge .availability-disclosure.is-open{width:min(320px,calc(100vw - 40px))}}
@media(prefers-reduced-motion:reduce){.availability-disclosure,.availability-chevron{transition:none}.availability-panel{animation:none}}

/* The expanded content overlays its surroundings; the pill keeps a fixed height. */
.availability-stack{height:46px;gap:0;position:relative;z-index:40}
.availability-disclosure{height:46px;position:relative;flex-shrink:0;overflow:visible;z-index:40}
.availability-disclosure.is-open{border-radius:22px 22px 0 0;border-bottom-color:transparent}
.availability-panel{position:absolute;top:calc(100% - 1px);left:-1px;right:-1px;padding:6px 16px 16px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-top:0;border-radius:0 0 22px 22px;background:var(--bg);box-shadow:0 12px 22px #80553618;max-height:min(360px,calc(100dvh - 90px));overflow-y:auto}
.availability-panel .career-screen{margin-top:14px;padding-top:8px;border-top:1px solid var(--line);min-height:40px;width:100%;box-sizing:border-box}
.hero-balanced .hero-visual{position:relative;z-index:3}
.engage-nudge{z-index:45}
.engage-nudge .availability-disclosure.is-open{border-radius:0 0 22px 22px;border-bottom-color:color-mix(in srgb,var(--accent) 38%,transparent);border-top-color:transparent}
.engage-nudge .availability-panel{top:auto;bottom:calc(100% - 1px);border-top:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 24px #80553618;padding-top:16px}
.engage-nudge .availability-drag{position:absolute;left:-27px;top:9px;width:24px;height:28px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--accent);font:18px/1 Satoshi,sans-serif;padding:0;cursor:grab;touch-action:none;box-shadow:0 3px 10px #0001}
.engage-nudge .availability-drag:active{cursor:grabbing}
.availability-trigger i{animation:availability-amber-pulse 3s ease-in-out infinite}
@keyframes availability-amber-pulse{0%,100%{box-shadow:0 0 0 3px #be945b22}50%{box-shadow:0 0 0 7px #be945b08}}
@media(prefers-reduced-motion:reduce){.availability-trigger i{animation:none}}
