/* For firms: a short walkthrough of the Team plan in the site's tile
   language, played like a video with its own play/pause and chapters
   (firm-story.js). Without script the finished invite shows; with reduced
   motion the chapters step through still frames. */
.firm-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(40px, 6vw, 88px); align-items: center; padding: clamp(72px, 8vw, 112px) 0; border-top: 1px solid #e1e9f4; }
.firm-copy { display: grid; gap: 16px; max-width: 440px; }
.firm-copy h2 { margin: 4px 0 0; color: #15233b; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -1.4px; font-weight: 600; }
.firm-copy > p:not(.eyebrow):not(.firm-scope) { margin: 0; color: #5f7592; font-size: 15px; line-height: 1.7; }
.firm-points { display: grid; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.firm-points li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; color: #5f7592; font-size: 13.5px; line-height: 1.55; }
.firm-points strong { display: block; color: #1c304d; font-size: 14px; font-weight: 600; }
.firm-point-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eaf1ff; color: #075cff; box-shadow: inset 0 0 0 1px #d6e3fb; }
.firm-point-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.firm-scope { margin: 0; color: #657281; font-size: 12px; line-height: 1.6; }
.firm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.firm-pricing { color: #075cff; font-size: 14px; font-weight: 600; text-decoration: none; }
.firm-pricing:hover { text-decoration: underline; text-underline-offset: 3px; }
.firm-pricing:focus-visible { outline: 2px solid #075cff; outline-offset: 3px; border-radius: 4px; }

.firm-tile { position: relative; height: 540px; border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse at 82% 10%, #e4edff 0%, #eef3fb 50%, #e9effa 100%); box-shadow: inset 0 0 0 1px #dfe7f2; }
.firm-app { position: absolute; left: 52px; top: 48px; width: min(520px, calc(100% - 104px)); bottom: 0; padding: 0 22px; border: 1px solid #dce6f5; border-bottom: 0; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 28px 56px -24px #10182948, 0 1px 2px #10182912; color: #1c304d; font-size: 12px; }
.firm-app-bar { display: flex; align-items: center; gap: 10px; height: 38px; margin: 0 -22px; padding: 0 16px; border-bottom: 1px solid #edf1f7; color: #c3cedd; font-size: 8px; letter-spacing: 2px; }
.firm-app-bar small { color: #5f7390; font-size: 10px; letter-spacing: .2px; }
.firm-app-bar > span { white-space: nowrap; }
.firm-app-tag { flex: none; margin-left: auto; white-space: nowrap; padding: 2px 7px; border: 1px solid #f0d9a8; border-radius: 99px; background: #fff8e8; color: #8a5a00; font-size: 9.5px; font-style: normal; font-weight: 600; letter-spacing: .1px; }
.firm-stage { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; overflow: hidden; }
.firm-screen { position: absolute; inset: 0 22px; }
.firm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.firm-tile-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #e8f4ec; color: #23704f; font-size: 16px; font-weight: 650; }
.firm-head-copy { display: grid; min-width: 0; }
.firm-head-copy small { color: #5f7390; font-size: 8.5px; font-weight: 700; letter-spacing: .9px; }
.firm-head-copy b { overflow: hidden; color: #15233b; font-size: 16px; font-weight: 650; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.firm-head-copy em { color: #5f7390; font-size: 11px; font-style: normal; }
.firm-pile { display: flex; padding-left: 8px; isolation: isolate; }
.firm-pile .fa { width: 26px; height: 26px; margin-left: -6px; box-shadow: 0 0 0 2px #fff; font-size: 9px; }
.firm-pile .fa:nth-child(1) { z-index: 4; } .firm-pile .fa:nth-child(2) { z-index: 3; } .firm-pile .fa:nth-child(3) { z-index: 2; }
.firm-invite-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: #075cff; color: #fff; font-size: 11.5px; font-weight: 600; box-shadow: 0 2px 6px #075cff33; }
.firm-invite-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.firm-seats { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; padding-bottom: 14px; border-bottom: 1px solid #edf1f7; color: #5f7592; font-size: 11px; }
.firm-seat-bar { position: relative; display: flex; gap: 2px; width: 92px; height: 5px; overflow: hidden; border-radius: 99px; background: #e8eef7; }
.firm-seat-bar i { display: block; width: 66%; height: 100%; border-radius: 99px; background: #075cff; transform-origin: left center; }
.firm-seat-bar .firm-seat-new { width: 16%; background: #9fc0ff; }
.firm-seat-note { font-style: normal; }
.firm-people { display: grid; margin: 0; padding: 0; list-style: none; }
.firm-people li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 50px; border-bottom: 1px solid #f0f3f8; }
.firm-people li > span:nth-child(2) { display: grid; min-width: 0; }
.firm-people b { overflow: hidden; font-size: 12.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.firm-people small { overflow: hidden; color: #5f7390; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.firm-you { margin-left: 4px; padding: 1px 5px; border-radius: 5px; background: #eaf1ff; color: #075cff; font-size: 9px; font-style: normal; font-weight: 600; vertical-align: 1px; }
.firm-role { color: #3c5068; font-size: 11.5px; }
.firm-pill { padding: 2px 8px; border: 1px solid #c9dbfb; border-radius: 99px; background: #eef4ff; color: #075cff; font-size: 10px; font-weight: 600; }
.firm-people li { isolation: isolate; }
.firm-people li::before { content: ""; position: absolute; inset: 3px -10px; z-index: -1; border-radius: 8px; background: #eaf1ff; opacity: 0; }

/* Faces: two abstract photos and two initials, like the dashboard's avatars. */
.fa { position: relative; display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 650; }
.fa-photo-a { background: radial-gradient(circle at 30% 25%, #ffd7a8, #f59e6b 45%, #7c5cff 100%); }
.fa-photo-b { background: radial-gradient(circle at 70% 20%, #c7f0e0, #3fb89a 50%, #1e5a8a 100%); }
.fa-photo-a::before, .fa-photo-b::before { content: ""; position: absolute; left: 31%; top: 20%; width: 38%; height: 38%; border-radius: 50%; background: #2b2140e6; }
.fa-photo-a::after, .fa-photo-b::after { content: ""; position: absolute; left: 15%; top: 64%; width: 70%; height: 60%; border-radius: 50% 50% 0 0; background: #2b2140e6; }
.fa-ink-c { background: #efe9ff; color: #6a4bc4; }
.fa-ink-d { background: #e6f5ec; color: #23704f; }
.fa-pending { border: 1.5px dashed #b7c6db; background: #fff; color: #5f7390; }

.firm-dialog { position: absolute; right: 36px; bottom: 40px; display: grid; gap: 8px; width: 292px; padding: 16px; border: 1px solid #dce6f5; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -20px #10182959, 0 2px 6px #1018290f; color: #1c304d; font-size: 12px; }
.firm-dialog > b { font-size: 14px; font-weight: 650; letter-spacing: -.2px; }
.firm-dialog > small { color: #5f7390; font-size: 10.5px; }
.firm-chips { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 6px; border: 1px solid #c9dbfb; border-radius: 9px; box-shadow: 0 0 0 3px #075cff14; }
.firm-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 9px; border-radius: 6px; background: #eef4ff; color: #0b4cc7; font-size: 11px; font-weight: 550; }
.firm-chip i { color: #7a9ad1; font-style: normal; }
.firm-typed { color: #13233b; font-size: 11px; font-weight: 500; white-space: nowrap; }
.firm-caret { display: none; flex: none; width: 1.5px; height: 15px; margin-left: 0; border-radius: 1px; background: #075cff; }
.firm-dialog-row { display: flex; gap: 8px; margin-top: 4px; }
.firm-select { display: inline-flex; flex: 1; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border: 1px solid #dce6f5; border-radius: 8px; color: #1c304d; font-size: 11.5px; }
.firm-select svg { width: 12px; height: 12px; fill: none; stroke: #5f7390; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.firm-send { position: relative; display: grid; place-items: center; min-width: 118px; height: 32px; padding: 0 12px; border-radius: 8px; background: #075cff; color: #fff; font-size: 11.5px; font-weight: 600; }
.firm-send > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; }
.firm-send svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.firm-send-text { opacity: 0; }
.firm-send { background: #1a7f55; }

.firm-toast { position: absolute; z-index: 4; left: 50%; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 99px; background: #15233b; color: #fff; font-size: 12px; font-weight: 550; white-space: nowrap; box-shadow: 0 14px 30px -10px #15233b80; transform: translateX(-50%); }
.firm-toast svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #2fbf7f; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.firm-dialog { z-index: 3; }

/* Client access: Marcus's sheet slides over the people list. */
.firm-sheet { position: absolute; z-index: 2; top: 0; right: -22px; bottom: 0; display: grid; align-content: start; gap: 12px; width: min(300px, 64%); padding: 18px 18px 0; border-left: 1px solid #e3eaf5; background: #fff; box-shadow: -24px 0 48px -28px #10182940; }
.firm-sheet-head { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #edf1f7; }
.firm-sheet-head span { display: grid; }
.firm-sheet-head b { font-size: 13px; font-weight: 600; }
.firm-sheet-head small { color: #5f7390; font-size: 10.5px; }
.firm-access { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.firm-access li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 38px; }
.firm-access .story-character { width: 18px; padding: 4px; box-sizing: content-box; border-radius: 7px; background: var(--avatar-color, #eaf1ff); }
.firm-access b { overflow: hidden; font-size: 11.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.firm-switch { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #d9e2ef; transition: background-color 200ms cubic-bezier(.22, 1, .36, 1); }
.firm-switch i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #10182933; transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.firm-switch.is-on, .firm-film.is-granted .firm-access-harbor .firm-switch, .firm-film:not(.is-ready) .firm-access-harbor .firm-switch { background: #075cff; }
.firm-switch.is-on i, .firm-film.is-granted .firm-access-harbor .firm-switch i, .firm-film:not(.is-ready) .firm-access-harbor .firm-switch i { transform: translateX(12px); }
.firm-sheet-count { display: grid; margin: 2px 0 0; color: #5f7390; font-size: 11px; }
.firm-sheet-count span { grid-area: 1 / 1; transition: opacity 200ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
.firm-count-two, .firm-film.is-granted .firm-count-one { opacity: 0; transform: translateY(3px); }
.firm-film.is-granted .firm-count-two { opacity: 1; transform: none; }
.firm-save { justify-self: start; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: #075cff; color: #fff; font-size: 11.5px; font-weight: 600; box-shadow: 0 2px 6px #075cff33; }

/* Hand off: a client's to-dos, and the Assign menu. */
.firm-client-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 2px 0 14px; border-bottom: 1px solid #edf1f7; }
.firm-client-head > .story-character { width: 24px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: var(--avatar-color, #eaf1ff); }
.firm-client-head > span:nth-child(2) { display: grid; min-width: 0; }
.firm-client-head small { color: #5f7390; font-size: 9px; font-weight: 700; letter-spacing: .9px; }
.firm-client-head b { overflow: hidden; font-size: 15px; font-weight: 650; letter-spacing: -.3px; text-overflow: ellipsis; white-space: nowrap; }
.firm-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: #eef3fb; font-size: 11px; }
.firm-tabs span { padding: 4px 9px; border-radius: 7px; color: #5f7390; }
.firm-tabs .is-current { background: #fff; color: #15233b; font-weight: 600; box-shadow: 0 1px 2px #1638660f; }
.firm-todos, .firm-inbox { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.firm-todos li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 48px; border-bottom: 1px solid #f0f3f8; font-size: 12px; }
.firm-todos li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firm-todos li.is-checked > span { color: #8193a8; text-decoration: line-through; text-decoration-color: #a6bdb3; }
.firm-box { position: relative; width: 14px; height: 14px; border: 1.5px solid #b9c7da; border-radius: 4px; background: #fff; transition: background-color 180ms ease, border-color 180ms ease; }
.firm-box::after { content: ""; position: absolute; left: 3.5px; top: .5px; width: 3.5px; height: 7.5px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg) scale(0); transition: transform 220ms cubic-bezier(.34, 1.4, .64, 1); }
.is-checked > .firm-box, .firm-film.is-done .firm-inbox-item .firm-box, .firm-film:not(.is-ready) .firm-inbox-item .firm-box { border-color: #1a7f55; background: #1a7f55; }
.is-checked > .firm-box::after, .firm-film.is-done .firm-inbox-item .firm-box::after, .firm-film:not(.is-ready) .firm-inbox-item .firm-box::after { transform: rotate(45deg) scale(1); }
.firm-assign { display: grid; justify-items: end; }
.firm-assign > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #d3dff0; border-radius: 99px; background: #fff; color: #1c304d; font-size: 11px; font-weight: 600; white-space: nowrap; transition: opacity 200ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1); }
.firm-assign .fa { width: 18px; height: 18px; font-size: 7.5px; }
.firm-assigned { padding-left: 4px !important; border-color: #c9dbfb !important; background: #eef4ff !important; color: #0b4cc7 !important; }
.firm-assigned, .firm-film.is-assigned .firm-assign-label { opacity: 0; transform: scale(.94); }
.firm-film.is-assigned .firm-assigned { opacity: 1; transform: none; }
.firm-menu { position: absolute; z-index: 2; right: 0; top: 150px; display: grid; gap: 2px; width: 196px; padding: 5px; border: 1px solid #dce6f5; border-radius: 11px; background: #fff; box-shadow: 0 20px 40px -18px #10182959, 0 2px 6px #1018290f; opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top right; pointer-events: none; transition: opacity 160ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1); }
.firm-menu > span { white-space: nowrap; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 34px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 550; transition: background-color 140ms ease; }
.firm-menu small { color: #5f7390; font-size: 10px; font-weight: 400; }
.firm-menu .fa { width: 22px; height: 22px; font-size: 8px; }
.firm-film.is-menu .firm-menu { opacity: 1; transform: none; }
.firm-film.is-pick .firm-menu-marcus { background: #eef4ff; }

/* Done: Marcus's inbox. */
.firm-inbox-head { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 2px 0 14px; border-bottom: 1px solid #edf1f7; }
.firm-inbox-head > span:nth-child(2) { display: grid; min-width: 0; }
.firm-inbox-head small { color: #5f7390; font-size: 9px; font-weight: 700; letter-spacing: .9px; }
.firm-inbox-head b { font-size: 15px; font-weight: 650; letter-spacing: -.3px; }
.firm-inbox-count { display: grid; justify-items: end; font-size: 11px; font-weight: 600; }
.firm-inbox-count > span { grid-area: 1 / 1; transition: opacity 200ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
.firm-new { padding: 2px 8px; border-radius: 99px; background: #075cff; color: #fff; }
.firm-clear { color: #1a7f55; }
.firm-clear, .firm-film.is-done .firm-new, .firm-film:not(.is-ready) .firm-new { opacity: 0; transform: translateY(3px); }
.firm-film.is-done .firm-clear, .firm-film:not(.is-ready) .firm-clear { opacity: 1; transform: none; }
.firm-inbox li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 58px; border-bottom: 1px solid #f0f3f8; }
.firm-inbox li > span:nth-child(2) { display: grid; min-width: 0; }
.firm-inbox b { overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; text-decoration-color: transparent; transition: color 200ms ease, text-decoration-color 240ms ease; }
.firm-inbox small { overflow: hidden; color: #5f7390; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.firm-inbox-read b { color: #3c5068; font-weight: 500; }
.firm-unread { grid-area: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: #075cff; transition: opacity 180ms ease, transform 200ms ease; }
.firm-done-pill { grid-area: 1 / 3; padding: 2px 8px; border: 1px solid #bfe3cf; border-radius: 99px; background: #eaf7f0; color: #1a7f55; font-size: 10px; font-weight: 600; opacity: 0; transform: scale(.94); transition: opacity 200ms ease 80ms, transform 240ms cubic-bezier(.22, 1, .36, 1) 80ms; }
.firm-film:is(.is-done, :not(.is-ready)) .firm-inbox-item b { color: #8193a8; text-decoration-color: #a6bdb3; }
.firm-film:is(.is-done, :not(.is-ready)) .firm-unread { opacity: 0; transform: scale(.5); }
.firm-film:is(.is-done, :not(.is-ready)) .firm-done-pill { opacity: 1; transform: none; }

/* The film. data-screen picks the screen; classes on .firm-film set each
   moment. Before the script runs, the finished invite shows. */
.firm-screen { transition: opacity 260ms cubic-bezier(.22, 1, .36, 1), transform 320ms cubic-bezier(.22, 1, .36, 1); }
.firm-screen-client, .firm-screen-inbox { opacity: 0; visibility: hidden; }
.firm-film.is-ready .firm-screen { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 200ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 260ms; }
.firm-film[data-screen="people"] .firm-screen-people, .firm-film[data-screen="client"] .firm-screen-client, .firm-film[data-screen="inbox"] .firm-screen-inbox { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms cubic-bezier(.22, 1, .36, 1) 60ms, transform 320ms cubic-bezier(.22, 1, .36, 1) 60ms, visibility 0s; }
.firm-film.is-fading .firm-stage { opacity: 0; }
.firm-stage { transition: opacity 600ms ease; }
.firm-sheet { transform: translateX(104%); transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.firm-screen-people::after { content: ""; position: absolute; inset: 0 -22px; z-index: 1; background: #0f1b2e; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.firm-film.is-sheet .firm-sheet { transform: none; }
.firm-film.is-sheet .firm-screen-people::after { opacity: .06; }
.firm-dialog { opacity: 0; transform: translateY(10px) scale(.97); transition: opacity 160ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1); }
.firm-film.is-dialog .firm-dialog { opacity: 1; transform: none; transition-duration: 240ms, 300ms; }
/* Before the address is a chip it takes no room, so the caret starts at the
   left edge of the field and follows the letters as they are typed. */
.firm-film.is-ready:not(.is-chip) .firm-chip { display: none; }
.firm-film.is-ready.is-chip .firm-chip { animation: firm-chip-in 240ms cubic-bezier(.34, 1.3, .64, 1) both; }
@keyframes firm-chip-in { from { opacity: 0; transform: scale(.94); } }
.firm-film:not(.is-typing) .firm-typed { display: none; }
.firm-film.is-typing .firm-chips { gap: 1px; }
.firm-film.is-typing .firm-caret { display: block; animation: firm-caret 900ms steps(2, jump-none) infinite; }
/* A caret stays solid while letters are going in, as a real one does. */
.firm-film.is-keying .firm-caret { animation: none; opacity: 1; }
.firm-film.is-held .firm-caret { animation-play-state: paused; }
.firm-send { background: #075cff; transition: background-color 200ms ease, box-shadow 200ms ease; }
.firm-send > span { transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1); }
.firm-send-text { opacity: 1; }
.firm-sent-text { opacity: 0; transform: translateY(4px); }
.firm-film.is-sent .firm-send { background: #1a7f55; }
.firm-film.is-sent .firm-send-text { opacity: 0; transform: translateY(-4px); }
.firm-film.is-sent .firm-sent-text { opacity: 1; transform: none; }
.firm-invited, .firm-seat-new, .firm-seat-note { transition: opacity 280ms cubic-bezier(.22, 1, .36, 1) 120ms, transform 320ms cubic-bezier(.22, 1, .36, 1) 120ms; }
.firm-film.is-ready:not(.is-invited) .firm-invited { opacity: 0; transform: translateY(-8px); }
.firm-film.is-ready:not(.is-invited) .firm-seat-new { transform: scaleX(0); }
.firm-film.is-ready:not(.is-invited) .firm-seat-note { opacity: 0; }
.firm-film.is-new .firm-invited::before { animation: firm-flash 1500ms ease-out 140ms both; }
.firm-people li::before { transition: opacity 200ms ease; }
.firm-film.is-marcus .firm-row-marcus::before { opacity: 1; }
.firm-toast { transition: opacity 220ms ease, transform 280ms cubic-bezier(.22, 1, .36, 1); }
.firm-film:not(.is-toast) .firm-toast { opacity: 0; transform: translate(-50%, 10px); }
.firm-film .is-press { transform: scale(.96); transition: transform 120ms ease-out !important; }
@keyframes firm-caret { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes firm-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* The cursor, as in the batch demo. */
.firm-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 21px; height: 24px; pointer-events: none; opacity: 0; transform: translate(var(--cx, 0px), var(--cy, 0px)); transition: transform var(--cursor-glide, 620ms) cubic-bezier(.45, .05, .15, 1), opacity 160ms ease; will-change: transform; }
.firm-cursor.is-snapping { transition: opacity 160ms ease; }
/* The press squeezes toward the tip, so the point never drifts off its target. */
.firm-cursor svg { display: block; width: 21px; height: 24px; overflow: visible; fill: #1b3354; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px #10182940); transform-origin: 2px 2px; transition: transform 120ms cubic-bezier(.22, 1, .36, 1); }
.firm-cursor.is-pressing svg { transform: scale(.88); }
.firm-cursor i { position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border: 1.5px solid #075cff; border-radius: 50%; opacity: 0; }
.firm-cursor.is-click i { animation: firm-click 380ms cubic-bezier(.22, 1, .36, 1) both; }
.firm-film.has-cursor .firm-cursor { opacity: 1; }
@keyframes firm-click { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }

/* Video controls: play/pause and four chapters that fill as they play. */
.firm-film { margin: 0; }
.firm-controls { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.firm-film:not(.is-ready) .firm-controls { display: none; }
.firm-play { position: relative; display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d3dff0; border-radius: 50%; background: #fff; color: #1b3354; box-shadow: 0 1px 2px #1734540f; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }
.firm-play::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.firm-play .t-icon-swap { display: grid; width: 11px; height: 11px; }
.firm-play svg { display: block; width: 11px; height: 11px; fill: currentColor; }
.firm-play:active { transform: scale(.94); }
.firm-chapters { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.firm-chapter { display: grid; gap: 7px; min-width: 0; min-height: 36px; padding: 6px 0 2px; border: 0; background: none; color: #5f7390; font: inherit; font-size: 12px; font-weight: 550; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 160ms ease; }
.firm-chapter-bar { display: block; height: 3px; overflow: hidden; border-radius: 99px; background: #dde6f2; }
.firm-chapter-bar i { display: block; height: 100%; border-radius: inherit; background: #075cff; transform: scaleX(0); transform-origin: left center; }
.firm-chapter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firm-chapter-short { display: none; }
.firm-chapter[aria-current] { color: #15233b; }
@media (hover: hover) and (pointer: fine) {
  .firm-play:hover { background: #f4f8ff; border-color: #b6cbed; }
  .firm-chapter:hover { color: #15233b; }
}
.firm-play:focus-visible, .firm-chapter:focus-visible { outline: 2px solid #075cff; outline-offset: 3px; border-radius: 8px; }
.firm-play:focus-visible { border-radius: 50%; }

/* The steps beside the film light up with its chapter. */
.firm-points li { transition: color 200ms ease; }
.firm-point-icon { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.firm-points li.is-current strong { color: #075cff; }
.firm-points li.is-current .firm-point-icon { background: #075cff; color: #fff; box-shadow: 0 6px 14px -6px #075cff80; }
.firm-points li.is-done .firm-point-icon { background: #e8f5ee; color: #1a7f55; box-shadow: inset 0 0 0 1px #cbe9d8; }

@media (min-width: 801px) and (max-width: 1099px) {
  .firm-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .firm-app { left: 28px; width: calc(100% - 56px); }
  .firm-dialog { right: 20px; bottom: 24px; }
  .firm-pile { display: none; }
}
@media (max-width: 800px) {
  .firm-section { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
  .firm-copy { max-width: none; }
  .firm-copy h2 br { display: none; }
  .firm-tile { height: 470px; border-radius: 18px; }
  .firm-app { left: 14px; right: 14px; top: 20px; width: auto; padding: 0 14px; }
  .firm-app-bar { margin: 0 -14px; padding: 0 12px; }
  .firm-app-bar small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .firm-stage { top: 50px; }
  .firm-screen { inset: 0 14px; }
  .firm-screen-people::after { inset: 0 -14px; }
  .firm-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .firm-pile { display: none; }
  .firm-head-copy b, .firm-client-head b, .firm-inbox-head b { font-size: 14px; }
  .firm-people small { display: none; }
  .firm-people li { min-height: 42px; }
  .firm-dialog { right: 12px; left: 12px; bottom: 14px; width: auto; padding: 14px; }
  .firm-toast { bottom: 16px; font-size: 11px; }
  /* On phones the access sheet rises from the bottom. */
  .firm-sheet { top: auto; left: -14px; right: -14px; width: auto; padding: 16px 16px 14px; border-top: 1px solid #e3eaf5; border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -24px 48px -28px #10182940; transform: translateY(104%); }
  .firm-tabs { display: none; }
  .firm-menu { top: 140px; width: 184px; }
  .firm-sheet { padding-bottom: 62px; }
  .firm-menu > span { grid-template-columns: 22px minmax(0, 1fr); }
  .firm-menu small { display: none; }
  .firm-menu { width: 150px; }
  .firm-controls { gap: 12px; }
  .firm-chapters { gap: 8px; }
  .firm-chapter-long { display: none; }
  .firm-chapter-short { display: inline; }
}
@media (max-width: 380px) {
  .firm-app-bar small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .firm-film .firm-caret, .firm-cursor, .firm-play { display: none !important; }
  .firm-film *, .firm-film *::before, .firm-film *::after { transition: none !important; animation: none !important; }
}