/* Problemsmith, in its own approved identity (24 Oct 2026): charcoal, raised charcoal, teal, silver, chalk
   and vapour, IBM Plex Sans with Plex Mono for the model's labels, the canonical wordmark. The pain is set
   on vapour, the answer in teal, then the living model takes the screen while the words hold beside it.
   problemsmith-showcase.js adds .is-live (the scrolled story) or .is-static (reduced motion: the finished
   model, every line at once). Without either, the static layout stands. */
.dbw .dbw-psx { --px-char: #202423; --px-raised: #303735; --px-teal: #41e8c5; --px-silver: #b6c2bf; --px-vapour: #c7c7cc; --px-chalk: #f3f1e9; --px-rule: #56615e;
  position: relative; background: var(--px-char); color: var(--px-chalk); font-family: "IBM Plex Sans", var(--ha-font-sans); padding-top: clamp(88px, 9vw, 140px); }
.dbw .dbw-psx b { font-weight: 600; }

/* The name, and what it is */
.dbw .psx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.dbw .psx-mark { margin: 0; line-height: 0; }
.dbw .psx-mark img { width: clamp(230px, 27vw, 420px); height: auto; }
.dbw .psx-meta { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--px-silver); text-align: right; }

/* The pain, as Problemsmith sets it: charcoal capitals on vapour, one word to a line */
.dbw .psx-pain { margin-top: clamp(40px, 5vw, 72px); background: var(--px-vapour); color: var(--px-char); padding-block: clamp(48px, 6vw, 96px) clamp(44px, 5vw, 80px); }
.dbw .psx-pain .dbw-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 64px; }
.dbw .psx-crap { font-size: clamp(76px, 12.6vw, 204px); line-height: .9; font-weight: 600; letter-spacing: -.045em; }
.dbw .psx-crap > span { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.dbw .psx-crap > span > span { display: block; }
.dbw .psx-cost { max-width: 16ch; padding-bottom: .5em; font-size: clamp(21px, 2vw, 30px); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; }
.dbw .psx-cost b { display: block; margin-top: .35em; font-size: 1.3em; letter-spacing: -.03em; }
.dbw .dbw-psx.is-live .psx-crap > span > span { transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .8, .1, 1); }
.dbw .dbw-psx.is-live .psx-crap > span:nth-child(2) > span { transition-delay: .12s; }
.dbw .dbw-psx.is-live .psx-crap > span:nth-child(3) > span { transition-delay: .24s; }
.dbw .dbw-psx.is-live .psx-cost { opacity: 0; transition: opacity .8s ease .5s; }
.dbw .dbw-psx.is-live .psx-pain.is-in .psx-crap > span > span { transform: none; }
.dbw .dbw-psx.is-live .psx-pain.is-in .psx-cost { opacity: 1; }

/* The model. Static layout: words, then the finished model beside or beneath them */
.dbw .psx-stage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: clamp(64px, 7vw, 112px) calc(max(var(--ha-gutter), (100vw - var(--ha-content-max)) / 2) + var(--dbw-gut)); }
.dbw .psx-canvas { order: 2; position: sticky; top: 7vh; align-self: start; display: block; width: 100%; height: min(86vh, 860px); min-height: 520px; }
.dbw .psx-words { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); align-self: center; }
.dbw .psx-rail { display: none; }
.dbw .psx-detent { display: none; }

