/* Voronda: the four Use cases pages (round 4, 2026-11-01).

   Loaded only by use-cases-schools/-practices/-offices/-companies.html, after css/whatwedo.css (which
   still gives them the sector cards .wm-who and the demo panel .wm-demo). Everything else here.

   The whole page is one bright stretch from the top: main slides under the sticky header, so
   site.js keeps the header light over it (.bright); the pages' markup starts the header light too
   (class is-bright and the dark mark), so it never flashes dark. This stretch has no V cut, since
   there is nothing dark above it to show through.

   The opening: the claim on the left; on the right, on a blush square, the app window playing this
   kind of organisation's job step by step (the tutor for schools, the Agent's plan for the others).
   It plays once in CSS and stops on its finished frame; with reduced motion only that frame shows.
   Then each page has its own body: schools a system map, the tutor (dark), Agent, Chat, where pupil
   data stays and who decides; practices a day as a timeline closing on a dark band; public offices
   one application as a flow with the log running under it; companies four team panels and a dark
   band. Agent and Chat look different on purpose: Agent hands over tasks (prompt boxes), Chat
   answers questions (the answer with its source, then questions down a ruled list).
   Square corners and hairlines for the site; only the app's own pieces are rounded. No shadows on
   cards. Every animation sits under prefers-reduced-motion: no-preference. */

/* ---------- the bright stretch from the top ---------- */
.usecases main { margin-top: calc(var(--header-h) * -1); }
.usecases .bright.uc-top { clip-path: none; }
.usecases #more { border-top: var(--hairline); }

/* ---------- small parts used across the page ---------- */
.uc-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-4);
  font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.uc-k__p { font-size: var(--t-small); font-weight: var(--w-ui); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.uc-h2 { max-width: 18ch; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.25rem); font-weight: var(--w-display); line-height: 1.04;
  letter-spacing: var(--track-display); text-wrap: balance; overflow-wrap: break-word; }
.uc-p { max-width: 44ch; margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-muted); }

.uc-sec { padding-block: var(--s-section-lg); background: var(--bg); }
.uc-sec--blush { background: var(--c-blush); }
.uc-sec--rose { background: var(--c-blush-2); }
.uc-sec--dark { color: var(--ink); line-height: var(--lh-body-ground); }
.uc-hero + .uc-sec:not(.uc-sec--blush) { border-top: var(--hairline); }

/* A section head: the heading and its line on the left, the site's drawing for this kind on the right. */
.uc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6) var(--s-8); }
.uc-head__art { width: clamp(9rem, 5rem + 9vw, 15rem); background: var(--c-blush); }
.uc-sec--blush .uc-head__art { background: var(--c-paper); }
.uc-head__art img, .uc-case__art img, .uc-band__art img, .uc-data__art img { display: block; width: 100%; height: auto; }

/* Which AI takes a job, or who decides: quiet, the name strong; the AI's name leads to its section. */
.uc-by { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--ink-faint-text); }
.uc-by :is(a, b) { margin-left: 0.2em; font-weight: var(--w-strong); color: var(--ink); }
.uc-by a { position: relative; z-index: 2; text-decoration: none; border-bottom: 1px solid var(--rule-firm);
  transition: color var(--dur) var(--ease-out-quart), border-color var(--dur) var(--ease-out-quart); }
.uc-by a:is(:hover, :focus-visible) { color: var(--accent-text); border-bottom-color: var(--accent); }
.uc-by--person b { color: var(--accent-text); }

/* ---------- the app's pieces (rounded, as the product is) ---------- */
.uc-win { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; width: 100%; max-width: 33rem; overflow: hidden;
  border-radius: 0.9rem; background: #fff; color: var(--c-charcoal); font-size: 0.9375rem; line-height: 1.45;
  box-shadow: 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.1), 0 1.5rem 3rem -1.75rem oklch(31.8% 0.005 67.7 / 0.4); }
.uc-win__bar { display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.65rem 0.9rem; background: oklch(97% 0.004 5.6);
  border-bottom: 1px solid oklch(31.8% 0.005 67.7 / 0.1); }
.uc-win__dots { display: flex; gap: 0.4rem; }
.uc-win__dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px oklch(0% 0 0 / 0.2); }
.uc-win__dots i:nth-child(2) { background: #febc2e; }
.uc-win__dots i:nth-child(3) { background: #28c840; }
.uc-win__name { font-weight: var(--w-display); letter-spacing: -0.02em; }
.uc-win__modes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; margin-left: auto; }
.uc-win__mode { padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: var(--w-strong); line-height: 1.5;
  box-shadow: inset 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.22); }
