/* The home page's sections from T-837 and their polish, loaded after styles.css. */
/* Projects: a board built by hand, like .accounts and .usage. Filtering dims cards, so nothing jumps. */
.pj { display: grid; gap: var(--space-3); margin: 0; min-width: 0; --dept-support: light-dark(#0b8a67, #3fdcaa); --dept-strategy: light-dark(#b85a1b, #ff9d63); --dept-eng: light-dark(#3a55c9, #8aa6ff); --dept-marketing: light-dark(#c23a63, #f06a8a); }
.pj__window { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-2xl); background: var(--surface-strong); box-shadow: var(--shadow-lg); }
.pj__rail { display: grid; align-content: start; justify-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-3); border-right: 1px solid var(--border); background: var(--surface-sunken); }
.pj__rail hr { width: 1.5rem; margin: 0; border: 0; border-top: 1px solid var(--border-strong); }
.pj__rail-all, .pj__rail-add { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); color: var(--text-subtle); }
.pj__rail-all { background: var(--accent-soft); color: var(--accent); }
.pj__rail-add { border: 1px dashed var(--border-strong); }
.pj__rail svg { width: 1.1rem; height: 1.1rem; }
.pj__rail-item { position: relative; display: block; }
.pj__rail-item i { position: absolute; top: -0.3rem; right: -0.35rem; display: grid; place-items: center; min-width: 1.05rem; height: 1.05rem; padding: 0 0.2rem; border-radius: 99px; background: #d92d4a; color: #fff; font: var(--weight-bold) 0.62rem / 1 var(--font-sans); box-shadow: 0 0 0 2px var(--surface-strong); }
.pj__rail-item b { position: absolute; right: -0.15rem; bottom: -0.15rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--surface-strong); }
.pj__mark { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--hue); color: light-dark(#fff, #0f1a14); font: var(--weight-bold) var(--text-sm) / 1 var(--font-display); }
.pj__mark--support { --hue: var(--dept-support); }
.pj__mark--strategy { --hue: var(--dept-strategy); }
.pj__mark--eng { --hue: var(--dept-eng); }
.pj__mark--marketing { --hue: var(--dept-marketing); }
.pj__main { display: grid; gap: var(--space-3); min-width: 0; padding: var(--space-5); }
.pj__head { display: grid; gap: 2px; }
.pj__head strong { font: var(--weight-bold) var(--text-lg) / 1.2 var(--font-display); letter-spacing: var(--tracking-tight); }
.pj__head span { color: var(--text-muted); font-size: var(--text-xs); }
.pj__lenses { display: flex; flex-wrap: wrap; gap: 6px; }
.pj__lenses[hidden] { display: none; }
.pj__lenses button { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 0.7rem; border: 1px solid var(--border-strong); border-radius: 99px; background: transparent; color: var(--text-muted); font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans); cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.pj__lenses button:hover { color: var(--text); }
.pj__lenses button[aria-pressed="true"] { border-color: var(--text); background: var(--surface-sunken); color: var(--text); }
.pj__lenses b { font-weight: var(--weight-bold); }
.pj__warn { color: light-dark(#c4122f, #ff7a93); }
.pj__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pj__card { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); transition: opacity 0.25s var(--ease-out), scale 0.25s var(--ease-out); }
.pj__card[data-dim] { opacity: 0.28; scale: 0.985; }
.pj__top { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.pj__top strong { display: block; font-size: var(--text-sm); }
.pj__top span:not(.pj__mark) { display: block; color: var(--text-subtle); font-size: 0.7rem; line-height: 1.3; }
.pj__stats { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); color: var(--text-muted); font-size: 0.72rem; }
.pj__needs { color: light-dark(#c4122f, #ff7a93); font-weight: var(--weight-semibold); }
.pj__busy { color: var(--home-ok-ink); font-weight: var(--weight-semibold); }
.pj__gap { color: light-dark(#8a5200, var(--warm)); font-size: 0.72rem; font-weight: var(--weight-semibold); }
.pj__faces { display: flex; }
.pj__faces img { width: 1.6rem; height: 1.6rem; margin-right: -0.35rem; border-radius: 50%; background: var(--surface-strong); box-shadow: 0 0 0 2px var(--surface-sunken); }
.pj figcaption, .depts__note { color: var(--text-subtle); font-size: var(--text-xs); text-align: center; }

/* Departments: one console, a tab each, ending on what waits for your OK. */
.section--depts .section__head { max-width: 46rem; }
.depts { --dept: var(--accent); display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-2xl); background: var(--surface-strong); box-shadow: var(--shadow-lg); }
.depts__tabs { display: grid; align-content: start; gap: 4px; padding: var(--space-3); border-right: 1px solid var(--border); background: var(--surface-sunken); }
.depts__tab { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 0.6rem var(--space-3); overflow: hidden; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.18s; }
.depts__tab:hover { background: color-mix(in srgb, var(--dept) 8%, transparent); }
.depts__tab[aria-selected="true"] { background: var(--surface-strong); box-shadow: var(--shadow-sm); }
.depts__tab strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.depts__tab small { display: block; color: var(--text-subtle); font-size: var(--text-xs); }
.depts__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--dept) 16%, transparent); color: var(--dept); }
.depts__icon svg { width: 1.15rem; height: 1.15rem; }
/* The running tab's bar shows how long until the next one. */
.depts__tab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--dept); transform: scaleX(0); transform-origin: left; }
[data-depts][data-running] .depts__tab[aria-selected="true"]::after { animation: depts-run var(--depts-hold, 7s) linear both; }
@keyframes depts-run { to { transform: scaleX(1); } }
.depts__tab--lead, .depts__panel--lead { --dept: light-dark(#0e7f97, #4fd0ea); }
.depts__tab--eng, .depts__panel--eng { --dept: light-dark(#3a55c9, #8aa6ff); }
.depts__tab--support, .depts__panel--support { --dept: light-dark(#0b8a67, #3fdcaa); }
.depts__tab--marketing, .depts__panel--marketing { --dept: light-dark(#c23a63, #f06a8a); }
.depts__tab--strategy, .depts__panel--strategy { --dept: light-dark(#b85a1b, #ff9d63); }
.depts__tab--design, .depts__panel--design { --dept: light-dark(#7a45d0, #c3a0ff); }
.depts__stage { display: grid; min-width: 0; }
.depts__panel { grid-area: 1 / 1; display: grid; align-content: start; gap: var(--space-5); padding: clamp(1.25rem, 3vw, 2.25rem); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--dept) 10%, transparent), transparent 62%); transition: opacity 0.28s var(--ease-out); }
.depts__panel[data-off] { opacity: 0; visibility: hidden; transition: opacity 0.16s, visibility 0s 0.16s; }
.depts__people { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.depts__seat { display: flex; align-items: center; gap: var(--space-2); }
.depts__seat img { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--dept) 14%, var(--surface-sunken)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dept) 55%, transparent); }
.depts__seat > span { display: grid; justify-items: start; gap: 3px; }
.depts__seat strong { font-size: var(--text-sm); }
.depts__line { max-width: 34rem; font-size: var(--text-lg); line-height: 1.45; }
.depts__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.depts__lists h4 { margin-bottom: var(--space-2); color: var(--text-subtle); font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.depts__lists ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.depts__lists li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.depts__lists li svg { flex: none; width: 0.95rem; height: 0.95rem; color: var(--home-ok-ink); }
.depts__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--warm) 45%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--warm) 10%, transparent); }
.depts__hand { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in srgb, var(--warm) 26%, transparent); color: light-dark(#7a4a00, var(--warm)); }
.depts__hand svg { width: 1.1rem; height: 1.1rem; }
.depts__ask p { flex: 1 1 12rem; min-width: 0; }
.depts__ask strong { display: block; font-size: var(--text-sm); }
.depts__ask p span { color: var(--text-muted); font-size: var(--text-xs); }
.depts__buttons { display: flex; gap: var(--space-2); }
.depts__buttons > *, .desk__actions > * { padding: 0.4rem 0.8rem; border: 1px solid var(--border-strong); border-radius: 99px; color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.depts__buttons .depts__approve, .desk__actions .desk__ok { border-color: transparent; background: var(--accent); color: var(--accent-text); }
.depts__note { margin-top: var(--space-3); }

/* You stay in charge: this morning's report, with one approval resting on it. */
.desk { position: relative; display: grid; padding-bottom: 11.5rem; padding-right: 3rem; }
.desk__report { display: grid; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface-strong); box-shadow: var(--shadow-md); }
.desk__when { color: var(--text-subtle); font: var(--weight-semibold) var(--text-xs) / 1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.desk__who { display: flex; align-items: center; gap: var(--space-3); }
.desk__who img { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--surface-sunken); }
.desk__who strong { display: block; font: var(--weight-bold) var(--text-lg) / 1.2 var(--font-display); }
.desk__who span { color: var(--text-subtle); font-size: var(--text-xs); }
.desk__text { color: var(--text-muted); font-size: var(--text-sm); }
.desk__rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.desk__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-3); padding: 0.3rem 0 0.3rem var(--space-3); border-left: 2px solid var(--dept); font-size: var(--text-xs); }
.desk__row strong { color: var(--dept); }
.desk__row span { color: var(--text-muted); }
.desk__row--eng { --dept: light-dark(#3a55c9, #8aa6ff); }
.desk__row--support { --dept: light-dark(#0b8a67, #3fdcaa); }
.desk__row--marketing { --dept: light-dark(#c23a63, #f06a8a); }
.desk__row--strategy { --dept: light-dark(#b85a1b, #ff9d63); }
.desk__approval { position: absolute; right: 0; bottom: 0; z-index: 1; display: grid; gap: var(--space-3); width: min(21rem, 88%); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--warm) 50%, var(--border)); border-radius: var(--radius-xl, 20px); background: var(--surface-strong); box-shadow: var(--shadow-lg), 0 0 0 4px color-mix(in srgb, var(--warm) 10%, transparent); rotate: -1.2deg; }
.desk__tag { display: inline-flex; align-items: center; gap: 6px; color: light-dark(#7a4a00, var(--warm)); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.desk__tag svg { width: 0.95rem; height: 0.95rem; }
.desk__post { display: flex; gap: var(--space-3); align-items: flex-start; }
.desk__media { display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: linear-gradient(135deg, #f06a8a, #ff9d63); color: #fff; }
.desk__media svg { width: 1.3rem; height: 1.3rem; }
.desk__post strong { display: block; font-size: var(--text-sm); }
.desk__post span:not(.desk__media) { color: var(--text-muted); font-size: var(--text-xs); }
.desk__rule { color: var(--text-subtle); font-size: var(--text-xs); }
.desk__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Anywhere: the Worker sits under the Mac it lends to. */

/* How it works: six seats, each line level with its neighbours. */
@media (min-width: 1081px) {
  .score { grid-template-rows: repeat(6, auto); row-gap: 0; }
  .score__step { grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--space-2); }
  .score__step > .score__avatar, .score__step > .score__crew { grid-row: 1; }
  .score__step > .score__role { grid-row: 2; }
  .score__step > .tag, .score__step > .tag-row { grid-row: 3; align-self: start; }
  .score__step > h3 { grid-row: 4; }
  .score__step > p { grid-row: 5; }
  .score__step > .score__cue--end { grid-row: 6; }
}

/* Plans: the discounted month first, the yearly total quieter. */
.plan__was { color: var(--text-subtle); font-size: var(--text-lg); font-weight: var(--weight-medium); text-decoration: line-through; }
.card .plan__bill { min-height: 1.5em; color: var(--text-subtle); font-size: var(--text-xs); }
.plan__save { margin-left: var(--space-2); color: var(--home-ok-ink); font-weight: var(--weight-semibold); }

@media (max-width: 900px) {
  .depts { grid-template-columns: minmax(0, 1fr); }
  .depts__tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); scrollbar-width: none; }
  .depts__tab { flex: none; width: auto; }
  .depts__tab small { display: none; }
}
@media (max-width: 560px) {
  .pj__rail { display: none; }
  .pj__window { grid-template-columns: minmax(0, 1fr); }
  .pj__cards, .depts__lists { grid-template-columns: minmax(0, 1fr); }
  .desk { padding-right: 0; padding-bottom: 0; gap: var(--space-3); }
  .desk__approval { position: static; width: 100%; rotate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pj__card, .depts__panel, .depts__tab { transition: none; }
}

/* The Workers' three providers stay on one line beside the other seats. */
@media (min-width: 1081px) {
  .score__step .tag-row { flex-wrap: nowrap; gap: 2px; }
  .score__step .tag-row .tag { padding-inline: 0.4rem; gap: 3px; }
}
/* On a phone the last seat takes the whole row, as You does. */
@media (max-width: 560px) {
  .score__step:last-child { grid-column: 1 / -1; }
}

/* Play (play.js): the sample screens' controls. Whatever looks like a button is one. */
:is(.depts__buttons, .desk__actions) button { background: none; font-family: inherit; line-height: inherit; cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
:is(.depts__buttons, .desk__actions) button:hover { transform: translateY(-1px); filter: brightness(1.08); }
:is(.depts__buttons, .desk__actions) button:active { transform: scale(0.94); }
[data-ask] { transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
[data-ask][data-answer="approve"] { border-color: color-mix(in srgb, var(--success) 55%, transparent); background: var(--success-soft); }
[data-ask][data-answer="approve"] [data-ask-answer="approve"] { background: var(--success); color: light-dark(#fff, #06281b); }
[data-ask][data-answer="change"] [data-ask-answer="change"] { border-color: transparent; background: var(--surface-sunken); color: var(--text); }
[data-ask][data-answer="approve"] [data-ask-answer="change"], [data-ask][data-answer="change"] [data-ask-answer="approve"] { opacity: 0; pointer-events: none; }
.confetti { position: fixed; z-index: 90; width: 7px; height: 7px; pointer-events: none; }

.pj__rail button { padding: 0; font: inherit; cursor: pointer; transition: transform var(--dur-base) var(--ease-spring); }
button.pj__rail-item, button.pj__rail-all { border: 0; }
button.pj__rail-item, button.pj__rail-add { background: none; }
.pj__rail button:hover { transform: translateY(-2px) scale(1.06); }
.pj__rail button:active { transform: scale(0.92); }
.pj__rail-item[data-on] .pj__mark { box-shadow: 0 0 0 2px var(--surface-strong), 0 0 0 4px var(--accent); }
.pj__card { cursor: pointer; transition: opacity 0.25s var(--ease-out), scale 0.25s var(--ease-out), transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.pj__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)); }
.pj__card:hover .pj__faces img { transform: translateY(-3px); }
.pj__faces img { transition: transform var(--dur-base) steps(3, end); }
.pj__faces img:nth-child(2) { transition-delay: 40ms; }
.pj__faces img:nth-child(3) { transition-delay: 80ms; }
.pj__faces img:nth-child(4) { transition-delay: 120ms; }
.pj__card--new { grid-column: 1 / -1; border-style: dashed; }
.pj__card--new[hidden] { display: none; }
.pj__card--new .pj__mark { background: var(--accent-soft); color: var(--accent); }
.pj__lenses button { transition: transform var(--dur-base) var(--ease-spring); }
.pj__lenses button:hover { transform: translateY(-1px); }
.pj__lenses button:active { transform: scale(0.95); }

/* The chat: a short log, and a composer that holds the next message and sends it. */
.office-chat__log { display: grid; gap: var(--space-2); align-content: end; height: 10.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 1.75rem); mask-image: linear-gradient(transparent, #000 1.75rem); }
.office-chat__msg[data-typing]::before { content: "•••"; display: inline-block; overflow: hidden; vertical-align: bottom; letter-spacing: 0.2em; animation: typing 0.9s steps(4, end) infinite; }
@keyframes typing { from { width: 0; } to { width: 1.9em; } }
button.office-chat__composer { width: 100%; gap: var(--space-2); background: none; font-family: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
button.office-chat__composer:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.office-chat__draft { flex: 1; min-width: 0; overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
[data-ready] .office-chat__draft::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: caret 1s steps(2, start) infinite; }
@keyframes caret { to { visibility: hidden; } }
.office-chat__mic, .office-chat__send { flex: none; transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-out); }
.office-chat__mic:hover, .office-chat__composer:hover .office-chat__send { transform: scale(1.1); }
.office-chat__send { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); opacity: 0.45; }
.office-chat__send svg { width: 1rem; height: 1rem; }
[data-ready] .office-chat__send { opacity: 1; box-shadow: 0 6px 16px -6px var(--glow); }
[data-listening] .office-chat__mic { background: var(--accent); color: var(--accent-text); animation-duration: 0.8s; }

/* The picker's menus, and the account they choose. */
.accounts { position: relative; z-index: 2; }
.account, .provider-list li { cursor: pointer; }
.account[data-on] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-soft); }
.provider-list li[data-on] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }
.picker__field { position: relative; cursor: pointer; user-select: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.picker__field:hover, .picker__field[data-open] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.picker__field::after { transition: rotate var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); }
.picker__field[data-open]::after { rotate: 225deg; translate: 0 2px; }
.picker__menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; display: grid; gap: 2px; min-width: max(100%, 10rem); padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: var(--shadow-lg); transform-origin: 0 0; font-weight: var(--weight-medium); }
.picker__option { display: flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.6rem; border-radius: var(--radius-sm); color: var(--text-muted); white-space: nowrap; transition: background-color var(--dur-fast), color var(--dur-fast); }
.picker__option:hover { background: var(--accent-soft); color: var(--text); }
.picker__option[data-on] { color: var(--text); }
.picker__option[data-on]::after { content: "✓"; margin-left: auto; padding-left: var(--space-3); color: var(--accent); }

/* Usage: bars that fill on arrival and breathe, and a chart that answers the pointer like a keyboard. */
.usage__chips span { cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.usage__chips span:hover { transform: translateY(-2px); border-color: var(--accent); }
.usage__chips span:active { transform: scale(0.94); }
.usage__row { cursor: pointer; transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out); }
.usage__row:hover { transform: translateX(4px); background: color-mix(in srgb, var(--acct) 9%, var(--surface-sunken)); }
.usage__bar i { overflow: hidden; transition: width var(--dur-slower) var(--ease-spring), filter var(--dur-base) var(--ease-out); }
.usage__bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.45) 50%, transparent 70%); translate: -100% 0; animation: bar-shine 4.8s var(--ease-in-out) infinite; }
.usage__row:nth-child(2) .usage__bar i::after { animation-delay: 0.6s; }
.usage__row:nth-child(3) .usage__bar i::after { animation-delay: 1.2s; }
.usage__row:nth-child(4) .usage__bar i::after { animation-delay: 1.8s; }
@keyframes bar-shine { 0%, 55% { translate: -100% 0; } 100% { translate: 100% 0; } }
.usage__row:hover .usage__bar i { width: calc(var(--left) + 3%); filter: saturate(1.25) brightness(1.08); }
.usage__bar::after { transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base); }
.usage__row:hover .usage__bar::after { transform: scaleY(1.7); opacity: 0.9; }
.usage__row:hover .usage__chip { transform: scale(1.08); }
.usage__chip { transition: transform var(--dur-slow) var(--ease-spring); }
.usage__tile { cursor: pointer; transition: transform var(--dur-slow) var(--ease-spring), background-color var(--dur-slow) var(--ease-out); }
.usage__tile:hover { transform: translateY(-3px) rotate(-1deg); background: var(--accent-soft); }
.usage__tile:nth-child(2):hover { transform: translateY(-3px) rotate(1deg); }
.usage__chart span { position: relative; transform-origin: 50% 100%; transition: height var(--dur-slower) var(--ease-spring), filter var(--dur-base) var(--ease-out); animation: bar-breathe 3.6s var(--ease-in-out) infinite alternate; }
.usage__chart span:nth-child(3n) { animation-duration: 4.4s; }
.usage__chart span:nth-child(3n + 1) { animation-duration: 3s; animation-delay: -1.2s; }
.usage__chart span:nth-child(even) { animation-delay: -2s; }
@keyframes bar-breathe { from { transform: scaleY(0.94); } to { transform: scaleY(1.03); } }
/* The bar under the pointer jumps and its neighbours follow, a little less each. */
.usage__chart:hover span { animation-play-state: paused; }
.usage__chart span:hover { height: calc(var(--h, 50%) + 12%); filter: saturate(1.3) brightness(1.1); animation: none; }
.usage__chart span:hover + span, .usage__chart span:has(+ span:hover) { height: calc(var(--h, 50%) + 6%); }
.usage__chart span:hover + span + span, .usage__chart span:has(+ span + span:hover) { height: calc(var(--h, 50%) + 2.5%); }
.usage__chart span::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); background: var(--text); color: var(--bg); font: var(--weight-semibold) 0.66rem / 1.3 var(--font-mono); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-spring); }
.usage__chart span:hover::after { opacity: 1; translate: -50% 0; }
.usage__key { cursor: pointer; transition: transform var(--dur-base) var(--ease-spring); }
.usage__key:hover { transform: translateY(-2px); }
.usage__key::before { transition: transform var(--dur-slow) var(--ease-spring); }
.usage__key:hover::before { transform: scale(1.5) rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .usage__bar i::after, .usage__chart span, .office-chat__msg[data-typing]::before, [data-ready] .office-chat__draft::after { animation: none; }
}

/* The rest answer too: every small thing that is not text moves under the pointer, and a click nudges it
   (play.js). Transform, filter and colour only, as with the other hovers. */
@media (hover: hover) {
  :is(.tag, .badge, .account__state, .plan__save, .refresh__gen, .talk__live, .pj__needs, .pj__busy) { cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base) var(--ease-out); }
  :is(.tag, .badge, .account__state, .plan__save, .refresh__gen, .talk__live, .pj__needs, .pj__busy):hover { transform: translateY(-1px) scale(1.06); filter: brightness(1.08) saturate(1.15); }
  :is(.window__lights, .app-window__lights) i { cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-base); }
  :is(.window__lights, .app-window__lights):hover i { filter: brightness(1.15); }
  :is(.window__lights, .app-window__lights) i:hover { transform: scale(1.35); }
  .window__url { text-decoration: none; transition: color var(--dur-base), background-color var(--dur-base), transform var(--dur-base) var(--ease-spring); }
  .window__url:hover { color: var(--accent); background: var(--accent-soft); transform: scale(1.03); }
  .office-video, .steps li, .network [data-net], .score__step, .refresh__card, .talk, .desk__row, .closing__orca, .opening__sun, img[src*="assets/cast/"], .points__icon, .office-points__icon, .depts__hand, .desk__media, .pj__mark { cursor: pointer; }
  .score__cue { transition: transform var(--dur-slow) var(--ease-spring), border-color var(--dur-slow), color var(--dur-slow); }
  .score__step:hover .score__cue { transform: scale(1.12); border-color: var(--accent); color: var(--accent); }
  .score__step:hover .score__role { letter-spacing: 0.16em; }
  .score__role { transition: letter-spacing var(--dur-slow) var(--ease-out); }
  .refresh__meter { transition: transform var(--dur-slow) var(--ease-spring); }
  .refresh__card:hover .refresh__meter { transform: scaleY(1.35); }
  .refresh__steps li { transition: transform var(--dur-base) var(--ease-spring); }
  .refresh__steps li:hover { transform: translateY(-2px); }
  .desk__row { transition: transform var(--dur-slow) var(--ease-out); }
  .desk__row:hover { transform: translateX(5px); }
  :is(.depts__hand, .desk__media, .pj__mark, .account__glyph, .office-chat__head img) { transition: transform var(--dur-slow) var(--ease-spring); }
  :is(.depts__ask:hover .depts__hand, .desk__approval:hover .desk__media) { transform: rotate(-10deg) scale(1.1); }
  .pj__top:hover .pj__mark, .account:hover .account__glyph { transform: rotate(-6deg) scale(1.08); }
  .depts__tab > span:last-child { transition: transform var(--dur-slow) var(--ease-out); }
  .depts__tab:hover > span:last-child { transform: translateX(3px); }
  .depts__lists li { transition: transform var(--dur-slow) var(--ease-out); }
  .depts__lists li:hover { transform: translateX(4px); }
  .depts__lists li svg { transition: transform var(--dur-slow) var(--ease-spring); }
  .depts__lists li:hover svg { transform: scale(1.3) rotate(-8deg); }
  .billing button, .depts__tab { transition-property: transform, background-color, color, border-color, box-shadow; }
  .billing button:hover { transform: translateY(-1px); }
  .billing button:active, .depts__tab:active, .btn:active, .nav-link:active, .theme-toggle:active { transform: scale(0.96); }
  .plan__features li, .relay__key li, .provider-list li, .usage__acct { transition: transform var(--dur-slow) var(--ease-out); }
  .plan__features li:hover { transform: translateX(4px); }
  .relay__key li:hover { transform: translateY(-2px); }
  .relay__key li i { transition: transform var(--dur-slow) var(--ease-spring); }
  .relay__key li:hover i { transform: scale(1.35); }
  .network__path { transition: opacity var(--dur-slow); }
  .network:hover .network__path { opacity: 1; }
  .network__worker { transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow), box-shadow var(--dur-slow); }
  .network__worker:hover { transform: translateY(-2px); border-color: var(--accent); }
  .network__hub { transition: filter var(--dur-slow); }
  .opening__caption a, .download-more a { transition: letter-spacing var(--dur-slow) var(--ease-out); }
  .opening__caption a:hover, .download-more a:hover { letter-spacing: 0.01em; }
  .soon { cursor: not-allowed; }
  .usage__chart { transition: background-color var(--dur-slow); }
  .usage__chart:hover { background: color-mix(in srgb, var(--accent) 7%, var(--surface-sunken)); }
  .picker { transition: border-color var(--dur-slow); }
  .picker:hover { border-color: var(--accent); }
  .section__head .eyebrow { cursor: default; }
}

