/* The welcome of a new account: the question on the left of the dark head, the picture of the answer on the right,
   the steps on the head's bottom edge, the parts of each step as lines of the page, and one bar at the bottom. */

.ob-welcome { display: flex; flex-direction: column; flex: 1; }
.ob-wl-step { display: flex; flex-direction: column; }
.ob-wl-step[hidden] { display: none; }

/* ---------- The head ---------- */
.ob-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 480px); gap: 22px 48px; align-items: center; }
.ob-head-grid .phead-meta { margin-top: 14px; }
/* Before anything is chosen the stage shows nothing but keeps its room, so the head does not change height on a pick. */
.ob-stage:not(:has(> .ob-scene:not([hidden]))) { visibility: hidden; }
.ob-stage { position: relative; display: grid; place-items: center; min-height: 236px; }
.ob-scene { width: 100%; }
.ob-scene[hidden] { display: none; }

.ob-hub {
  display: grid; place-items: center; flex: none; width: 62px; height: 62px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 9px var(--stage-fill);
}
.ob-hub img { width: 32px; height: 32px; }

/* The first look, copied from the earlier welcome: its own layer over the page, where the hub fills the screen and zooms
   in above the words, then the whole layer fades away. Without the script it hides itself after a few seconds. */
.wl-intro {
  position: fixed; inset: var(--banner-h, 0px) 0 0 0; z-index: 60; isolation: isolate; overflow: hidden; display: none;
  flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 24px clamp(36px, 9vh, 104px); text-align: center;
  background: var(--stage-bg); color: var(--stage-ink);
}
.wl-intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--stage-ink) 9%, transparent) 1px, transparent 1.4px); background-size: 24px 24px;
  mask-image: var(--stage-mask);
}
.wl-intro::after {
  content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; opacity: .8;
  background:
    radial-gradient(12% 26% at 24% 34%, color-mix(in srgb, var(--stage-glow-1) 70%, transparent), transparent 70%),
    radial-gradient(15% 32% at 38% 66%, color-mix(in srgb, var(--stage-glow-2) 80%, transparent), transparent 70%);
  animation: wl-drift 26s ease-in-out infinite alternate;
}
.wl-intro.is-leaving { display: flex; pointer-events: none; }
.wl-intro-canvas { position: absolute; inset: 0; pointer-events: none; }
.wl-dia { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; transform-origin: 50% 50%; }
.wl-orbit { position: absolute; inset: 0; }
.wl-ring {
  --r: 240px; --spin: 120s;
  position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1);
  border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--stage-ink) 16%, transparent); animation: wl-spin var(--spin) linear infinite;
}
.wl-ochip { position: absolute; left: 50%; top: 50%; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(-1 * var(--a))); }
.wl-ochip .brandmark { position: relative; left: -52px; top: -16px; width: 104px; height: 32px; animation: wl-spin var(--spin) linear infinite reverse; box-shadow: 0 12px 24px -14px var(--stage-shade); }
.wl-hub { position: absolute; left: 252px; top: 252px; width: 96px; height: 96px; z-index: 3; }
.wl-hub img { display: block; width: 100%; height: 100%; border-radius: 26px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--stage-ink) 20%, transparent), 0 24px 50px -18px var(--stage-glow-1); }
.wl-halo { position: absolute; left: 300px; top: 300px; width: 200px; height: 200px; margin: -100px; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--stage-flow) 34%, transparent), transparent 64%); animation: wl-breathe 4.5s ease-in-out infinite; }
.wl-intro-glow {
  position: absolute; left: 300px; top: 300px; width: 1100px; height: 1100px; margin: -550px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--stage-glow-1) 55%, transparent), color-mix(in srgb, var(--stage-glow-2) 22%, transparent) 38%, transparent 66%);
}
.wl-intro-text { position: relative; display: grid; gap: 16px; justify-items: center; max-width: 920px; }
.wl-intro-title { margin: 0; font-size: clamp(30px, 4.2vw, 62px); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; color: var(--stage-title); text-wrap: balance; }
.wl-intro-title span { display: inline-block; }
.wl-intro-count { margin: 0; font-size: clamp(16px, 1.5vw, 20px); color: var(--stage-muted); }
.wl-intro-count b { font-weight: 600; color: var(--stage-flow); font-variant-numeric: tabular-nums; }
.wl-intro-skip {
  position: absolute; right: 22px; bottom: 22px; padding: 9px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--stage-ink) 18%, transparent); background: color-mix(in srgb, var(--stage-ink) 6%, transparent);
  color: var(--stage-muted); font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s, border-color .2s;
}
.wl-intro-skip:hover { color: var(--stage-ink); border-color: color-mix(in srgb, var(--stage-ink) 42%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ob-welcome.is-intro .wl-intro { display: flex; animation: wl-intro-gone 0s 9s forwards; }
  html.js .ob-welcome.is-intro .wl-intro:not(.is-playing) :is(.wl-intro-text, .wl-intro-skip) { opacity: 0; }
  html.js .ob-welcome.is-intro .wl-intro:not(.is-playing) .wl-dia { opacity: 0; }
  html.js .ob-welcome.is-intro .wl-intro.is-playing { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-intro { display: none !important; }
}
@keyframes wl-drift { to { transform: translate3d(3%, -3%, 0) scale(1.06); } }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@keyframes wl-breathe { 50% { opacity: .55; transform: scale(.92); } }
@keyframes wl-intro-gone { to { visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  .ob-scene-under > * { animation: ob-pop .35s cubic-bezier(.34, 1.4, .5, 1) backwards; }
}

/* Two places joined through the hub: filled once picked, dashed while waiting. */
.ob-flow { display: grid; grid-template-columns: minmax(0, 1fr) 48px 62px 48px minmax(0, 1fr); align-items: center; width: 100%; }
.ob-flow .ob-hub { box-shadow: 0 0 0 7px var(--stage-fill); }
.ob-wire { height: 2px; background: var(--stage-flow); }
.ob-wire.off { background: repeating-linear-gradient(90deg, var(--stage-grid) 0 5px, transparent 5px 10px); }
.ob-node { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.ob-mark {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--paper); box-shadow: 0 0 0 5px var(--stage-fill); font-size: var(--fs-l);
}
.ob-mark img { width: 32px; height: 32px; }
.ob-node small { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--stage-muted); }
.ob-node.ok small { color: var(--stage-ok); }
.ob-empty {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  border: 1px dashed var(--stage-grid); color: var(--stage-muted); background: var(--stage-fill);
}
.ob-empty svg { width: 18px; height: 18px; }
.ob-ais { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 13px; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 5px var(--stage-fill); }
.ob-ais img { width: 24px; height: 24px; }
.ob-scene-under { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; min-height: 26px; }
.ob-spill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-full);
  background: var(--stage-fill); box-shadow: inset 0 0 0 1px var(--stage-grid); color: var(--stage-ink); font-size: var(--fs-xs); font-weight: 500;
}
.ob-spill svg { width: 13px; height: 13px; color: var(--ob-spill, var(--stage-flow)); }
.ob-spill.rt-contact { --ob-spill: var(--stage-rt-contact); }
.ob-spill.rt-opportunity { --ob-spill: var(--stage-rt-opportunity); }
.ob-spill.rt-deal { --ob-spill: var(--stage-rt-deal); }
.ob-spill.rt-estimate { --ob-spill: var(--stage-rt-estimate); }
.ob-spill.rt-job { --ob-spill: var(--stage-rt-job); }
.ob-spill.rt-appointment { --ob-spill: var(--stage-rt-appointment); }
.ob-spill.rt-invoice { --ob-spill: var(--stage-rt-invoice); }
.ob-spill.rt-ai { --ob-spill: var(--stage-ai); }
.ob-spill.quiet { color: var(--stage-muted); }
.ob-spill .ob-way { display: inline-grid; color: var(--stage-muted); }