.uc-win__mode:first-child { background: var(--c-charcoal); color: #fff; box-shadow: none; }
.uc-win__body { display: grid; align-content: start; gap: 0.7rem; padding: 1.1rem 1.1rem 1.25rem; }
.uc-win p, .uc-scene p, .uc-feat__mini p { margin: 0; }

.uc-me { justify-self: end; max-width: 88%; padding: 0.55rem 0.9rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: var(--c-red);
  color: #fff; font-weight: var(--w-strong); line-height: 1.4; }
.uc-ai { justify-self: start; display: flex; align-items: flex-start; gap: 0.6rem; max-width: 92%; padding: 0.55rem 0.9rem;
  border-radius: 0.9rem 0.9rem 0.9rem 0.25rem; background: oklch(97% 0.004 5.6); border: 1px solid oklch(31.8% 0.005 67.7 / 0.12);
  color: var(--c-charcoal); font-weight: var(--w-ui); line-height: 1.4; }
.uc-ai .petal { margin-top: 0.2em; color: var(--c-red); }

.uc-plan { display: grid; gap: 0.6rem; padding: 0.8rem 0.95rem; border-radius: 0.75rem; background: oklch(97% 0.004 5.6);
  border: 1px solid oklch(31.8% 0.005 67.7 / 0.12); box-shadow: inset 3px 0 0 var(--c-red); }
.uc-plan__h { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: var(--w-display); }
.uc-plan__go { display: inline-grid; font-size: 0.8125rem; font-weight: var(--w-strong); }
.uc-plan__go > span { grid-area: 1 / 1; justify-self: end; align-self: center; }
.uc-plan__ask { padding: 0.12rem 0.7rem; border-radius: 0.45rem; background: var(--c-red); color: #fff; opacity: 0; }
.uc-plan__ok { color: var(--c-warmgray); }
.uc-plan__steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.uc-plan__steps li, .uc-done { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.4; }
.uc-done { padding: 0.6rem 0.8rem; border-radius: 0.75rem; background: var(--c-blush); font-weight: var(--w-strong); }
/* A tick in a disc, drawn with borders (the policy allows no data: images); before it is ticked, a ring. */
.uc-tick { position: relative; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1em; border-radius: 50%; background: var(--c-charcoal);
  box-shadow: inset 0 0 0 2px var(--c-charcoal); }
.uc-tick::after { content: ""; position: absolute; left: 0.4rem; top: 0.22rem; width: 0.3rem; height: 0.55rem; border: solid #fff;
  border-width: 0 2px 2px 0; rotate: 45deg; }
.uc-done .uc-tick { background: var(--c-red); box-shadow: none; }

.uc-win .uc-turn { display: grid; gap: 0.15rem; margin-top: 0.3rem; padding: 0.7rem 0.95rem; border-radius: 0.75rem; background: var(--c-blush);
  box-shadow: inset 3px 0 0 var(--c-red); }
.uc-turn__k { font-size: 0.75rem; font-weight: var(--w-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-crimson); }
.uc-turn__task { font-size: 1.5rem; font-weight: var(--w-display); letter-spacing: -0.02em; line-height: 1.2; }

/* ---------- the opening ---------- */
.usecases .bright > .uc-hero { display: grid; align-items: center; min-height: 100svh;
  padding: calc(var(--header-h) + clamp(1.5rem, 0.5rem + 2.5vw, 3rem)) 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.uc-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-7) clamp(2rem, 0.5rem + 4vw, 6rem); }
.uc-hero__copy { display: grid; justify-items: start; }
.uc-hero__for { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-label); font-weight: var(--w-strong);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.uc-hero__for::before { content: ""; width: var(--v-tick); height: calc(var(--v-tick) * var(--v-depth)); background: var(--accent); clip-path: var(--v-cut); }
.uc-hero__h { max-width: 15ch; margin-top: var(--s-5); font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem); font-weight: var(--w-display);
  line-height: 1.02; letter-spacing: var(--track-display); text-wrap: balance; overflow-wrap: break-word; }
.uc-hero__p { max-width: 34ch; margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-muted); }
.uc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
.uc-hero__stage { position: relative; display: grid; justify-items: center; overflow: hidden;
  padding: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem) clamp(1rem, 0.25rem + 2.5vw, 3rem) clamp(1rem, 0.25rem + 2.5vw, 3rem); background: var(--c-blush); }
.uc-hero__petal { position: absolute; top: 50%; right: -8%; width: 52%; height: auto; aspect-ratio: 189 / 396; translate: 0 -50%; rotate: 18deg;
  color: transparent; stroke: var(--rule-firm); stroke-width: 0.6; pointer-events: none; }
.uc-hero__eg { position: absolute; top: clamp(0.9rem, 0.5rem + 1vw, 1.25rem); left: clamp(1rem, 0.25rem + 2.5vw, 3rem); font-size: var(--t-label);
  font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint-text); }

/* The scenes play: each piece after the one before, and they stop on the finished frame. The opening
   plays at once; a scene further down plays when it comes into view (data-reveal adds .is-in). */
@keyframes uc-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes uc-fill { from { background-color: transparent; } }
@keyframes uc-mark { from { opacity: 0; } }
@keyframes uc-hold { from, to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .uc-hero__copy > * { animation: uc-in 820ms var(--ease-out-expo) both 80ms; }
  .uc-hero__copy > :nth-child(2) { animation-delay: 160ms; }
  .uc-hero__copy > :nth-child(3) { animation-delay: 260ms; }
  .uc-hero__copy > :nth-child(4) { animation-delay: 360ms; }
  .uc-hero__stage { animation: uc-in 900ms var(--ease-out-expo) both 240ms; }

  .uc-hero .uc-win--tutor .uc-win__body > * { animation: uc-in 520ms var(--ease-out-expo) both 800ms; }
  .uc-hero .uc-win--tutor .uc-win__body > :nth-child(2) { animation-delay: 1400ms; }
  .uc-hero .uc-win--tutor .uc-win__body > :nth-child(3) { animation-delay: 2050ms; }
  .uc-hero .uc-win--tutor .uc-win__body > :nth-child(4) { animation-delay: 2600ms; }
  .uc-hero .uc-win--tutor .uc-win__body > :nth-child(5) { animation-delay: 3250ms; }
  .uc-hero .uc-win--tutor .uc-win__body > :nth-child(6) { animation-delay: 3800ms; }
  .uc-hero .uc-win--tutor .uc-win__body > :nth-child(7) { animation-delay: 4500ms; }

  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-win__body > * { animation: uc-in 520ms var(--ease-out-expo) both 700ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan { animation-delay: 1400ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__ask { animation: uc-hold 2300ms linear; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__ok { animation: uc-in 300ms var(--ease-out-quart) both 2300ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__steps .uc-tick { animation: uc-fill 260ms var(--ease-out-quart) both 2800ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__steps .uc-tick::after { animation: uc-mark 200ms var(--ease-out-quart) both 2800ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__steps li:nth-child(2) .uc-tick { animation-delay: 3350ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__steps li:nth-child(3) .uc-tick { animation-delay: 3900ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-done { animation-delay: 4500ms; }

  .uc-ch__scene.is-in > * { animation: uc-in 520ms var(--ease-out-expo) both 250ms; }
  .uc-ch__scene.is-in > .uc-ai { animation-delay: 900ms; }
  .uc-ch__scene.is-in > .uc-src { animation-delay: 1400ms; }
}
/* :is() takes no pseudo-elements, so the later ticks' marks get their own delay. */
@media (prefers-reduced-motion: no-preference) {
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__steps li:nth-child(2) .uc-tick::after { animation-delay: 3350ms; }
  :is(.uc-hero .uc-win--agent, .uc-scene.uc-win--agent.is-in) .uc-plan__steps li:nth-child(3) .uc-tick::after { animation-delay: 3900ms; }
}

/* ---------- Agent: tasks you hand over ---------- */
.uc-ag__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--s-7) var(--s-8); }
.uc-ag__copy { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.uc-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.uc-ag--scene .uc-ag__grid { align-items: center; }
.uc-ag--scene .uc-ag__copy { position: static; }
.uc-ag--scene .uc-win { justify-self: end; }
.uc-ag--scene .uc-jobs { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-4); }
.uc-job { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-3); padding: var(--s-5); background: var(--c-blush); }
.uc-sec--blush .uc-job { background: var(--c-paper); }
.uc-job h3 { font-size: var(--t-h3); font-weight: var(--w-display); line-height: 1.15; letter-spacing: var(--track-h); text-wrap: balance; }
.uc-job > p:not(.uc-say) { color: var(--ink-muted); }
/* What someone types, in the app's own prompt box with its red send button. */
.uc-say { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.uc-say__k { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint-text); }
.uc-say q { position: relative; display: block; padding: 0.7rem 3rem 0.7rem 0.9rem; border-radius: 0.75rem; background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-firm); color: var(--c-charcoal); font-size: var(--t-small); font-weight: var(--w-ui); line-height: 1.45; quotes: none; }
.uc-say q::after { content: ""; position: absolute; right: 0.5rem; bottom: 0.5rem; width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; background: var(--c-red); }
.uc-say q::before { content: ""; position: absolute; z-index: 1; right: calc(0.5rem + 0.6rem); bottom: calc(0.5rem + 0.55rem); width: 0.5rem; height: 0.5rem;
  border: solid #fff; border-width: 2px 2px 0 0; rotate: -45deg; }

/* ---------- Chat: questions answered from your files ---------- */
.uc-ch__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--s-7) var(--s-8); }
.uc-ch__scene { order: -1; display: grid; gap: var(--s-4); padding: clamp(1.25rem, 0.75rem + 2.2vw, 2.75rem); background: var(--c-blush); color: var(--c-charcoal);
  font-size: var(--t-body); }
.uc-sec--blush .uc-ch__scene { background: var(--c-paper); }
.uc-scene__eg { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint-text); }
.uc-ch__scene .uc-me, .uc-ch__scene .uc-ai { font-size: var(--t-lead); }
.uc-ch__scene .uc-ai { background: #fff; box-shadow: inset 4px 0 0 var(--c-red); border: 0; }
.uc-src { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; justify-self: start; padding: 0.45rem 0.8rem; background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule-firm); font-size: var(--t-small); color: var(--c-warmgray); }
.uc-src::before { content: ""; width: 0.8rem; height: 1rem; background: var(--c-charcoal); clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%); }
.uc-src__k { font-weight: var(--w-strong); color: var(--c-charcoal); }
.uc-src__k::after { content: ":"; content: ":" / ""; }

.uc-asks { margin: var(--s-8) 0 0; padding: 0; list-style: none; border-top: var(--hairline); }
.uc-ask { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4) var(--s-8); padding-block: var(--s-6); border-bottom: var(--hairline-soft); }
.uc-ask__q { display: grid; justify-items: start; align-content: start; gap: var(--s-2); }
.uc-ask__q q { padding: 0.6rem 1rem; border-radius: 0.9rem 0.9rem 0.25rem 0.9rem; background: #fff; box-shadow: inset 0 0 0 1.5px var(--c-red);
  color: var(--c-charcoal); font-size: var(--t-lead); font-weight: var(--w-ui); line-height: 1.35; quotes: none; }