/* Where Mimosa runs: your Mac in the middle; on the left the computers that lend it power, local ones on a
   solid tile and remote ones on a dashed one in another colour; on the right the screens you reach it from. */
.network { background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 58%), var(--surface-sunken); }
/* The orange itself sits on the centre, where the lines meet; its name hangs under it. */
.network__hub { left: 50%; top: 50%; z-index: 1; translate: -50% -4rem; }
.network__lines--tall { display: none; }
.network__device { left: 85%; white-space: nowrap; }
.network__device img { width: 2.25rem; height: 2.25rem; }
.network__worker { position: absolute; left: 15%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; min-width: 7.5rem; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-md); text-align: center; }
.network__worker--local { top: 26%; }
.network__worker--remote { top: 74%; border-style: dashed; border-color: color-mix(in srgb, var(--highlight) 60%, transparent); background: color-mix(in srgb, var(--highlight) 7%, var(--surface-strong)); box-shadow: none; }
.network__worker img { width: 2.25rem; height: 2.25rem; }
.network__worker svg { width: 2.25rem; height: 2.25rem; color: var(--highlight); }
.network__worker strong { font-size: var(--text-xs); }
.network__worker small { color: var(--text-subtle); font-size: 0.68rem; white-space: nowrap; }
.network__worker--remote small:last-child { margin-top: 2px; padding: 0 0.45rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--highlight) 16%, transparent); color: var(--highlight); font-weight: var(--weight-semibold); }
/* Power comes in from the workers, so their dashes run toward the Mac. */
.network__path--in { stroke-dasharray: 2 8; }
.network__path--remote { stroke: var(--highlight); }
/* Phones: the picture stands up. Workers above the Mac, the screens below it. */
@media (max-width: 560px) {
  .network { aspect-ratio: 3 / 4; }
  .network__lines--wide { display: none; }
  .network__lines--tall { display: block; }
  .network__hub { left: 50%; translate: -50% -2rem; }
  .network__hub img { width: 4rem; }
  .network__hub :is(strong, span) { padding: 0 0.5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); }
  .network__worker { top: 15.5%; min-width: 0; width: 44%; padding: var(--space-2); }
  .network__worker--local { left: 26%; }
  .network__worker--remote { left: 74%; }
  .network__device { top: 86.5%; min-width: 0; width: 30%; padding: var(--space-2); white-space: normal; text-align: center; font-size: 0.68rem; }
  .network__device--1 { left: 17%; }
  .network__device--2 { left: 50%; }
  .network__device--3 { left: 83%; }
}
}

