.problem-desk { position: relative; isolation: isolate; padding-block: 65px 100px; }
.problem-desk::before { content: ''; position: absolute; z-index: -1; width: min(70vw, 680px); aspect-ratio: 1; left: -160px; top: 30px; opacity: .055; background: url('assets/clp-heart-line-v1.svg') center/contain no-repeat; transform: rotate(-16deg); pointer-events: none; }
.problem-desk-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.problem-desk h1 { font: 600 clamp(48px, 5.4vw, 78px)/.98 var(--display); letter-spacing: -.035em; margin: 23px 0 26px; max-width: 650px; }
.problem-desk h1 span { display: block; color: #b64a65; }
.problem-desk-intro > p:not(.bp-eyebrow) { max-width: 440px; font: 400 18px/1.65 var(--body); }
.problem-desk-intro ul { list-style: none; padding: 20px 0; margin: 22px 0; border-block: 1px solid var(--rule); max-width: 430px; }
.problem-desk-intro li { padding: 9px 0; font: 500 14px/1.5 var(--body); }
.problem-desk-intro li::before { content: ''; display: inline-block; width: 30px; height: 1em; vertical-align: -.125em; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b64a65%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019%2019%205M5%205h14v14%22%2F%3E%3C%2Fsvg%3E") left center / 1em 1em no-repeat; }
.problem-desk-paper { position: relative; padding: clamp(25px, 3.4vw, 48px); background: #fffaf3 url('assets/clp-paper-grain-v1.svg'); border: 1px solid #34231f30; border-radius: 3px 38px 3px 3px; box-shadow: 9px 11px 0 -1px #e5cabb, 9px 11px 0 0 #34231f25, 0 25px 35px -30px #34231f80; }
.problem-desk-paper::before { content: ''; width: 80px; height: 21px; position: absolute; top: -9px; right: 35px; background: #ffe600ad; transform: rotate(4deg); border-inline: 2px dashed #fff8ef88; pointer-events: none; }
.problem-desk-label { display: block; font: 600 27px/1.15 var(--display); margin: 16px 0 13px; }
.problem-desk-hint, .problem-desk-privacy { font: 400 13px/1.6 var(--body); color: #67534a; }
.problem-desk textarea { display: block; resize: vertical; width: 100%; min-height: 220px; padding: 17px; border: 1px solid #34231f65; border-radius: 3px 15px 3px 3px; background: #fffdf8; color: var(--ink); font: 400 16px/1.6 var(--body); }
.problem-desk textarea:focus-visible { outline: 3px solid #b64a65; outline-offset: 3px; }
.problem-desk-count { text-align: right; font: 400 11px var(--body); margin: 9px 0 18px; color: #67534a; }
.problem-desk-privacy a, .problem-desk-related { color: inherit; text-underline-offset: 4px; }
.problem-desk-related { display: block; font: 500 13px/1.5 var(--body); margin: 20px 0; }
.problem-desk [hidden] { display: none !important; }
.problem-desk-error { color: #923247; font: 600 14px/1.5 var(--body); }
.problem-desk-error:empty { display: none; }
.problem-desk button { margin-top: 8px; }
.problem-desk button:disabled { opacity: .65; cursor: wait; }
.problem-desk-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.problem-desk-success h2 { font: 600 40px/1 var(--display); margin: 20px 0; }
.problem-desk-success p { font: 400 16px/1.6 var(--body); }
.problem-desk-success:focus { outline: 3px solid #b64a65; outline-offset: 9px; }
.problem-desk-success small { display: block; font: 500 12px var(--body); color: #67534a; margin: 25px 0; }
.problem-desk-callout { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-block: 50px 65px; padding: 35px 40px; border: 1px solid #34231f30; border-radius: 3px 30px 3px 3px; background: #f3e2d4 url('assets/clp-paper-grain-v1.svg'); box-shadow: 5px 8px 0 -1px #e1c5b2, 5px 8px 0 0 #34231f20; }
.problem-desk-callout h2 { font: 600 clamp(29px, 3vw, 42px)/1.05 var(--display); margin: 12px 0; }
.problem-desk-callout p { font: 400 15px/1.6 var(--body); margin: 0; }
.problem-desk-callout > a { flex-shrink: 0; }
.case-report-link { display: block; margin-top: 12px; min-height: 40px; font: 500 12px/1.5 var(--body); text-underline-offset: 4px; }
@media(max-width: 900px) { .problem-desk-grid { grid-template-columns: minmax(0,1fr); gap: 35px; } .problem-desk-intro > p:not(.bp-eyebrow), .problem-desk-intro ul { max-width: 640px; } .problem-desk { padding-block: 35px 65px; } .problem-desk-callout { align-items: start; flex-direction: column; padding: 30px 25px; } }
@media(max-width: 420px) { .problem-desk h1 { font-size: 49px; } .problem-desk-paper { margin-right: 8px; padding: 26px 22px; } .problem-desk-paper textarea { min-height: 250px; } .problem-desk-intro > p:not(.bp-eyebrow) { font-size: 16px; } }