.uc-ask__a { display: grid; align-content: start; gap: var(--s-2); }
.uc-ask__a h3 { font-size: var(--t-h3); font-weight: var(--w-display); line-height: 1.15; letter-spacing: var(--track-h); }
.uc-ask__a p { max-width: 52ch; color: var(--ink-muted); }

/* ---------- dark bands: closing time, the company's note ---------- */
.uc-band__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: var(--s-6) var(--s-8); }
.uc-band__art { justify-self: center; width: clamp(6rem, 3rem + 7vw, 11rem); }
.uc-band__when { display: grid; gap: var(--s-3); }
.uc-band__time { font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem); font-weight: var(--w-display); line-height: 0.9; letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums; color: var(--accent-text); }
.uc-band__when > span { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
.uc-band__copy { display: grid; justify-items: start; gap: var(--s-4); }
.uc-band__h { max-width: 26ch; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: var(--w-display); line-height: 1.1;
  letter-spacing: var(--track-h); text-wrap: balance; }
.uc-band__p { max-width: 50ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-muted); }

/* ---------- schools: the system map ----------
   Your server at the top; a line from it to each of the three parts, every part with all four jobs. */
.uc-map { margin-top: var(--s-8); }
.uc-map__hub { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: max-content; margin: 0 auto;
  padding: var(--s-3) var(--s-6); background: var(--c-charcoal); color: var(--c-white); font-weight: var(--w-strong); }
.uc-map__hub::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--s-6); background: var(--rule-firm); }
.uc-map__srv { width: 1rem; height: 1.15rem; border: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) 50% 32% / 55% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 68% / 55% 2px no-repeat; }
.uc-map__mods { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: calc(var(--s-6) * 2) 0 0; padding: 0; list-style: none; }
.uc-map__mods::before { content: ""; position: absolute; top: calc(var(--s-6) * -1); left: calc((100% - var(--s-4) * 2) / 6); right: calc((100% - var(--s-4) * 2) / 6);
  height: 1px; background: var(--rule-firm); }
.uc-mod { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--s-3); padding: var(--s-6); background: var(--c-paper); }
.uc-mod::before { content: ""; position: absolute; top: calc(var(--s-6) * -1); left: 50%; width: 1px; height: var(--s-6); background: var(--rule-firm); }
.uc-mod::after { content: ""; position: absolute; top: 0; left: calc(50% - var(--v-tick) / 2); width: var(--v-tick); height: calc(var(--v-tick) * var(--v-depth));
  background: var(--accent); clip-path: var(--v-cut); }
.uc-mod--tut { background: var(--c-blush-2); }
.uc-mod__h { font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1; letter-spacing: var(--track-display); }
.uc-mod__p { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-muted); }
.uc-mod__jobs { counter-reset: job; width: 100%; margin: var(--s-2) 0 0; padding: 0; list-style: none; border-top: var(--hairline); }
.uc-mod__jobs li { counter-increment: job; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-1) 0; padding-block: var(--s-4); border-bottom: var(--hairline-soft); }
.uc-mod__jobs li::before { content: counter(job, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 0.3em; font-size: var(--t-label);
  font-weight: var(--w-strong); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.uc-mod__jobs h4 { font-size: var(--t-body); font-weight: var(--w-display); line-height: 1.3; }
.uc-mod__jobs p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted); }
.uc-mod .cta { font-size: var(--t-small); }

