/* ==========================================================================
   HelpGent — "Features A" template styles (loaded after common.css)
   Section order: side rail · Video Funnels · more ways to answer · HelpGent AI ·
   publish · connect. The hero + product preview are shared, in common.css.
   ========================================================================== */

/* side rail — wide desktop only: quiet tick marks on the left edge, labels on hover */
.frail{display:none}
@media (min-width:1360px){
  .frail{position:fixed;left:20px;top:50%;z-index:40;display:grid;gap:2px;padding:10px 14px 10px 8px;border-radius:14px;
    transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,background .25s,box-shadow .25s}
  .frail.is-shown{opacity:1;visibility:visible}
  .frail:hover,.frail:focus-within{background:#fff;box-shadow:var(--shadow-card)}
  .frail a{display:flex;align-items:center;gap:12px;height:26px;font-size:14px;font-weight:600;color:var(--text-2);text-decoration:none;white-space:nowrap}
  .frail a::before{content:"";width:20px;height:3px;border-radius:3px;background:var(--text-3);flex:none;transition:width .3s,background .3s}
  .frail a:hover::before{background:var(--accent)}
  .frail a.is-on{color:var(--text)}
  .frail a.is-on::before{width:40px;background:var(--accent)}
  .frail a:hover{color:var(--accent)}
  .frail span{max-width:0;overflow:hidden;opacity:0;transition:max-width .35s ease,opacity .25s}
  .frail:hover span,.frail:focus-within span{max-width:220px;opacity:1}
}
.fsec{scroll-margin-top:84px}

/* section head (.fhead) + "more" link (.flink) are in common.css — shared with the Solutions page */
.ways__copy .lead,.con__copy .lead{margin-top:16px}
.vfa-ln{display:block;height:6px;border-radius:4px;background:var(--line-2)}
.vfa-ln--s{width:62%;background:var(--line)}

/* ── Video Funnels: four steps on one dashed path ── */
.vf{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:56px 0 0;padding:0;list-style:none}
.vf::before{content:"";position:absolute;left:12%;right:12%;top:86px;border-top:1.6px dashed color-mix(in srgb,var(--accent) 45%,#fff)}
.vf__step{position:relative}
.vf__art{position:relative;height:172px;display:grid;place-items:center;margin-bottom:22px;border-radius:var(--radius-lg);
  background:linear-gradient(165deg,var(--accent-soft),#fff 75%);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.vf__step h3{font-size:var(--fs-h3-lg);margin-bottom:8px}
.vf__step p{font-size:16px;line-height:1.6;color:var(--text-2)}
/* step visuals */
.vfa-media{position:relative;width:62%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--dark);box-shadow:0 10px 22px rgb(var(--dark-rgb) / .18)}
.vfa-media img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
.vfa-media__play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88)}
.vfa-media__play svg{width:14px;height:14px;fill:var(--accent);margin-left:2px}
.vfa-media__bar{position:absolute;left:8px;right:8px;bottom:7px;height:3px;border-radius:3px;background:rgba(255,255,255,.4);overflow:hidden}
.vfa-media__bar::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;animation:fv-play 5s linear infinite}
.vfa-step{width:66%;display:grid;gap:9px;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 22px rgb(var(--dark-rgb) / .08)}
.vfa-step__prog{display:flex;gap:4px}
.vfa-step__prog i{flex:1;height:4px;border-radius:3px;background:var(--line)}
.vfa-step__prog i.on{background:var(--accent)}
.vfa-step__input{height:22px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 40%,#fff);box-shadow:0 0 0 3px var(--accent-soft)}
.vfa-step__next{justify-self:end;display:grid;place-items:center;width:34px;height:22px;border-radius:7px;background:var(--accent)}
.vfa-step__next svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vfa-branch{width:74%;display:grid;justify-items:center}
.vfa-branch__q{width:52%;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgb(var(--dark-rgb) / .08)}
.vfa-branch__lines{width:100%;height:34px;overflow:visible}
.vfa-branch__lines path{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,#fff);stroke-width:1.6;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;animation:why-flow 1.4s linear infinite}
.vfa-branch__ends{display:flex;justify-content:space-between;width:100%}
.vfa-branch__ends span{width:40%;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.vfa-branch__ends span.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.vfa-branch__ends span:not(.on){opacity:.55}
.vfa-out{width:62%;display:grid;justify-items:center;gap:10px;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 22px rgb(var(--dark-rgb) / .08)}
.vfa-out__check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ok,#2E9E4E)}
.vfa-out__check svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vfa-out__cal{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%}
.vfa-out__cal i{aspect-ratio:1;border-radius:4px;background:var(--paper)}
.vfa-out__cal i.on{background:var(--accent)}
.vfa-out__btn{width:70%;height:14px;border-radius:5px;background:var(--dark)}

/* ── More ways to answer ── */
.ways{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px 64px;align-items:center}
.ways__board{position:relative;padding:34px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.ways__board--media{display:grid;place-items:center;min-height:360px;padding:18px}.ways__media{display:block;width:100%;height:100%;max-height:420px;object-fit:contain;border-radius:16px}
.ways__num{display:block;margin-bottom:18px;font-size:clamp(3rem,2.4rem + 2.4vw,4.6rem);font-weight:700;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--accent),var(--hue-2) 60%,var(--hue-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.ways__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--paper);border:1px solid var(--line);
  font-size:14px;font-weight:500;color:var(--text)}
.chip svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--text-3)}
.chip--on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,#fff)}
.chip--on svg{color:var(--accent)}
.chip--more{background:transparent;border-style:dashed;color:var(--text-2)}
.ways__list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:8px 0 0;padding:0;list-style:none}
.ways__list li{padding:24px 26px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line)}
.ways__list h3{font-size:var(--fs-h3-lg);margin-bottom:6px}
.ways__list p{font-size:16px;line-height:1.6;color:var(--text-2)}

