/* ==========================================================================
   Admin-managed content block on tool pages — includes/tool-content.php
   ========================================================================== */

.tc-section{
  padding:64px 0 76px;
  background:#f7f9fc;
  border-top:1px solid #e7ebf0;
}

.tc-section .container{max-width:900px;}

.tc-h2{
  font-size:clamp(22px,2.4vw,30px);
  font-weight:800;line-height:1.25;
  color:#031D36;margin:0 0 18px;
}
.tc-h3{
  font-size:20px;font-weight:800;
  color:#031D36;margin:0 0 16px;
}

/* ── Intro ───────────────────────────────────────────────────────────────
   Descendant selectors because this is editor output — the markup is whatever
   TinyMCE produced and carries no classes. */
.tc-intro{margin-bottom:44px;}
.tc-intro p{
  font-size:16px;line-height:1.8;color:#41505f;margin:0 0 16px;
}
.tc-intro p:last-child{margin-bottom:0;}
.tc-intro h2,.tc-intro h3,.tc-intro h4{
  color:#031D36;font-weight:800;margin:28px 0 12px;
}
.tc-intro h3{font-size:20px;}
.tc-intro h4{font-size:17px;}
.tc-intro ul,.tc-intro ol{margin:0 0 16px;padding-left:22px;}
.tc-intro li{font-size:16px;line-height:1.75;color:#41505f;margin-bottom:6px;}
.tc-intro a{color:#0A49A6;text-decoration:underline;}
.tc-intro strong{color:#031D36;}
.tc-intro img{max-width:100%;height:auto;border-radius:10px;}

/* ── Features ────────────────────────────────────────────────────────────── */
.tc-features{margin-bottom:44px;}
.tc-features ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
}
.tc-features li{
  display:flex;align-items:flex-start;gap:11px;
  background:#fff;border:1px solid #e7ebf0;border-radius:11px;
  padding:14px 16px;
  font-size:15px;line-height:1.55;color:#031D36;font-weight:600;
}
.tc-features svg{color:#0A49A6;flex:0 0 18px;margin-top:2px;}

/* ── FAQ ─────────────────────────────────────────────────────────────────
   <details> rather than JS accordions: it opens without scripting, is
   keyboard-accessible for free, and a crawler reads the answers whether the
   item is open or closed. */
.tc-faq__item{
  background:#fff;
  border:1px solid #e7ebf0;border-radius:11px;
  margin-bottom:10px;
  overflow:hidden;
}
.tc-faq__item summary{
  cursor:pointer;list-style:none;
  padding:16px 46px 16px 18px;
  position:relative;
  font-size:15.5px;font-weight:700;color:#031D36;
}
.tc-faq__item summary::-webkit-details-marker{display:none;}
.tc-faq__item summary::after{
  content:'';
  position:absolute;right:20px;top:50%;
  width:9px;height:9px;
  border-right:2px solid #0A49A6;border-bottom:2px solid #0A49A6;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.tc-faq__item[open] summary::after{transform:translateY(-30%) rotate(225deg);}
.tc-faq__item summary:hover{background:#f7f9fc;}
.tc-faq__item summary:focus-visible{outline:2px solid #0A49A6;outline-offset:-2px;}

.tc-faq__a{
  padding:0 18px 18px;
  font-size:15px;line-height:1.75;color:#41505f;
}

@media (max-width:640px){
  .tc-section{padding:44px 0 52px;}
  .tc-intro{margin-bottom:32px;}
  .tc-features{margin-bottom:32px;}
  .tc-features ul{grid-template-columns:1fr;}
  .tc-faq__item summary{padding:14px 40px 14px 15px;font-size:15px;}
  .tc-faq__a{padding:0 15px 15px;}
}

@media (prefers-reduced-motion:reduce){
  .tc-faq__item summary::after{transition:none;}
}