/* ---------- schools: the tutor, on the dark ground ---------- */
.uc-tutor { position: relative; overflow: hidden; }
.uc-tutor__petal { position: absolute; top: 50%; right: -7vw; width: min(30vw, 26rem); height: auto; aspect-ratio: 189 / 396; translate: 0 -50%; rotate: -16deg;
  color: transparent; stroke: var(--rule-firm); stroke-width: 0.6; pointer-events: none; }
.uc-tutor__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: var(--s-7) var(--s-8); }
.uc-tutor__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.uc-tutor .sec-h > span { display: block; }
.uc-tutor .sec-h > span + span { color: var(--accent-text); }
.uc-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.uc-feat { display: grid; grid-template-rows: auto auto 1fr; gap: var(--s-3); padding: var(--s-5); background: var(--bg-raised); border: var(--hairline-soft); }
.uc-feat h3 { font-size: var(--t-h3); font-weight: var(--w-display); line-height: 1.15; letter-spacing: var(--track-h); text-wrap: balance; }
.uc-feat > p { color: var(--ink-muted); }
.uc-feat__mini { display: grid; align-content: end; gap: 0.5rem; margin-top: var(--s-2); font-size: var(--t-small); }
.uc-feat__mini .uc-ai { border-color: transparent; }

/* ---------- schools: where pupil data stays ---------- */
.uc-data { padding-block: var(--s-section); }
.uc-data__grid { display: grid; grid-template-columns: auto minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--s-5) var(--s-7); }
.uc-data__art { width: clamp(5rem, 3rem + 5vw, 8.5rem); }
.uc-data__h { max-width: 14ch; font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1.04; letter-spacing: var(--track-display); text-wrap: balance; }
.uc-data__copy { display: grid; justify-items: start; gap: var(--s-3); }
.uc-data__copy p { max-width: 50ch; color: var(--ink); }

/* ---------- schools: who decides what ---------- */
.uc-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.uc-role { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: start; gap: var(--s-3); padding: var(--s-6); border: var(--hairline); }
.uc-role--first { background: var(--c-blush-2); border-color: transparent; }
.uc-role__n { font-size: clamp(2.75rem, 2rem + 2vw, 4rem); font-weight: var(--w-display); line-height: 0.9; color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-faint-text); font-variant-numeric: tabular-nums; }
.uc-role--first .uc-role__n { color: var(--accent); -webkit-text-stroke: 0; }
.uc-role h3 { font-size: var(--t-h3); font-weight: var(--w-display); line-height: 1.15; letter-spacing: var(--track-h); }
.uc-role .cta { align-self: end; }

/* ---------- practices: one day, as a timeline ----------
   The time large on the left, a line down the day with a V where each slot sits on it (it fills red
   as you read, motion.js --wp), the slot on a paper card. "Done by" marks the slots one AI takes. */
.uc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-7); }
.uc-filter__k { margin-right: var(--s-2); font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
.uc-filter__b { min-height: 2.75rem; margin: 0; padding: 0.4rem 1.2rem; border: var(--hairline); border-radius: 0; background: var(--c-paper); color: var(--ink);
  font: inherit; font-weight: var(--w-strong); cursor: pointer; transition: background-color var(--dur) var(--ease-out-quart), color var(--dur) var(--ease-out-quart); }
.uc-filter__b:hover { border-color: var(--ink); }
.uc-filter__b[aria-pressed="true"] { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-white); }
.uc-filter__b:focus-visible { outline: var(--focus); outline-offset: 2px; }
html:not(.js) .uc-filter { display: none; }

.uc-tl { --tl: 9.5rem; position: relative; margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.uc-tl::before, .uc-tl::after { content: ""; position: absolute; top: 1.4rem; bottom: 2rem; left: calc(var(--tl) + 1.25rem - 1px); width: 2px; background: var(--rule-firm); }
.uc-tl::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--wp, 1)); }
.uc-slot { position: relative; display: grid; grid-template-columns: var(--tl) 2.5rem minmax(0, 1fr); align-items: start; padding-bottom: var(--s-4); }
.uc-slot__when { display: grid; justify-items: end; gap: var(--s-1); padding-top: var(--s-4); text-align: right; }
.uc-slot__time { font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.uc-slot__k { font-size: var(--t-small); color: var(--ink-muted); }
.uc-slot__dot { position: relative; z-index: 1; justify-self: center; width: 1rem; height: calc(1rem * var(--v-depth)); margin-top: 1.4rem;
  background: var(--accent); clip-path: var(--v-cut); }
.uc-slot__card { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5) var(--s-6); background: var(--c-paper);
  box-shadow: inset 0 3px 0 transparent; transition: box-shadow var(--dur) var(--ease-out-quart), background-color var(--dur) var(--ease-out-quart); }
.uc-slot__card h3 { font-size: var(--t-h3); font-weight: var(--w-display); line-height: 1.15; letter-spacing: var(--track-h); text-wrap: balance; }
.uc-slot__card > p:not(.uc-by) { max-width: 62ch; color: var(--ink-muted); }
.uc-tl[data-show] .uc-slot__card { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-firm); }
.uc-tl[data-show="agent"] .uc-slot[data-by="agent"] .uc-slot__card,
.uc-tl[data-show="chat"] .uc-slot[data-by="chat"] .uc-slot__card { background: #fff; box-shadow: inset 0 3px 0 var(--accent); }

/* ---------- public offices: one application, as a flow ----------
   Five steps left to right with an arrow between them; the clerk's steps on the deeper blush. Under
   all five the log runs as one dark bar: step six happens at every step. Press a step to mark it. */
.uc-case { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-7);
  padding: var(--s-4) var(--s-6) var(--s-4) var(--s-4); background: var(--c-paper); }
.uc-case__art { width: clamp(6rem, 4rem + 5vw, 10rem); background: var(--c-blush); }
.uc-case__copy { display: grid; gap: var(--s-2); }
.uc-case__k { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.uc-case__p { max-width: 52ch; font-size: var(--t-lead); font-weight: var(--w-strong); line-height: 1.4; }
.uc-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.uc-node { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; justify-items: start; gap: var(--s-3);
  min-width: 0; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--c-paper); }
.uc-node--clerk { background: var(--c-blush-2); }
.uc-node--clerk .uc-by { color: var(--ink-muted); }
.uc-node:not(.uc-node--log)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0);
  transform-origin: left; transition: transform 520ms var(--ease-out-expo); }
