/* ---------- Solutions: hero with two live path cards ---------- */
.sol-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); grid-template-areas: "copy paths" "act paths"; gap: 0 clamp(28px, 5vw, 72px); align-items: center; }
/* CTA and founder chip follow the path cards in the markup, so phones show them after the visuals (as on home) */
.sol-hero-grid > div:first-child { grid-area: copy; align-self: end; }
.sol-hero-grid > .paths { grid-area: paths; }
.sol-act { grid-area: act; align-self: start; }
.sol-act .founder-chip { margin-top: 30px; }
.sol-hero h1 { font-size: clamp(36px, 4.2vw, 62px); max-width: 16ch; }
.paths { display: grid; gap: 16px; }
.path {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center;
  padding: 22px 24px; border-radius: 22px; text-decoration: none; color: #fff;
  background: #ffffff08; border: 1px solid #ffffff1a; transition: border-color .25s, background-color .25s, transform .25s var(--ease-out);
}
.path > :not(.path-viz) { grid-column: 1; }
.path-k { font-size: 13px; font-weight: 600; color: var(--mint); }
.path-t { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; }
.path-p { color: var(--muted-dark); font-size: 15px; }
.path-go { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--mint); display: inline-flex; align-items: center; gap: 6px; }
.path-go::after { content: "←"; transition: transform .25s var(--ease-out); }
[dir="ltr"] .path-go::after { content: "→"; }
.path-viz { grid-column: 2; grid-row: 1 / span 4; }
@media (hover: hover) and (pointer: fine) {
  .path:hover { border-color: #50e3c266; background: #ffffff0d; }
  .path:hover .path-go::after { transform: translateX(-4px); }
  [dir="ltr"] .path:hover .path-go::after { transform: translateX(4px); }
}

/* mini agent: the same "op" mark as the film, cycling through its statuses */
.mini-agent { display: flex; align-items: center; gap: 10px; background: var(--ink); border: 1.5px solid var(--mint); border-radius: 99px; padding: 9px 16px 9px 12px; box-shadow: 0 0 0 5px #50e3c214, 0 0 28px #50e3c233; }
.mini-agent .eyes { width: 30px; aspect-ratio: 29.72 / 19.27; background: url(img/brainops-logo.png) no-repeat 81.47% 98.3% / 336.5% auto; flex: none; }
.ma-t b { display: block; font-size: 12px; white-space: nowrap; }
.ma-roll { display: grid; height: 16px; overflow: hidden; font-size: 11px; color: #8ff0d6; }
.ma-roll i { font-style: normal; grid-area: 1 / 1; white-space: nowrap; opacity: 0; animation: roll 8s infinite; }
.ma-roll i:nth-child(1) { animation-delay: 0s; }
.ma-roll i:nth-child(2) { animation-delay: -6s; }
.ma-roll i:nth-child(3) { animation-delay: -4s; }
.ma-roll i:nth-child(4) { animation-delay: -2s; }
@keyframes roll { 0% { opacity: 0; transform: translateY(8px); } 4%, 21% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }

/* several agents, one working at a time: AI is not a single enquiry bot */
.agent-stack { display: grid; gap: 7px; width: 214px; }
.agent-stack .mini-agent { padding: 7px 14px 7px 10px; opacity: .45; border-color: var(--ink-line); box-shadow: none; animation: agent-on 7.5s infinite; }
.agent-stack .mini-agent:nth-child(2) { animation-delay: -5s; }
.agent-stack .mini-agent:nth-child(3) { animation-delay: -2.5s; }
.agent-stack .mini-agent .eyes { width: 24px; }
.agent-stack small { display: block; font-size: 11px; color: #8ff0d6; white-space: nowrap; }
@keyframes agent-on {
  0%, 30% { opacity: 1; border-color: var(--mint); box-shadow: 0 0 0 4px #50e3c214, 0 0 22px #50e3c22e; }
  36%, 100% { opacity: .45; border-color: var(--ink-line); box-shadow: none; }
}

/* mini board: statuses move forward on their own */
.mini-board { display: grid; gap: 6px; width: 190px; background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 14px 30px #0006; }
.mb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink); font-weight: 600; }
.mb-st { width: 66px; height: 18px; border-radius: 4px; position: relative; overflow: hidden; }
.mb-st::after { content: ""; position: absolute; inset: 0; animation: status 9s infinite steps(1); }
.s-b::after { animation-delay: -3s; }
.s-c::after { animation-delay: -6s; }
@keyframes status { 0% { background: #e2445c; } 33% { background: #fdab3d; } 66% { background: #00c875; } }

/* ---------- AI chapter ---------- */
.sub-h { font-size: clamp(20px, 1.8vw, 24px); margin: clamp(40px, 5vw, 64px) 0 20px; color: #fff; }
.light-sub { color: var(--ink); }
.depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dept { border: 1px solid var(--ink-line); border-radius: 18px; padding: 20px; background: #ffffff05; }
.dept-k { display: inline-block; font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.dept ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dept li { color: var(--muted-dark); font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.dept li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); transform: translateY(-2px); }

.handoffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.handoff { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 14px; align-items: center; border: 1px solid var(--ink-line); border-radius: 18px; padding: 18px; background: #ffffff05; }
.ho-ai, .ho-human { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ho-k { font-size: 12px; font-weight: 600; color: var(--mint); }
.ho-human .ho-k { color: #c9b8ff; }
.ho-ai b, .ho-human b { font-size: 16px; }
.ho-arrow { color: #c9b8ff; font-size: 22px; font-weight: 300; line-height: 1; }
.ho-arrow::after { content: "←"; }
[dir="ltr"] .ho-arrow::after { content: "→"; }
.ho-human { border-inline-start: 1px dashed #ffffff26; padding-inline-start: 14px; }

.art { margin-top: 8px; display: block; background: #fff; color: var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.45; }
.art-draft { border: 1.5px dashed var(--violet); }
.art-slots { display: flex; gap: 6px; background: none; padding: 0; }
.art-slots i { font-style: normal; font-weight: 700; background: #dffbf3; color: #13735d; border: 1.5px dashed var(--mint); border-radius: 8px; padding: 4px 10px; }
.art-list { display: grid; gap: 4px; }
.art-list i { font-style: normal; display: flex; gap: 6px; align-items: center; }
.art-list i::before { content: ""; width: 11px; height: 11px; border: 1.5px solid var(--violet); border-radius: 3px; flex: none; }
.art-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.art-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(#8d7bff, var(--violet)); }
/* artifacts that look like the tools they come from */
.art-mail { padding: 0; overflow: hidden; display: grid; }
.am-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: #f1f2f7; }
.am-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d0d3e0; }
.am-bar em { font-style: normal; margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: var(--violet); }
.am-f { padding: 4px 10px; border-bottom: 1px solid #eef0f6; color: var(--muted); }
.am-f b { color: var(--ink); font-weight: 600; font-size: inherit; } /* not the 16px of the card title (.ho-ai b) */
.am-body { padding: 8px 10px; }
.am-send { justify-self: end; margin: 0 10px 10px; background: var(--violet); color: #fff; font-weight: 700; font-size: 11px; border-radius: 99px; padding: 3px 12px; }
.art-cal { display: grid; gap: 6px; }
.ac-h { font-weight: 700; font-size: 11.5px; }
.ac-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ac-col { display: grid; grid-auto-rows: 16px; gap: 3px; }
.ac-col b { font-size: 10.5px; text-align: center; color: var(--muted); font-weight: 600; }
.ac-col i { border-radius: 4px; background: #f4f5f9; }
.ac-col i.busy { background: #e3e5ee; }
.ac-col i.pick { grid-row: span 2; font-style: normal; font-weight: 700; font-size: 11px; display: grid; place-items: center; background: #dffbf3; color: #13735d; border: 1.5px dashed var(--mint); }
.art-doc { display: grid; gap: 3px; padding: 10px 12px; border-top: 4px solid var(--violet); }
.ad-t { font-weight: 700; font-size: 12.5px; }
.ad-m { color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.ad-h { font-weight: 700; font-size: 11px; color: var(--violet); margin-top: 4px; }
.ad-task { display: flex; align-items: center; gap: 6px; }
.ad-task i { width: 11px; height: 11px; border: 1.5px solid var(--violet); border-radius: 3px; flex: none; }
.ad-task em { font-style: normal; margin-inline-start: auto; font-size: 10.5px; font-weight: 600; background: var(--violet-soft); color: #4f329e; border-radius: 99px; padding: 0 7px; }
.art-dash { display: grid; gap: 8px; }
.dh-h { display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; }
.dh-h em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 11px; }
.dh-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dh-kpis span { display: grid; background: #f4f5f9; border-radius: 8px; padding: 5px 7px; font-size: 10.5px; color: var(--muted); }
.dh-kpis b { font-size: 17px; line-height: 1.2; color: var(--ink); }
.dh-chart { display: flex; align-items: flex-end; gap: 5px; height: 38px; }
.dh-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#8d7bff, var(--violet)); }
.dh-alert { background: #fff0c2; color: #6c4b00; font-weight: 600; font-size: 11px; border-radius: 6px; padding: 3px 8px; }
#ai .ai-demo { margin-top: 4px; }

/* ---------- monday chapter ---------- */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: clamp(56px, 7vw, 96px); }
.fit-card { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 10px; }
/* equal cards, same rhythm: label, title and text at the top, the closing element on the bottom edge */
.fit-card > :last-child { margin-top: auto; }
.fit-card.main { border-color: #6541ea55; box-shadow: 0 20px 50px #6541ea14; }
.fit-k { font-size: 13px; font-weight: 600; color: var(--violet); }
.fit-card h3 { font-size: clamp(21px, 2vw, 26px); }
.fit-card p { color: var(--muted); }
.symptoms { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 10px; }
.symptoms li { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.symptoms li::before { content: "!"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #fff0c2; color: #6c4b00; font-weight: 800; font-size: 12px; line-height: 1; display: grid; place-items: center; }
/* the "from scratch" card: a first board fills it out to the height of its neighbour */
.fit-img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
/* the AI chapter headline stays on two lines on wide screens */
@media (min-width: 1081px) {
  .chapter-head.split:has(.two-lines) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .h2.two-lines { font-size: clamp(34px, 3.4vw, 46px); }
  .h2.two-lines span { display: block; white-space: nowrap; }
}
/* English lines are longer: the headline takes the full width and the side text moves under it */
@media (min-width: 1081px) {
  [dir="ltr"] .chapter-head.split:has(.two-lines) { grid-template-columns: 1fr; row-gap: 18px; }
}
.fit-board { margin-top: auto; display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 12px; background: #fff; }
.fb-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.fb-h b { font-size: 13px; }
.fb-h em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--violet); background: var(--violet-soft); border-radius: 99px; padding: 1px 8px; }
.fb-row { display: grid; grid-template-columns: 1.3fr .6fr .9fr 1.1fr; gap: 6px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #eef0f6; box-shadow: inset -3px 0 0 #579bfc; }
.fb-row:last-child { border-bottom: 0; }
.fb-th { color: var(--muted); font-size: 11px; box-shadow: none; }
.fb-av { justify-self: start; width: 20px; height: 20px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-weight: 700; font-size: 10.5px; display: grid; place-items: center; }
.fb-st { text-align: center; color: #fff; font-weight: 600; border-radius: 4px; padding: 2px 0; }
.fb-st.s1 { background: #fdab3d; }
.fb-st.s2 { background: #579bfc; }
.fb-st.s3 { background: #00c875; }
.fit-do { border-top: 1px solid var(--line); padding-top: 12px; color: var(--ink) !important; font-weight: 600; }

@media (max-width: 1080px) {
  .sol-hero-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "paths" "act"; row-gap: 28px; }
  .sol-act .actions { margin-top: 0; }
  .sol-act .founder-chip { margin-top: 20px; }
  .depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handoffs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .depts, .fit { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr; }
  .path-viz { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .handoff { grid-template-columns: 1fr; }
  .ho-arrow { display: none; }
  .ho-human { border-inline-start: 0; padding-inline-start: 0; border-top: 1px dashed #ffffff26; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ma-roll i, .mb-st::after, .agent-stack .mini-agent { animation: none; }
  .agent-stack .mini-agent:first-child { opacity: 1; border-color: var(--mint); }
  .ma-roll i:last-child { opacity: 1; }
  .mb-st::after { background: #00c875; }
}