/* contact.html only. Reuses site.css, listing.css (rc-phero, rc-contact, rc-form, rc-infobox) and
   article.css (rc-callout). */

.ct-mail{color:var(--aqua-800);font-weight:700;overflow-wrap:anywhere}
.rc-phero__dek a{color:var(--aqua-800);font-weight:700}

/* the "no personal dental questions" note, right under the hero and before the form */
.ct-dental{margin-top:1rem}
.ct-dental .rc-src{margin-left:.15rem}

/* thank-you notice: shown only when the form sends you to #sent */
.ct-sent{display:none;grid-template-columns:auto 1fr;gap:.85rem;align-items:center;margin-bottom:1.5rem;padding:1rem 1.15rem;border-radius:var(--r-l);background:var(--mint-tint);border:1px solid #bfe6d0;color:var(--ink)}
.ct-sent:target{display:grid}
.ct-sent__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:14px;background:#fff;color:var(--mint)}
.ct-sent b{font:600 1.05rem var(--display)}
.ct-sent p{margin-top:.2rem;font-size:.94rem}

/* the three info cards beside the form: an icon tile, a title and one line */
.ct-card{grid-template-columns:auto minmax(0,1fr);align-items:start;align-content:start;gap:.85rem}
.ct-card>div{display:grid;gap:.3rem;justify-items:start}
.ct-card__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:var(--aqua-tint);color:var(--aqua-800)}
.ct-card__ico--lav{background:var(--lav-tint);color:var(--lav)}
.ct-card__ico--rasp{background:var(--rasp-tint);color:var(--rasp-800)}
.ct-small{font-size:.92rem;line-height:1.55;color:var(--text)}
@media (min-width:640px) and (max-width:1023px){.rc-contact__side{grid-template-columns:repeat(3,minmax(0,1fr))}.ct-card{grid-template-columns:1fr}.ct-card .ct-mail{font-size:.84rem}}
.rc-check a{color:var(--aqua-800);font-weight:700}

/* what happens after you write: four steps, 2 + 2 on tablets, one row on desktop; the last one is a "no" */
@media (min-width:1024px){.ct-steps{grid-template-columns:repeat(4,1fr)}}
.ct-step--no{border-color:var(--rasp-line)}
.ct-step--no .rc-step__ico{background:var(--rasp-tint);color:var(--rasp-800)}

/* phones: icon beside the text in the four steps */
@media (max-width:639px){
  .ct-steps .rc-step{grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;padding:.9rem 1rem}
  .ct-steps .rc-step__top{grid-row:1/3;flex-direction:column;justify-content:flex-start;gap:.3rem}
  .ct-steps .rc-step__top::after{font-size:.9rem}
}
/* review-tidy P3-20: on tablets the closing ask box is one banner (drawing, text, button) */
@media (min-width:640px) and (max-width:1023.98px){
  #faq .rc-ask{grid-template-columns:auto minmax(0,1fr) auto;column-gap:1.25rem;row-gap:.35rem;align-items:center}
  #faq .rc-ask__art{grid-row:1/3;width:5.5rem}
  #faq .rc-ask h3{grid-column:2;grid-row:1;align-self:end}
  #faq .rc-ask p{grid-column:2;grid-row:2;align-self:start}
  #faq .rc-ask .rc-btn{grid-column:3;grid-row:1/3}
}