/* ── HelpGent AI: five cards (reuses the homepage .jv visuals) ── */
.fai__set{display:contents}   /* the four small cards; a swipe row on phones (.swipe-m) */
.fai__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:52px}
.fai__card{--hue:var(--accent);grid-column:span 2;display:flex;flex-direction:column;padding:26px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.fai__card--video{--hue:var(--hue-2)}.fai__card--sum{--hue:var(--hue-3)}
.fai__card--patterns,.fai__card--picture{grid-column:span 3}
.fai__card--dark{background:var(--dark);border-color:var(--dark)}
.fai__card--dark h3{color:#fff}.fai__card--dark p{color:rgba(255,255,255,.72)}
.fai__card h3{font-size:var(--fs-h3-lg);margin-bottom:8px}
.fai__card p{font-size:16px;line-height:1.6;color:var(--text-2)}
.fai__art{position:relative;display:grid;place-items:center;min-height:190px;margin-bottom:22px;padding:18px;border-radius:16px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--hue) 12%,#fff))}
.fai__card--dark .fai__art{background:radial-gradient(ellipse at 50% 120%,rgb(var(--accent-rgb) / .55),transparent 70%)}
.fai .jv{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:340px;transform:none;translate:none}
.fai .jv--video,.fai .jv--sum{max-width:360px}
/* "see the complete picture": a small AI dashboard */
.fdash{display:grid;gap:12px;width:100%;max-width:340px;padding:16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.fdash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fdash__kpis i{height:34px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.fdash__kpis i:first-child{background:linear-gradient(135deg,rgb(var(--accent-rgb) / .55),rgb(var(--hue-2-rgb) / .35))}
.fdash__chart{display:flex;align-items:flex-end;gap:6px;height:64px}
.fdash__chart i{flex:1;height:var(--h);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--accent-tint),var(--accent));opacity:.85;transform-origin:50% 100%;animation:fdash-rise 4s ease-in-out infinite}
.fdash__chart i:nth-child(2n){animation-delay:-.6s}.fdash__chart i:nth-child(3n){animation-delay:-1.2s}
.fdash__rows{display:grid;gap:6px}
.fdash__rows span{display:flex;align-items:center;gap:8px}
.fdash__rows i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);flex:none}
.fdash__rows b{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.14)}
.fdash__rows .hot i{background:var(--hue-3);box-shadow:0 0 0 0 rgb(var(--hue-3-rgb) / .6);animation:jv-ping 1.8s ease-out infinite}
.fdash__rows .hot b{background:rgb(var(--hue-3-rgb) / .45)}
@keyframes fdash-rise{50%{transform:scaleY(.82)}}

