/* "What makes us different" FAQ (contact.html#different) + homepage teaser. Oct 19 2026.
   Light look: white cards (reuses .faq from site.css), cream/gold small accents only. */
.dif{padding-bottom:56px;}
.dif-head{max-width:760px;margin-bottom:28px;}
.dif-head p{color:var(--muted);line-height:1.75;margin-top:12px;font-size:.95rem;}
.dif-head p a{color:var(--gold);font-weight:600;text-decoration:none;white-space:nowrap;}
.dif-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.dif-chips li{font-size:.8rem;font-weight:600;color:#1F1610;background:var(--bg2);border-radius:999px;padding:7px 13px;}
.dif-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start;}
.dif-q .faq-a p+p,.dif-q .faq-a ul+p{margin-top:10px;}
.dif-q .faq-a a{color:var(--gold);font-weight:600;}
.dif-list{margin:10px 0 10px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;}
.dif-list li{font-size:.92rem;color:#1F1610;padding-left:22px;position:relative;line-height:1.6;}
.dif-list li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700;}
.dif-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.dif-cta .btn-gold,.dif-cta .btn-outline{border-radius:999px;}
@media(max-width:900px){.dif-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.dif-chips li{font-size:.74rem;padding:6px 11px;}}
/* homepage teaser */
.dif-teaser-s{padding-top:28px;padding-bottom:8px;}
.dif-teaser{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px 20px;text-decoration:none;color:#1F1610;font-size:.94rem;line-height:1.5;transition:box-shadow .2s;}
.dif-teaser:hover{box-shadow:0 10px 26px rgba(60,36,12,.07);}
.dif-teaser span:nth-child(2){flex:1 1 320px;}
.dif-teaser-ic{font-size:1.4rem;}
.dif-teaser-go{color:var(--gold);font-weight:700;white-space:nowrap;}
/* Miles polish (Oct 19): two independent columns so an open card never leaves a blank gap beside it.
   On phones the column stacks keep source order Q1..Q11 via display:contents + order. */
.dif-grid{align-items:start;}
.dif-col{display:flex;flex-direction:column;}
@media(max-width:900px){
  .dif-grid{display:flex;flex-direction:column;}
  .dif-col{display:contents;}
}
/* Phones: keep FAQ text clear of the floating Ask Kiki / pup / Call-Text stack (same --on-clear as Open Nights). */
@media(max-width:600px){
  #different,#faq{padding-bottom:calc(48px + var(--on-clear,152px));}
  #different .faq,#faq .faq{scroll-margin-bottom:var(--on-clear,152px);}
  #faq .faq-intro{padding-right:0;}
}