/* ==========================================================================
   AgencyFix Section layer (afx-sections.css) — the repeating structural blocks
   doc 169 defines, as plugin-owned components so pages supply COPY ONLY:
     .afxsteps     4-step TIMELINE with gradient number badges
     .afxguar      GUARANTEE dark band (radial glow over ink)
     .afxfaq       FAQ accordion (native <details>, SEO-deep, no JS)
     .afxprice     PRICING card grid
   Extracted from /local-seo/ (#ls), cross-checked against /websites/ (#wb).
   Uses the afx.css tokens (--ac/--ac2/--ink/--line/--soft…) so it stays in
   lockstep with the design system and every white-label client site. Scoped
   to .afx; loads site-wide after afx.css.
   ========================================================================== */

/* ---- STEPS (numbered timeline) ------------------------------------------- */
.afx .afxsteps .steps{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr;counter-reset:afxstep;}
@media(min-width:680px){.afx .afxsteps .steps{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.afx .afxsteps .steps{grid-template-columns:repeat(4,1fr);}}
.afx .afxsteps .step{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.2rem,2vw,1.5rem);}
.afx .afxsteps .step .num{counter-increment:afxstep;display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:12px;font-weight:800;font-size:1.05rem;color:#fff;
  background:linear-gradient(135deg,var(--ac),var(--ac-d));
  box-shadow:0 12px 26px -12px var(--glow);margin-bottom:.9rem;}
.afx .afxsteps .step .num::before{content:counter(afxstep);}
.afx .afxsteps .step h3{margin:0 0 .35rem;}
.afx .afxsteps .step p{color:var(--muted);font-size:1rem;line-height:1.55;}
/* Connector line between steps on wide screens. */
@media(min-width:1000px){
  .afx .afxsteps .step:not(:last-child)::after{content:"";position:absolute;top:calc(1.2rem + 22px);
    right:calc(-1 * clamp(16px,2vw,26px) / 2 - 1px);width:clamp(16px,2vw,26px);height:2px;
    background:linear-gradient(90deg,var(--ac),var(--ac2));opacity:.5;}
}

/* ---- GUARANTEE (dark band with glow) ------------------------------------- */
.afx .afxguar .guar{position:relative;overflow:hidden;border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(680px 300px at 15% 0,rgba(99,102,241,.32),transparent 60%),
             radial-gradient(560px 280px at 92% 110%,rgba(34,211,238,.22),transparent 60%),
             linear-gradient(180deg,#0e1219,#0a0c10);
  padding:clamp(2.2rem,5vw,3.8rem) clamp(1.4rem,4vw,3rem);text-align:center;}
.afx .afxguar .guar .eyebrow{color:var(--ac2);justify-content:center;}
.afx .afxguar .guar h2{color:#fff;max-width:760px;margin:var(--sp-stack) auto 0;}
.afx .afxguar .guar p{color:#aab2c0;max-width:600px;margin:var(--sp-head-copy) auto 0;
  font-size:clamp(1.05rem,1.5vw,1.2rem);}
.afx .afxguar .guar .btn-row{justify-content:center;margin-top:var(--sp-copy-cta);}
.afx .afxguar .seal{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;
  margin:0 auto;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;
  box-shadow:0 18px 40px -14px var(--glow);}
.afx .afxguar .seal svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;}

/* ---- FAQ (native accordion, no JS) --------------------------------------- */
.afx .afxfaq .faq{max-width:820px;margin:0 auto;display:grid;gap:.7rem;}
.afx .afxfaq .qa{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;}
.afx .afxfaq .qa[open]{border-color:#dde0ea;box-shadow:var(--shadow-card);}
.afx .afxfaq .qa>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;
  padding:1.05rem 1.2rem;font-weight:700;font-size:1.05rem;color:var(--ink);}
.afx .afxfaq .qa>summary::-webkit-details-marker{display:none;}
.afx .afxfaq .qa>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:12px;height:12px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s;}
.afx .afxfaq .qa[open]>summary::after{transform:rotate(-135deg);}
.afx .afxfaq .qa .a{padding:0 1.2rem 1.15rem;color:var(--muted);font-size:1.02rem;line-height:1.6;}

/* ---- PRICING (card grid) ------------------------------------------------- */
.afx .afxprice .plans{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:1fr;align-items:stretch;}
@media(min-width:680px){.afx .afxprice .plans{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.afx .afxprice .plans{grid-template-columns:repeat(3,1fr);}}
.afx .afxprice .plan{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.4rem,2.4vw,1.9rem);}
.afx .afxprice .plan.feat{border-color:rgba(99,102,241,.4);box-shadow:var(--shadow-card);position:relative;}
.afx .afxprice .plan.feat::before{content:"Most popular";position:absolute;top:-11px;left:50%;
  transform:translateX(-50%);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--ac),var(--ac-d));padding:.28rem .7rem;border-radius:999px;}
.afx .afxprice .plan .pname{font-weight:800;font-size:1.05rem;color:var(--ink);}
.afx .afxprice .plan .price{font-size:clamp(2rem,4vw,2.6rem);font-weight:850;letter-spacing:-.02em;
  color:var(--ink);margin:.5rem 0 .1rem;}
.afx .afxprice .plan .price small{font-size:.9rem;font-weight:600;color:var(--muted);}
.afx .afxprice .plan .pblurb{color:var(--muted);font-size:.98rem;margin-bottom:1rem;}
.afx .afxprice .plan ul{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.55rem;}
.afx .afxprice .plan li{position:relative;padding-left:1.6rem;font-size:.98rem;color:var(--ink2);}
.afx .afxprice .plan li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2px solid var(--ac);border-bottom:2px solid var(--ac);transform:rotate(-45deg);}
.afx .afxprice .plan .btn{margin-top:auto;width:100%;justify-content:center;}