/* Features page — grouped tool showcase */

.legend{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:26px 0 44px;}
.lg{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;
  padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;}
.lg .p{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;padding:2px 8px;border-radius:20px;}

.grp{margin-bottom:42px;}
.grp-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.grp-head h2{font-size:1.42rem;letter-spacing:-.01em;margin-bottom:0;}
.grp-head .why{font-size:.9rem;color:var(--muted);}

.fgrid-t{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;}

.f{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:16px 17px 15px;text-decoration:none;color:inherit;display:block;overflow:hidden;
  transition:transform .38s var(--ease),box-shadow .38s,border-color .38s;}
.f::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc,var(--primary));
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease-sweep);}
.f:hover{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(40,5,148,.22);}
.f:hover::before{transform:scaleY(1);transform-origin:top;}
.f .ic{width:36px;height:36px;border-radius:10px;background:var(--gb,var(--tint));
  color:var(--gc,var(--primary));display:grid;place-items:center;margin-bottom:11px;transition:all .38s;}
.f .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.f:hover .ic{background:var(--gc,var(--primary));color:#fff;transform:scale(1.07) rotate(-4deg);}
.f .nm{font-weight:600;font-size:.95rem;line-height:1.3;padding-right:52px;}
.f .ds{font-size:.845rem;color:var(--muted);margin-top:5px;line-height:1.5;}
.f .go{margin-top:11px;font-size:.8rem;font-weight:500;color:var(--gc,var(--primary));
  display:inline-flex;align-items:center;gap:5px;opacity:0;transform:translateX(-5px);
  transition:opacity .38s,transform .38s;}
.f:hover .go{opacity:1;transform:none;}
.f .go span{transition:transform .38s;}
.f:hover .go span{transform:translateX(3px);}

.f.isnew{border-color:var(--new-br);background:linear-gradient(180deg,var(--new-sk),#fff 62%);}
.f.isnew:hover{border-color:var(--new);}
.f.isnew::before{background:var(--new);}
.f.issoon{border-color:var(--soon-br);background:linear-gradient(180deg,var(--soon-sk),#fff 62%);}
.f.issoon:hover{border-color:var(--soon);}
.f.issoon::before{background:var(--soon);}
.f.issoon .ic{background:var(--soon-bg);color:var(--soon);}
.f.issoon:hover .ic{background:var(--soon);color:#fff;}

/* ---------- DOS — coming soon grouping ----------
   One "Coming Soon" label on the group rather than a pill on every card:
   tighter, less repetitive, and it reads as one story instead of six gaps.
   Deliberately understated — today's product still has to carry the pitch. */
.grp-dos{background:linear-gradient(180deg,var(--soon-sk),#fff 55%);
  border:1px solid var(--soon-br);border-radius:18px;padding:28px 30px 30px;margin-bottom:42px;}
.grp-dos .dos-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;}
.grp-dos .dos-head h2{font-size:1.42rem;margin-bottom:0;letter-spacing:-.01em;}
.grp-dos .soon-tag{font-size:.63rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;background:var(--soon);padding:4px 11px;border-radius:20px;line-height:1.1;}
.grp-dos .dos-sub{font-size:.97rem;color:var(--muted);max-width:66ch;margin-bottom:20px;}
.grp-dos .dos-sub b{color:var(--ink);font-weight:600;}
.grp-dos .fgrid-t{gap:11px;}
.grp-dos .f{background:#fff;border-color:#EADFC0;}
.grp-dos .f .nm{padding-right:0;}
.grp-dos .f .ic{background:var(--soon-bg);color:var(--soon);}
.grp-dos .f:hover{transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(138,109,0,.28);border-color:var(--soon);}
.grp-dos .f:hover .ic{background:var(--soon);color:#fff;}
.grp-dos .f::before{background:var(--soon);}

.feat-foot{text-align:center;margin-top:52px;padding-top:38px;border-top:1px solid var(--line);}
.feat-foot p{color:var(--muted);margin-bottom:20px;font-size:1rem;}

@media(max-width:640px){
  .grp-head{flex-direction:column;gap:4px;}
}