/* Scoped section styles; no JavaScript or animation library needed. */
#problem.wb-blockers {
  padding:120px 0 100px;
  color:#0a1a33;
  background:radial-gradient(ellipse at 8% 10%,#e4f2ff90,transparent 60%),#f5f8fc;
  font-family:Inter,Arial,sans-serif;
}
#problem.wb-blockers * { box-sizing:border-box; }
#problem .wb-shell { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
#problem .wb-badge {
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 20px; padding:8px 14px; border:1px solid #2f6be833;
  border-radius:999px; background:#fff; color:#0a1a33;
  font-size:.875rem; font-weight:600; line-height:1.4;
}
#problem .wb-badge-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#2f6be8; }
#problem.wb-blockers #problem-title {
  margin:0; max-width:none; color:#0a1a33;
  font-size:clamp(2.25rem,4vw,3.5rem); font-weight:700;
  line-height:1.08; letter-spacing:-.025em;
}
#problem #problem-title > span { display:block; }
#problem #problem-title .site-accent {
  color:#1084cc; background:linear-gradient(135deg,#0874be,#159bcd);
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
#problem .wb-subtitle { margin:16px 0 0; color:#4a5b75; font-size:18px; line-height:1.6; }

/* Subgrid shares the bubble and description tracks across all three cards. */
#problem .wb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin-top:40px; }
#problem .wb-card { display:grid; grid-template-rows:minmax(12rem,auto) 1fr auto; min-width:0; }
@supports (grid-template-rows:subgrid) {
  #problem .wb-card { grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
}
#problem .wb-bubble {
  position:relative; display:flex; align-items:flex-start; gap:14px;
  padding:24px 28px; border-radius:20px; background:#0a1a33;
  box-shadow:0 12px 32px rgba(47,107,232,.25);
}
/* Speech-bubble tail points toward its description. */
#problem .wb-bubble::after {
  content:""; position:absolute; top:100%; left:30px;
  border-left:11px solid transparent; border-right:11px solid transparent;
  border-top:11px solid #0a1a33;
}
#problem .wb-quote {
  flex:0 0 26px; width:26px; margin-top:-2px; color:#3b82f6;
  font-family:Georgia,serif; font-size:48px; font-weight:700; line-height:1;
}
#problem .wb-bubble h3 {
  margin:0; min-width:0; color:#fff;
  font-size:clamp(21px,1.8vw,28px); font-weight:700;
  line-height:1.25; letter-spacing:-.02em; overflow-wrap:break-word;
}
#problem .wb-description {
  margin:16px 8px 0; max-width:380px; color:#6b7a90;
  font-size:17px; line-height:1.6;
}

/* Transparent, secondary artwork reserves its space before loading. */
#problem .wb-art {
  position:relative; width:min(100%,360px); aspect-ratio:3/2;
  margin:28px auto 0; align-self:end; container-type:inline-size;
}
#problem .wb-art img { display:block; width:100%; height:auto; aspect-ratio:3/2; }
#problem .wb-paid {
  position:absolute; left:30%; top:49%; padding:1% 3%; border:2px solid #0b63f6;
  border-radius:3px; color:#0b63f6; font-size:5.6cqw; font-weight:800; line-height:1;
  letter-spacing:.06em; transform:translate(-50%,-50%) rotate(-17deg);
}
#problem .wb-no-orders {
  position:absolute; left:62.5%; top:63%; display:flex; align-items:center; gap:1cqw;
  width:23%; padding:1.5% 2%; border-radius:4px; background:#fff; color:#0a1a33;
  font-size:2.6cqw; font-weight:600; line-height:1.2; transform:translate(-50%,-50%) skewY(27deg);
}
#problem .wb-no-orders strong { flex:none; font-size:5.3cqw; line-height:1; }
#problem .wb-tasks { position:absolute; left:2%; top:25%; display:grid; gap:3cqw; width:78%; }
#problem .wb-task {
  display:flex; align-items:center; gap:2.5cqw; width:max-content; max-width:100%;
  padding:3% 4%; border:1px solid #dbeafe; border-radius:10px;
  background:#fff; color:#0a1a33; box-shadow:0 5px 14px #2f6be81a;
  font-size:3.3cqw; font-weight:600; line-height:1.4;
}
#problem .wb-task i { width:3.8cqw; height:3.8cqw; flex:0 0 3.8cqw; border-radius:50%; background:linear-gradient(135deg,#85c3ff,#0b63f6); }

/* The closing link is a normal, keyboard-accessible in-page anchor. */
#problem .wb-closing { margin:48px 0 0; color:#0a1a33; text-align:center; font-size:20px; line-height:1.6; }
#problem .wb-closing > span { margin-right:6px; }
#problem .wb-closing a { color:#0b63f6; text-decoration:none; text-underline-offset:4px; }
#problem .wb-closing a:hover { text-decoration:underline; }
#problem .wb-closing a:focus-visible { outline:3px solid #2f6be8; outline-offset:5px; border-radius:3px; }
#problem .wb-link-arrow { display:inline-block; transition:transform 180ms ease-out; }
#problem .wb-closing a:hover .wb-link-arrow { transform:translateX(4px); }
#one-partner { scroll-margin-top:48px; }

/* Tablet: a centered, readable single column. */
@media (max-width:1023px) {
  #problem.wb-blockers { padding:88px 0 80px; }
  #problem .wb-intro, #problem .wb-grid { width:100%; max-width:560px; margin-inline:auto; }
  #problem .wb-grid { grid-template-columns:minmax(0,1fr); gap:56px; }
  #problem .wb-card { grid-row:auto; grid-template-rows:auto auto auto; }
  #problem .wb-description { max-width:none; }
  #problem .wb-bubble h3 { font-size:26px; }
  #problem .wb-closing { max-width:560px; margin-inline:auto; }
}
/* Mobile: 56px between cards and no page-level horizontal overflow. */
@media (max-width:767px) {
  #problem.wb-blockers { padding:64px 0; }
  #problem .wb-shell { width:calc(100% - 40px); }
  #problem.wb-blockers #problem-title { font-size:clamp(2rem,7.5vw,2.75rem); }
  #problem .wb-grid { margin-top:32px; }
  #problem .wb-bubble { gap:12px; padding:24px 22px; }
  #problem .wb-bubble h3 { font-size:clamp(21px,4.5vw,26px); }
  #problem .wb-art { max-width:300px; }
  #problem .wb-closing { margin-top:40px; }
}
@media (prefers-reduced-motion:reduce) {
  #problem .wb-link-arrow { transition:none; }
  #problem .wb-closing a:hover .wb-link-arrow { transform:none; }
}
@media (forced-colors:active) {
  #problem #problem-title .site-accent { background:none; -webkit-text-fill-color:currentColor; }
  #problem .wb-bubble { border:1px solid CanvasText; }
}