/* Extra styles for the product pages and /demo, on top of /for/for.css (header, sections, buttons, FAQ, footer). */
.answer{background:var(--accent-soft);border-radius:16px;padding:20px 22px;margin:0 0 28px;color:var(--ink)}
.answer p{margin:0}
.hero .answer{max-width:560px}
.h-small{font-size:20px;margin:0 0 12px}
.cover{margin:0 0 20px;padding-left:22px}
.cover li{margin-bottom:8px}
.cover b{color:var(--ink)}

/* /demo: the booking calendar beside the copy */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.booking{position:sticky;top:96px}
.cal{min-width:300px;height:700px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cal-fallback{margin-top:10px;text-align:center}

/* Product pages */
.lead-wide{max-width:680px}
.ftable{width:100%;border-collapse:separate;border-spacing:0;margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:16px}
.ftable th,.ftable td{text-align:left;vertical-align:top;padding:16px 20px;border-bottom:1px solid var(--line)}
.ftable thead th{background:var(--surface);font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ftable tbody th{color:var(--ink);font-weight:700;width:32%}
.ftable tr:last-child th,.ftable tr:last-child td{border-bottom:0}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps.five{grid-template-columns:repeat(5,1fr)}
.prompts{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prompts li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink);font-size:16px}
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.related a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink);text-decoration:none;font-weight:600}
.related a span{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}
.related a:hover{border-color:var(--ink)}

@media (max-width:900px){
  .steps.five{grid-template-columns:repeat(2,1fr)}
  .steps.three{grid-template-columns:1fr}
  .related{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .demo-grid{grid-template-columns:1fr;gap:32px}
  .booking{position:static}
  .cal{height:1000px}
  .prompts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .steps.five{grid-template-columns:1fr}
  .related{grid-template-columns:1fr}
  .ftable{font-size:15px}
  .ftable th,.ftable td{padding:12px 14px}
  .ftable tbody th{width:38%}
}
.narrow-hero{max-width:860px}