/* Orion's landing page: only what differs from the shared agent page styles in agent-zoe.css. */
/* Chrome paints the video above the multiply blend, so its own backdrop shows as a box. Orion's backdrop
   sits around #efeff1; a slight lift turns it pure white. He fills 93% of the frame's height, so no zoom. */
.orion-page .zoe-hero { background: #fff; }
.orion-page .zoe-media video { filter: brightness(1.075); }
.orion-page .zoe-hero-copy { position: relative; z-index: 3; }
.orion-page .zoe-hero h1 { font-size: clamp(40px, 3.9vw, 56px); }

/* Hero: a project manager's desk drifting around the video: a finished task, a deadline, a board, a dependency, a decision. */
.orion-ornaments { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.orion-ornaments .zoe-social-ornament { display: flex; align-items: center; gap: 7px; border: 1px solid #ece6f8; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 30px rgba(55, 39, 116, .13); color: #251d43; font-size: 12px; font-weight: 650; white-space: nowrap; }
.orion-orn-task { top: 12%; left: 0; gap: 9px !important; padding: 9px 10px 9px 9px; }
.orion-orn-check { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.orion-orn-task > span { display: grid; gap: 1px; }
.orion-orn-task strong { font-size: 12px; }
.orion-orn-task small { color: #6b6880; font-size: 10px; font-weight: 600; }
.orion-orn-task img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.orion-orn-deadline { top: 52%; left: 0; padding: 8px 13px 8px 8px; border-radius: 99px !important; }
.orion-orn-deadline i { width: 20px; height: 20px; border-radius: 50%; background: #6d4aff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E") center / 12px no-repeat; }
.orion-orn-kanban { bottom: 12%; left: 2%; display: grid !important; grid-template-columns: repeat(3, 56px); align-items: start !important; gap: 6px !important; padding: 10px; }
.orion-orn-kanban > span { display: grid; gap: 4px; }
.orion-orn-kanban small { overflow: hidden; color: #6b6880; font-size: 7.5px; font-weight: 700; text-overflow: ellipsis; }
.orion-orn-kanban b { height: 11px; border-radius: 3px; background: #ece8f6; }
.orion-orn-kanban b.is-progress { background: #c9bcf7; }
.orion-orn-kanban b.is-done { background: #b7ebc9; }
.orion-orn-dependency { top: 28%; right: -3%; flex-direction: column; align-items: flex-start !important; gap: 5px !important; width: 168px; padding: 10px 12px 11px; white-space: normal !important; }
.orion-orn-dependency small { color: #6b6880; font-size: 9.5px; }
.orion-orn-chain { display: flex; align-items: center; gap: 5px; }
.orion-orn-chain img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.orion-orn-chain i { width: 36px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4aff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / 14px no-repeat, linear-gradient(#c9bcf7, #c9bcf7) center / 100% 2px no-repeat; }
.orion-orn-dependency strong { font-size: 11.5px; line-height: 1.25; }
.orion-orn-decision { right: 2%; bottom: 7%; padding: 8px 13px 8px 8px; border-color: #fde3a7 !important; border-radius: 99px !important; background: #fffaf0 !important; color: #92400e !important; }
.orion-orn-decision i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #f59e0b; }
.orion-orn-decision i::before { color: #fff; content: "!"; font-size: 12px; font-style: normal; font-weight: 800; }
.orion-orn-ontime { top: 5%; right: 9%; padding: 8px 12px 8px 8px; border-radius: 99px !important; }
.orion-orn-ontime i { width: 18px; height: 18px; border-radius: 50%; background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* The same wandering orbits as Zoe's social icons: every piece drifts its own path, tilts, and pops in and out. */
.orion-ornaments .orion-orn-task { animation: orion-orbit-task 10.5s ease-in-out infinite -1.2s; }
.orion-ornaments .orion-orn-ontime { animation: orion-orbit-ontime 9s ease-in-out infinite -2.4s; }
.orion-ornaments .orion-orn-deadline { animation: orion-orbit-deadline 9.5s ease-in-out infinite -6.1s; }
.orion-ornaments .orion-orn-kanban { animation: orion-orbit-kanban 11s ease-in-out infinite -4.8s; }
.orion-ornaments .orion-orn-dependency { animation: orion-orbit-dependency 10s ease-in-out infinite -8.2s; }
.orion-ornaments .orion-orn-decision { animation: orion-orbit-decision 10.5s ease-in-out infinite -3.4s; }
@keyframes orion-orbit-task {
    0%, 9% { opacity: 0; transform: translate(-12px, 22px) rotate(-7deg) scale(.65); }
    17% { opacity: 1; transform: translate(6px, -8px) rotate(4deg) scale(1.08); }
    48% { opacity: 1; transform: translate(-10px, -15px) rotate(-3deg) scale(1); }
    76% { opacity: 1; transform: translate(7px, 5px) rotate(5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(-14px, 20px) rotate(-5deg) scale(.78); }
}
@keyframes orion-orbit-ontime {
    0%, 9% { opacity: 0; transform: translate(14px, 18px) rotate(8deg) scale(.65); }
    17% { opacity: 1; transform: translate(-5px, -7px) rotate(-5deg) scale(1.1); }
    48% { opacity: 1; transform: translate(12px, -12px) rotate(4deg) scale(1); }
    76% { opacity: 1; transform: translate(-7px, 6px) rotate(-4deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(15px, 20px) rotate(6deg) scale(.78); }
}
@keyframes orion-orbit-deadline {
    0%, 9% { opacity: 0; transform: translate(-14px, 24px) rotate(9deg) scale(.65); }
    17% { opacity: 1; transform: translate(6px, -9px) rotate(-6deg) scale(1.1); }
    48% { opacity: 1; transform: translate(-12px, -16px) rotate(5deg) scale(1); }
    76% { opacity: 1; transform: translate(8px, 6px) rotate(-5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(-15px, 22px) rotate(7deg) scale(.78); }
}
@keyframes orion-orbit-kanban {
    0%, 9% { opacity: 0; transform: translate(-10px, 26px) rotate(-6deg) scale(.65); }
    17% { opacity: 1; transform: translate(5px, -8px) rotate(4deg) scale(1.07); }
    48% { opacity: 1; transform: translate(-12px, -17px) rotate(-3deg) scale(1); }
    76% { opacity: 1; transform: translate(6px, 5px) rotate(5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(-12px, 22px) rotate(-5deg) scale(.78); }
}
@keyframes orion-orbit-dependency {
    0%, 9% { opacity: 0; transform: translate(12px, 26px) rotate(7deg) scale(.65); }
    17% { opacity: 1; transform: translate(-6px, -8px) rotate(-4deg) scale(1.07); }
    48% { opacity: 1; transform: translate(12px, -18px) rotate(3deg) scale(1); }
    76% { opacity: 1; transform: translate(-6px, 5px) rotate(-5deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(14px, 24px) rotate(6deg) scale(.78); }
}
@keyframes orion-orbit-decision {
    0%, 9% { opacity: 0; transform: translate(13px, 24px) rotate(-8deg) scale(.65); }
    17% { opacity: 1; transform: translate(-6px, -9px) rotate(5deg) scale(1.08); }
    48% { opacity: 1; transform: translate(10px, -16px) rotate(-4deg) scale(1); }
    76% { opacity: 1; transform: translate(-7px, 6px) rotate(4deg) scale(.97); }
    88%, 100% { opacity: 0; transform: translate(14px, 22px) rotate(-6deg) scale(.78); }
}
.zoe-media-wrap:hover .orion-ornaments .zoe-social-ornament { animation-play-state: paused; }

/* "Minden feladatnál tisztázom": owner, needs, due. */
.orion-reasons li.is-owner::before { background: #e7dfff; color: var(--p); content: "@"; font-weight: 800; }
.orion-reasons li.is-needs::before { background: #fff1d6; color: #a16207; content: "?"; font-weight: 800; }
.orion-reasons li.is-due::before { background: #dcfce7; color: #15803d; content: "✓"; }

/* Feladatbontás: one sentence becomes owned, dated tasks. */
.orion-art-breakdown { padding: 22px 20px; }
.orion-breakdown { display: grid; width: 100%; max-width: 390px; justify-items: center; gap: 6px; }
.orion-idea { display: flex; align-items: center; gap: 8px; margin: 0; }
.orion-idea img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.orion-idea span { padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 10px 24px rgba(52, 34, 120, .1); color: var(--i); font-size: 13px; font-weight: 650; }
.orion-down { color: var(--p); font-size: 18px; font-weight: 800; line-height: 1; }
.orion-assignments { display: grid; width: 100%; gap: 6px; margin: 0; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(52, 34, 120, .1); color: #9b96ad; list-style: none; }
.orion-assignments li { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: #f8f6ff; font-size: 12px; }
.orion-box { width: 14px; height: 14px; flex: 0 0 14px; border: 2px solid #c9bcf7; border-radius: 4px; }
.orion-assign-task { color: var(--i); font-weight: 700; }
.orion-assign-owner { display: inline-flex; align-items: center; gap: 4px; color: #4b2fd1; font-weight: 650; }
.orion-assign-owner img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.orion-assign-owner b { padding: 1px 7px; border-radius: 99px; background: var(--i); color: #fff; font-size: 10px; }
.orion-assignments em { margin-left: auto; color: var(--m); font-size: 10.5px; font-style: normal; }
.orion-assignments li.is-you { background: #fffaf0; }

/* Összehangolás: the hand-off chain and Orion's note on who waits for what. */
.orion-art-handoffs { flex-direction: column; gap: 14px; padding: 24px 20px; }
.orion-pipeline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.orion-pipeline li { position: relative; padding: 9px 12px; border-radius: 12px; box-shadow: 0 8px 18px rgba(52, 34, 120, .08); font-size: 12px; font-weight: 700; white-space: nowrap; }
.orion-pipeline li + li { margin-left: 24px; }
.orion-pipeline li + li::before { position: absolute; top: 50%; left: -19px; color: var(--p); content: "→"; font-size: 13px; translate: 0 -50%; }
.orion-pipeline .is-done { background: #e7f8ee; color: #15803d; }
.orion-pipeline .is-progress { background: #eaf2ff; color: #1d4ed8; }
.orion-pipeline .is-waiting { background: #fff4d6; color: #a16207; }
.orion-note { display: flex; max-width: 400px; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(52, 34, 120, .1); }
.orion-note img { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; object-fit: cover; }
.orion-note p { margin: 0; color: var(--i); font-size: 12.5px; line-height: 1.4; }
.orion-note small { display: block; margin-bottom: 2px; color: #4b2fd1; font-size: 10.5px; font-weight: 700; }

/* Csúszás: the delay on a mini timeline, then blocker, impact and proposal. */
.orion-art-slip { padding: 22px 20px; }
.orion-risk { display: grid; width: 100%; max-width: 400px; gap: 8px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(52, 34, 120, .1); }
.orion-gantt { display: grid; gap: 7px; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid #f0ecfa; }
.orion-gantt-row { position: relative; display: block; height: 16px; }
.orion-gantt-row small { position: absolute; top: 1px; left: 0; color: var(--m); font-size: 10px; font-weight: 700; }
.orion-gantt-row i { position: absolute; top: 3px; height: 10px; border-radius: 5px; }
.orion-gantt-row i.is-done { left: 60px; width: calc((100% - 60px) * .34); background: #22a06b; }
.orion-gantt-row i.is-ghost { left: calc(60px + (100% - 60px) * .36); width: calc((100% - 60px) * .28); border: 1.5px dashed #d6cdee; }
.orion-gantt-row i.is-moved { left: calc(60px + (100% - 60px) * .52); width: calc((100% - 60px) * .28); background: #f59e0b; }
.orion-gantt-row i.is-launch { top: 3px; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); }
.orion-gantt-row i.is-ghost.is-launch { left: calc(60px + (100% - 60px) * .68); }
.orion-gantt-row i.is-moved.is-launch { left: calc(60px + (100% - 60px) * .86); background: #e5484d; }
.orion-gantt-row b { position: absolute; top: 0; left: calc(60px + (100% - 60px) * .83); color: #b45309; font-size: 9.5px; }
.orion-risk p { position: relative; margin: 0; padding-left: 14px; color: var(--i); font-size: 12.5px; line-height: 1.35; }
.orion-risk p::before { position: absolute; top: 5px; left: 0; width: 7px; height: 7px; border-radius: 50%; content: ""; }
.orion-risk .is-blocker b { color: #be123c; }
.orion-risk .is-blocker::before { background: #e5484d; }
.orion-risk .is-impact b { color: #b45309; }
.orion-risk .is-impact::before { background: #f59e0b; }
.orion-risk .is-proposal b { color: #15803d; }
.orion-risk .is-proposal::before { background: #22a06b; }

/* Döntések: a short digest that ends in the one decision the visitor owes. */
.orion-art-digest { padding: 22px 20px; }
.orion-digest { display: grid; width: 100%; max-width: 380px; gap: 7px; padding: 14px 16px 16px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px rgba(52, 34, 120, .1); }
.orion-digest-head { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; padding-bottom: 10px; border-bottom: 1px solid #f0ecfa; }
.orion-digest-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.orion-digest-head span { display: grid; }
.orion-digest-head strong { font-size: 13px; }
.orion-digest-head small { color: var(--m); font-size: 10.5px; }
.orion-digest > p:not(.orion-digest-head) { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 7px 10px; border-radius: 10px; color: var(--i); font-size: 12.5px; }
.orion-digest > p::before { display: inline-grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; align-self: center; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; }
.orion-digest .is-done { background: #effaf3; }
.orion-digest .is-done b { color: #15803d; }
.orion-digest .is-done::before { background: #22a06b; content: "✓"; }
.orion-digest .is-progress { background: #eef4ff; }
.orion-digest .is-progress b { color: #1d4ed8; }
.orion-digest .is-progress::before { background: #3b82f6; content: "…"; }
.orion-digest .is-yours { background: #fff7e6; }
.orion-digest .is-yours b { color: #b45309; }
.orion-digest .is-yours::before { background: #f59e0b; content: "!"; }
.orion-digest-actions { display: flex; gap: 8px; margin-top: 4px; }
.orion-digest-actions em, .orion-digest-actions i { padding: 7px 13px; border-radius: 99px; font-size: 11.5px; font-style: normal; font-weight: 700; }
.orion-digest-actions em { background: var(--p); color: #fff; }
.orion-digest-actions i { border: 1px solid #e4ddfa; color: var(--m); }

/* Interactive sample: pick a stuck situation; the task board shows who waits for what, and the brief says what unblocks it. */
.orion-studio { overflow-x: clip; background: #fff; }
.orion-studio-head { max-width: 860px; margin-bottom: 48px; }
.orion-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: #4b2fd1; font-size: 13px; font-weight: 650; }
.orion-kicker::before { width: 8px; height: 8px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 4px #ebe5ff; content: ""; }
.orion-studio .orion-studio-head h2 { font-size: clamp(36px, 5vw, 66px); letter-spacing: -.055em; line-height: 1.03; text-wrap: balance; }
.orion-studio-lead { max-width: 640px; margin: 20px 0 0; color: var(--m); font-size: 17px; }
.orion-studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: start; }
.orion-studio-board { min-width: 0; padding: 28px 32px 24px; border-radius: 32px; background: #f5f2ff; }
.orion-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.orion-picker > span { width: 74px; color: var(--m); font-size: 13px; font-weight: 600; }
.orion-picker [role=group] { display: flex; flex-wrap: wrap; gap: 8px; }
.orion-chip { min-height: 44px; padding: 0 18px; border: 1px solid #e4ddfa; border-radius: 99px; background: #fff; color: #3c3654; font: 600 14px/1 "Inter Variable", sans-serif; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.orion-chip:hover { border-color: #c9bcf7; }
.orion-chip[aria-pressed=true] { border-color: var(--i); background: var(--i); color: #fff; }
.orion-project { margin: 18px 0 0; color: var(--m); font-size: 13px; }
.orion-plan { margin-top: 16px; }
.orion-plan [data-task-field], .orion-plan .orion-task-owner, .orion-plan [data-note] { transition: opacity .17s ease; }
.orion-plan.is-swapping [data-task-field], .orion-plan.is-swapping .orion-task-owner, .orion-plan.is-swapping [data-note] { opacity: 0; }
.orion-board { display: grid; margin: 0; padding: 4px 0; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(52, 34, 120, .1); list-style: none; }
.orion-task { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #f0ecfa; transition: background-color .3s; }
.orion-task:last-child { border-bottom: 0; }
.orion-task:not(:last-child)::before { position: absolute; z-index: 0; top: calc(50% + 12px); left: 29px; width: 2px; height: calc(100% - 24px); background: #e4ddfa; content: ""; }
.orion-task.is-blocker { background: linear-gradient(90deg, #fff7e8, #fff 70%); box-shadow: inset 4px 0 0 #f59e0b; }
.orion-task-mark { position: relative; z-index: 1; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #d6cdee; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.orion-task[data-status=done] .orion-task-mark { background: #22a06b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.orion-task[data-status=progress] .orion-task-mark { background: conic-gradient(#3b82f6 0 50%, #fff 50% 100%); box-shadow: inset 0 0 0 2px #3b82f6; }
.orion-task[data-status=blocked] .orion-task-mark, .orion-task[data-status=yours] .orion-task-mark { box-shadow: none; }
.orion-task[data-status=blocked] .orion-task-mark { background: #e5484d; }
.orion-task[data-status=yours] .orion-task-mark { background: #f59e0b; }
.orion-task[data-status=blocked] .orion-task-mark::before, .orion-task[data-status=yours] .orion-task-mark::before { content: "!"; }
.orion-task[data-status=unowned] .orion-task-mark { box-shadow: inset 0 0 0 2px #e5484d; color: #e5484d; }
.orion-task[data-status=unowned] .orion-task-mark::before { content: "?"; }
.orion-task-main { display: grid; min-width: 0; gap: 2px; }
.orion-task-main strong { font-size: 14.5px; letter-spacing: -.01em; }
.orion-task-main small { color: var(--m); font-size: 12px; }
.orion-task-owner { display: flex; align-items: center; gap: 7px; color: var(--i); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.orion-task-owner img, .orion-task-owner b { width: 26px; height: 26px; border-radius: 50%; }
.orion-task-owner img { object-fit: cover; }
.orion-task-owner b { display: grid; place-items: center; background: var(--i); color: #fff; font-size: 9.5px; }
.orion-task-owner b[hidden], .orion-task-owner img[hidden] { display: none; }
.orion-task-owner[data-owner=nobody] b { border: 1.5px dashed #e5484d; background: #fff; color: #e5484d; font-size: 12px; }
.orion-task-owner[data-owner=nobody] { color: #be123c; }
.orion-task-status { padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.orion-task[data-status=done] .orion-task-status { background: #e7f8ee; color: #15803d; }
.orion-task[data-status=progress] .orion-task-status { background: #eaf2ff; color: #1d4ed8; }
.orion-task[data-status=blocked] .orion-task-status, .orion-task[data-status=unowned] .orion-task-status { background: #ffe4e6; color: #be123c; }
.orion-task[data-status=yours] .orion-task-status { background: #fff4d6; color: #b45309; }
.orion-task[data-status=waiting] .orion-task-status { background: #f1eef8; color: #6b6880; }
.orion-brief { margin-top: 16px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(52, 34, 120, .1); }
.orion-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; }
.orion-notes dt { margin-bottom: 4px; color: #4b2fd1; font-size: 12px; font-weight: 700; }
.orion-notes dd { margin: 0; color: var(--i); font-size: 14px; line-height: 1.45; }
.orion-studio-actions { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e4ddfa; }
.orion-studio-actions p { max-width: 520px; margin: 0; color: var(--m); font-size: 13px; }
.orion-studio-orion { margin-left: -44px; }
/* The closing headline is longer than Zoe's; balance it so no single word is left on the last line. */
.orion-page .zoe-closing h2 { text-wrap: balance; }
/* Orion's grey backdrop would multiply into a box; lift it to white. On desktop he is scaled up and trimmed at the sides. */
.orion-studio-orion .zoe-lab-figure img { filter: brightness(1.075); }
@media (min-width: 901px) {
    .orion-studio-orion .zoe-lab-figure { overflow: hidden; }
    .orion-studio-orion .zoe-lab-figure img { width: 130%; max-width: none; margin-left: -15%; }
}

@media (max-width: 1080px) {
    .orion-studio-layout { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (max-width: 900px) {
    .orion-studio-head { margin-bottom: 36px; }
    .orion-studio-layout { grid-template-columns: minmax(0, 1fr); }
    .orion-studio-orion .zoe-lab-figure img { margin-left: -66px; }
}
@media (max-width: 760px) {
    .orion-task { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px 12px; padding: 13px 16px; }
    .orion-task-mark { grid-row: 1 / 3; align-self: start; margin-top: 2px; }
    .orion-task-owner { grid-column: 2; grid-row: 2; }
    .orion-task-status { grid-column: 3; grid-row: 1; align-self: start; }
    .orion-task:not(:last-child)::before { top: 36px; left: 25px; height: calc(100% - 24px); }
    .orion-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
    .orion-studio-board { margin: 0 -6px; padding: 20px 16px 18px; border-radius: 24px; }
    .orion-picker > span { width: 100%; }
    .orion-chip { padding: 0 14px; font-size: 13px; }
    .orion-art-breakdown, .orion-art-handoffs, .orion-art-slip, .orion-art-digest { padding: 18px 14px; }
    .orion-pipeline { flex-direction: column; gap: 22px; }
    .orion-pipeline li + li { margin-left: 0; }
    .orion-pipeline li + li::before { top: -19px; left: 50%; content: "↓"; translate: -50% 0; }
}
@media (max-width: 560px) {
    .orion-ornaments .zoe-social-ornament { font-size: 10.5px; }
    /* On a phone his head sits where the task card would be; move it to shoulder height and drop the avatar. */
    .orion-orn-task { top: 23%; }
    .orion-orn-task img { display: none; }
    .orion-orn-kanban { grid-template-columns: repeat(3, 46px); }
    .orion-orn-kanban small { font-size: 6.5px; }
    .orion-orn-dependency { right: 0; width: 134px; }
    .orion-orn-decision { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .orion-ornaments .zoe-social-ornament { opacity: 1; animation: none !important; transform: none; }
    .orion-studio *, .orion-plan [data-task-field], .orion-plan [data-note] { transition: none !important; }
}