.uc-node.is-on::before { transform: none; }
.uc-node:not(.uc-node--log):not(:nth-child(5))::after { content: ""; position: absolute; top: 2.6rem; right: calc(var(--s-5) / -2 - 0.35rem); width: 0.7rem; height: 0.8rem;
  background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.uc-node__n { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); font-weight: var(--w-display); line-height: 0.9; color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-faint-text); font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease-out-quart); }
.uc-node.is-on .uc-node__n { color: var(--accent); -webkit-text-stroke-color: transparent; }
.uc-node h3 { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); font-weight: var(--w-display); line-height: 1.15; letter-spacing: var(--track-h); text-wrap: balance; }
.uc-node__p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted); }
.uc-node__hit { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.uc-node__hit:focus-visible { outline: var(--focus); outline-offset: 2px; }
html:not(.js) .uc-node__hit { display: none; }
@media (hover: hover) and (pointer: fine) { .uc-node:not(.is-on):hover::before { transform: scaleX(0.2); } }
@media (forced-colors: active) { .uc-node__n, .uc-role__n { color: CanvasText; -webkit-text-stroke: 0; } }
.uc-node--log { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: none; align-items: start;
  gap: var(--s-3) var(--s-6); padding: var(--s-6); background: var(--bg); color: var(--ink); }
.uc-node--log h3 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: var(--track-display); max-width: 12ch; }
.uc-node--log .uc-node__n { -webkit-text-stroke-color: var(--accent-text); }
.uc-node__log { display: grid; justify-items: start; gap: var(--s-3); }
.uc-node--log .uc-node__p { font-size: var(--t-body); }

