/* ==========================================================================
   HelpGent — "Solutions" template styles (loaded after common.css)
   Section order: find your solution · pick the job · templates.
   Shared from common.css: the page hero + product preview, section head (.fhead),
   "more" link (.flink), template tile illustrations (.tpl__tile), template cards (.stpl), FAQ, newsletter.
   ========================================================================== */

.ssec{scroll-margin-top:84px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* icon — two-tone line, currentColor (same drawing as the homepage showcase tabs) */
.sol-ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sol-ic .t{fill:currentColor;fill-opacity:.16;stroke:none}
.sol-ic .d{fill:currentColor;stroke:none}

/* ── 2 · find your solution — 3 × 3 cards; the whole card is the link ── */
.sol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:52px 0 0;padding:0;list-style:none}
.sol__card{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border-radius:24px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-card);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.sol__card:has(.sol__link):hover{transform:translateY(-3px);border-color:var(--line-accent);box-shadow:var(--shadow-raise)}
.sol__ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:20px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.sol__card h3{font-size:var(--fs-h3-lg);margin-bottom:8px}
.sol__card p{font-size:16px;line-height:1.6;color:var(--text-2)}
.sol__link{margin-top:auto;padding-top:18px;font-size:15px;font-weight:600;color:var(--text);text-decoration:none;transition:color .25s}
.sol__link::after{content:"";position:absolute;inset:0;border-radius:inherit}   /* stretch the link over the card */
.sol__link span[aria-hidden]{display:inline-block;transition:transform .25s}
.sol__card:hover .sol__link{color:var(--accent);text-decoration:none}
.sol__card:hover .sol__link span[aria-hidden]{transform:translateX(4px)}
.sol__link:focus-visible{box-shadow:none}
.sol__link:focus-visible::after{box-shadow:var(--ring)}

/* ── 3 · pick the job — vertical tabs left, the job's panel right ── */
.jobs{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:24px;align-items:start;margin-top:52px}
.jobs__tabs{display:grid;gap:4px;padding:8px;border-radius:24px;background:#fff;border:1px solid var(--line)}
.jobs__tab{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:14px;background:none;cursor:pointer;
  font-family:var(--font);font-size:15.5px;font-weight:500;line-height:1.3;text-align:left;color:var(--text-2);transition:background var(--t-ui),color var(--t-ui)}
.jobs__tab .sol-ic{width:20px;height:20px;color:var(--text-3);transition:color var(--t-ui)}
.jobs__tab:hover{color:var(--text);background:var(--tint)}
.jobs__tab[aria-selected="true"]{color:var(--text);font-weight:600;background:var(--accent-soft)}
.jobs__tab[aria-selected="true"] .sol-ic,.jobs__tab:hover .sol-ic{color:var(--accent)}
.jobs__panel{padding:clamp(28px,4vw,48px);border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card)}
.jobs__visual{margin:-4px 0 26px;max-width:520px;max-height:230px}.jobs__visual-asset{display:block;width:100%;height:230px;object-fit:contain;border-radius:16px}
.jobs__panel:not([hidden]){animation:up .35s ease}
.jobs__panel:focus-visible{border-radius:24px}
.jobs__name{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-size:15px;font-weight:600;color:var(--accent)}
.jobs__name .sol-ic{width:18px;height:18px}
.jobs__panel h3{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);text-wrap:balance;max-width:620px}
.jobs__panel>p:not(.jobs__kit){margin-top:14px;max-width:620px;color:var(--text-2)}
.jobs__kit{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--text-3)}
.jobs__tools{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.jobs__tools li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--tint);border:1px solid var(--line);
  font-size:15.5px;font-weight:500;line-height:1.35;color:var(--text)}
.jobs__tools svg{width:34px;height:34px;padding:8px;flex:none;border-radius:9px;background:#fff;box-shadow:var(--shadow-card);
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jobs__tools svg .f{fill:var(--accent);stroke:none}

/* ── responsive ── */
@media (max-width:980px){
  .jobs{grid-template-columns:1fr}
  /* tabs become a scrollable row of pills above the panel */
  .jobs__tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-radius:16px;-webkit-overflow-scrolling:touch}
  .jobs__tabs::-webkit-scrollbar{display:none}
  .jobs__tab{width:auto;flex:none;white-space:nowrap;padding:10px 14px;border-radius:10px}
}
@media (max-width:760px){   /* nine cards: three even rows until here, then pairs with a full-width last card */
  .sol{grid-template-columns:1fr 1fr}
  .sol>:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){
  .sol,.jobs__tools{grid-template-columns:1fr}
  .sol__card{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .sol__card,.jobs__panel{transition:none;animation:none}
}