/* AZRS guide section (partials/seo_section.html), styled like the Tool-*.dc.html samples. */

.qf-preview{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2.2rem;align-items:center}
.qf-browser{max-width:480px;width:100%;margin:0 auto;border-radius:13px;overflow:hidden;background:#0f172a;box-shadow:0 20px 46px -26px rgba(15,23,42,.4),0 1px 4px rgba(15,23,42,.06);border:1px solid #1e293b;transition:transform .3s ease,box-shadow .3s ease}
.qf-browser:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 28px 56px -24px rgba(79,70,229,.32)}
.qf-browser-bar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:linear-gradient(180deg,#1e293b,#161f30)}
.qf-browser-dots{display:flex;gap:5px;flex:none}
.qf-browser-dots i{width:8px;height:8px;border-radius:50%;display:block}
.qf-browser-dots i:nth-child(1){background:#f87171}
.qf-browser-dots i:nth-child(2){background:#fbbf24}
.qf-browser-dots i:nth-child(3){background:#34d399}
.qf-browser-addr{flex:1;background:rgba(255,255,255,.07);border-radius:6px;padding:4px 9px;font-size:.65rem;color:#94a3b8;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.qf-browser-addr i{color:#4ade80;font-size:.6rem;flex:none}
.qf-browser-body{background:#eef2f7;padding:10px}
.qf-browser-body img{display:block;width:100%;height:auto;border-radius:7px;box-shadow:0 1px 3px rgba(15,23,42,.1)}
.qf-preview-steps{display:flex;flex-direction:column;gap:1.1rem}
.qf-preview-step{display:flex;gap:.85rem;align-items:flex-start}
.qf-preview-step b{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#06b6d4);color:#fff;font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.qf-preview-step span{font-size:.92rem;color:#334155;line-height:1.55;padding-top:.15rem}
@media (max-width:760px){
  .qf-preview{grid-template-columns:1fr;gap:1.6rem}
  .qf-browser{max-width:420px}
}
/* Multi-step real-screenshot walkthrough — used instead of the single preview
   when 2+ real captured states exist for a tool (e.g. before/after, input/result). */
.qf-walk{display:flex;align-items:flex-start;justify-content:center;gap:0;flex-wrap:wrap;margin:1.4rem 0 .4rem}
.qf-walk-frame{display:flex;flex-direction:column;align-items:center;width:min(300px,88vw)}
.qf-walk-browser{width:100%;border-radius:11px;overflow:hidden;background:#0f172a;box-shadow:0 16px 34px -20px rgba(15,23,42,.4);border:1px solid #1e293b;transition:transform .25s ease,box-shadow .25s ease}
.qf-walk-browser:hover{transform:translateY(-3px);box-shadow:0 22px 40px -18px rgba(79,70,229,.3)}
.qf-walk-bar{display:flex;align-items:center;gap:5px;padding:6px 8px;background:linear-gradient(180deg,#1e293b,#161f30)}
.qf-walk-bar i{width:6px;height:6px;border-radius:50%;display:block}
.qf-walk-bar i:nth-child(1){background:#f87171}.qf-walk-bar i:nth-child(2){background:#fbbf24}.qf-walk-bar i:nth-child(3){background:#34d399}
.qf-walk-body{background:#eef2f7;padding:7px;position:relative}
.qf-walk-body img{display:block;width:100%;height:auto;border-radius:5px}
.qf-walk-badge{position:absolute;top:-10px;left:-10px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#06b6d4);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(79,70,229,.4);z-index:2}
.qf-walk-cap{margin-top:.7rem;font-size:.86rem;font-weight:600;color:#334155;text-align:center;line-height:1.4;max-width:270px}
.qf-walk-arrow{flex:none;align-self:center;color:#94a3b8;font-size:1.4rem;padding:0 .4rem;margin-top:60px}
.qf-walk-cta{position:absolute;bottom:10px;right:10px;background:#0f172a;color:#fff;font-size:.68rem;font-weight:800;padding:.32rem .6rem .32rem .5rem;border-radius:999px;display:flex;align-items:center;gap:.3rem;box-shadow:0 6px 14px rgba(15,23,42,.35);animation:qfPulse 1.8s ease-in-out infinite}
.qf-walk-cta svg{width:11px;height:11px}
@keyframes qfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (max-width:760px){
  .qf-walk-arrow{align-self:center;margin-top:0;transform:rotate(90deg)}
}

.azg{--g-a:#5B4BFF;--g-ink:#4A3BE0;--g-line:rgba(14,18,38,.1);background:linear-gradient(180deg,#F6F7FC,#fff 35%);padding:40px 0 20px;font-family:'Inter',system-ui,sans-serif;color:#434862;overflow:clip}
.azg *{box-sizing:border-box}
.azg-in{max-width:1180px;margin:0 auto;padding:0 20px}
.azg-blk{padding-top:56px}@media(min-width:980px){.azg-blk{padding-top:84px}}
.azg-kick{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g-ink);background:rgba(91,75,255,.1);padding:7px 14px;border-radius:999px;margin-bottom:14px}
.azg-h2{margin:0 0 22px;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:800;font-size:clamp(1.6rem,4.4vw,2.6rem);letter-spacing:-.03em;line-height:1.1;color:#0E1226;max-width:22em;text-align:left !important;padding:0 !important}
.azg-intro p{text-align:left;margin:0 0 14px;font-size:1.05rem;line-height:1.7;color:#434862;max-width:46em}
.azg-steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.azg-step{background:#fff;border:1px solid var(--g-line);border-radius:28px;padding:26px;box-shadow:0 24px 50px -32px rgba(50,60,140,.5);transform-style:preserve-3d;transition:transform .25s,box-shadow .25s}
.azg-step i{font-style:normal;width:46px;height:46px;border-radius:15px;background:var(--g-a);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-family:'Plus Jakarta Sans',sans-serif}
.azg-step p{margin:0;font-size:1rem;color:#0E1226;font-weight:500;line-height:1.55}
.azg-step:hover,.azg-card:hover{transform:translateY(-6px) rotateX(4deg);box-shadow:0 34px 56px -28px rgba(91,75,255,.4)}
.azg-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.azg-grid-s{margin-top:18px}
.azg-card{background:#fff;border:1px solid var(--g-line);border-radius:26px;padding:24px;transform-style:preserve-3d;transition:transform .25s,box-shadow .25s;box-shadow:0 20px 44px -34px rgba(50,60,140,.45)}
.azg-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px;background:#EDEAFF;color:#4A3BE0;font-family:'Plus Jakarta Sans',sans-serif}
.azg-card:nth-child(4n+2) .azg-ic{background:#E0F7FD;color:#0A7EA4}.azg-card:nth-child(4n+3) .azg-ic{background:#FFE9E2;color:#C2410C}.azg-card:nth-child(4n) .azg-ic{background:#EEFBC9;color:#4E7A00}
.azg-card h3{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.08rem;color:#0E1226}
.azg-card p{margin:6px 0 0;font-size:15px;color:#434862;line-height:1.55}
.azg-ex{display:grid;gap:14px;align-items:stretch}@media(min-width:800px){.azg-ex{grid-template-columns:1fr 60px 1fr;gap:0}}
.azg-excard{background:#fff;border:1px solid var(--g-line);border-radius:28px;padding:26px;min-width:0}
.azg-excard small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:10px}
.azg-in-line{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.25rem;color:#0E1226;line-height:1.35}
.azg-out{background:#0E1226;color:#fff;border-color:transparent}
.azg-out pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,monospace;font-size:.95rem;line-height:1.7;color:#E9EAF5}
.azg-exarrow{display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--g-a)}
@media(max-width:799px){.azg-exarrow{transform:rotate(90deg);padding:4px 0}}
.azg-who{display:flex;flex-wrap:wrap;gap:10px}
.azg-pill{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;background:#fff;border:1px solid var(--g-line);font-weight:600;color:#0E1226}
.azg-tm{display:grid;gap:14px}@media(min-width:800px){.azg-tm{grid-template-columns:1fr 1fr}}
.azg-box{border-radius:28px;padding:26px}
.azg-tips{background:rgba(182,240,60,.25)}.azg-miss{background:rgba(255,107,74,.14)}
.azg-box h3{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.25rem;color:#0E1226}
.azg-box ul{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;color:#434862}
.azg-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 16px}
.azg-links a{color:var(--g-ink);font-weight:600;font-size:.95rem;text-decoration:none}.azg-links a::before{content:'\2192 ';}
.azg-faq details{background:#fff;border:1px solid var(--g-line);border-radius:22px;margin-bottom:10px;padding:0 22px;transition:box-shadow .2s,border-color .2s}
.azg-faq details[open]{border-color:#d9d5ff;box-shadow:0 20px 40px -28px rgba(91,75,255,.4)}
.azg-faq summary{list-style:none;cursor:pointer;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;font-size:1.02rem;color:#0E1226}
.azg-faq summary::-webkit-details-marker{display:none}
.azg-faq summary::after{content:'+';font-size:26px;color:var(--g-a);transition:transform .2s}
.azg-faq details[open] summary::after{transform:rotate(45deg)}
.azg-faq details p{margin:0 0 20px;color:#434862;line-height:1.65}
.azg-cta{border-radius:36px;padding:34px 26px;background:linear-gradient(135deg,#5B4BFF,#00B8E6);color:#fff;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
@media(min-width:800px){.azg-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:44px 48px}}
.azg-cta h3{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:-.03em;max-width:16em;color:#fff}
.azg-cta p{margin:6px 0 0;opacity:.92;color:#fff}
.azg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:#0E1226;color:#fff;font-weight:700;text-decoration:none;transition:transform .15s}
.azg-btn:hover{transform:translateY(-2px);color:#fff}
.azg .qf-browser,.azg .qf-walk-browser{border-radius:24px}
@media (prefers-reduced-motion:reduce){.azg-step:hover,.azg-card:hover{transform:none}}

/* ===== full 3D scroll kit for the guide (scroll-driven, reduced-motion safe) ===== */
.azg{position:relative;isolation:isolate}
.azg::before,.azg::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(10px)}
.azg::before{width:520px;height:520px;right:-160px;top:6%;background:radial-gradient(circle at 35% 35%,rgba(91,75,255,.22),transparent 68%)}
.azg::after{width:460px;height:460px;left:-170px;top:48%;background:radial-gradient(circle at 60% 40%,rgba(0,184,230,.2),transparent 68%)}
.azg-blk{perspective:1200px;perspective-origin:50% 30%}
.azg-step,.azg-card,.azg-box,.azg-excard,.azg-cta{transform-style:preserve-3d;will-change:transform}
.azg-card,.azg-step{position:relative;overflow:hidden}
.azg-card::after,.azg-step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.7),transparent 60%)}
.azg-card:hover::after,.azg-step:hover::after{opacity:.55}
.azg-kick{transition:transform .3s}
@supports (animation-timeline:view()){
  .azg::before{animation:azgo1 linear both;animation-timeline:scroll(root);animation-range:0 100%}
  .azg::after{animation:azgo2 linear both;animation-timeline:scroll(root);animation-range:0 100%}
  @keyframes azgo1{from{transform:translate3d(0,-60px,0) scale(.8)}to{transform:translate3d(-80px,900px,0) scale(1.35)}}
  @keyframes azgo2{from{transform:translate3d(0,80px,0) scale(1.2)}to{transform:translate3d(100px,-700px,0) scale(.8)}}
  .azg .azg-kick{animation:azgk linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  @keyframes azgk{from{opacity:0;transform:translateX(-40px) rotateY(40deg)}to{opacity:1;transform:none}}
  .azg .azg-h2{animation:azgh linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
  @keyframes azgh{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(34px) rotateX(24deg)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
  .azg .azg-intro p{animation:azrv linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  /* steps: flip up from depth, staggered */
  .azg .azg-step{animation:azgstep linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .azg .azg-step:nth-child(2){animation-range:entry 8% entry 78%}.azg .azg-step:nth-child(3){animation-range:entry 16% entry 86%}.azg .azg-step:nth-child(4){animation-range:entry 24% entry 94%}
  @keyframes azgstep{from{opacity:0;transform:rotateX(-38deg) translateY(60px) translateZ(-140px) scale(.92)}to{opacity:1;transform:none}}
  /* feature cards: alternate hinge */
  .azg .azg-card{animation:azgcard linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .azg .azg-card:nth-child(even){animation-name:azgcard2}
  .azg .azg-card:nth-child(3n){animation-range:entry 10% entry 80%}
  @keyframes azgcard{from{opacity:0;transform:rotateY(32deg) translateX(60px) translateZ(-120px)}to{opacity:1;transform:none}}
  @keyframes azgcard2{from{opacity:0;transform:rotateY(-32deg) translateX(-60px) translateZ(-120px)}to{opacity:1;transform:none}}
  /* example: two cards swing in, arrow pops */
  .azg .azg-excard:not(.azg-out){animation:azgl linear both;animation-timeline:view();animation-range:entry 0% entry 75%;transform-origin:right center}
  .azg .azg-out{animation:azgr linear both;animation-timeline:view();animation-range:entry 5% entry 80%;transform-origin:left center}
  .azg .azg-exarrow{animation:azga linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
  @keyframes azgl{from{opacity:0;transform:rotateY(38deg) translateX(-70px)}to{opacity:1;transform:none}}
  @keyframes azgr{from{opacity:0;transform:rotateY(-38deg) translateX(70px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes azga{from{opacity:0;transform:scale(.2) rotate(-90deg)}to{opacity:1;transform:none}}
  /* tips / mistakes: double doors */
  .azg .azg-tips{animation:azgdl linear both;animation-timeline:view();animation-range:entry 0% entry 75%;transform-origin:left center}
  .azg .azg-miss{animation:azgdr linear both;animation-timeline:view();animation-range:entry 0% entry 75%;transform-origin:right center}
  @keyframes azgdl{from{opacity:0;transform:rotateY(42deg)}to{opacity:1;transform:none}}
  @keyframes azgdr{from{opacity:0;transform:rotateY(-42deg)}to{opacity:1;transform:none}}
  .azg .azg-pill{animation:azgp linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes azgp{from{opacity:0;transform:translateY(26px) scale(.8)}to{opacity:1;transform:none}}
  .azg .azg-faq details{animation:azrv2 linear both;animation-timeline:view();animation-range:entry 0% entry 65%}
  .azg .azg-faq details:nth-of-type(even){animation-name:azrv3}
  .azg .azg-cta{animation:azgcta linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  @keyframes azgcta{from{opacity:0;transform:perspective(1000px) rotateX(24deg) translateY(70px) scale(.9)}to{opacity:1;transform:none}}
  .azg-cta::before,.azg-cta::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.16);pointer-events:none}
  .azg-cta{position:relative;overflow:hidden}
  .azg-cta::before{width:240px;height:240px;right:-60px;top:-90px;animation:azgf1 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .azg-cta::after{width:140px;height:140px;left:30%;bottom:-70px;animation:azgf2 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes azgf1{from{transform:translate(40px,40px)}to{transform:translate(-60px,-30px) scale(1.3)}}
  @keyframes azgf2{from{transform:translate(-30px,30px)}to{transform:translate(50px,-20px) scale(1.4)}}
}
/* cta fallback decorations without scroll timeline */
.azg-cta{position:relative;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .azg::before,.azg::after,.azg .azg-kick,.azg .azg-h2,.azg .azg-intro p,.azg .azg-step,.azg .azg-card,.azg .azg-excard,.azg .azg-out,.azg .azg-exarrow,.azg .azg-tips,.azg .azg-miss,.azg .azg-pill,.azg .azg-faq details,.azg .azg-cta,.azg-cta::before,.azg-cta::after{animation:none !important;opacity:1 !important;clip-path:none !important;transform:none !important}
}