/* ── Publish your way: three mini browsers ── */
.pub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.pub__card{padding:22px 22px 26px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.pub__card h3{font-size:var(--fs-h3-lg);margin:22px 0 8px}
.pub__card p{font-size:16px;line-height:1.6;color:var(--text-2)}
.pub__art{border-radius:16px;padding:18px;background:linear-gradient(165deg,var(--accent-soft),var(--paper))}
.brw{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px rgb(var(--dark-rgb) / .10)}
.brw__bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:var(--paper);border-bottom:1px solid var(--line)}
.brw__bar>i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.brw__url{display:flex;align-items:center;gap:6px;flex:1;height:16px;margin-left:8px;padding:0 8px;border-radius:6px;background:#fff;border:1px solid color-mix(in srgb,var(--accent) 40%,#fff)}
.brw__url svg{width:10px;height:10px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.brw__url i{flex:1;height:4px;border-radius:3px;background:var(--line-2)}
.brw__page{position:relative;display:grid;align-content:start;gap:8px;height:150px;padding:14px}
.brw__page--center{place-items:center;align-content:center;background:var(--paper)}
.brw__ln{display:block;height:6px;border-radius:4px;background:var(--line)}
.brw__ln--s{width:60%}
.brw__embed{display:grid;gap:8px;padding:10px;border-radius:9px;border:1.5px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.brw__opts{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.brw__opts span{height:14px;border-radius:5px;border:1px solid var(--line)}
.brw__opts span.on{border-color:var(--accent);background:var(--accent-soft)}
.brw__solo{display:grid;gap:7px;width:62%;padding:9px;border-radius:10px;background:#fff;box-shadow:0 10px 22px rgb(var(--dark-rgb) / .12)}
.brw__solo img{width:100%;height:58px;object-fit:cover;object-position:50% 28%;border-radius:7px;display:block}
.brw__bubble{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);
  box-shadow:0 8px 18px rgb(var(--accent-rgb) / .4);animation:why-pulse 2.6s ease-out infinite}
.brw__bubble svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linejoin:round}
.brw__pop{position:absolute;right:12px;bottom:54px;display:grid;gap:6px;width:46%;padding:9px;border-radius:9px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 22px rgb(var(--dark-rgb) / .12)}

/* ── Connect your workflow: WordPress → your tools ── */
.con{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px 64px;align-items:center}
.con__flow{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.con__src{display:grid;justify-items:center;gap:8px;padding:22px 24px;border-radius:20px;background:var(--dark);color:#fff;box-shadow:var(--shadow-raise)}
.con__mark{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08);color:#fff}
.con__mark svg{width:34px;height:auto}
.con__mark--image{padding:8px}.con__logo-image{width:36px;height:36px;object-fit:contain;border-radius:8px}.con__ic--image{padding:6px}.con__dest-logo{width:24px;height:24px;object-fit:contain;border-radius:5px}
.con__wp{font-size:14px;font-weight:600;color:rgba(255,255,255,.8)}
.con__lines{width:100%;min-width:60px;height:300px;overflow:visible}
.con__lines path{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,#fff);stroke-width:1.6;stroke-dasharray:5 7;vector-effect:non-scaling-stroke;animation:why-flow 1.4s linear infinite}
.con__dest{display:grid;gap:0;height:300px;align-content:space-between;margin:0;padding:0;list-style:none}
.con__dest li{display:flex;align-items:center;gap:12px;min-width:200px;padding:12px 18px 12px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);font-weight:600;color:var(--text)}
.con__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);flex:none}
.con__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.con__ic .t{fill:currentColor;fill-opacity:.2;stroke:none}

@media (max-width:980px){
  .vf{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .vf::before{display:none}
  .fai__grid{grid-template-columns:repeat(2,1fr)}
  .fai__card,.fai__card--patterns,.fai__card--picture{grid-column:span 1}
  .fai__card--picture{grid-column:1 / -1}
  .con{grid-template-columns:1fr}
}
@media (max-width:760px){   /* 3 cards: keep three across until here, then 2 + a full-width third */
  .pub{grid-template-columns:1fr 1fr}
  .pub>:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:860px){
  .ways{grid-template-columns:1fr}
  .ways__list{grid-template-columns:1fr}
}
@media (max-width:860px){
  .findex{grid-template-columns:1fr 1fr;column-gap:20px;margin-top:56px;border-top:0}
  .findex li{border-top:1px solid rgba(255,255,255,.16)}
  .findex a{padding:14px 0}
}
@media (max-width:640px){
  .findex{display:none}   /* phones: hero ends at the CTA, no second menu */
  .vf,.pub,.fai__grid{grid-template-columns:1fr}
  .fai__card--picture{grid-column:auto}
  .con__flow{grid-template-columns:1fr;justify-items:center;gap:0}
  .con__lines{display:none}
  .con__src{margin-bottom:20px}
  .con__dest{height:auto;gap:10px;width:100%}
  .ways__board{padding:24px}
}
@media (prefers-reduced-motion:reduce){.vfa-media__bar::after,.vfa-branch__lines path,.fdash__chart i,.fdash__rows .hot i,.brw__bubble,.con__lines path{animation:none}}

/* ── images chosen in Site Content that replace a card's built-in illustration ── */
.hg-art-img{display:block;width:100%;object-fit:cover}
.vf__art--img{overflow:hidden}
.vf__art--img .hg-art-img{position:absolute;inset:0;width:100%;height:100%} /* keep lazy SVGs inside the 172px step frame */
.fai__art--img .hg-art-img{height:170px;border-radius:12px;box-shadow:var(--shadow-card)}
.pub__art--img .hg-art-img{height:178px;border-radius:12px;border:1px solid var(--line);box-shadow:0 12px 26px rgb(var(--dark-rgb) / .10)}  /* same size as the mini browser */