/* ---------- The content ---------- */
.ob-flush-top.optstrip { margin-top: 0; border-top: 0; }
.ob-products, .ob-modes { --opts: 2; }
.ob-products .opt { padding-top: 22px; padding-bottom: 24px; }
.ob-products .opt b { font-size: var(--fs-l); }
.ob-products .opt-desc { font-size: var(--fs-s); }
.ob-opt-ic {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; margin-right: 3px; border-radius: 8px;
  background: color-mix(in srgb, var(--ob-tone, var(--brand-text)) 14%, transparent); color: var(--ob-tone, var(--brand-text));
}
.opt b .ob-opt-ic svg { width: 14px; height: 14px; border-radius: 0; }
.ob-opt-ic.ai { --ob-tone: var(--accent-teal); }
.ob-opt-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ob-opt-chips .chip svg { width: 12px; height: 12px; }

/* The two places of a pair, each a searchable picker. */
.ob-pairpick { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: end; gap: 12px; max-width: 900px; }
.ob-pickcol { display: grid; gap: 8px; min-width: 0; }
.ob-pickcol .syspick { max-width: none; }
.ob-pick-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }
.ob-pick-join { display: grid; place-items: center; height: 44px; color: var(--brand-text); }
.ob-pick-join svg { width: 18px; height: 18px; }
.ob-pickcol.ob-off { opacity: .5; pointer-events: none; }
.ob-locked { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--panel-2); }
.ob-locked .brandmark { width: 96px; height: 24px; padding: 0 8px; }
.ob-locked-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.ob-agentpick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ob-agentpick .syspick { flex: 1 1 320px; max-width: 440px; }

