/* /contact/ — loaded only by page-contact.hbs (via the "head" block in
   home-layout.hbs) on top of home.css, so the tokens below (--paper, --white,
   --line, --green, --ink, --grey, --muted, --serif, --mono) come from there. */

/* Hero: intro and the Product Hunt callout beside a tall framed photo. */
.ct-hero .hero-grid{align-items:start}
.ct-hero h1{font-size:clamp(2.2rem,5vw,3.4rem);max-width:15ch}
.ct-hero .lede{margin-bottom:28px}
.ct-callout{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px 26px}
.ct-callout p{font-family:var(--serif);color:var(--grey);line-height:1.7;margin:0 0 20px}
.ct-callout strong{color:var(--ink)}
.ct-callout a:not(.btn),.ct-checklist a,.cta-note a,.ct-faq a,.ct-tier a,.ct-subjects a{color:var(--green);text-underline-offset:3px}
.ct-photo{margin:0;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:10px}
.ct-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%;border-radius:10px;background:#e6e6e6}
.ct-photo figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);padding:10px 4px 2px}
.ct-photo figcaption a{color:inherit;text-underline-offset:3px}

/* Product Hunt: the checklist, then the FAQ as three cards. */
.ct-checklist{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:8px}
.ct-checklist li{position:relative;padding-left:28px;font-family:var(--serif);color:var(--grey);line-height:1.6}
.ct-checklist li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--green)}
.ct-faq-head{font-size:1.25rem;letter-spacing:-.02em;margin:48px 0 16px}
.ct-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-faq>div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px}
.ct-faq h4{font-size:1rem;line-height:1.35;letter-spacing:-.01em;margin:0 0 10px}
.ct-faq p{font-family:var(--serif);font-size:.95rem;line-height:1.65;color:var(--grey);margin:0}
.ct-gap{margin-top:28px}

/* Tips: response times beside subject-line advice. */
.ct-tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.ct-tips h2 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em}
.ct-note{font-family:var(--serif);color:var(--grey);margin:-8px 0 24px}
.ct-tier,.ct-subjects{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:14px}
.ct-tier-label,.ct-subjects-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:0 0 10px;font-weight:600}
.ct-tier-label span{color:var(--muted);font-weight:500;margin-left:6px}
.ct-subjects.is-weak .ct-subjects-label{color:#a3362a}
.ct-tier ul,.ct-subjects ul{margin:0;padding-left:20px}
.ct-tier li,.ct-subjects li{font-size:.97rem;line-height:1.5;margin:5px 0}
.ct-subjects.is-weak li{color:var(--muted)}
.ct-key{font-family:var(--serif);color:var(--grey);line-height:1.7;margin:-8px 0 24px}
.ct-key strong{color:var(--ink)}

@media (max-width:900px){
  .ct-faq{grid-template-columns:1fr}
  .ct-tips-grid{grid-template-columns:1fr;gap:40px}
  .ct-photo{max-width:420px}
}
@media (max-width:640px){
  .ct-callout{padding:20px}
}