/* "Your business, on Ulmero" on the homepage (org-flow.js; Sam chose option 2 of 5, October 25). */
/* Shared picker: kind pills, then three example names */
.oo-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.oo-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.oo-pill svg { width: 18px; height: 18px; }
.oo-pill:hover { color: var(--ink); border-color: var(--muted); }
.oo-pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.oo-ex { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 18px 0 32px; }
.oo-ex button { padding: 4px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 16px; color: var(--faint); cursor: pointer; }
.oo-ex button:hover { color: var(--ink); }
.oo-ex button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--turquoise); }
.oo-pill:focus-visible, .oo-ex button:focus-visible, .oo-pill:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }

.o2-scatter > span { display: inline-flex; align-items: center; gap: 7px; }
.o2-scatter svg { width: 17px; height: 17px; fill: currentColor; }
.o2-scatter img { width: 17px; height: 17px; border-radius: 3px; }
.o2-scatter span > b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; background: var(--raised); font-size: 11px !important; }
/* 2. Today, then on Ulmero */
.o2-stage { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; }
.o2-side { padding: 28px; border-radius: 18px; border: 1px solid var(--line); }
.o2-today { border-style: dashed; }
.o2-after { border-color: var(--turquoise); background: var(--panel); }
.o2-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--ink); }
.o2-h img { width: 26px; height: 26px; }
.o2-sub { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.o2-scatter { display: flex; flex-wrap: wrap; gap: 12px; }
.o2-scatter > span { padding: 9px 13px; border-radius: 10px; background: var(--raised); font-size: 15px; color: var(--muted); transform: rotate(calc((var(--k) - 3.5) * 1.6deg)) translateY(calc(var(--k) * 1px - 3px)); animation: oo-in 0.4s var(--ease) both; animation-delay: calc(var(--k) * 50ms); }
.o2-arrow { display: grid; place-items: center; color: var(--turquoise); }
.o2-arrow svg { width: 30px; height: 30px; }
.o2-depts { display: flex; flex-wrap: wrap; gap: 8px; }
.o2-depts span { padding: 8px 13px; border-radius: 999px; background: var(--accent-soft); font-size: 15px; color: var(--ink); animation: oo-in 0.4s var(--ease) both; animation-delay: calc(300ms + var(--k) * 50ms); }
.o2-depts .o2-more { background: none; color: var(--muted); }
.o2-run { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.o2-run svg { width: 17px; height: 17px; color: var(--turquoise); }

@keyframes oo-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes oo-fade { from { opacity: 0; } }
.o2-scatter > span { animation-name: oo-fade; }
/* The first example waits to arrive until the picture is on screen (org-flow.js removes .of-wait) */
.of-wait .o2-stage * { animation-play-state: paused; }
@media (max-width: 900px) { .o2-stage { grid-template-columns: 1fr; gap: 0; } .o2-arrow { padding: 14px 0; transform: rotate(90deg); } }
/* The video, faded at the upper right, a little stronger than before */
.ix-video.of-video { transform: translateY(96px); }
/* Only a hint of the video (Sam, October 25) */
.ix-video.of-video video.on { opacity: 0.32; }
@media (prefers-reduced-motion: reduce) { #org-flow *, #org-flow *::before { animation: none !important; transition: none !important; } }
/* Audience pages: one kind of organization, so the examples sit in one row of buttons with icons */
.oo-ex.oo-ex-only { margin-top: 4px; gap: 8px 10px; }
.oo-ex.oo-ex-only button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15.5px; color: var(--muted); }
.oo-ex.oo-ex-only button svg { width: 17px; height: 17px; }
.oo-ex.oo-ex-only button:hover { color: var(--ink); border-color: var(--muted); }
.oo-ex.oo-ex-only button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.infra-stack.of-host { max-width: none; margin: 0; }
/* Less space above the section (Sam, October 25): the heading starts at the top instead of being centered on the video */
section.of-sec { padding-top: 56px; }
.of-sec.has-ix-video .section-head { grid-template-rows: auto auto auto 1fr; padding-top: 0; }
.of-sec.has-ix-video .section-head > .kicker { grid-row: 1; }
.of-sec.has-ix-video .section-head > h2 { grid-row: 2; }
.of-sec.has-ix-video .section-head > .lead { grid-row: 3; }
.of-sec .ix-video { grid-row: 1 / 5; }
/* The video floats at the right so it no longer stretches the heading area, and the section above ends closer */
.of-sec.has-ix-video .section-head { position: relative; display: block; max-width: none; margin-bottom: 40px; }
.of-sec.has-ix-video .section-head > :not(.ix-video) { max-width: 50%; }
.of-sec .ix-video.of-video { position: absolute; z-index: 0; right: 0; top: 0; width: 46%; transform: translateY(40px); }
.of-sec .section-head > :not(.ix-video), #org-flow, .of-host { position: relative; z-index: 1; }
section:has(+ section.of-sec) { padding-bottom: 56px; }
@media (max-width: 900px) { .of-sec.has-ix-video .section-head > :not(.ix-video) { max-width: none; } }
/* Audience pages have no paragraph under the heading, so the video sits higher and a little smaller there, clear of the buttons (Sam, October 25) */
.of-sec:has([data-stack]) .ix-video.of-video { width: 38%; transform: translateY(-56px); }
/* Phones (Sam, October 25): shorter labels and one compact row for each set of buttons, so they take less height.
   The full names stay for screen readers. */
.of-short { display: none; }
@media (max-width: 640px) {
  .of-host .of-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .of-host .of-short { display: inline; }
  .of-host .oo-pills { flex-wrap: nowrap; gap: 6px; }
  .of-host .oo-pill { flex: 1 1 0; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 14px; }
  .of-host .oo-pill svg { width: 15px; height: 15px; }
  .of-host .oo-ex { flex-wrap: nowrap; gap: 6px; margin: 12px -16px 20px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .of-host .oo-ex::-webkit-scrollbar { display: none; }
  .of-host .oo-ex button { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; white-space: nowrap; }
  .of-host .oo-ex button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
  .of-host .oo-ex.oo-ex-only button { padding: 6px 12px; font-size: 14px; }
  .of-host .oo-ex.oo-ex-only button svg { width: 15px; height: 15px; }
}
@media (max-width: 640px) {
  .of-host .o2-side { padding: 18px; }
  .of-host .o2-h { font-size: 19px; }
  .of-host .o2-sub { margin-bottom: 14px; font-size: 15px; }
  .of-host .o2-scatter, .of-host .o2-depts { gap: 6px; }
  .of-host .o2-scatter > span { padding: 5px 9px; font-size: 14px; transform: none; }
  .of-host .o2-depts span { padding: 5px 10px; font-size: 14px; }
  .of-host .o2-arrow { padding: 8px 0; }
  .of-host .o2-run { margin-top: 14px; }
}
/* Phones (640px and below): tighter still, so the buttons a visitor taps and the "On Ulmero" result they change
   fit on one screen together (about 700px tall instead of more than 800px). */
@media (max-width: 640px) {
  .of-host .oo-ex { margin: 10px -16px 12px; }
  .of-host .o2-side { padding: 14px 14px 12px; border-radius: 14px; }
  .of-host .o2-h { margin-bottom: 4px; font-size: 18px; }
  .of-host .o2-h img { width: 22px; height: 22px; }
  .of-host .o2-sub { margin-bottom: 10px; font-size: 14.5px; line-height: 1.4; }
  .of-host .o2-scatter, .of-host .o2-depts { gap: 5px; }
  .of-host .o2-scatter > span { padding: 4px 8px; line-height: 1.35; }
  .of-host .o2-depts span { padding: 4px 9px; line-height: 1.35; }
  .of-host .o2-arrow { padding: 4px 0; }
  .of-host .o2-arrow svg { width: 22px; height: 22px; }
  .of-host .o2-run { margin-top: 10px; font-size: 14px; }
}