:root {
  color: #202722;
  background: #f3f4f0;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
main { width: min(840px, calc(100% - 32px)); margin: auto; padding: 56px 0 88px; }
header { margin-bottom: 28px; }
header > p { margin: 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; letter-spacing: -.045em; }
section { scroll-margin-top: 16px; }
h2, h3, h4 { line-height: 1.25; letter-spacing: -.02em; }
h2 { margin: 0 0 24px; font-size: 1.6rem; }
h3 { margin: 38px 0 16px; font-size: 1.15rem; }
h4 { margin: 28px 0 12px; }
p { margin: 0 0 18px; }
ul { padding-left: 22px; }
li { margin: 0 0 12px; }
a { color: #174b65; text-underline-offset: 3px; }

.call-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.call-outcomes > section { min-width: 0; }
#pickup { grid-column: 1 / -1; }
.direction { color: #68716b; font-size: .9rem; }

details { margin: 12px 0; border: 1px solid #d7ddd8; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(24, 35, 28, .03); }
summary { cursor: pointer; padding: 13px 16px; font-weight: 700; line-height: 1.35; color: #17445c; background: #edf5f8; transition: background-color .15s ease; }
summary:hover { filter: brightness(.98); }
summary:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }
summary::marker { font-size: .78em; }
details[open] > summary { border-bottom: 1px solid rgba(23, 68, 92, .15); }
details > p, details > ul, details > h4 { margin-left: 18px; margin-right: 18px; }
details > p:first-of-type, details > ul:first-of-type { margin-top: 18px; }
details > p:last-child, details > ul:last-child { margin-bottom: 18px; }

details.negative { border-color: #e1c7c5; }
details.negative > summary { color: #6c2926; background: #f9e9e7; }
details.neutral { border-color: #e4d3aa; }
details.neutral > summary { color: #654e16; background: #fff4d8; }
details.positive { border-color: #bcd7c4; }
details.positive > summary { color: #205235; background: #e7f5eb; }

.top-choice { margin: 0; }
.top-choice > summary { padding: 17px 18px; font-size: 1.05rem; }
.top-choice.pickup > summary { color: #205235; background: #e7f5eb; }
.top-choice.busy > summary { color: #654e16; background: #fff4d8; }
.top-choice[open] { box-shadow: 0 8px 28px rgba(35, 48, 39, .07); }
#pickup .top-choice[open] { padding-bottom: 10px; }
#pickup .top-choice[open] > p { margin-left: 22px; margin-right: 22px; }
#pickup .top-choice[open] > p:first-of-type { margin-top: 22px; }
#pickup .top-choice[open] > details { margin-left: 22px; margin-right: 22px; }

.nested-choice { margin: 10px 18px 14px; box-shadow: none; }
.nested-choice > summary { padding: 11px 13px; font-size: .92rem; }
.inline-choice > p { margin-top: 14px; }
.response-group { background: #fbfdfb; }
.response-group > p { margin-left: 20px; margin-right: 20px; }
.response-group > p:first-of-type { margin-top: 20px; }
.response-group > ul { margin-left: 20px; margin-right: 20px; }
.response-group > .nested-choice { margin-left: 20px; margin-right: 20px; }
.response-group > .nested-choice > .nested-choice { margin-left: 14px; margin-right: 14px; }
.response-group > .nested-choice > p { margin-left: 14px; margin-right: 14px; }

#pickup ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; list-style: none; }
#pickup ul > li { margin: 0; padding: 14px; border: 1px solid #d9e1e4; border-radius: 8px; background: #f5f9fa; }
#pickup ul > li strong { display: block; margin-bottom: 7px; color: #17445c; }
#text-message { margin: 18px 0 56px; }
#text-message details { width: min(620px, 100%); margin: auto; }
#extra { padding: 32px; border-radius: 14px; background: #e9ebe6; }
#extra > h2 { margin-bottom: 16px; }
#extra > p:first-of-type { color: #48514b; }
#extra details { box-shadow: none; }
#extra > p:last-child { margin: 26px 0 0; font-size: .9rem; }

@media (max-width: 620px) {
  :root { font-size: 16px; }
  main { padding-top: 32px; }
  header { margin-bottom: 22px; }
  .call-outcomes { grid-template-columns: 1fr; }
  #pickup { grid-column: auto; }
  #pickup .top-choice[open] > details { margin-left: 12px; margin-right: 12px; }
  #pickup ul { grid-template-columns: 1fr 1fr; gap: 8px; }
  #pickup ul > li { padding: 10px; font-size: .88rem; }
  .response-group > .nested-choice { margin-left: 12px; margin-right: 12px; }
  #extra { padding: 22px 16px; }
}