/* How long it takes and Elly in numbers, as two answers: one white house card per buyer's question, each with one big figure, on the page's own white, and still: everything shows its final state */
.answers .section-head { margin-bottom: 40px; }
.answers h2 em { font-style: normal; color: var(--magenta); }

.answers-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* Each card has a firm edge in the aubergine and a shadow that starts right at it, like the Pricing cards, so the white card stands off the white page */
.answer-card { display: flex; flex-direction: column; padding: 40px 40px 32px; border: 1px solid rgba(39, 27, 54, .16); box-shadow: 0 1px 3px rgba(39, 27, 54, .1), 0 14px 32px -16px rgba(39, 27, 54, .3), 0 28px 56px -30px rgba(39, 27, 54, .5); }
.house-card p.answer-question { font-family: var(--font-heading); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-soft); }

/* The answer: a small picture of the time, and the figure in the headline face */
.answer-figure { display: flex; align-items: center; gap: 24px; margin-top: 24px; }
.answer-calendar { flex: none; display: grid; grid-template-columns: repeat(7, 14px); align-content: center; gap: 5px; width: 128px; height: 96px; }
.answer-calendar i { display: block; height: 14px; border-radius: 4px; background: var(--mint); }
.answer-clock { flex: none; width: 96px; height: 96px; margin: 0 16px; overflow: visible; }
.answer-clock-face { fill: #fff; stroke: #D0E1F1; stroke-width: 5; }
.answer-clock-slice { fill: var(--mint); }
/* The first quarter hour in green, the second in the pink of minutes, so 15-30 reads off the clock */
.answer-clock-slice.more { fill: var(--magenta); }
.answer-clock-ticks path { stroke: #C6CBCB; stroke-width: 3; stroke-linecap: round; }
.answer-clock-hand { stroke: var(--blue); stroke-width: 5; stroke-linecap: round; }
.answer-clock-hub { fill: var(--blue); }
.house-card p.answer-big { font-family: var(--font-heading); font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: var(--blue); font-variant-numeric: tabular-nums; }
.answer-big b { display: inline-block; min-width: 1ch; font-weight: inherit; text-align: right; }
.answer-big span { font-size: .5em; font-weight: 700; letter-spacing: -0.01em; color: var(--magenta); }
/* 15-30 minutes is the wider figure: its clock keeps no side margins, and it shrinks with its card where the card is too narrow for it on one line */
.answer-card:nth-child(2) { container-type: inline-size; }
.answer-card:nth-child(2) .answer-clock { margin: 0; }
.answer-card:nth-child(2) p.answer-big { font-size: min(76px, calc((100cqi - 120px) / 5.5)); }

/* The support, in plain words */
.house-card p.answer-say { margin-top: 24px; font-family: var(--font-heading); font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--blue); }
.answer-pill { display: inline-block; padding: 1px 8px 0; border-radius: 999px; background: var(--mint-light); font-weight: 700; color: var(--mint-deep); font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .answer-card { padding: 32px 24px; }
  .answer-figure { gap: 16px; }
  .house-card p.answer-big { font-size: 60px; }
  .answer-card:nth-child(2) p.answer-big { font-size: min(60px, calc((100cqi - 112px) / 5.5)); }
}
@media (max-width: 860px) {
  .answers-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .answers .section-head { margin-bottom: 24px; }
  .answer-card { padding: 24px 16px 16px; }
  .house-card p.answer-question { font-size: 11.5px; }
  .answer-figure { gap: 16px; margin-top: 16px; }
  .answer-calendar { grid-template-columns: repeat(7, 10px); gap: 4px; width: 94px; height: 66px; }
  .answer-calendar i { height: 10px; border-radius: 3px; }
  .answer-clock { width: 66px; height: 66px; margin: 0 16px; }
  .house-card p.answer-big { font-size: 46px; }
  .answer-card:nth-child(2) p.answer-big { font-size: min(46px, calc((100cqi - 82px) / 5.5)); }
  .house-card p.answer-say { margin-top: 16px; font-size: 16.5px; }
}
/* Below 360 the Dutch 15 minuten only fits beside the clock without its side margins */
@media (max-width: 359px) {
  .answer-figure { gap: 8px; }
  .answer-clock { margin: 0; }
}