/* Not listed: the request form on the website, with the name that matched nothing filled in. */
.ob-request {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px var(--zr, var(--pad-x)) 14px var(--zl, var(--pad-x));
  border-bottom: 1px solid var(--line); font-size: var(--fs-s); color: var(--ink-3);
}
.ob-request-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px dashed var(--brand-line); border-radius: var(--r-m); color: var(--brand-text); }
.ob-request-ic svg { width: 16px; height: 16px; }
.ob-request b { color: var(--ink); }
.ob-request .btn { margin-left: auto; }

/* Rows you tick: the ideas. */
.ob-ticks { --rl-cols: 20px 34px minmax(0, 1fr) 150px; }
.ob-ticks .rl-row { min-height: 60px; }
.ob-ticks input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.ob-ticks .rl-name b { white-space: normal; }
.ob-ticks .rl-name small { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }
.ob-fixed-mark { display: grid; place-items: center; width: 20px; height: 20px; color: var(--ok); }
.ob-fixed-mark svg { width: 17px; height: 17px; }
.ob-ticks .rl-row > .pill { justify-self: end; }

/* ChatGPT and Claude, one row each, and the line to paste. */
.ob-assist { --rl-cols: 44px minmax(0, 1fr) 170px; }
.ob-assist .rl-row:hover { background: none; }
.ob-assist .rl-row:hover .rl-name b { color: var(--ink); }
.ob-assist .rl-name b { display: inline-flex; align-items: center; gap: 6px; }
.ob-assist .rl-row > .btn { justify-self: end; min-width: 150px; }
.ob-ai-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ob-ai-logo img { width: 24px; height: 24px; }
.ob-prompt-wrap { padding: 4px var(--zr, var(--pad-x)) 0 var(--zl, var(--pad-x)); }
.ob-prompt-wrap .prompt-box { margin-bottom: 18px; }
.ob-inline-link { padding: 0; border: 0; background: none; color: var(--brand-text); font: inherit; font-weight: 600; cursor: pointer; }
.ob-inline-link:hover { text-decoration: underline; }

@keyframes ob-pop { from { opacity: 0; transform: scale(.85); } }

/* ---------- Narrower pages ---------- */
@container page (max-width: 980px) {
  .ob-head-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-stage { min-height: 0; justify-items: start; }
  .ob-stage:not(:has(> .ob-scene:not([hidden]))) { display: none; }
  .ob-stage .ob-scene { max-width: 520px; }
}
@container page (max-width: 640px) {
  .ob-pairpick { grid-template-columns: minmax(0, 1fr); }
  .ob-pick-join { height: 24px; justify-content: start; padding-left: 14px; }
  .ob-pick-join svg { transform: rotate(90deg); }
  .ob-flow { grid-template-columns: minmax(0, 1fr) 22px 50px 22px minmax(0, 1fr); }
  .ob-flow .ob-hub { width: 50px; height: 50px; }
  .ob-mark, .ob-empty { width: 44px; height: 44px; border-radius: 12px; }
  .ob-ais { height: 44px; }
  .ob-request .btn { margin-left: 0; }
  .ob-ticks { --rl-cols: 20px minmax(0, 1fr); }
  .ob-ticks .rt-ic, .ob-ticks .pill { display: none; }
  .ob-assist { --rl-cols: 40px minmax(0, 1fr); }
  .ob-assist .rl-row > .btn { grid-column: 2; justify-self: start; min-width: 0; }
}