/* === CheckDi recommended box (2026-10-09) ===
   The "Nong CheckDi recommends" header (mascot + who / title / why) and the recommended plan cards in ONE
   warm box, so there is no gap between them (owner 2026-10-09: "do it just like car/plans, there is no gap").
   Design source: /th/business-insurance/tour-operator-accident (.toa-rec).
   Used by the NON-MOTOR plans pages - /th/all/plans?pdtype=home, /th/pa/plans, /th/critical-illness/plans,
   /th/travel/plans - with the new mascot /content/img/branding/checkdi-footer-mascot.png. Car and motorbike
   keep their own block and the old driving mascot (owner: "motor can use the old one").
   Card radius 8px (ui-standards). No letter-spacing on the Thai who-line: it splits sara am, so the Thai
   word for "recommend" rendered as a different word at 12px. */
.cd-rec { background: linear-gradient(135deg, #FFF8F0 0%, #FFF5EB 100%); border: 1px solid rgba(249,159,56,.35); border-radius: 8px; padding: 1rem 1.25rem .5rem; margin-bottom: 1rem; }
.cd-rec-top { display: flex; align-items: center; gap: 1rem; }
.cd-rec-top img { width: 78px; height: auto; flex: 0 0 auto; }
.cd-rec-who { font-size: 12px; font-weight: 700; color: #F7881F; }
.cd-rec-title { font-size: 16px; font-weight: 700; color: #1a1d23; margin-top: .1rem; }
.cd-rec-why { font-size: 13px; color: #555; line-height: 1.6; margin-top: .2rem; }
.cd-rec-cards { margin-top: .5rem !important; }
@media (max-width: 600px) { .cd-rec-top img { width: 64px; } }