/* More scroll motion, slow and small, for what sits inside the blocks. A block names its own timeline
   (--box) so the things inside it can follow the page even where the block clips or scrolls its content.
   As elsewhere: scroll owns opacity, translate, scale, rotate and clip-path; hover owns transform. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :is(.pj, .desk__report, .talk, .usage, .network, .compare, .depts, .plans > .plan, .office-points > .card, .office-chat, .refresh__card, .accounts) { view-timeline: --box block; }
    :root { --glide: cubic-bezier(0.3, 0.4, 0.3, 1); }

    /* Lists inside the blocks arrive one after another: --at is each one's place in the queue. */
    :is(.pj__card, .desk__row, .talk__msg, .usage__row, .usage__tile, .depts__tab, .plan__features li, .office-chat__msg, .provider-list li, .compare tbody tr) {
      animation: settle var(--glide) both; animation-timeline: --box;
      animation-range: cover calc(8% + var(--at, 0) * 2.5%) cover calc(34% + var(--at, 0) * 2.5%);
    }
    :is(.pj__card, .desk__row, .talk__msg, .usage__row, .usage__tile, .depts__tab, .plan__features li, .provider-list li):nth-child(2) { --at: 1; }
    :is(.pj__card, .desk__row, .talk__msg, .usage__row, .usage__tile, .depts__tab, .plan__features li, .provider-list li):nth-child(3) { --at: 2; }
    :is(.pj__card, .desk__row, .usage__row, .depts__tab, .plan__features li, .provider-list li):nth-child(4) { --at: 3; }
    :is(.depts__tab, .plan__features li, .provider-list li):nth-child(5) { --at: 4; }
    :is(.depts__tab, .plan__features li):nth-child(6) { --at: 5; }
    .plan__features li:nth-child(n + 7) { --at: 6; }
    .provider-list li { animation-timeline: view(); animation-range: cover 0% cover 30%; }
    @keyframes settle { from { opacity: 0; translate: 0 0.9rem; } }
    /* The compare table's rows come in from the top down, a row at a time. */
    .compare tbody tr { animation-name: row-in; animation-range: cover calc(6% + var(--at, 0) * 1.6%) cover calc(22% + var(--at, 0) * 1.6%); }
    .compare tbody tr:nth-child(2) { --at: 1; }
    .compare tbody tr:nth-child(3) { --at: 2; }
    .compare tbody tr:nth-child(4) { --at: 3; }
    .compare tbody tr:nth-child(5) { --at: 4; }
    .compare tbody tr:nth-child(6) { --at: 5; }
    .compare tbody tr:nth-child(7) { --at: 6; }
    .compare tbody tr:nth-child(8) { --at: 7; }
    .compare tbody tr:nth-child(9) { --at: 8; }
    .compare tbody tr:nth-child(10) { --at: 9; }
    .compare tbody tr:nth-child(11) { --at: 10; }
    .compare tbody tr:nth-child(12) { --at: 11; }
    .compare tbody tr:nth-child(13) { --at: 12; }
    .compare tbody tr:nth-child(14) { --at: 13; }
    .compare tbody tr:nth-child(15) { --at: 14; }
    .compare tbody tr:nth-child(16) { --at: 15; }
    .compare tbody tr:nth-child(17) { --at: 16; }
    @keyframes row-in { from { opacity: 0; } }

    /* Charts draw themselves: limit bars fill from the left, the chart's columns rise, a few at a time. */
    .usage__bar i { animation: fill-in var(--glide) both; animation-timeline: --box; animation-range: cover 14% cover 44%; }
    @keyframes fill-in { from { clip-path: inset(0 100% 0 0 round 99px); } to { clip-path: inset(0 0 0 0 round 99px); } }
    .usage__chart { view-timeline: --chart block; }
    .usage__chart span { animation: bar-breathe 3.6s var(--ease-in-out) infinite alternate, rise-up var(--glide) both; animation-timeline: auto, --chart; animation-range: normal, cover 4% cover 40%; }
    .usage__chart span:nth-child(3n + 1) { animation-range: normal, cover 8% cover 44%; }
    .usage__chart span:nth-child(3n) { animation-range: normal, cover 12% cover 48%; }
    @keyframes rise-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-3rem -3rem 0 -3rem); } }
    .refresh__meter { animation: meter-in var(--glide) both; animation-timeline: --box; animation-range: cover 10% cover 40%; }
    @keyframes meter-in { from { clip-path: inset(-6px 100% -6px 0); } to { clip-path: inset(-6px 0 -6px 0); } }

    /* The network grows out from the Mac: the lines first, then the tiles at their ends. */
    .network__lines { animation: grow-out var(--glide) both; animation-timeline: --box; animation-range: cover 10% cover 46%; }
    @keyframes grow-out { from { clip-path: circle(8% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
    .network__hub img { animation: pop-in var(--glide) both; animation-timeline: --box; animation-range: cover 4% cover 30%; }
    :is(.network__device, .network__worker) { animation: pop-in var(--glide) both; animation-timeline: --box; animation-range: cover 26% cover 48%; }
    :is(.network__device--2, .network__worker--remote) { animation-range: cover 29% cover 51%; }
    .network__device--3 { animation-range: cover 32% cover 54%; }
    @keyframes pop-in { from { opacity: 0; scale: 0.82; } }

    /* Icons turn into place; the cues between the steps pop once their step has arrived. */
    :is(.points__icon, .steps__n, .office-points__icon, .depts__hand, .account__glyph) { animation: turn-in var(--glide) both; animation-timeline: view(); animation-range: cover 4% cover 32%; }
    :is(.office-points__icon, .account__glyph, .depts__hand) { animation-timeline: --box; animation-range: cover 10% cover 38%; }
    @keyframes turn-in { from { opacity: 0; rotate: -24deg; scale: 0.6; } }
    .score__cue { animation: pop-in var(--glide) both; animation-timeline: view(); animation-range: cover 16% cover 40%; }

    /* The workflow's graph and key rise in turn; the opening's caption and the picker's fields fade in. */
    :is(.relay__stage, .relay__foot) { animation: settle var(--glide) both; animation-timeline: view(); animation-range: cover 0% cover 26%; }
    .opening__caption { animation: row-in linear both; animation-timeline: view(); animation-range: entry 20% entry 100%; }
    .picker__field { animation: settle var(--glide) both; animation-timeline: --box; animation-range: cover 30% cover 52%; }
    .picker__field:nth-of-type(3) { animation-range: cover 33% cover 55%; }
    .picker__field:nth-of-type(4) { animation-range: cover 36% cover 58%; }

    /* A hairline draws itself across the top of each section as it comes in. */
    .sheet > .section { position: relative; }
    .sheet > .section + .section::before {
      content: ""; position: absolute; top: calc(var(--section-gap) / 2); left: 50%; width: min(100% - 2 * var(--gutter), var(--container)); height: 1px; translate: -50% 0;
      background: linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--accent) 50%, var(--border-strong) 80%, transparent);
      opacity: 0.6; animation: draw-across linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    @keyframes draw-across { from { scale: 0 1; opacity: 0; } }
  }
}

