.fx-reveal{opacity:1!important;transform:none!important}
.hx3-find{background:#0f1b3d;color:#fff;padding:72px 0;position:relative;overflow:hidden}
.hx3-find .wrap{position:relative;z-index:2;text-align:center}
.hx3-find-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hx3-find-orb{position:absolute;border-radius:50%;opacity:.55}
.hx3-find-orb-1{width:22px;height:22px;left:4%;top:28%;background:radial-gradient(circle at 35% 30%,#60a5fa,#2563eb);box-shadow:0 0 14px rgba(37,99,235,.35)}
.hx3-find-orb-2{width:14px;height:14px;right:18%;top:20%;background:radial-gradient(circle at 35% 30%,#a78bfa,#7c3aed);box-shadow:0 0 10px rgba(124,58,237,.35)}
.hx3-find-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 22px;border-radius:999px;border:1px solid rgba(124,58,237,.5);background:rgba(124,58,237,.14);color:#c4b5fd;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.hx3-find h2{font-size:clamp(26px,4vw,42px);font-weight:800;margin:0 0 14px;letter-spacing:-.01em;color:#fff;line-height:1.2}
.hx3-find h2 em{font-style:normal;position:relative;display:inline-block;padding-bottom:7px;background-image:linear-gradient(90deg,#60a5fa,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx3-find h2 em::after{content:"";position:absolute;left:3%;right:3%;bottom:1px;height:3px;border-radius:999px;background:linear-gradient(90deg,#60a5fa,#3b82f6)}
.hx3-find-sub{font-size:15px;color:#aab4d4;max-width:42em;margin:0 auto 46px;line-height:1.65}
.hx3-find-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1080px;margin:0 auto}
.hx3-find-col{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;padding:26px 24px 32px;border-radius:20px;border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 36px -12px rgba(0,0,0,.45)}
.hx3-find-col.tone-blue{background:linear-gradient(150deg,#1d4ed8,#1e3a8a 70%)}
.hx3-find-col.tone-orange{background:linear-gradient(150deg,#c2410c,#7c2d12 70%)}
.hx3-find-col.tone-violet{background:linear-gradient(150deg,#6d28d9,#3b0764 70%)}
.hx3-find-col-wave{position:absolute;left:0;right:0;bottom:0;height:46px;opacity:.3;z-index:0}
.hx3-find-col-head{position:relative;z-index:1;width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hx3-find-tile{width:56px;height:56px;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.22);flex:0 0 auto}
.hx3-find-tile svg{width:28px;height:28px}
.hx3-find-arrow{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .16s ease,transform .16s ease}
.hx3-find-col:hover .hx3-find-arrow{background:rgba(255,255,255,.3);transform:translateX(3px)}
.hx3-find-arrow svg{width:16px;height:16px;color:#fff}
.hx3-find-col h3{position:relative;z-index:1;font-size:18.5px;font-weight:700;margin:10px 0 0;color:#fff}
.hx3-find-col p{position:relative;z-index:1;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.8);margin:4px 0 0}
.hx3-find-cta-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:48px}
.hx3-find-bracket{font-size:30px;font-weight:300;color:rgba(249,115,22,.5);line-height:1}
.hx3-find-cta{display:inline-flex;align-items:center;gap:10px;background:#f97316;color:#fff;font-weight:700;font-size:16px;font-family:inherit;border:0;cursor:pointer;padding:15px 30px;border-radius:999px;text-decoration:none;box-shadow:0 14px 30px rgba(249,115,22,.4);transition:.15s}
.hx3-find-cta:hover{background:#ea580c;color:#fff;transform:translateY(-2px)}
.hx3-find-cta .ico{width:18px;height:18px}
.hx3-find-wave{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;opacity:.5}
@media(max-width:820px){.hx3-find-grid{grid-template-columns:1fr;gap:20px}.hx3-find{padding:52px 0}.hx3-find-cta-row{gap:10px}.hx3-find-bracket{display:none}}
.dtc-section{padding:var(--s6) 0 var(--s5)}
.dtc-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--s4);flex-wrap:wrap;gap:16px}
.dtc-head-text{max-width:56ch}
.dtc-head h2{margin:0 0 8px;font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em}
.dtc-head h2 em{font-style:normal;background:linear-gradient(90deg,#4f46e5,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.dtc-head .sub{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.dtc-seeall{font-weight:600;font-size:14px;color:var(--brand);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.dtc-seeall:hover{text-decoration:underline}
.dtc-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start}
.dtc-tabs{display:flex;flex-direction:column;gap:3px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card)}
.dtc-tab{display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:9px 10px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;line-height:1.3;transition:background .14s var(--ease),color .14s var(--ease)}
.dtc-tab:hover{background:var(--surface-2);color:var(--ink)}
.dtc-tab.is-active{background:color-mix(in srgb, var(--dtc-ic,var(--brand)) 10%, transparent);color:var(--ink);font-weight:700}
.dtc-tab-ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--dtc-ic,var(--brand)) 14%, transparent);color:var(--dtc-ic,var(--brand));transition:background .14s var(--ease)}
.dtc-tab-ico svg{width:14px;height:14px}
.dtc-tab.is-active .dtc-tab-ico{background:var(--dtc-ic,var(--brand));color:#fff}
.dtc-tab-label{flex:1 1 auto;min-width:0}
.dtc-viewall{display:block;margin-top:7px;padding:11px 10px;font-weight:700;font-size:13px;color:var(--brand);border-top:1px solid var(--border)}
.dtc-viewall:hover{text-decoration:underline}
.dtc-grid-wrap{--dtc-accent:#2563eb}
.dtc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dtc-grid[hidden]{display:none}
.dtc-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 14px 16px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s,border-color .15s}
.dtc-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:color-mix(in srgb, var(--dtc-accent) 45%, var(--border))}
.dtc-card-logo{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:var(--surface-2);flex:0 0 auto;box-shadow:0 0 0 1px color-mix(in srgb, var(--dtc-accent) 30%, transparent) inset}
.dtc-card-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.dtc-card-init{width:100%;height:100%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.dtc-card-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb, var(--dtc-accent) 14%, transparent);color:var(--dtc-accent)}
.dtc-card-name{font-size:13.5px;font-weight:600;line-height:1.3}
.dtc-card-cta{margin-top:2px;font-size:11.5px;font-weight:700;color:#fff;background:var(--dtc-accent);display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;transition:filter .15s ease}
.dtc-card:hover .dtc-card-cta{filter:brightness(1.08)}
@media(max-width:900px){
  .dtc-layout{grid-template-columns:1fr}
  .dtc-tabs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;padding-bottom:10px}
  .dtc-tabs::-webkit-scrollbar{display:none}
  .dtc-tab{flex:0 0 auto;white-space:nowrap;background:var(--surface-2);border-radius:999px}
  .dtc-viewall{flex:0 0 auto;margin-top:0;border-top:0;white-space:nowrap}
}
@media(max-width:560px){.dtc-grid{grid-template-columns:repeat(2,1fr)}}
/* content sections — matched to the About-Us design language (Rohit, 18-Oct) */
.fsx-cs{padding:clamp(36px,5vw,64px) 0}
.fsx-cs-grid{max-width:1240px;display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(28px,3.4vw,52px);align-items:center;text-align:left}
.fsx-cs-rev .fsx-cs-grid{grid-template-columns:1.18fr 1fr}
.fsx-cs-rev .fsx-cs-media{order:-1}
.fsx-cs-copy{min-width:0}
.fsx-cs-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand,#4f46e5)}
.fsx-cs-eyebrow i{display:block;width:26px;height:3px;border-radius:999px;background:var(--brand,#4f46e5)}
.fsx-cs-title{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.22;letter-spacing:-.02em;color:#0f1222;margin:0 0 14px}
.fsx-cs-title em{font-style:normal;color:var(--brand,#4f46e5)}
.fsx-cs-lead{font-size:16px;line-height:1.65;color:var(--ink-3,#667085);margin:0 0 12px;font-weight:600}
.fsx-cs-intro{font-size:15px;line-height:1.8;color:var(--ink-2,#4b5566);margin:0 0 4px}
.fsx-cs-copy h3{font-size:clamp(16px,1.5vw,18.5px);font-weight:700;color:var(--ink,#171a21);margin:24px 0 8px;padding-left:13px;border-left:3px solid var(--brand,#4f46e5);line-height:1.35}
.fsx-cs-copy p{color:var(--ink-2,#4b5566);font-size:14.5px;line-height:1.7;margin:0 0 14px}
.fsx-cs-copy strong{color:var(--ink,#171a21);font-weight:700}
.fsx-cs-list{list-style:none;margin:6px 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 22px}
.fsx-cs-list li{position:relative;padding-left:28px;font-size:14px;line-height:1.6;color:var(--ink-2,#4b5566)}
.fsx-cs-list li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;background:var(--brand-soft,#eef0ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.fsx-cs-cta-row{margin-top:18px}
.fsx-cs-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;background:linear-gradient(135deg,#02d8f4 0%,#1428fa 100%);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 8px 20px rgba(20,40,250,.28);transition:filter .15s ease,transform .15s ease}
.fsx-cs-cta:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px)}
.fsx-cs-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fsx-cs-media{position:relative;min-width:0;height:clamp(500px,48vw,580px);border-radius:20px;overflow:hidden;border:1px solid var(--border,#e5e8ef);box-shadow:var(--sh-3,0 18px 44px rgba(16,24,40,.14))}
/* designed banners (top software categories / top brands) */
.fsx-bnr{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;padding:clamp(16px,1.6vw,22px)}
.fsx-bnr-indigo{background:linear-gradient(150deg,#4f46e5,#2563eb)}
.fsx-bnr-teal{background:linear-gradient(150deg,#0e7490,#0891b2)}
.fsx-bnr-violet{background:linear-gradient(150deg,#7c3aed,#db2777)}
.fsx-bnr-green{background:linear-gradient(150deg,#059669,#0d9488)}
.fsx-bnr::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.5px);background-size:22px 22px;opacity:.6;pointer-events:none}
.fsx-bnr-head{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:7px 15px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.fsx-bnr-head i{width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto}
.fsx-bnr-grid{position:relative;z-index:1;flex:1;display:grid;grid-auto-rows:1fr;gap:8px}
.fsx-bnr-grid-cat{grid-template-columns:repeat(4,1fr)}
.fsx-bnr-grid-brand{grid-template-columns:repeat(4,1fr)}
.fsx-bnr-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;background:rgba(255,255,255,.96);border-radius:11px;padding:6px 5px;box-shadow:0 4px 12px rgba(16,24,40,.14)}
.fsx-bnr-tile svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.fsx-bnr-tile b{font-size:9.8px;font-weight:700;line-height:1.15;color:#1a2233}
.fsx-bnr-indigo .fsx-bnr-tile{color:#4f46e5}
.fsx-bnr-teal .fsx-bnr-tile{color:#0891b2}
.fsx-bnr-violet .fsx-bnr-tile{color:#9333ea}
.fsx-bnr-green .fsx-bnr-tile{color:#059669}
.fsx-bnr-logo{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:11px;padding:8px;box-shadow:0 4px 12px rgba(16,24,40,.14)}
.fsx-bnr-logo img{max-width:88%;max-height:36px;width:auto;height:auto;object-fit:contain;display:block}
.fsx-cs-faqsec{padding:clamp(32px,4.4vw,56px) 0;background:linear-gradient(180deg,#f3f6ff,#f7f8fb 60%)}
.fsx-cs-faqsec .fsx-cs-grid{align-items:center}
.fsx-cs-faq-title{font-size:clamp(26px,3.2vw,38px);font-weight:800;color:#0f1222;margin:0 0 14px;letter-spacing:-.02em;line-height:1.18}
.fsx-cs-faq-title em{font-style:normal;color:var(--brand,#4f46e5)}
.fsx-faq-illo{display:block;max-width:420px;width:84%;height:auto;margin:22px auto 0;filter:drop-shadow(0 22px 28px rgba(16,24,40,.16))}
.fsx-cs-faqwrap{text-align:left;display:flex;flex-direction:column;gap:12px}
.fsx-cs-faq-item{border:1px solid var(--border,#e5e8ef);border-radius:14px;margin:0;background:var(--surface,#fff);overflow:hidden;box-shadow:0 2px 10px rgba(16,24,40,.04);transition:box-shadow .15s ease}
.fsx-cs-faq-item[open]{box-shadow:0 8px 22px rgba(16,24,40,.08)}
.fsx-cs-faq-item summary{cursor:pointer;list-style:none;padding:14px 18px;font-size:15.5px;font-weight:700;color:var(--ink,#171a21);display:flex;justify-content:space-between;align-items:center;gap:14px}
.fsx-cs-faq-item summary::-webkit-details-marker{display:none}
.fsx-cs-faq-qwrap{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.fsx-cs-faq-ico{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ic,#4f46e5) 14%,white);color:var(--ic,#4f46e5)}
.fsx-cs-faq-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.fsx-cs-faq-item summary::after{content:"+";font-size:21px;font-weight:400;color:var(--brand,#4f46e5);flex:none}
.fsx-cs-faq-item[open] summary::after{content:"\2212"}
.fsx-cs-faq-item .fsx-cs-faq-a{padding:0 18px 18px 68px;font-size:15px;line-height:1.8;color:var(--ink-2,#4b5566)}
@media(max-width:640px){.fsx-cs-faq-item .fsx-cs-faq-a{padding-left:18px}}
@media(max-width:860px){.fsx-cs-grid,.fsx-cs-rev .fsx-cs-grid{grid-template-columns:1fr;gap:22px}.fsx-cs-media{order:-1;height:clamp(380px,86vw,460px)}}
@media(max-width:560px){.fsx-cs-list{grid-template-columns:1fr}.fsx-bnr-grid-cat,.fsx-bnr-grid-brand{grid-template-columns:repeat(3,1fr)}.fsx-bnr-tile b{font-size:9px}}
/* "Global Software Marketplace" redesign (Rohit, 17-Oct: reference
   screenshot -- card-ified content blocks + a proper category panel
   instead of a plain text wall next to a flat purple grid), later applied
   to the other 3 .fsx-cs sections too (#fsx-compare/#fsx-vendors/#fsx-trust
   -- Rohit, 17-Oct: "ye 3 section bhi home page per hi hai inko bhi fix
   kero"). All 4 now render through the shared .fsx-mp- component system,
   so this override list must cover all 4 IDs, not just #fsx-marketplace --
   missing one here was a real bug: that section's .fsx-cs-media kept the
   OLD height:580px/overflow:hidden cap, silently clipping its panel's
   bottom content (the footer/CTA) whenever the panel grew past 580px
   (confirmed on #fsx-compare: panel measured 819px tall inside a 580px
   box, 240px of it invisible). */
#fsx-compare .fsx-cs-grid, #fsx-vendors .fsx-cs-grid{align-items:start;max-width:none;width:100%}
/* #fsx-compare rebuilt to the same structure as #fsx-marketplace (Rohit,
   19-Oct: "structure same vesa hi chaiye jo humne last bnaya hai") -- cards
   moved to a full-width band below, 4-across feature rows, hero column
   gets real stats + highlights instead of the two cards. */
#fsx-compare .fsx-mp-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){#fsx-compare .fsx-mp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#fsx-compare .fsx-mp-feature-grid{grid-template-columns:minmax(0,1fr)}}
#fsx-compare .fsx-mp-logogrid{gap:8px;padding:14px}
#fsx-compare .fsx-mp-logo{height:58px;border-radius:11px}
#fsx-compare .fsx-mp-logo img{max-height:28px}
/* #fsx-trust rebuilt to the same structure as #fsx-marketplace/#fsx-compare
   (Rohit, 19-Oct: "same vesa hi jaise last two fix kre the") -- cards moved
   to a full-width band below, category grid compacted to fit its content,
   hero column carries real stats + highlights, start so both headers share
   one top line instead of the earlier center-alignment compromise. */
#fsx-trust .fsx-cs-grid{align-items:start;max-width:none;width:100%}
#fsx-trust .fsx-mp-catpanel-head{padding:13px 18px}
#fsx-trust .fsx-mp-catgrid{gap:8px;padding:14px}
#fsx-trust .fsx-mp-cat{gap:6px;padding:10px 9px}
#fsx-trust .fsx-mp-cat-ico{flex-basis:28px;width:28px;height:28px}
#fsx-trust .fsx-mp-cat-ico svg{width:14px;height:14px}
#fsx-trust .fsx-mp-cat b{font-size:11.3px}
#fsx-vendors .fsx-mp-logogrid{gap:8px;padding:14px}
#fsx-vendors .fsx-mp-logo{height:58px;border-radius:11px}
#fsx-vendors .fsx-mp-logo img{max-height:28px}
#fsx-trust .fsx-mp-feature-grid, #fsx-vendors .fsx-mp-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){#fsx-trust .fsx-mp-feature-grid, #fsx-vendors .fsx-mp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#fsx-trust .fsx-mp-feature-grid, #fsx-vendors .fsx-mp-feature-grid{grid-template-columns:minmax(0,1fr)}}
/* #fsx-marketplace's left column got much shorter once its two cards moved
   into the full-width band below (Rohit, 19-Oct redesign). Tried
   align-items:center, but that staggered both the top AND the bottom out
   of line with the category panel instead of fixing it (Rohit: "alignment
   equal nehi hai"). Back to start so the two headers share one top line --
   the hero copy column now carries real stats + highlights content so the
   remaining height gap at the bottom is small instead of ~450px. */
#fsx-marketplace .fsx-cs-grid{align-items:start;max-width:none;width:100%}
#fsx-marketplace .fsx-cs-title{margin-bottom:20px}
#fsx-marketplace .fsx-cs-lead{margin-bottom:18px}
/* Added real content (stats + quick highlights) to the hero copy column so
   it carries closer to the same weight as the categories panel beside it,
   instead of leaning on alignment tricks alone (Rohit, 19-Oct: "upar jo
   text block hai usme content increase kero taaki equal ho jaye space").
   Numbers reused verbatim from the real "Why Us?" stats further down this
   same page, not invented for this spot. */
.fsx-mp-hero-stats{display:flex;align-items:center;gap:22px;margin:26px 0 28px;flex-wrap:wrap}
.fsx-mp-hero-stat{display:flex;flex-direction:column}
.fsx-mp-hero-stat b{font-size:22px;font-weight:800;color:#0f1222;line-height:1.1}
.fsx-mp-hero-stat span{font-size:12px;color:var(--ink-3,#667085);margin-top:2px;white-space:nowrap}
.fsx-mp-hero-stat-div{width:1px;align-self:stretch;background:var(--border,#e5e8ef)}
.fsx-mp-hero-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin-bottom:32px}
@media(max-width:560px){.fsx-mp-hero-feats{grid-template-columns:1fr}}
/* Several passes tried to force this panel to match the left column's
   height exactly (stretching the tiles, then spreading gaps between tile
   rows, then growing the footer strip capped and uncapped) -- every one
   of them produced its own visible defect: stretched-looking tiles,
   awkward gaps, a dead blank zone, or (uncapped) a huge mostly-empty
   centered block (Rohit, 17-Oct, 150%-zoom screenshot: "Trusted. Verified.
   Global." floating in a vast empty box). The two columns just carry very
   different amounts of content -- 2 full text cards vs a compact icon
   grid -- and no amount of CSS stretching makes sparse content "feel" as
   tall as dense paragraphs without reading as empty padding. Natural
   height, unequal columns, is the stable result: common, normal layout,
   and every sub-element (tiles, footer) keeps its own correct compact
   size regardless of how tall the left column happens to be at a given
   width. Do not reintroduce height-matching here without re-reading this
   history first. */
#fsx-marketplace .fsx-cs-media, #fsx-compare .fsx-cs-media, #fsx-vendors .fsx-cs-media, #fsx-trust .fsx-cs-media{height:auto;overflow:visible;border:0;box-shadow:none;border-radius:0;align-self:start}
.fsx-mp-card{background:var(--surface,#fff);border:1px solid var(--border,#e5e8ef);border-radius:16px;padding:22px 24px;margin:0 0 18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.fsx-mp-card{min-width:0}
/* Rohit's own fix, 19-Oct: the closing block doesn't need its own boxed
   card -- strip the box (background/border/padding/shadow) but keep every
   .fsx-mp-card-scoped text rule (p, card-head, icon) working, since this
   still carries the .fsx-mp-card class alongside the modifier. Content
   just runs full-width instead of sitting in another bordered box. */
.fsx-mp-card.fsx-mp-card-plain{background:none;border:0;padding:0;margin:0 0 18px;box-shadow:none}
.fsx-mp-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:10px;min-width:0}
.fsx-mp-icon{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ic,#4f46e5) 14%,white);color:var(--ic,#4f46e5)}
.fsx-mp-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fsx-mp-card-head h3{margin:2px 0 0;padding:0;border:0;font-size:17px;font-weight:800;color:#0f1222;line-height:1.32;min-width:0}
.fsx-mp-card p{font-size:14.5px;line-height:1.72;color:var(--ink-2,#4b5566);margin:0 0 12px}
.fsx-mp-card p:last-of-type{margin-bottom:0}
/* grid/flex items default to min-width:auto (shrink no smaller than their
   own content) -- without the minmax(0,..)/min-width:0 overrides below,
   this long copy forced .fsx-cs-copy wider than its grid column at narrow
   widths, pushing the whole section's text off-screen under the sticky
   CTA rail (Rohit, 17-Oct: "screen ka size change hota hai to pura ui
   kharab ho reha hai" -- confirmed: .fsx-cs-copy measured 465px wide
   inside a 404px-available column at 480px viewport). */
.fsx-mp-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border,#eef0f4)}
.fsx-mp-feature{display:flex;align-items:flex-start;gap:10px;min-width:0}
.fsx-mp-feature>div{min-width:0}
.fsx-mp-feature-ico{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ic,#4f46e5) 14%,white);color:var(--ic,#4f46e5)}
.fsx-mp-feature-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fsx-mp-feature b{display:block;font-size:13.3px;font-weight:700;color:#171a21;line-height:1.35}
/* .fsx-mp-feature span (descendant selector, no direct-child restriction)
   was also matching .fsx-mp-feature-ico -- that icon wrapper is ITSELF a
   <span>, a direct child of .fsx-mp-feature, not just the description
   text span nested inside .fsx-mp-feature>div. Higher specificity
   (.fsx-mp-feature span = class+element) than .fsx-mp-feature-ico's own
   rule (class only) meant display:block silently beat its display:grid,
   breaking the icon's centering (Rohit, 17-Oct: "content me icons abhi
   bhi center nehi hai" -- confirmed: icon svg sat 7px off-center inside
   its circle). Scoped to >div>span so it can't reach the icon span. */
.fsx-mp-feature>div>span{display:block;font-size:12.3px;color:var(--ink-3,#667085);line-height:1.4;margin-top:1px}
/* Every stretch/space-between attempt at matching this card's height to
   the text column kept needing another fix next to it -- Rohit, 19-Oct:
   "stretch nehi kerna hai... tum card kyo stretch ker rehe ho" (stop
   stretching the card). This card now just sizes to its own content
   (header + grid), full stop. The trust-row/CTA footer that used to live
   inside this bordered box is pulled OUT as a separate, unboxed
   .fsx-mp-catpanel-foot-out block right after it (same pattern as the
   "Start Exploring the Marketplace" card -- real content placed plainly
   instead of a box stretched to fill space). */
.fsx-mp-catpanel{background:var(--surface,#fff);border:1px solid var(--border,#e5e8ef);border-radius:20px;overflow:hidden;box-shadow:var(--sh-3,0 18px 44px rgba(16,24,40,.1));display:flex;flex-direction:column;min-width:0}
.fsx-mp-catpanel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;background:linear-gradient(135deg,#1428fa,#2563eb);flex-wrap:wrap}
.fsx-mp-catpanel-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#fff;min-width:0}
.fsx-mp-catpanel-badge svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fsx-mp-catpanel-explore{display:inline-flex;align-items:center;gap:5px;font-size:12.3px;font-weight:700;color:#fff;text-decoration:none;opacity:.95;white-space:nowrap}
.fsx-mp-catpanel-explore:hover{opacity:1;color:#fff;text-decoration:underline}
.fsx-mp-catpanel-explore svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* .fsx-mp-catpanel is stretched (height:100%) to match the left column's
   taller text content -- without flex:1 + align-content:space-evenly here,
   that extra height just showed as a dead empty block below the panel on
   the page background (Rohit, 17-Oct screenshot: category panel ending
   well short of the left column, big empty gray gap underneath). flex:1
   makes the grid itself claim that space; space-evenly spreads it as
   gaps BETWEEN rows rather than stretching each tile (which was the
   earlier bug this section already had once -- individual tiles must stay
   their natural compact height, only the row spacing should grow). */
/* Grid (repeat(4,1fr) etc.) packed every tile into rigid rows, so the
   panel's total height was whatever N rows added up to -- never close to
   matching the text column next to it, which read as a big dead block of
   page background underneath (Rohit, 17-Oct: "in sab ko grid me mt rekho
   space issue aa reha hai, grid format view hta do"). A single
   horizontally-scrolling row sidesteps the mismatch entirely -- it's
   always just one row tall, so there's nothing left to "fill". */
/* A horizontal-scroll single row (display:flex) only shows ~5 of 24 tiles
   at once and makes the panel much SHORTER, not taller -- directly
   fighting the actual goal here (use real content to close the height gap
   against the text column). display:grid wraps all tiles into rows so the
   panel's height reflects its real content. */
.fsx-mp-catgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:10px;padding:18px}
.fsx-mp-cat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:13px 11px;border:1px solid var(--border,#eef0f4);border-radius:13px;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;min-width:0}
.fsx-mp-cat:hover{border-color:var(--ic,#4f46e5);box-shadow:0 6px 16px rgba(16,24,40,.08);transform:translateY(-2px);text-decoration:none}
.fsx-mp-cat-ico{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ic,#4f46e5) 14%,white);color:var(--ic,#4f46e5)}
.fsx-mp-cat-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* .fsx-mp-cat is a column flex container, so <b> is a flex item too --
   flex items default to min-width:auto on their cross axis (here, width),
   meaning <b> refused to shrink below its own unwrapped text width even
   with overflow-wrap:break-word set, pushing labels like "Office &
   Productivity" past their 55px-wide tile at narrow breakpoints (Rohit,
   17-Oct: "icons bhi alignment bhi thik nehi hai" -- confirmed by
   measurement: label box 69px inside a 55px tile). width:100% forces it
   to actually take the tile's width and wrap within it. */
.fsx-mp-cat b{width:100%;min-width:0;overflow-wrap:break-word;font-size:11.8px;font-weight:700;color:#1a2233;line-height:1.3}
.fsx-mp-cat-arw{width:12px;height:12px;stroke:var(--ic,#4f46e5);fill:none;stroke-width:2.8;margin-top:-2px}
/* Sized down to fit its own content instead of the padding/icon sizes the
   panel has carried since it was first built (Rohit, 19-Oct: "content ke
   according iski height and width km kero") -- same 24 tiles, same 4
   columns, just tighter so the panel isn't taller than it needs to be. */
#fsx-marketplace .fsx-mp-catpanel-head{padding:13px 18px}
#fsx-marketplace .fsx-mp-catgrid{gap:8px;padding:14px}
#fsx-marketplace .fsx-mp-cat{gap:6px;padding:10px 9px}
#fsx-marketplace .fsx-mp-cat-ico{flex-basis:28px;width:28px;height:28px}
#fsx-marketplace .fsx-mp-cat-ico svg{width:14px;height:14px}
#fsx-marketplace .fsx-mp-cat b{font-size:11.3px}
/* .fsx-mp-catpanel is stretched (height:100%) to match the left column's
   taller text content -- Rohit, 17-Oct: "category card ko stretch mt kero
   content chaiye, uski bottom waale content ko full ker do" (don't stretch
   the tile cards -- fill the leftover space with the bottom content
   instead). The tile grid above keeps align-content:start (packed,
   natural size, untouched); flex:1 here makes the footer strip alone grow
   to absorb the gap, not the tiles. */
/* Natural-height horizontal strip -- a flex:1 stretched version (capped
   and uncapped) was tried to soak up leftover height from matching the
   left column, but both read as a near-empty block (see the note on
   .fsx-cs-media above). This bar just sizes to its own content now. */
/* flex:1 lets the footer genuinely absorb whatever height the tile grid
   above doesn't need (vs. the left column's text cards, which usually run
   much taller) -- Rohit, 17-Oct: "jo last content hai jiski wja se wha per
   kafi empty space aa reha hai... usko content se fill ker do" (fill that
   leftover space with content, not a spacing hack). The old single-line
   footer (one icon + one CTA) just left dead air when stretched; a
   3-item trust row gives it real content to spread across the space via
   justify-content:space-evenly, same idea whether the gap is 200px or
   900px. */
/* Pulled out of .fsx-mp-catpanel entirely (Rohit, 19-Oct: "card kyo
   stretch ker rehe ho... container bhar nikal do" -- stop stretching the
   card, take this content out of it) -- its own light, non-stretching
   block below the card, not fighting that card for height. */
.fsx-mp-catpanel-foot-out{display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:18px;padding:20px;border-radius:16px;border:1px solid var(--border,#eef0f4);background:var(--surface-2,#f7f8fb)}
.fsx-mp-trustrow{display:flex;flex-direction:column;gap:14px}
.fsx-mp-trust{display:flex;align-items:flex-start;gap:10px;min-width:0}
.fsx-mp-trust>div{flex:1;min-width:0}
.fsx-mp-trust-ico{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ic,#4f46e5) 14%,white);color:var(--ic,#4f46e5)}
.fsx-mp-trust-ico svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.fsx-mp-trust b{display:block;font-size:13px;font-weight:700;color:#171a21;line-height:1.3}
.fsx-mp-trust>div>span{display:block;font-size:11.5px;color:var(--ink-3,#667085);line-height:1.4;margin-top:1px}
.fsx-mp-catpanel-foot-out .fsx-mp-catpanel-cta{align-self:center}
.fsx-mp-catpanel-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:999px;background:linear-gradient(135deg,#02d8f4,#1428fa);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.fsx-mp-catpanel-cta:hover{color:#fff;filter:brightness(1.06)}
/* No width/height rule existed for this button's arrow icon anywhere, so
   it rendered at the browser's default intrinsic SVG size (a huge black
   triangle filling most of the panel -- Rohit, 19-Oct screenshot: "tumne
   sab khrab ker diya hai"). Matches the sitewide .fsx-cs-cta svg sizing. */
.fsx-mp-catpanel-cta svg{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block}
@media(max-width:640px){.fsx-mp-card{padding:18px}.fsx-mp-feature-grid{grid-template-columns:minmax(0,1fr)}.fsx-mp-catpanel-foot-out{flex-wrap:wrap}}
/* Same card/panel system as #fsx-marketplace above, reused for the 3 other
   sections built on the shared .fsx-cs/.fsx-bnr pattern (Browse/Compare —
   teal, Built for Vendors — violet, Trusted/Transparent — green). Rohit,
   17-Oct: "ye 3 section bhi home page per hi hai inko bhi fix kero" (these
   3 sections are on the homepage too, fix them the same way). Brand-logo
   panels (teal/violet) need a plain logo tile instead of the icon+label
   category tile -- same white-card/hover-lift treatment, just centers an
   <img> instead. */
.fsx-mp-logogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:10px;padding:18px}
.fsx-mp-logo{display:flex;align-items:center;justify-content:center;height:74px;border:1px solid var(--border,#eef0f4);border-radius:13px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.fsx-mp-logo:hover{border-color:var(--border-2,#d7dbe3);box-shadow:0 6px 16px rgba(16,24,40,.08);transform:translateY(-2px)}
.fsx-mp-logo img{max-width:72%;max-height:34px;width:auto;height:auto;object-fit:contain;display:block}
/* Hero redesign to match reference (Rohit, 19-Oct): the two info cards move
   out of the narrow left column into a full-width band below the hero, and
   their feature rows go 4-across instead of 2x2 now that they have the
   room. Scoped to #fsx-marketplace only -- #fsx-compare/#fsx-vendors/#fsx-trust
   keep their existing 2-col .fsx-mp-feature-grid untouched. */
#fsx-marketplace .fsx-mp-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){#fsx-marketplace .fsx-mp-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#fsx-marketplace .fsx-mp-feature-grid{grid-template-columns:minmax(0,1fr)}}
.fsx-mp-fullcards{max-width:none;width:100%;margin:30px auto 0;display:flex;flex-direction:column;gap:20px}
.fsx-mp-hero-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.fsx-mp-trustavatars{display:flex;align-items:center;gap:12px}
.fsx-mp-avatars{display:flex}
.fsx-mp-avatars img{width:38px;height:38px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(16,24,40,.14);object-fit:cover;margin-left:-10px;display:block}
.fsx-mp-avatars img:first-child{margin-left:0}
.fsx-mp-trustavatars-txt{font-size:13px;color:var(--ink-3,#667085);line-height:1.3}
.fsx-mp-trustavatars-txt b{display:block;color:var(--ink,#171a21);font-size:13.5px;font-weight:700}
/* Tilt removed (Rohit, 19-Oct: "extra section hta do jiski wja se dikkat
   aa rhei hai") -- none of the reference screenshots show a rotated panel,
   that was an unprompted extra on top of the brief. Flat, matching the
   reference exactly. */
.fsub-wrap{position:relative}
.fsub-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:6px 13px;border-radius:999px;margin-bottom:14px}
.fsub-eyebrow svg{flex:0 0 auto}
.fsub-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.fsub-headrow .fsub-head-l{flex:1 1 auto;min-width:0}
.fsub-headrow h2{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.01em}
.fsub-headrow h2 em{font-style:normal;background:linear-gradient(100deg,var(--brand),#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.fsub-headrow .sub{max-width:92ch;margin-top:10px}
.fsub-illo{flex:0 0 auto;width:220px;height:150px;display:none}
@media (min-width:1080px){.fsub-illo{display:block}}

/* Real-data stat strip (not the fabricated "5000+/10K+/50K+" style numbers
   from the reference mock) -- filled in by JS from the actual fetched
   listing count/category count once the API responds, stays hidden until
   then so it never shows a placeholder number (Jarvis, 16-Oct). */
.fsub-stats{display:none;gap:28px;margin:20px 0 4px;flex-wrap:wrap}
.fsub-stats.is-ready{display:flex}
.fsub-stat{display:flex;align-items:center;gap:10px}
.fsub-stat-ico{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand)}
.fsub-stat-ico svg{width:17px;height:17px}
.fsub-stat b{display:block;font-size:17px;font-weight:800;color:var(--ink);line-height:1.2}
.fsub-stat span{display:block;font-size:11px;color:var(--ink-3)}

.fsub-trustrow{display:flex;flex-wrap:wrap;gap:22px;margin:22px 0 24px}
.fsub-trust-item{display:flex;align-items:center;gap:10px}
.fsub-trust-ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.fsub-trust-item h4{margin:0;font-size:13px;font-weight:800;color:var(--ink)}
.fsub-trust-item p{margin:1px 0 0;font-size:11.5px;color:var(--ink-3)}

.fsub-toolbar{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-bottom:16px;box-shadow:var(--sh-1,0 4px 14px -8px rgba(16,24,40,.08))}
.fsub-toolbar svg{flex:0 0 auto;width:18px;height:18px;color:var(--ink-3)}
.fsub-search{flex:1 1 auto;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink)}
.fsub-search:focus{outline:0}
.fsub-search-count{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap}

.fsub-chipcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-1,0 4px 14px -8px rgba(16,24,40,.08));padding:16px;margin-bottom:26px}
.fsub-chiprow{display:flex;flex-wrap:wrap;gap:9px}
@media (max-width:780px){.fsub-chiprow{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.fsub-chiprow::-webkit-scrollbar{display:none}.fsub-chip{flex:0 0 auto;white-space:nowrap}}
.fsub-chip{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;font-weight:600;padding:7px 14px 7px 7px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;display:inline-flex;align-items:center;gap:8px}
.fsub-chip:hover{border-color:var(--brand);box-shadow:0 2px 10px -4px color-mix(in srgb, var(--brand) 40%, transparent)}
.fsub-chip-ico{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb, var(--chip-color, var(--brand)) 14%, var(--surface-2));color:var(--chip-color,var(--brand));display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease}
.fsub-chip-ico svg{width:13px;height:13px}
.fsub-chip-n{font-size:11px;font-weight:700;background:var(--surface-2);color:var(--ink-3);border-radius:999px;padding:2px 7px;min-width:20px;text-align:center;line-height:1.4;transition:background-color .15s ease,color .15s ease}
.fsub-chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.fsub-chip.is-active .fsub-chip-ico{background:rgba(255,255,255,.22);color:#fff}
.fsub-chip.is-active .fsub-chip-n{background:rgba(255,255,255,.22);color:#fff}

.fsub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1180px){.fsub-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.fsub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.fsub-grid{grid-template-columns:1fr}}
.fsub-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-card,16px);background:var(--surface);text-decoration:none;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.fsub-card:hover{box-shadow:0 16px 32px -14px rgba(16,24,40,.2);transform:translateY(-4px);border-color:color-mix(in srgb, var(--cat-color, var(--brand)) 40%, var(--border))}
/* Header area -- a real vendor screenshot (crop/cover) when one was uploaded
   with the submission, otherwise an honest solid gradient in the category's
   own accent colour with the logo centred large. Never a fabricated/stock
   "app mockup" image for listings that didn't provide one (Jarvis, 16-Oct). */
.fsub-card-top{position:relative;height:118px;overflow:hidden;background:linear-gradient(135deg,var(--cat-color,var(--brand)),color-mix(in srgb, var(--cat-color, var(--brand)) 55%, #000))}
.fsub-card-top img{width:100%;height:100%;object-fit:cover;display:block}
/* No giant duplicate-of-the-badge letter filling the header anymore (Rohit,
   16-Oct: "thoda accha banao" -- the same initial showing huge in the header
   AND small in the badge below read as cluttered/unfinished). A plain clean
   gradient block now stands on its own when there's no real screenshot; the
   small logo badge over the boundary is the only identity mark. */
.fsub-card-top-logo{display:none}
.fsub-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2}
.fsub-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:4px 10px;border-radius:999px;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.fsub-badge svg{width:10px;height:10px}
.fsub-badge-featured{background:#f59e0b}
.fsub-badge-new{background:#16a34a}
.fsub-fav{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink-3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s ease,transform .12s ease;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fsub-fav:hover{color:#e11d48;transform:scale(1.1)}
.fsub-fav svg{width:16px;height:16px}
.fsub-fav[aria-pressed="true"]{color:#e11d48}
.fsub-fav[aria-pressed="true"] svg{fill:currentColor}
.fsub-card-body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;padding:16px 18px 18px}
.fsub-logo-circle{position:absolute;top:-26px;left:18px;width:46px;height:46px;border-radius:12px;background:var(--surface);border:3px solid var(--surface);box-shadow:0 4px 10px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fsub-logo-circle img{width:100%;height:100%;object-fit:contain;padding:7px}
.fsub-logo-fallback{width:100%;height:100%;border-radius:9px;background:var(--cat-color,var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.fsub-name{margin:22px 0 2px;font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.3}
.fsub-dev{margin:0 0 10px;font-size:12px;color:var(--ink-3)}
.fsub-desc{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.fsub-license{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.fsub-license svg{width:12px;height:12px;flex:0 0 auto}
.fsub-license-open{background:#dcfce7;color:#15803d}
.fsub-license-free{background:#dbeafe;color:#1d4ed8}
.fsub-license-paid{background:#fef3c7;color:#b45309}
.fsub-platforms{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--ink-3)}
.fsub-platforms svg{width:15px;height:15px}
.fsub-foot{margin-top:auto}
.fsub-cta{width:100%;box-sizing:border-box;text-align:center;font-size:13px;font-weight:700;color:#fff;background:var(--cat-color,var(--brand));display:flex;align-items:center;justify-content:center;gap:5px;padding:11px 12px;border-radius:10px;border:1px solid transparent;box-shadow:0 6px 16px -6px var(--cat-color,var(--brand));transition:filter .15s ease,transform .15s ease}
.fsub-card:hover .fsub-cta{filter:brightness(1.08)}
.fsub-card:hover .fsub-cta .arw{transform:translateX(3px)}
.fsub-cta .arw{transition:transform .16s ease;display:inline-block}
.fsub-loading,.fsub-empty{grid-column:1/-1;text-align:center;padding:30px;color:var(--ink-3);font-size:13.5px}
.fsx-stickycta{position:fixed;right:0;top:50%;transform:translateY(calc(-50% - 54px));z-index:2147481000;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-family:var(--font,inherit)}
  .fsx-stickycta a{position:relative;display:flex;align-items:center;justify-content:center;width:42px;padding:16px 9px;border-radius:10px 0 0 10px;text-decoration:none;color:#fff;box-shadow:0 10px 28px -6px var(--glow,rgba(16,24,40,.4)),0 2px 8px rgba(16,24,40,.18),inset 1px 0 0 rgba(255,255,255,.25);transition:transform .18s ease,box-shadow .18s ease}
  .fsx-stickycta a:hover{transform:translateX(-5px);box-shadow:0 16px 36px -6px var(--glow,rgba(16,24,40,.5)),0 4px 12px rgba(16,24,40,.2),inset 1px 0 0 rgba(255,255,255,.3)}
  .fsx-stickycta a .vlbl{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font:800 13px/1.2 var(--font,inherit);letter-spacing:.02em}
  .fsx-stickycta a.leads{--glow:rgba(99,54,241,.55);background:linear-gradient(180deg,#7c3aed,#4f46e5)}
  .fsx-stickycta a.product{--glow:rgba(16,185,129,.5);background:linear-gradient(180deg,#059669,#16a34a)}
  .fsx-stickycta a.software{--glow:rgba(6,182,212,.5);background:linear-gradient(180deg,#0891b2,#06b6d4)}
  @media (max-height:700px){
    .fsx-stickycta{top:calc(var(--head-h,64px) + 16px);transform:none}
  }
  .fsx-stickycta a.leads{animation:fsxPulse 2.6s ease-out infinite}
  .fsx-stickycta a.leads:hover{animation-play-state:paused}
  @keyframes fsxPulse{
    0%{box-shadow:0 10px 28px -6px var(--glow),0 2px 8px rgba(16,24,40,.18),inset 1px 0 0 rgba(255,255,255,.25),0 0 0 0 rgba(124,58,237,.5)}
    70%{box-shadow:0 10px 28px -6px var(--glow),0 2px 8px rgba(16,24,40,.18),inset 1px 0 0 rgba(255,255,255,.25),0 0 0 14px rgba(124,58,237,0)}
    100%{box-shadow:0 10px 28px -6px var(--glow),0 2px 8px rgba(16,24,40,.18),inset 1px 0 0 rgba(255,255,255,.25),0 0 0 0 rgba(124,58,237,0)}
  }
  /* page-scoped skin for the sitewide Enquiry FAB — matches the tab family above */
  #fsxEnqFab{position:fixed!important;right:0!important;bottom:auto!important;top:calc(50% + 192px)!important;transform:translateY(-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;padding:16px 9px!important;border-radius:10px 0 0 10px!important;background:linear-gradient(180deg,#1f2937,#0f172a)!important;box-shadow:0 10px 28px -6px rgba(15,23,42,.55),0 2px 8px rgba(16,24,40,.18),inset 1px 0 0 rgba(255,255,255,.12)!important;gap:0!important;transition:transform .18s ease,box-shadow .18s ease!important}
  #fsxEnqFab:hover{transform:translateY(-50%) translateX(-5px)!important;box-shadow:0 16px 36px -6px rgba(15,23,42,.65),0 4px 12px rgba(16,24,40,.2),inset 1px 0 0 rgba(255,255,255,.16)!important}
  #fsxEnqFab svg{display:none!important}
  #fsxEnqFab span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font:800 13px/1.2 var(--font,inherit)!important;letter-spacing:.02em}
  #fsxEnqFab::after{display:none!important}
  /* Phone view — same vertical-tab style as desktop, just scaled down.
     Rohit, 9-Oct (standing instruction from the old icon-dock design, still
     applies): "phone view sabko ek icon me rakho" was rejected before —
     mobile keeps the same button family as desktop, not a collapsed/
     different widget. */
  @media (max-width:640px){
    .fsx-stickycta{right:0;top:50%;transform:translateY(calc(-50% - 44px));gap:6px}
    .fsx-stickycta a{width:34px;padding:12px 7px;border-radius:8px 0 0 8px}
    .fsx-stickycta a .vlbl{font-size:11px}
    #fsxEnqFab{right:0!important;bottom:auto!important;top:calc(50% + 155px)!important;transform:translateY(-50%)!important;width:34px!important;padding:12px 7px!important;border-radius:8px 0 0 8px!important}
    #fsxEnqFab:hover{transform:translateY(-50%) translateX(-4px)!important}
    #fsxEnqFab span{font-size:11px!important}
  }
  /* Rohit, 17-Oct (screenshots at 150%/175% browser zoom): the tab rail
     centers on viewport HEIGHT via top:50%, with no idea where the header
     ends -- on a short effective viewport (high zoom, or just a short
     laptop screen) the centered stack creeps up far enough to sit under
     the burger button. Below this height, drop the centering and anchor
     the rail a fixed distance under the header instead -- always clear,
     regardless of how short the viewport gets. Values measured against
     the live header/ticker-bar height at each width tier, not guessed. */
  @media (max-height:760px){
    .fsx-stickycta{top:140px!important;transform:none!important}
    #fsxEnqFab{top:530px!important;transform:none!important}
  }
  @media (max-height:760px) and (max-width:640px){
    .fsx-stickycta{top:210px!important}
  }
  @media (prefers-reduced-motion:reduce){
    .fsx-stickycta a.leads{animation:none}
    .fsx-stickycta a:hover{transform:none!important}
    #fsxEnqFab:hover{transform:translateY(-50%)!important}
  }
  /* The dock is position:fixed and vertically centers on the VIEWPORT, not
     the document -- so as the page scrolls, whatever section happens to be
     vertically centered at that moment can end up underneath it. On wide
     screens (.wrap caps at 1800px but the viewport itself goes wider) the
     hero's sponsored ad card sat close enough to the right edge that the
     dock floated directly over the ad image (Rohit, 16-Oct, screenshot).
     Reserve clearance down the whole page instead of only the hero, sized
     to each breakpoint's own tab width + a buffer so content never renders
     under the dock no matter what's scrolled into view. Re-measured for the
     flush-right vertical tabs (16-Oct) -- narrower footprint than the old
     22px-offset round icons, so the reserve shrank to match. */
  #main{padding-right:76px}
  @media (max-width:640px){ #main{padding-right:56px} }
.psm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:2147482500;display:flex;align-items:center;justify-content:center;padding:16px}
.psm-overlay[hidden]{display:none}
.psm-modal{background:var(--surface);border-radius:20px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px -12px rgba(16,24,40,.35)}
.psm-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0}
.psm-head h3{margin:0;font-size:19px;font-weight:800;color:var(--ink)}
.psm-close{border:0;background:var(--surface-2);color:var(--ink-2);width:32px;height:32px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.psm-close:hover{background:var(--border)}
.psm-body{padding:14px 24px 24px}
.psm-sub{margin:0 0 18px;font-size:13px;color:var(--ink-2)}
.psm-body label{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em;margin:14px 0 6px}
.psm-body input[type=text],.psm-body input[type=url],.psm-body input[type=email],.psm-body textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--border);border-radius:11px;font:inherit;font-size:14px;background:var(--surface-2);color:var(--ink)}
.psm-body input:focus,.psm-body textarea:focus{outline:0;border-color:var(--brand);background:var(--surface)}
.psm-body input[type=file]{width:100%;font-size:12.5px;color:var(--ink-2)}
.psm-body textarea{resize:vertical;min-height:84px}
.psm-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.psm-row2{grid-template-columns:1fr}}
.psm-type-toggle{display:flex;gap:16px;align-items:center;height:42px}
.psm-type-toggle label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;margin:0}
.psm-err{margin-top:14px;padding:11px 14px;border-radius:10px;background:#fee2e2;color:#b91c1c;font-size:13px}
.psm-submit{width:100%;margin-top:18px;padding:13px;border:0;border-radius:12px;background:var(--brand);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background-color .15s ease}
.psm-submit:hover{background:var(--brand-ink)}
.psm-submit:disabled{opacity:.6;cursor:wait}
.psm-success{text-align:center;padding:20px 4px}
.psm-success .ico{width:56px;height:56px;border-radius:50%;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.psm-success h4{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--ink)}
.psm-success p{margin:0 0 4px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.psm-success .more{margin-top:16px;padding:10px 20px;border-radius:10px;background:var(--surface-2);color:var(--ink);font-weight:700;font-size:13px;border:0;cursor:pointer}
.sxc-btn,.sxc-panel,.sxc-badge{display:none!important}

/* Explore Categories mega-menu redesign (Rohit, 1-Nov, reference screenshot)
   -- replaces the old 2-tab (Software/Services) layout with a single
   unified grid of 8 named, icon-headed groups, each a flat link list with a
   hover chevron. Home-page only (index.html is the only page that loads
   home.css) -- every other page keeps the old tabbed menu untouched.
   Deliberately static, not live-rebuilt from /pub/masters -- see the
   comment above assets/masters-menu.js's rebuildMenu() for why. */
.svc-mega-panel{width:min(1520px,94vw)}
.svc-mega-grouped{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 34px}
@media (max-width:980px){.svc-mega-grouped{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-mega-grouped{grid-template-columns:1fr}}
.svc-mega-group-head{display:flex;align-items:center;gap:9px;margin:0 0 13px}
.svc-mega-group-head .ico{width:21px;height:21px;stroke-width:2;flex:0 0 auto}
.svc-mega-group-head h3{margin:0;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.svc-mega-group-head.tone-blue .ico{color:#2563eb}
.svc-mega-group-head.tone-orange .ico{color:#ea580c}
.svc-mega-group-head.tone-violet .ico{color:#6d28d9}
.svc-mega-group-head.tone-purple .ico{color:#7c3aed}
.svc-mega-group-head.tone-indigo .ico{color:#4f46e5}
.svc-mega-group-head.tone-rose .ico{color:#e11d48}
.svc-mega-group-head.tone-sky .ico{color:#0284c7}
.svc-mega-group-head.tone-amber .ico{color:#b45309}
.svc-mega-group-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.svc-mega-group-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 4px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none}
.svc-mega-group-list a:hover{color:var(--brand-ink);background:var(--surface-2)}
/* Chevron always visible (reference screenshot, Rohit 1-Nov: "links ki grid
   aisi bna do") -- a hover-only arrow read as a flat text list at rest;
   the reference shows every row with its arrow pinned to the right edge
   all the time, which is what actually gives it the "grid" look. */
.svc-mega-group-list a .chev{width:14px;height:14px;flex:0 0 auto;color:var(--ink-3);transition:color .15s var(--ease),transform .15s var(--ease)}
.svc-mega-group-list a:hover .chev{color:var(--brand);transform:translateX(2px)}
.svc-mega-grouped-foot{grid-column:1/-1;margin-top:6px;padding-top:16px;border-top:1px solid var(--border)}

/* "Discover Software By Category" redesign (Rohit, 2-Nov, reference
   screenshot) -- UI/UX polish only. assets/discover-categories.js rebuilds
   #dscSide/#dscGrid content live and reads .dsc-side-item/data-dsc-cat/etc,
   so none of that markup, IDs or classes change here -- only how the
   existing structure looks. Home-page only (index.html is the only page
   that loads home.css); the shared #dsc-* rules in fsx.css -- and every
   other page that reuses this same component (geo/location pages,
   Buy-Business-Leads.html) -- are untouched. */
#discover-by-category .dsc-eyebrow{padding:7px 16px 7px 13px;font-size:12.5px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
#discover-by-category .dsc-head{margin-bottom:28px}
#discover-by-category .dsc-head h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.03em}
#discover-by-category .dsc-head .sub{font-size:14.5px;max-width:58ch}
#discover-by-category .dsc-layout{gap:28px}

#discover-by-category .dsc-side{padding:10px;border-radius:18px;box-shadow:0 1px 2px rgba(16,24,40,.04);gap:2px}
#discover-by-category .dsc-side-item{padding:11px 12px;border-radius:12px;gap:11px}
#discover-by-category .dsc-side-item-ico{width:30px;height:30px;border-radius:9px}
#discover-by-category .dsc-side-item-ico svg{width:15px;height:15px}
#discover-by-category .dsc-side-item.is-active{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dsc-ic, var(--brand)) 22%, transparent)}
/* "All Categories" link stays last in the markup (JS doesn't touch it, so
   moving it is purely visual) but reads first and boldest, like the
   reference's pill header -- order:-1 flips it to the top of the flex
   column without touching the DOM. */
#discover-by-category .dsc-side-all{order:-1;display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:13px 14px;border-radius:12px;border-top:0;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-ink) 100%);color:#fff;font-size:13.5px;box-shadow:0 8px 18px -8px color-mix(in srgb, var(--brand) 55%, transparent)}
#discover-by-category .dsc-side-all::before{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Crect x='3' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:15px}
#discover-by-category .dsc-side-all:hover{text-decoration:none;filter:brightness(1.06)}
@media (max-width:780px){ #discover-by-category .dsc-side-all{order:0;margin:0} }

#discover-by-category .dsc-grid{gap:20px}
#discover-by-category .dsc-card{border-radius:18px;border-color:var(--border)}
#discover-by-category .dsc-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(16,24,40,.18)}
#discover-by-category .dsc-card-img,
#discover-by-category .dsc-card-img-ph{aspect-ratio:16/10}
#discover-by-category .dsc-card-body{padding:18px 20px 20px;gap:8px}
#discover-by-category .dsc-card-title{font-size:14.5px}
#discover-by-category .dsc-card-desc{font-size:12.5px;line-height:1.6}
#discover-by-category .dsc-card-cta{margin-top:10px;padding:11px 14px;border-radius:11px;font-size:13px}

/* "Explore FreeSoftwareX" showcase redesign (Rohit, 2-Nov, reference
   screenshot) -- UI/UX polish only, same hrefs/text/data-hb-* attributes as
   before (data-hb-block="cb-showcase" / data-hb-text="cb-showcase-head"
   still work for the admin Banners override, nothing in assets/house-
   banners.js changed). Swaps the old dark-purple glass-chip panel for a
   light card-grid matching the reference: 3 white cards with a tinted
   header band each, icon+label chip-boxes instead of plain pill tags.
   Home-page only (index.html is the only page using .fx-showcase). */
.fx-showcase{background:linear-gradient(180deg,#eef2ff 0%,#f8fafc 55%,#f8fafc 100%);color:var(--ink);padding:clamp(40px,5vw,68px) 0}
.fx-showcase::before{background:radial-gradient(900px 320px at 85% -10%,rgba(79,70,229,.08),transparent 60%)}
.fx-showcase-badge{display:inline-flex;align-items:center;gap:7px;background:#e0e7ff;border:1px solid #c7d2fe;color:#4338ca;font-size:12.5px;letter-spacing:.04em;padding:7px 16px 7px 13px}
.fx-showcase-badge .ico{width:15px;height:15px;stroke-width:2}
.fx-showcase-head h2{color:var(--ink);font-size:clamp(24px,3vw,34px);letter-spacing:-.02em}
.fx-showcase-head h2 em{font-style:normal;color:#4f46e5;position:relative;display:inline-block}
.fx-showcase-head h2 em::after{content:"";position:absolute;left:2px;right:2px;bottom:-4px;height:7px;border-radius:999px;background:#c7d2fe;z-index:-1}
.fx-showcase-head p{color:var(--ink-2)}

.fx-showcase-col{background:#fff;border:1px solid var(--border);border-radius:20px;padding:0 0 18px;box-shadow:0 1px 2px rgba(16,24,40,.04);overflow:hidden;display:flex;flex-direction:column}
.fx-showcase-col-h{position:relative;align-items:flex-start;gap:12px;margin:0;padding:20px 20px 18px;overflow:hidden}
.fx-showcase-col-h-text{min-width:0;flex:1 1 auto}
.fx-showcase-col-h h3{font-size:16.5px}
.fx-showcase-col-h-text p{margin:2px 0 0;font-size:12px;opacity:.85}
.fx-showcase-ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.fx-showcase-ico .ico{width:19px;height:19px}
.fx-showcase-col-h-decor{position:absolute;right:14px;bottom:-14px;width:72px;height:72px;opacity:.5;pointer-events:none}

.tone-categories .fx-showcase-col-h{background:linear-gradient(135deg,#2541c9 0%,#4f46e5 100%);color:#fff}
.tone-categories .fx-showcase-ico{background:rgba(255,255,255,.2);color:#fff}
.tone-categories .fx-showcase-col-h-decor{color:rgba(255,255,255,.35)}
.tone-products .fx-showcase-col-h{background:#fff;border-bottom:1px solid var(--border);color:var(--ink)}
.tone-products .fx-showcase-ico{background:#e0e7ff;color:#4f46e5}
.tone-products .fx-showcase-col-h-decor{color:#e0e7ff}
.tone-services .fx-showcase-col-h{background:#eef2ff;color:var(--ink)}
.tone-services .fx-showcase-ico{background:#4f46e5;color:#fff}
.tone-services .fx-showcase-col-h-decor{color:#c7d2fe}
/* fsx.css's base .fx-showcase-col-h h3{color:#fff} was written for the old
   all-dark-panel design -- still wins over the parent-level color above
   (more specific selector), leaving these two headings invisible (white on
   white / white on pale blue). Only the categories tone keeps white text,
   since that header band is still a solid dark-blue gradient. */
.tone-products .fx-showcase-col-h h3,
.tone-services .fx-showcase-col-h h3{color:var(--ink)}

.fx-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:18px 18px 0;flex:1}
.fx-chip{display:flex;align-items:center;gap:9px;background:var(--surface-2,#f8fafc);border:1px solid var(--border);border-radius:12px;color:var(--ink);font-size:12.5px;font-weight:650;padding:9px 11px;text-decoration:none;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.fx-chip:hover,.fx-chip:focus-visible{background:#fff;border-color:#c7d2fe;transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(16,24,40,.18);outline:none;color:var(--ink)}
.fx-chip-ico{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#e0e7ff;color:#4f46e5;display:flex;align-items:center;justify-content:center}
.fx-chip-ico .ico{width:14px;height:14px}
.fx-chip-ico-logo{background:#fff;border:1px solid var(--border)}
.fx-chip-ico-logo img{width:17px;height:17px;object-fit:contain}
.fx-chip-ico-badge{color:#fff;font-weight:800;font-size:12px}

.fx-showcase-foot{margin-top:16px;padding:14px 18px 0;border-top:1px solid var(--border)}
.fx-showcase-foot:empty{padding:0;border-top:0;margin-top:auto}
.fx-showcase-all{display:inline-flex;align-items:center;gap:6px;color:#4f46e5;font-weight:750;font-size:13.5px;border-bottom:0}
.fx-showcase-all .arw{transition:transform .16s var(--ease)}
.fx-showcase-all:hover{color:#4338ca}
.fx-showcase-all:hover .arw{transform:translateX(3px)}

@media (max-width:620px){ .fx-chips{grid-template-columns:1fr} }