/* Each line in the brand's own voice: the answer in a teal block, the method in teal, the team in chalk */
.dbw .psx-alive { justify-self: start; width: fit-content; max-width: 15ch; padding: .5em .7em .58em .62em; background: var(--px-teal); color: var(--px-char); font-size: clamp(30px, 3.3vw, 50px); line-height: 1.06; font-weight: 600; letter-spacing: -.025em; }
.dbw .psx-turn { max-width: 12ch; font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; color: var(--px-teal); }
.dbw .psx-team { max-width: 21ch; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.4; color: var(--px-silver); }
.dbw .psx-team b { display: block; margin-bottom: .45em; font-size: clamp(28px, 2.7vw, 40px); line-height: 1.04; letter-spacing: -.03em; color: var(--px-chalk); }
.dbw .psx-end > p { font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; color: var(--px-teal); }
.dbw .psx-end > p b { display: block; color: var(--px-chalk); }
.dbw .psx-nb { white-space: nowrap; }
.dbw .psx-chart { display: block; width: 100%; max-width: 460px; height: auto; margin-top: clamp(20px, 2.6vw, 36px); overflow: visible; }
.dbw .psx-chart text { font: 500 12px "IBM Plex Sans", sans-serif; fill: var(--px-silver); }
.dbw .psx-chart .psx-key { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.dbw .psx-chart .psx-grid { stroke: var(--px-rule); stroke-width: 1; stroke-dasharray: 2 6; }
.dbw .psx-chart .psx-axis { stroke: var(--px-rule); stroke-width: 1; fill: none; }
.dbw .psx-chart .psx-brief { fill: none; stroke: var(--px-chalk); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dbw .psx-chart .psx-cc { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.dbw .psx-chart .psx-now { fill: var(--px-chalk); }
.dbw .psx-chart .psx-halo { fill: none; stroke: var(--px-chalk); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.dbw .dbw-psx.is-live.is-playing .psx-chart .psx-halo { animation: psx-breathe 2.4s ease-out infinite; }
@keyframes psx-breathe { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }

/* Live: a sticky stage the story plays across as the page scrolls */
.dbw .dbw-psx.is-live .psx-run { position: relative; height: 560vh; height: 560svh; }
.dbw .dbw-psx.is-live .psx-stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.dbw .dbw-psx.is-live .psx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.dbw .dbw-psx.is-live .psx-words { position: absolute; z-index: 1; left: calc(max(var(--ha-gutter), (100vw - var(--ha-content-max)) / 2) + var(--dbw-gut)); top: 50%; width: min(34vw, 470px); transform: translateY(-50%); display: grid; gap: 0; pointer-events: none; }
.dbw .dbw-psx.is-live .psx-say { grid-area: 1 / 1; align-self: center; opacity: 0; will-change: opacity, transform; }
.dbw .dbw-psx.is-live .psx-rail { position: absolute; z-index: 1; top: 40px; right: calc(max(var(--ha-gutter), (100vw - var(--ha-content-max)) / 2) + var(--dbw-gut)); display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.dbw .psx-rail li { display: flex; flex-direction: column; gap: 9px; min-width: 52px; font-size: 14px; line-height: 1; font-weight: 500; color: var(--px-silver); transition: color .3s; }
.dbw .psx-rail li::before { content: ""; height: 2px; background: var(--px-rule); transition: background-color .3s; }
.dbw .psx-rail li.is-on::before { background: var(--px-teal); }
.dbw .psx-rail li.is-now { color: var(--px-teal); }
.dbw .dbw-psx.is-live .psx-detent { position: absolute; left: 0; display: block; width: 1px; height: 0; scroll-snap-align: start; scroll-snap-stop: normal; }
/* A magnetic detent holds the insight and the whole model; a firm scroll carries on past (page-detents.js
   turns page snapping on just ahead of each one) */

@media (max-width: 899px) {
  .dbw .psx-head { align-items: flex-start; flex-direction: column; }
  .dbw .psx-meta { text-align: left; }
  .dbw .psx-pain .dbw-in { grid-template-columns: minmax(0, 1fr); }
  .dbw .psx-crap { font-size: clamp(64px, 21vw, 180px); }
  .dbw .psx-cost { max-width: 19ch; padding-bottom: 0; }
  .dbw .psx-stage { grid-template-columns: minmax(0, 1fr); }
  .dbw .psx-canvas { position: static; height: 72vh; min-height: 420px; }
  .dbw .dbw-psx.is-live .psx-words { top: 92px; right: calc(max(var(--ha-gutter), (100vw - var(--ha-content-max)) / 2) + var(--dbw-gut)); width: auto; transform: none; align-items: start; }
  .dbw .dbw-psx.is-live .psx-say { align-self: start; }
  .dbw .dbw-psx.is-live .psx-rail { top: 28px; left: calc(max(var(--ha-gutter), (100vw - var(--ha-content-max)) / 2) + var(--dbw-gut)); gap: 10px; }
  .dbw .psx-rail li { flex: 1; min-width: 0; font-size: 13px; }
  .dbw .psx-alive { font-size: clamp(26px, 7.4vw, 40px); max-width: 14ch; }
  .dbw .psx-turn, .dbw .psx-end > p { font-size: clamp(32px, 9.4vw, 52px); }
  .dbw .psx-team { font-size: clamp(17px, 4.6vw, 21px); max-width: 30ch; }
  .dbw .psx-team b { font-size: clamp(26px, 7.6vw, 40px); }
  .dbw .psx-chart { max-width: 420px; margin-top: 18px; }
}
@media (max-width: 899px) and (max-height: 640px) {
  .dbw .dbw-psx.is-live .psx-words { top: 76px; }
  .dbw .dbw-psx.is-live .psx-rail { top: 20px; }
  .dbw .psx-turn, .dbw .psx-end > p { font-size: 30px; }
  .dbw .psx-team { font-size: 16px; }
  .dbw .psx-team b { font-size: 25px; }
}