/* People (people.js): small pixel-art figures on the top edge of a block. The ledge is a line with no height;
   each walker stands on it. */
.ledge { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 3; height: 0; pointer-events: none; }
.walker { position: absolute; left: 0; bottom: 0; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
/* One frame of the strip shows at a time: frames of 96 pixels, drawn at half size (people.js sets the size). */
.walker__body { display: block; width: 48px; height: 64px; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.16)); transition: filter var(--dur-base); }
.walker:hover .walker__body { filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.16)) brightness(1.08); }
.walker__say {
  position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 4px; padding: 0.15rem 0.45rem; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); color: var(--text); font: var(--weight-semibold) 0.68rem / 1.4 var(--font-mono); white-space: nowrap; box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-spring);
}
.walker[data-says] .walker__say { opacity: 1; translate: -50% 0; }
/* The Team card's office (people.js): desks in front of the people at them, cut off at the card's sides so
   people come in over its edge. */
.ledge--office { clip-path: inset(-140px 0 -12px 0); }
.ledge--office .walker { z-index: 1; }
.ledge__desk { position: absolute; z-index: 2; bottom: 0; width: 44px; height: 30px; line-height: 0; }
.ledge__desk svg { display: block; }
.ledge__badge {
  position: absolute; z-index: 3; bottom: 74px; translate: -50% 0; padding: 0.1rem 0.45rem; border-radius: 6px;
  background: var(--accent); color: var(--accent-text); font: var(--weight-semibold) 0.68rem / 1.4 var(--font-mono); white-space: nowrap; pointer-events: none;
}
.ledge__badge--big { bottom: 96px; padding: 0.15rem 0.6rem; font-size: 0.78rem; }
.plans .ledge, .site-footer .ledge { list-style: none; }

/* The Pro plan's guide (guide.js): one cell of the sheet, drawn at half size so each art pixel is one CSS pixel.
   The cell's ground line is 4 pixels above its bottom edge, so the guide stands on the trial button. */
.guide { position: absolute; z-index: 2; right: var(--space-3); bottom: calc(100% - 4px); width: 48px; height: 80px; background-repeat: no-repeat; image-rendering: pixelated; cursor: pointer; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.16)); }
.guide:not([data-ready]) { visibility: hidden; }

/* The billing toggle's thumb (home.js) slides to the chosen period instead of jumping. */
.billing[data-thumb] { position: relative; isolation: isolate; }
.billing[data-thumb]::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: var(--thumb-w, 0); translate: var(--thumb-x, 0) 0;
  border-radius: var(--radius-pill); background: var(--surface-strong); box-shadow: var(--shadow-sm);
  transition: translate var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-spring);
}
.billing[data-thumb] button[aria-pressed="true"] { background: none; box-shadow: none; }
.billing button { transition: color var(--dur-base) var(--ease-out); }