/* ---------- companies: team by team ---------- */
.uc-depts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.uc-dept { display: grid; align-content: start; gap: var(--s-5); padding: var(--s-6); background: var(--tint); }
.uc-dept:nth-child(1) { --tint: var(--c-blush-2); }
.uc-dept:nth-child(2) { --tint: oklch(93.6% 0.007 60); }
.uc-dept:nth-child(3) { --tint: var(--c-blush); }
.uc-dept:nth-child(4) { --tint: oklch(99.4% 0.002 17); outline: var(--hairline-soft); outline-offset: calc(var(--hair) * -1); }
.uc-dept__h { font-size: var(--t-h2); font-weight: var(--w-display); line-height: 1.02; letter-spacing: var(--track-display); text-wrap: balance; }
.uc-dept__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-3); font-size: var(--t-small); font-weight: var(--w-ui); }
.uc-dept__whok { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
/* A small padlock, drawn: the body a square, the shackle a bordered arch. */
.uc-lock { position: relative; width: 0.75rem; height: 0.6rem; margin: 0.35rem 0.15rem 0 0; background: var(--ink); }
.uc-lock::before { content: ""; position: absolute; bottom: 100%; left: 0.12rem; width: 0.51rem; height: 0.4rem; box-sizing: border-box; border: 2px solid var(--ink);
  border-bottom: 0; border-radius: 0.3rem 0.3rem 0 0; }
.uc-dept__jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: var(--hairline); }
.uc-dept__jobs > li { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-2); min-width: 0; padding: var(--s-4) var(--s-4) 0 0; }
.uc-dept__jobs > li + li { padding: var(--s-4) 0 0 var(--s-4); border-left: var(--hairline-soft); }
.uc-dept__jobs h4 { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); font-weight: var(--w-display); line-height: 1.2; letter-spacing: var(--track-h); text-wrap: balance; }
.uc-dept__jobs p:not(.uc-by) { font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.uc-dept .uc-by { color: var(--ink-muted); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .uc-flow { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .uc-node, .uc-node--log { grid-template-columns: 4rem minmax(0, 1fr); grid-template-rows: none; column-gap: var(--s-5); }
  .uc-node > :not(.uc-node__n, .uc-node__hit) { grid-column: 2; }
  .uc-node__n { grid-row: 1 / span 3; }
  .uc-node:not(.uc-node--log):not(:nth-child(5))::after, .uc-node:nth-child(5)::after { content: ""; position: absolute; top: auto; right: auto; bottom: calc(var(--s-5) / -2 - 0.4rem);
    left: calc(var(--s-5) + 1.5rem); width: 0.8rem; height: 0.7rem; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .uc-ag--scene .uc-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .uc-hero__grid, .uc-ag__grid, .uc-ch__grid, .uc-tutor__grid, .uc-band__grid, .uc-ask, .uc-roles, .uc-depts { grid-template-columns: minmax(0, 1fr); }
  .usecases .bright > .uc-hero { min-height: 0; padding-top: calc(var(--header-h) + var(--s-6)); }
  .uc-hero__stage { width: 100%; }
  .uc-ag__copy, .uc-tutor__head { position: static; }
  .uc-ag--scene .uc-win { justify-self: stretch; max-width: none; }
  .uc-ch__scene { order: 0; }
  .uc-band__art, .uc-band__when { justify-self: start; }
  .uc-map__mods { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
  .uc-map__mods::before, .uc-mod::before { content: none; }
  .uc-map__hub { width: auto; margin: 0; }
  .uc-map__hub::after { height: var(--s-6); left: var(--s-6); }
  .uc-mod::after { left: var(--s-6); }
  .uc-data__grid { grid-template-columns: auto minmax(0, 1fr); }
  .uc-data__copy { grid-column: 1 / -1; }
  .uc-ask { gap: var(--s-3); }
}
@media (max-width: 640px) {
  .uc-head { grid-template-columns: minmax(0, 1fr); }
  .uc-head__art { width: 9rem; }
  .uc-jobs, .uc-ag--scene .uc-jobs, .uc-feats, .uc-dept__jobs { grid-template-columns: minmax(0, 1fr); }
  .uc-dept__jobs > li { padding-right: 0; }
  .uc-dept__jobs > li + li { margin-top: var(--s-4); padding: var(--s-4) 0 0; border-left: 0; border-top: var(--hairline-soft); }
  .uc-dept, .uc-mod { padding: var(--s-5); }
  .uc-tl { --tl: 0rem; }
  .uc-tl::before, .uc-tl::after { left: calc(0.75rem - 1px); top: 0.6rem; }
  .uc-slot { grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: var(--s-3); }
  .uc-slot__when { grid-column: 2; grid-row: 1; justify-items: start; padding: 0 0 var(--s-2); text-align: left; }
  .uc-slot__dot { grid-column: 1; grid-row: 1; margin-top: 0.6rem; }
  .uc-slot__card { grid-column: 2; padding: var(--s-4) var(--s-5); }
  .uc-case { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .uc-case__art { width: 7rem; }
  .uc-node, .uc-node--log { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-5) var(--s-4); }
  .uc-node:not(.uc-node--log):not(:nth-child(5))::after, .uc-node:nth-child(5)::after { left: calc(var(--s-4) + 1rem); }
  .uc-win__body { padding: 0.9rem 0.85rem 1rem; }
  .uc-win__bar { padding-inline: 0.75rem; gap: 0.5rem; }
}

/* ---------- the small loops, one per page (2026-11-02) ----------
   The family is in css/whatwedo.css (.lp, .lp-doc, lp-fly, the pause while off screen); here each
   page's own scene. Schools: the papers drop into the school's server above the map. Practices: the
   inbox fills and the urgent result rises to the top. Offices: one application's papers go into its
   case file, and the two missing are flagged. Companies: contracts and invoices are filed on one
   shelf. The base rules are the still frame shown with reduced motion. The opening scene in the hero
   plays again too: js/usecases2.js fades it with .is-fade and starts it over. */
.uc-hero .uc-win__body { transition: opacity 420ms var(--ease-out-quart); }
.uc-hero .uc-win.is-fade .uc-win__body { opacity: 0; }

/* Schools: a consent slip, the substitution plan and a parent's email wait above the server, drop
   into it one by one, and a red V runs down the line. 6.5 s. Still frame: the three, waiting. */
.lp-sch { width: min(100%, 34rem); margin: 0 auto; aspect-ratio: 5 / 2; }
.lp-sch::after { content: ""; position: absolute; left: 50%; top: 30cqw; bottom: 0; width: 1px; background: var(--rule-firm); }
.lp-sch .lp-doc { --x: 50cqw; --y: 32cqw; }
.lp-sch .lp-doc--slip { --w: 15cqw; }
.lp-sch .lp-doc--plan { --w: 12.5cqw; }
.lp-sch .lp-doc--mail { --w: 13.5cqw; }
.lp-s1 { --sx: -40cqw; --sy: -20cqw; --hx: -20cqw; --hy: -19cqw; --sr: -6deg; --hr: -3deg; }
.lp-s2 { --sx: 40cqw; --sy: -22cqw; --hx: 20cqw; --hy: -20cqw; --sr: 6deg; --hr: 3deg; }
.lp-s3 { --sx: 0cqw; --sy: -27cqw; --hx: 0cqw; --hy: -19cqw; }
.lp-sch__v { position: absolute; left: 50%; top: 31cqw; z-index: 1; width: 2.4cqw; height: calc(2.4cqw * var(--v-depth)); translate: -50% 0;
  background: var(--accent); clip-path: var(--v-cut); opacity: 0; }
@keyframes lp-v { 0%, 47% { opacity: 0; transform: none; } 50% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(8cqw); } }

/* Practices: a letter, a phone note and a lab result drop into the inbox, a row each; the result is
   marked urgent and rises to the top. 9 s. Still frame: the sorted inbox. */
.lp-inbox, .lp-shelf { max-width: 30rem; margin-top: var(--s-6); aspect-ratio: 3 / 2; }
.lp-inbox { background: var(--c-blush); }
.lp-inbox__win { position: absolute; left: 12cqw; right: 12cqw; top: 16cqw; bottom: 0; border-radius: 2cqw 2cqw 0 0; background: #fff;
  box-shadow: 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.1); }
.lp-inbox__bar { display: flex; align-items: center; gap: 1cqw; height: 6cqw; padding: 0 2.4cqw; border-radius: 2cqw 2cqw 0 0;
  background: oklch(97% 0.004 5.6); border-bottom: 1px solid oklch(31.8% 0.005 67.7 / 0.1); }
.lp-inbox__bar i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #ff5f57; }
.lp-inbox__bar i:nth-child(2) { background: #febc2e; }
.lp-inbox__bar i:nth-child(3) { background: #28c840; }
.lp-inbox__row { position: absolute; left: 4cqw; right: 4cqw; top: 9cqw; height: 9cqw; transform: translateY(11cqw); }
.lp-inbox__row--2 { top: 20cqw; }
.lp-inbox__row--3 { top: 31cqw; z-index: 1; transform: translateY(-22cqw); }
.lp-inbox__in { position: absolute; inset: 0; display: flex; align-items: center; gap: 2.4cqw; padding: 0 2.6cqw; border-radius: 1.2cqw;
  background: oklch(97% 0.004 5.6); }
.lp-inbox__ico { flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 0.8cqw; background: oklch(46.4% 0.013 39.4 / 0.38); }
.lp-inbox__row--3 .lp-inbox__ico { background: var(--c-red); }
.lp-inbox__t { display: grid; gap: 1.3cqw; flex: 1; }
.lp-inbox__t i { width: 70%; height: 1.3cqw; border-radius: 0.65cqw; background: oklch(46.4% 0.013 39.4 / 0.3); }
.lp-inbox__t i + i { width: 42%; background: oklch(46.4% 0.013 39.4 / 0.18); }
.lp-inbox__flag { flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--c-red); }
.lp-inbox .lp-doc { --x: 50cqw; opacity: 0; }
.lp-p1 { --y: 29.5cqw; --sx: -44cqw; --sy: -17.5cqw; --hx: -11cqw; --hy: -21.5cqw; --sr: -8deg; --hr: -2deg; --w: 11cqw; }
.lp-p2 { --y: 40.5cqw; --sx: 44cqw; --sy: -30.5cqw; --hx: 11cqw; --hy: -32.5cqw; --sr: 8deg; --hr: 2deg; }
.lp-p3 { --y: 51.5cqw; --sx: -44cqw; --sy: -41.5cqw; --hx: 0cqw; --hy: -43.5cqw; --sr: -6deg; --w: 8cqw; }
@keyframes lp-down { 0%, 54% { transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 61%, 100% { transform: translateY(11cqw); } }
@keyframes lp-up { 0%, 54% { transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); } 61%, 100% { transform: translateY(-22cqw); } }
@keyframes lp-urgent { 0%, 48% { opacity: 0; transform: scale(0.3); } 51% { opacity: 1; transform: scale(1.15); } 53%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }

/* Public offices: the form, an ID and a payslip drop into the case file; three of five parts are
   there, and the two missing papers appear as gaps with a red mark. 9 s. Still frame: the file
   with three papers in it and the two gaps flagged. */
.lp-case { width: clamp(15rem, 9rem + 12vw, 22rem); max-width: 100%; aspect-ratio: 4 / 3; background: var(--c-paper); }
.lp-case__back, .lp-case__front { position: absolute; border-radius: 0.8cqw; }
.lp-case__back { left: 26cqw; top: 30cqw; z-index: 1; width: 48cqw; height: 34cqw; background: var(--c-petal); }
.lp-case__back::before { content: ""; position: absolute; left: 0; bottom: 100%; width: 16cqw; height: 3.5cqw; border-radius: 0.8cqw 0.8cqw 0 0; background: inherit; }
.lp-case__front { left: 24cqw; top: 40cqw; z-index: 3; width: 52cqw; height: 26cqw; background: var(--c-blush-2);
  box-shadow: 0 -0.4cqw 1.2cqw -0.6cqw oklch(33.8% 0.127 27.8 / 0.3); }
.lp-case .lp-doc { --w: 15cqw; transform: rotate(var(--rr, 0deg)); }
.lp-c1 { --x: 40cqw; --y: 37cqw; --rr: -7deg; --sx: -34cqw; --sy: -19cqw; --hx: 10cqw; --hy: -25cqw; --sr: -6deg; --hr: -2deg; }
.lp-c2 { --x: 50cqw; --y: 35.5cqw; --sx: 44cqw; --sy: -19.5cqw; --hx: 0cqw; --hy: -23.5cqw; --sr: 6deg; --hr: 2deg; }
.lp-c3 { --x: 60cqw; --y: 37.5cqw; --rr: 6deg; --sx: -54cqw; --sy: -23.5cqw; --hx: -10cqw; --hy: -25.5cqw; --sr: -5deg; --hr: 1deg; }
.lp-case__gap { position: absolute; left: 13cqw; top: 52cqw; z-index: 2; width: 12cqw; height: 16cqw; translate: -50% -50%; rotate: -4deg;
  border: 0.35cqw dashed var(--c-warmgray); border-radius: 0.5cqw; }
.lp-case__gap + .lp-case__gap { left: 87cqw; rotate: 4deg; }
.lp-case__gap::after { content: ""; position: absolute; top: -2.6cqw; right: -2.6cqw; width: 5cqw; height: 5cqw; border-radius: 50%;
  background: linear-gradient(#fff, #fff) 50% 28% / 0.7cqw 1.9cqw no-repeat, radial-gradient(circle, #fff 0.4cqw, transparent 0.5cqw) 50% 78% / 1.2cqw 1.2cqw no-repeat, var(--c-red); }
.lp-case__bar { position: absolute; left: 26cqw; right: 26cqw; top: 70cqw; display: flex; gap: 1cqw; height: 1.6cqw; }
.lp-case__bar i { position: relative; flex: 1; overflow: hidden; border-radius: 0.3cqw; background: oklch(31.8% 0.005 67.7 / 0.14); }
.lp-case__bar i::after { content: ""; position: absolute; inset: 0; background: var(--c-charcoal); transform-origin: left; }
.lp-case__bar i:nth-child(n+4)::after { background: var(--c-red); }
@keyframes lp-gap { 0%, 47% { opacity: 0; transform: scale(0.85); } 53%, 84% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1); } }
@keyframes lp-badge { 0%, 52% { transform: scale(0); } 56% { transform: scale(1.15); } 59%, 100% { transform: scale(1); } }

/* Companies: contracts from the left and invoices from the right are each filed as a new binder,
   contracts with the red label, invoices with the dark one. 9.5 s. Still frame: the full shelf. */
.lp-shelf { background: oklch(93.6% 0.007 60); }
.lp-shelf::after { content: ""; position: absolute; left: 10cqw; right: 10cqw; top: 57cqw; height: 0.8cqw; background: var(--c-charcoal); }
.lp-bnd { position: absolute; left: var(--bx); top: 27cqw; width: 7cqw; height: 30cqw; translate: -50% 0; transform-origin: 50% 100%;
  border-radius: 0.6cqw 0.6cqw 0.2cqw 0.2cqw; background: #fff; box-shadow: 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.16); --lbl: var(--c-red); }
.lp-bnd::before { content: ""; position: absolute; left: 1.3cqw; right: 1.3cqw; top: 3cqw; height: 7cqw; border-radius: 0.3cqw; background: var(--lbl); }
.lp-bnd::after { content: ""; position: absolute; left: 50%; bottom: 3.5cqw; width: 3cqw; height: 3cqw; translate: -50% 0; border-radius: 50%;
  box-shadow: inset 0 0 0 0.35cqw oklch(31.8% 0.005 67.7 / 0.25); }
.lp-bnd--inv { --lbl: var(--c-charcoal); }
.lp-shelf .lp-doc { --y: 42cqw; opacity: 0; }
.lp-k1 { --x: 34.7cqw; --sx: -28.7cqw; --sy: -26cqw; --hx: 5.3cqw; --hy: -30cqw; --sr: -6deg; --hr: -2deg; }
.lp-k2 { --x: 73.5cqw; --sx: 20.5cqw; --sy: -26cqw; --hx: -13.5cqw; --hy: -30cqw; --sr: 6deg; --hr: 2deg; }
.lp-k3 { --x: 43.3cqw; --sx: -37.3cqw; --sy: -26cqw; --hx: -3.3cqw; --hy: -30cqw; --sr: -6deg; --hr: -2deg; }
.lp-k4 { --x: 82.1cqw; --sx: 11.9cqw; --sy: -26cqw; --hx: -22.1cqw; --hy: -30cqw; --sr: 6deg; --hr: 2deg; }

@keyframes lp-sink0 {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  4% { opacity: 1; }
  12% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  17% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  20% { opacity: 1; }
  23%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.4); }
}
@keyframes lp-sink9 {
  0%, 9% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  13% { opacity: 1; }
  21% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  26% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  29% { opacity: 1; }
  32%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.4); }
}
@keyframes lp-sink11 {
  0%, 11% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  15% { opacity: 1; }
  23% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  28% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  31% { opacity: 1; }
  34%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.4); }
}
@keyframes lp-sink18 {
  0%, 18% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  22% { opacity: 1; }
  30% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  35% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  38% { opacity: 1; }
  41%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.4); }
}
@keyframes lp-sink22 {
  0%, 22% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  26% { opacity: 1; }
  34% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  39% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  42% { opacity: 1; }
  45%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.4); }
}
@keyframes lp-sink27 {
  0%, 27% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  31% { opacity: 1; }
  39% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  44% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  47% { opacity: 1; }
  50%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.4); }
}
@keyframes lp-rest0 {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  4% { opacity: 1; }
  12% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)); animation-timing-function: ease-in-out; }
  17% { transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  23%, 84% { opacity: 1; transform: translate(0px, 0px) rotate(var(--rr, 0deg)); }
  90%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(var(--rr, 0deg)); }
}
@keyframes lp-rest10 {
  0%, 10% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  14% { opacity: 1; }
  22% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)); animation-timing-function: ease-in-out; }
  27% { transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  33%, 84% { opacity: 1; transform: translate(0px, 0px) rotate(var(--rr, 0deg)); }
  90%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(var(--rr, 0deg)); }
}
@keyframes lp-rest20 {
  0%, 20% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  24% { opacity: 1; }
  32% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)); animation-timing-function: ease-in-out; }
  37% { transform: translate(var(--hx), calc(var(--hy) - 0.5cqw)) rotate(var(--hr, 0deg)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  43%, 84% { opacity: 1; transform: translate(0px, 0px) rotate(var(--rr, 0deg)); }
  90%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(var(--rr, 0deg)); }
}
@keyframes lp-row1 { 0%, 20% { opacity: 0; transform: translateY(-1.5cqw); } 24%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes lp-row2 { 0%, 31% { opacity: 0; transform: translateY(-1.5cqw); } 35%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes lp-row3 { 0%, 42% { opacity: 0; transform: translateY(-1.5cqw); } 46%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes lp-bnd1 { 0%, 20% { opacity: 0; transform: scaleY(0); } 25%, 84% { opacity: 1; transform: scaleY(1); } 90%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes lp-bnd2 { 0%, 29% { opacity: 0; transform: scaleY(0); } 34%, 84% { opacity: 1; transform: scaleY(1); } 90%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes lp-bnd3 { 0%, 38% { opacity: 0; transform: scaleY(0); } 43%, 84% { opacity: 1; transform: scaleY(1); } 90%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes lp-bnd4 { 0%, 47% { opacity: 0; transform: scaleY(0); } 52%, 84% { opacity: 1; transform: scaleY(1); } 90%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes lp-seg1 { 0%, 21% { opacity: 1; transform: scaleX(0); } 25%, 84% { opacity: 1; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes lp-seg2 { 0%, 31% { opacity: 1; transform: scaleX(0); } 35%, 84% { opacity: 1; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes lp-seg3 { 0%, 41% { opacity: 1; transform: scaleX(0); } 45%, 84% { opacity: 1; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes lp-seg4 { 0%, 48% { opacity: 1; transform: scaleX(0); } 52%, 84% { opacity: 1; transform: scaleX(1); } 90%, 100% { opacity: 0; transform: scaleX(1); } }


@media (prefers-reduced-motion: no-preference) {
  .lp-sch .lp-doc { animation: lp-fly 6.5s linear infinite both; }
  .lp-sch__v { animation: lp-v 6.5s linear infinite both; }
  .lp-sch .lp-s2, .lp-sch__v:nth-of-type(2) { animation-delay: 450ms; }
  .lp-sch .lp-s3, .lp-sch__v:nth-of-type(3) { animation-delay: 900ms; }

  .lp-inbox .lp-p1 { animation: lp-sink0 9s linear infinite; }
  .lp-inbox .lp-p2 { animation: lp-sink11 9s linear infinite; }
  .lp-inbox .lp-p3 { animation: lp-sink22 9s linear infinite; }
  .lp-inbox__row--1 .lp-inbox__in { animation: lp-row1 9s ease-out infinite; }
  .lp-inbox__row--2 .lp-inbox__in { animation: lp-row2 9s ease-out infinite; }
  .lp-inbox__row--3 .lp-inbox__in { animation: lp-row3 9s ease-out infinite; }
  .lp-inbox__row--1, .lp-inbox__row--2 { animation: lp-down 9s linear infinite; }
  .lp-inbox__row--3 { animation: lp-up 9s linear infinite; }
  .lp-inbox__flag { animation: lp-urgent 9s ease-out infinite; }

  .lp-case .lp-c1 { animation: lp-rest0 9s linear infinite; }
  .lp-case .lp-c2 { animation: lp-rest10 9s linear infinite; }
  .lp-case .lp-c3 { animation: lp-rest20 9s linear infinite; }
  .lp-case__gap { animation: lp-gap 9s ease-out infinite; }
  .lp-case__gap::after { animation: lp-badge 9s ease-out infinite; }
  .lp-case__bar i:nth-child(1)::after { animation: lp-seg1 9s ease-out infinite; }
  .lp-case__bar i:nth-child(2)::after { animation: lp-seg2 9s ease-out infinite; }
  .lp-case__bar i:nth-child(3)::after { animation: lp-seg3 9s ease-out infinite; }
  .lp-case__bar i:nth-child(n+4)::after { animation: lp-seg4 9s ease-out infinite; }

  .lp-shelf .lp-k1 { animation: lp-sink0 9.5s linear infinite; }
  .lp-shelf .lp-k2 { animation: lp-sink9 9.5s linear infinite; }
  .lp-shelf .lp-k3 { animation: lp-sink18 9.5s linear infinite; }
  .lp-shelf .lp-k4 { animation: lp-sink27 9.5s linear infinite; }
  .lp-bnd--n1 { animation: lp-bnd1 9.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .lp-bnd--n2 { animation: lp-bnd2 9.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .lp-bnd--n3 { animation: lp-bnd3 9.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .lp-bnd--n4 { animation: lp-bnd4 9.5s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
}
.lp-bnd--1 { --bx: 17.5cqw; } .lp-bnd--2 { --bx: 26.1cqw; } .lp-bnd--3 { --bx: 34.7cqw; } .lp-bnd--4 { --bx: 43.3cqw; }
.lp-bnd--5 { --bx: 56.3cqw; } .lp-bnd--6 { --bx: 64.9cqw; } .lp-bnd--7 { --bx: 73.5cqw; } .lp-bnd--8 { --bx: 82.1cqw; }